一种H5页面在原生应用中动态换肤的方法及终端与流程

本发明涉及前端网页开发技术领域，特别涉及一种h5页面在原生应用中动态换肤的方法及终端。

背景技术

h5页面是一种包含html5的标记规范、运用到了例如css、js等多种计算机语言、可以实现多种动效和视听效果、会利用到后端和前端的多种功能、主要在手机端传播且可以跨平台在pc、平板上浏览的移动网页。

以基于微信的h5页面来说，微信集成了移动端浏览器，使得用户可以通过微信来观看h5页面，在这里，微信就是原生应用，而目前原生应用进行动态换肤的解决思路是：将不同主题的皮肤资源放在以主题命名(style1，style2)的目录下，当用户切换到主题1时，读取style1目录下的皮肤资源；切换到主题2时，就读取style2目录下的皮肤资源。

然而，h5页面是通过网络请求的方式来获取皮肤资源的，故而，现有的技术方案无法解决h5页面在原生应用中的皮肤切换。

技术实现要素：

本发明所要解决的技术问题是：提供一种h5页面在原生应用中动态换肤的方法及终端，从而实际h5页面在原生应用中的皮肤切换。

为了解决上述技术问题，本发明采用的技术方案为：

一种h5页面在原生应用中动态换肤的方法，包括步骤：

s1、h5页面代码调用皮肤资源时，生成一个url的请求；

s2、拦截并分析所述url，若所述url包含动态换肤资源目录名，则获取url中的待调用动态皮肤资源名，判断匹配路径下是否存在与所述待调用动态皮肤资源名同名的本地动态皮肤资源，若存在，则返回本地动态皮肤资源，所述匹配路径为原生应用中动态皮肤资源所在的路径。

为了解决上述技术问题，本发明采用的另一种技术方案为：

一种h5页面在原生应用中动态换肤的终端，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

s1、h5页面代码调用皮肤资源时，生成一个url的请求；

s2、拦截并分析所述url，若所述url包含动态换肤资源目录名，则获取url中的待调用动态皮肤资源名，判断匹配路径下是否存在与所述待调用动态皮肤资源名同名的本地动态皮肤资源，若存在，则返回本地动态皮肤资源，所述匹配路径为原生应用中动态皮肤资源所在的路径。

本发明的有益效果在于：通过拦截url，将h5页面需要进行动态换肤的资源替换成原生应用中的本地动态皮肤资源，从而实现h5页面在原生应用中的皮肤切换，使得h5页面能根据用户的实际需求去选择自己所喜欢的皮肤，提高了用户使用h5页面的体验。

附图说明

图1为本发明实施例的一种h5页面在原生应用中动态换肤的方法的流程示意图；

图2为本发明实施例的一种h5页面在原生应用中动态换肤的终端的具体流程示意图；

图3为本发明实施例的一种h5页面在原生应用中动态换肤的终端的结构示意图；

图4为本发明实施例涉及的用户在使用默认皮肤包时的h5页面展示图；

图5为本发明实施例涉及的用户在使用style1皮肤时的h5页面展示图；

图6为本发明实施例涉及的用户在使用style2皮肤时的h5页面展示图；

标号说明：

1、一种h5页面在原生应用中动态换肤的终端；2、存储器；3、处理器。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：通过拦截url，将h5页面需要进行动态换肤的资源替换成原生应用中的本地动态皮肤资源，从而实现h5页面在原生应用中的皮肤切换。

在此之前，为了便于理解本发明的技术方案，对于本发明中涉及的英文缩写、设备等进行说明如下：

(1)、h5页面：见背景技术第一段。

(2)、url：在本发明中为uniformresourcelocator的简称，其中文解释为统一资源定位符，它是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的url，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

(3)、webview：它是一个基于webkit引擎、展现web页面的控件，能够对url请求、页面加载、渲染、页面交互进行强大的处理。

(4)、nsurlprotocol：它可以轻松地重定义整个urlloadingsystem，当你注册自定义nsurlprotocol后，就有机会对所有的请求进行统一的处理，基于上述，它可以实现以下功能：自定义请求和响应、提供自定义的全局缓存支持、重定向网络请求、提供httpmocking(方便前期测试)、其他一些全局的网络请求修改需求。

(5)、h5组件的目录结构：

其中，开发人员按照上述的目录结构开发h5组件，其中style目录下存放的是h5代码中使用的皮肤资源，需要进行动态换肤的资源则放在nd-dynamic目录下。

原生应用皮肤包目录结构：

其中，style1、style2表示两种皮肤主题，可以从应用中的皮肤商城下载，下载后存放在原生应用的dynamic-style目录下。其中“_skin.bundle”表示原生皮肤资源的目录；“_h5.boundle”表示h5皮肤资源目录，h5皮肤资源目录下的皮肤资源要和h5代码中nd-dynamic目录下的皮肤资源命名一致。

请参照图1以及图2，一种h5页面在原生应用中动态换肤的方法，包括步骤：

s1、h5页面代码调用皮肤资源时，生成一个url的请求；

s2、拦截并分析所述url，若所述url包含动态换肤资源目录名，则获取url中的待调用动态皮肤资源名，判断匹配路径下是否存在与所述待调用动态皮肤资源名同名的本地动态皮肤资源，若存在，则返回本地动态皮肤资源，所述匹配路径为原生应用中动态皮肤资源所在的路径。

从上述描述可知，本发明的有益效果在于：通过拦截url，将h5页面需要进行动态换肤的资源替换成原生应用中的本地动态皮肤资源，从而实现h5页面在原生应用中的皮肤切换，使得h5页面能根据用户的实际需求去选择自己所喜欢的皮肤，提高了用户使用h5页面的体验。

进一步的，所述步骤s2中还包括：

若所述url不包含动态换肤资源目录名，则访问所述url的皮肤资源；

若匹配路径下不存在与所述待调用动态皮肤资源名同名的本地动态皮肤资源，则访问所述url的皮肤资源。

由上述描述可知，当url不包含动态换肤资源目录名，则表示h5页面代码调用的皮肤资源不需要动态换肤，故而让它访问原地址下的皮肤资源即可；当匹配路径下不存在与所述待调用动态皮肤资源名同名的本地动态皮肤资源，为了避免因为找不到皮肤资源而影响h5页面的正常显示，故而让它访问原地址下的皮肤资源。

进一步的，还包括步骤：

获取原生应用当前使用的皮肤主题名，根据所述皮肤主题名确定原生应用中动态皮肤资源所在的路径。

由上述描述可知，确定原生应用中存储动态皮肤资源的路径来作为匹配路径，以便于后续进行替换使用。

进一步的，所述拦截并分析所述url具体包括：

通过webview或nsurlprotocol来拦截并分析所述url。

由上述描述可知，webview或nsurlprotocol拦截url的原理简单、技术成熟，便于实现且保证准确率。

进一步的，所述步骤s2中所述则访问所述url的皮肤资源具体包括：

获取所述url中的主机域名、皮肤资源文件名，返回在所述主机域名下所述皮肤资源文件名中的皮肤资源。

由上述描述可知，url由三部分组成：资源类型、存放资源的主机域名以及资源文件名，获取主机域名、皮肤资源文件名，便于后续的访问。

请参照图3，一种h5页面在原生应用中动态换肤的终端，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

s1、h5页面代码调用皮肤资源时，生成一个url的请求；

s2、拦截并分析所述url，若所述url包含动态换肤资源目录名，则获取url中的待调用动态皮肤资源名，判断匹配路径下是否存在与所述待调用动态皮肤资源名同名的本地动态皮肤资源，若存在，则返回本地动态皮肤资源，所述匹配路径为原生应用中动态皮肤资源所在的路径。

从上述描述可知，本发明的有益效果在于：通过拦截url，将h5页面需要进行动态换肤的资源替换成原生应用中的本地动态皮肤资源，从而实现h5页面在原生应用中的皮肤切换，使得h5页面能根据用户的实际需求去选择自己所喜欢的皮肤，提高了用户使用h5页面的体验。

进一步的，所述步骤s2中还包括：

若所述url不包含动态换肤资源目录名，则访问所述url的皮肤资源；

若匹配路径下不存在与所述待调用动态皮肤资源名同名的本地动态皮肤资源，则访问所述url的皮肤资源。

由上述描述可知，当url不包含动态换肤资源目录名，则表示h5页面代码调用的皮肤资源不需要动态换肤，故而让它访问原地址下的皮肤资源即可；当匹配路径下不存在与所述待调用动态皮肤资源名同名的本地动态皮肤资源，为了避免因为找不到皮肤资源而影响h5页面的正常显示，故而让它访问原地址下的皮肤资源。

进一步的，还包括步骤：

获取原生应用当前使用的皮肤主题名，根据所述皮肤主题名确定原生应用中动态皮肤资源所在的路径。

由上述描述可知，确定原生应用中存储动态皮肤资源的路径来作为匹配路径，以便于后续进行替换使用。

进一步的，所述拦截并分析所述url具体包括：

通过webview或nsurlprotocol来拦截并分析所述url。

由上述描述可知，webview或nsurlprotocol拦截url的原理简单、技术成熟，便于实现且保证准确率。

进一步的，所述步骤s2中所述则访问所述url的皮肤资源具体包括：

获取所述url中的主机域名、皮肤资源文件名，返回在所述主机域名下所述皮肤资源文件名中的皮肤资源。

由上述描述可知，url由三部分组成：资源类型、存放资源的主机域名以及资源文件名，获取主机域名、皮肤资源文件名，便于后续的访问。

请参照图图1-图2、图4-图6，本发明的实施例一为：

一种h5页面在原生应用中动态换肤的方法，其h5代码调用如下：

使用上述的h5代码后，本实施例包括步骤：

s1、h5页面代码调用皮肤资源时，生成一个url的请求；

s2、通过webview或nsurlprotocol来拦截并分析url，若url不包含动态换肤资源目录名，则访问url的皮肤资源，若url包含动态换肤资源目录名，则获取url中的待调用动态皮肤资源名，获取原生应用当前使用的皮肤主题名，根据皮肤主题名确定原生应用中动态皮肤资源所在的路径，判断匹配路径下是否存在与待调用动态皮肤资源名同名的本地动态皮肤资源，若存在，则返回本地动态皮肤资源，若不存在，则访问url的皮肤资源。

其中，匹配路径为原生应用中动态皮肤资源所在的路径。

其中，获取url中的主机域名、皮肤资源文件名，返回在主机域名下皮肤资源文件名中的皮肤资源。

如图4-图6，当h5页面要使用style1皮肤时，通过拦截url，分析url中包含动态换肤资源目录名：style/nd-dynamic，获取原生应用当前使用的皮肤主题名：style1，确定原生应用中动态皮肤资源所在的路径：dynamic-style/style1，发现该路径下存在与待调用动态皮肤资源名(bells、flower、shengdanjie/christmas_tree)同名的本地动态皮肤资源，则返回本地动态皮肤资源，即h5页面由图4变成图5。

当h5页面要使用style2皮肤时，h5页面由图4变成图6，与上述不同的是，路径：dynamic-style/style2下的本地动态皮肤资源没有铃铛(bells)的图片资源，则访问url的皮肤资源，即铃铛与默认皮肤包的图片展示一样，

请参照图3，本发明的实施例二为：

一种h5页面在原生应用中动态换肤的终端1，包括存储器2、处理器3以及存储在存储器1上并可在处理器3上运行的计算机程序，处理器3执行计算机程序时实现以下步骤：

s1、h5页面代码调用皮肤资源时，生成一个url的请求；

s2、通过webview或nsurlprotocol来拦截并分析url，若url不包含动态换肤资源目录名，则访问url的皮肤资源，若url包含动态换肤资源目录名，则获取url中的待调用动态皮肤资源名，获取原生应用当前使用的皮肤主题名，根据皮肤主题名确定原生应用中动态皮肤资源所在的路径，判断匹配路径下是否存在与待调用动态皮肤资源名同名的本地动态皮肤资源，若存在，则返回本地动态皮肤资源，若不存在，则访问url的皮肤资源。

其中，匹配路径为原生应用中动态皮肤资源所在的路径。

其中，获取url中的主机域名、皮肤资源文件名，返回在主机域名下皮肤资源文件名中的皮肤资源。

综上所述，本发明提供的一种h5页面在原生应用中动态换肤的方法及终端，通过拦截url，将h5页面需要进行动态换肤的资源替换成原生应用中的本地动态皮肤资源，从而实现h5页面在原生应用中的皮肤切换，使得h5页面能根据用户的实际需求去选择自己所喜欢的皮肤，提高了用户使用h5页面的体验，通过在不需要动态换肤或原生应用没有相应皮肤资源时访问url的皮肤资源，以避免找不到资源而影响h5页面的正常显示。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。