CN108319483A - 网页处理方法、装置、终端及存储介质 - Google Patents

Abstract

本发明实施例提供了一种网页处理方法、装置、终端及存储介质；其中，方法包括：母应用程序获取子应用程序；获取所述子应用程序中配置的业务域名；在所述母应用程序中创建所述子应用程序的网络视图组件，在所述子应用程序的页面框架中，显示由所述网络视图组件承载的所述业务域名的网页；接收所述网页发送的数据；将所述数据发送到所述子应用程序，所述数据用于供所述子应用程序调用相应的子应用程序接口来更新所述网页。

Description

网页处理方法、装置、终端及存储介质

技术领域

本发明涉及通信技术，尤其涉及一种网页处理方法、装置、终端及存储介质。

背景技术

随着移动互联网的发展、客户端在社交网络中的普及，开发者以客户端等作为互联网中的工具，通过客户端为用户提供服务。以客户端是微信为例，在微信内为用户提供服务的方案主要包括以下两种：一种是通过网页和公众号实现服务提供的纯网页方案，使用微信内提供的包括公众号自定义菜单、分享给朋友和朋友圈等方式，获取用户对网页的访问流量，同时为用户提供服务；另一种是通过在微信内运行各种不同的小程序为用户提供差异化的服务。

在微信中的小程序中嵌入网页时，如何实现小程序的流畅运行和网页的高效安全更新，相关技术尚无有效解决方案。

发明内容

本发明实施例提供一种网页处理方法、装置、终端及存储介质，能够实现子应用程序嵌入网页时子应用程序的流畅运行以及网页的高效安全更新。

本发明实施例的技术方案是这样实现的：

第一方面，本发明实施例提供一种网页处理方法，包括：

母应用程序获取子应用程序；

获取所述子应用程序中配置的业务域名；

在所述母应用程序中创建所述子应用程序的网络视图组件；

在所述子应用程序的页面框架中，显示所述网络视图组件承载的所述业务域名的网页；

接收所述网页发送的数据；

将所述网页发送的数据发送到所述子应用程序，所述数据用于供所述子应用程序调用相应的子应用程序接口来更新所述网页。

第二方面，本发明实施例提供一种网页处理装置，包括：

获取单元，用于获取子应用程序，以及获取所述子应用程序中配置的业务域名；

显示单元，用于在母应用程序中创建所述子应用程序的网络视图组件，并在所述子应用程序的页面框架中，显示由所述网络视图组件承载的所述业务域名的网页；

接收单元，用于接收所述网页发送的数据；

发送单元，用于将所述数据发送到所述子应用程序，所述数据用于供所述子应用程序调用相应的子应用程序接口来更新所述网页。

第三方面，本发明实施例提供一种终端，包括：

存储器，用于存储可执行程序；

处理器，用于执行所述存储器中存储的可执行程序时，实现本发明实施例提供的子应用程序中的网页处理方法。

第四方面，本发明实施例提供一种存储介质，存储有可执行程序，所述可执行程序被处理器执行时，实现本发明实施例提供的子应用程序中的网页处理方法。

应用本发明上述实施例具有以下有益效果：

网页嵌入母应用程序中的子应用程序的方式，通过网页来提供服务，有利于在母应用程序中快速定位所需的服务，节约了将网页中业务采用子应用程序编程实现的开发成本；

子应用程序的运行效率得以保证，因为即使在子应用程序中嵌入大量的网页，子应用程序自身的业务逻辑也不会因此而复杂化；

母应用程序提供子应用程序和网页之间的数据中转功能，网页需要通过母应用程序进行子应用程序接口的调用，有效避免了网页直接待用子应用程序接口出现的安全隐患。

附图说明

图1为本发明实施例提供的客户端运行小程序的一个可选的***架构示意图；

图2A为本发明实施例提供的在母应用程序中显示子应用程序页面的示意图；

图2B为本发明实施例提供的运行客户端的终端的一个结构示意图；

图3为本发明实施例提供的小程序的架构示意图；

图4为本发明实施例的客户端的组成结构示意图；

图5A为本发明实施例提供的网页处理方法的一个可选的流程示意图；

图5B为本发明实施例提供的网页处理方法的一个可选的流程示意图；

图6A为本发明实施例提供的网页处理的界面示意图一；

图6B为本发明实施例提供的网页处理的界面示意图二；

图6C为本发明实施例提供的网页处理的界面示意图三；

图7A为本发明实施例提供的进行业务域名配置的界面示意图一；

图7B为本发明实施例提供的进行业务域名配置的界面示意图二；

图8为本发明实施例提供的网页和小程序间的数据通信方法的流程示意图。

具体实施方式

以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所提供的实施例仅仅用以解释本发明，并不用于限定本发明。另外，以下所提供的实施例是用于实施本发明的部分实施例，而非提供实施本发明的全部实施例，在不冲突的情况下，本发明实施例记载的技术方案可以任意组合的方式实施。

需要说明的是，在本发明实施例中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的方法或者装置不仅包括所明确记载的要素，而且还包括没有明确列出的其他要素，或者是还包括为实施方法或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的方法或者装置中还存在另外的相关要素(例如方法中的步骤或者装置中的单元，例如的单元可以是部分电路、部分处理器、部分程序或软件等等)。

例如，本发明实施例提供的网页处理方法包含了一系列的步骤，但是本发明实施例提供的网页处理方法不限于所记载的步骤，同样地，本发明实施例提供的网页处理装置包括了一系列单元，但是本发明实施例提供的装置不限于包括所明确记载的单元，还可以包括为获取相关信息、或基于信息进行处理时所需要设置的单元。

对本发明进行进一步详细说明之前，对本发明实施例中涉及的名词和术语进行说明，本发明实施例中涉及的名词和术语适用于如下的解释。

1)母应用程序，例如各种客户端，包括终端中运行的用于提供各种服务的应用程序，典型地，以微信为代表的即时通信应用。

2)子应用程序，在母应用中程序中运行的程序，例如小程序，小程序是基于面向前端的语言(例如JavaScript)开发的、在超文本标记语言(HTML，HyperText MarkupLanguage)页面中实现服务的程序，通过客户端下载后可以立即在客户端中解释执行，节省在客户端中安装的步骤。

3)网页视图(Web-View)组件，也称为视图组件，用于实现网页中如点击、下拉框、表格等网页中各种内容的容器，负责小程序的显示，能够自动铺满小程序的页面。

4)事件，从小程序的视图层到逻辑层的通讯方式，网页视图组件中发生用户操作时所产生的数据以事件的形式传递到逻辑层，在逻辑层执行与事件绑定的事件处理函数，例如调用***的各种能力接口。

基于上述对本发明实施例中涉及的名词和术语的解释，接下来参见图1，图1为本发明实施例提供的客户端运行小程序的一个可选的***架构示意图，设置于终端20中的客户端11(如微信客户端WeChat)在首次运行小程序时，需要下载小程序，发送初始化请求给小程序的服务器来下载小程序，为了提高下载速度，请求可以被重定向至内容分发网络13(CDN，Content Delivery Network)，从内容分发网络13中合适的节点服务器(例如基于链路最短条件、负载均衡条件等选择节点服务器)上，由内容分发网络13代替小程序的服务器向客户端11发送小程序的数据包(Package)，即所述小程序的源代码，从而实现小程序的下载；客户端对小程序初始化完成后，通过解释小程序的代码来进行小程序页面的加载，小程序通过发送数据请求给服务器12，以获取页面显示及页面更新所需的数据，举例来说，数据请求可以采用AJAX请求的形式，AJAX即“Asynchronous JavaScript And XML”(异步JavaScript和XML)，Web Server基于小程序发送的Ajax请求返回相应的JSON对象标记(JavaScript Object Notation)格式的页面数据，进而小程序根据获取的JSON数据进行页面渲染，实现小程序在客户端中的页面显示/更新。

举例来说，客户端11在下载小程序时获取的小程序的源代码中包括以下不同类型的文件：1)，.json后缀的配置文件，用于小程序(全局)公共设置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多标签(tab)等；2)，.js后缀的配置文件，用于实现小程序的(全局)逻辑；3)，.wxss后缀的配置文件，用于小程序的公共样式配置。

作为终端中设置母应用程序和子应用程序的示例，参见图2A，在终端20中能够运行母应用程序，子应用程序用于在母应用程序中实现模块化的功能，可以是用于扩展母应用程序的功能，或者是用于替换母应用程序中部分的功能；子应用程序在母应用程序中可以采用自动运行、根据触发指令运行的方式；图2A中虽然只示出了母应用程序中的一个子应用程序，但是可以理解，根据母应用程序实现功能的需求，母应用程序中可以运行多个子应用程序。

接下来，再以母应用程序为客户端，子应用程序为小程序为例，对运行客户端11的终端20的结构进行说明。

图2B为本发明实施例提供的运行客户端的终端20的一个结构示意图，参见图2B，终端包括：硬件层21、驱动层22、操作***层23和应用程序层24。然而，本领域的技术人员应当理解，图2B示出的终端20的结构仅为示例，并不构成对终端结构的限定。例如，终端可以根据实施需要设置较图2更多的组件，或者根据实施需要省略设置部分组件。

硬件层21包括处理器211、存储器212、输入/输出接口213以及通信接口214，组件可以经***总线连接通信。其中，处理器211可以采用中央处理器(CPU，CentralProcessing Unit)、微处理器(MCU，Microcontroller Unit)、专用集成电路(ASIC，Application Specific Integrated Circuit)或逻辑可编程门阵列(FPGA，Field－Programmable Gate Array)实现。

输入/输出接口213可以采用如显示屏、触摸屏、扬声器等输入/输出器件实现。

存储器212中存储有存储介质，存储介质可以采用闪存、硬盘、光盘等非易失性存储介质实现，也可以采用双倍率(DDR，Double Data Rate)动态缓存等易失性存储介质实现，其中存储有用以执行上述小程序中的网页处理方法的可执行程序。示例性地，存储介质可以与终端的其他组件在同一位置设置，也可以相对于终端中的其他组件分布设置，存储介质中至少包括操作***、网络通信程序。

通信接口214，向处理器提供外部数据如异地设置的存储介质的访问功能。

驱动层22，包括用于供操作***识别硬件层并与硬件层各组件通信的中间件221，例如可以为针对硬件层的各组件的驱动程序的集合。

操作***层23，用于提供面向用户的图形界面，示例性地，包括驱动程序231、图形库232、***框架233、用户界面套件234、插件图标、桌面背景和应用图标，操作***层支持用户经由图形界面对设备的控制本发明实施例对上述设备的软件如操作***类型、版本不做限定，例如可以是Linux操作***、UNIX操作***或其他操作***。

应用程序层24，包括小程序241及客户端242，当然，还可以包括用于实现其他常规功能的应用，如浏览器等。

接下来对本发明实施例中小程序241的架构进行说明，图3为本发明实施例提供的小程序的架构示意图，如图3所示，小程序框架的核心是一个响应的数据绑定***，整个***分为两块，分别为视图(View)层及应用服务(APPService)层，其中应用服务层也称为逻辑层，通过小程序框架可以绑定视图层和逻辑层相应的参数，如参数名称，让数据和视图非常简单的保持同步，当进行数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。通过图3可知视图层和逻辑层分开在两个线程中运行，二者之间的信息交互通过***层的JSBridge进行，视图层与逻辑层通过JSBridge通信。当用户在小程序的页面进行操作(如点击操作)，视图层的组件捕获用户操作后触发与该组件绑定的事件(如点击操作对应的点击事件)，通过JSBridge将事件发送至逻辑层，逻辑层对事件进行解析，执行对应逻辑(如调用小程序接口)并把进行页面更新所需数据通过JSBridge传递给视图层，视图层将接收的数据反应为视图。

接下来分别对小程序241的视图层和逻辑层分别进行说明。

视图层通过微信标记语言(WXML，WeiXin Markup language)与微信样式页(WXSS，WeiXin Style Sheet)编写，主要功能为将逻辑层的数据反应成视图，同时将视图层发生的事件发送给逻辑层；其中，WXML用于描述页面的结构，WXSS用于描述页面的样式。

WXML是框架设计的一套标签语言，结合基础组件、事件***，可以构建出页面的结构，WXML用于小程序的数据绑定、列表渲染、条件渲染、提供模板、事件、引用。WXSS是一套样式语言，用于描述WXML的组件样式，决定WXML的组件的显示效果，具有层叠样式表(CSS，Cascading Style Sheets)大部分特性，并在尺寸单位、样式导入两方面进行了扩展。

微信脚本语言(WXS，WeiXin Script)是小程序的一套脚本语言，结合WXML，可以构建出页面的结构，与Javascript是不同的语言，有自己的语法，并不和Javascript一致，运行环境和其他Javascript代码是隔离的，WXS中不能调用其他Javascript文件中定义的函数，也不能调用小程序提供的API，WXS可以用于页面渲染、数据处理等。

组件(Component)是视图层的基本组成单元，自带一些功能与样式，一个组件通常包括“开始标签”和“结束标签”，“属性”用来修饰这个组件，“内容”在两个标签之内。其中，组件共有的属性包括：用于唯一的标识组件(id)、组件的样式类(class)、组件的内联样式(style)、组件是否显示(hidden)、自定义属性(data-*)，可以对该组件的功能或样式进行修饰、组件的事件(bind*/catch*)。

基础组件分为以下八类：视图容器(View Container)、基础内容(如图标、文字、进度条)、表单(如按钮、输入框、标签等)、导航(Navigation)、多媒体(如音频，图片，视频)、地图(Map)、画布(Canvas)和客服会话。

逻辑层对数据进行处理后发送给视图层，同时接收视图层的事件反馈，由JavaScript编写，在JavaScript基础上，增加了APP和Page方法，进行程序和页面的注册；提供了丰富的API，如播放音乐、预览图片等媒体API，上传文件、下载文件等网络API、保存文件、打开文件等文件API，获取本地数据缓存、清除本地数据缓存等数据API，获取当前位置、打开内置地图等位置API、获取***信息、拨打电话等设备API，显示提示框、显示菜单列表等界面API，再如扫一扫、支付等；每个页面拥有独立的作用域(在JavaScript文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响)，并提供模块化(将一些公共的代码抽离成为一个单独的js文件，作为一个模块)能力。

事件是小程序的视图层到逻辑层的通信方式，可以将用户的页面操作反馈到逻辑层进行处理，可以绑定在视图层的组件上，当事件被触发，通过将事件传递到逻辑层，执行逻辑层中对应事件的事件处理函数，而事件对象(组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象)可以携带额外信息，如id，dataset，touches等。

至此，已经说明了实现本发明实施例的终端、客户端和小程序，继续说明实现本发明实施例的网页处理装置，用于实现本发明实施例网页处理装置可以采用硬件结合软件实施的方式，例如由图2B中示出终端20中的处理器211可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。

当然，网页处理装置也可以采用软件实施的方式，作为网页处理装置的软件实施示例，网页处理装置可以实施为如图2B中示出的终端20中运的客户端242，参见图4，客户端242包括：

获取单元41，用于获取小程序，以及获取所述小程序中配置的业务域名；

显示单元42，用于在客户端中创建所述小程序的网络视图组件，并在所述小程序的页面框架中显示所述网络视图组件承载的所述业务域名的网页；

接收单元43，用于接收所述网页发送的数据；

发送单元44，用于将所述数据发送到所述小程序，所述数据用于供所述小程序调用相应的小程序接口来更新所述网页。

在本发明一些实施例中，所述获取单元，还用于在所述客户端中显示所述小程序的入口；当接收到触发所述入口的操作时，向所述客户端的后台服务器发送小程序的请求；接收所述小程序的源代码，所述小程序的源代码中包括能够在小程序中访问的业务域名。

在本发明一些实施例中，所述小程序中配置的业务域名满足以下条件：配置在所述客户端的后台服务器，并通过所述客户端的后台服务器的域名身份验证。

在本发明一些实施例中，所述客户端包括可供调用的客户端接口；所述接收单元，还用于接收所述网页针对客户端接口的调用；获取所述网页通过所述客户端接口发送的数据。

在本发明一些实施例中，所述发送单元，还用于将接收的所述数据封装为事件；发送所封装的事件至所述小程序；

其中，所述事件供所述小程序解析后确定需要调用的小程序接口及参数，并根据所确定的参数执行相应小程序接口的调用。

在本发明一些实施例中，所述接收单元，还用于接收所述网页发送的数据之后，调用回调函数向所述网页确认所述数据接收成功。

在本发明一些实施例中，创建单元，用于响应于所述小程序对客户端的创建网络视图组件接口的调用，创建用于在所述小程序的页面框架中进行网页显示的网页视图组件。

在本发明一些实施例中，缓存单元，用于缓存所述小程序调用所述创建网络视图组件接口时以参数的形式传递的数据；在所述网络视图组件被创建完成、且所述网络视图组件对所述网页加载完成后，向所述网页发送所述缓存的数据。

接下来对本发明实施例提供的网页处理方法进行说明，首先对网页处理的示例性实施场景进行说明。

作为在微信内为用户提供服务的一种实施方式，可以通过网页和公众号的方式实现，主要包括以下操作：首先，开发者申请微信公众账号，配置开发参数，接入微信提供的jssdk；然后，根据开发者所要实现的目的，结合微信提供的jssdk开发完成网页内功能；最后，使用微信内提供的包括公众号自定义菜单、分享给朋友和朋友圈等方式获取流量，为用户提供服务。然而，此种纯网页的服务提供方式显然传输速度慢，用户在微信内的纯网页中使用服务时不够流畅，用户体验差。

作为在微信内为用户提供服务的另一种实施方式，可以通过小程序的方式实现，主要通过以下操作完成：首先，开发者登录微信公众平台，提交包括相关证件和小程序名称等，完成申请小程序账号；然后，对小程序的审核通过后，根据所需完成的功能模块撰写代码且体验通过后，上传代码提交审核；最后，审核通过后，小程序上架提供服务，通过微信内包括微信群、公众号的自定义菜单、群发图文、账号首页等页面导流(即引导用户的访问)至小程序内，快速把小程序触导微信用户。然而，此种单纯依赖小程序实现服务的实施方式，技术成本高，尤其用户本身已在微信内开发有网页功能(例如利用网页功能实现了微信内的公众号)，将公众号的功能转移到小程序实现，需要再次开发利用小程序实现公众号的功能，而再次开发的成本很高。

在实际应用中，针对以下场景：对于有营销诉求的小程序，尤其是电商类型小程序，活动营销推广页面更换频次高且不同渠道的复用性高。如果利用上述的小程序或者公众号的方案实现，需要不断进行小程序或网页功能的迭代更新，然而，如果把携带如活动营销内容的网页嵌入小程序，那么对应活动的变更，只需要更新相应的网页即可。

在实际应用中，针对以下场景：此前已有完整APP或网页功能的开发者，短时间内无法把所有的功能迁移到小程序体系内。如果采用将所要迁移的功能以网页的形式嵌入小程序内实现，则既可节约开发成本，又可缩短开发时间。

接下来对在小程序中嵌入业务域名的网页进行说明。

在实际应用中，嵌入小程序的网页所属的业务域名为HTTPS协议且经过网络内容服务商(ICP，Internet Content Provider)备案的业务域名。由于小程序内不能嵌入不是小程序的业务域名的网页，因此在将网页嵌入小程序之前，需要小程序的后台服务器对网页所属的业务域名进行校验，在本发明一些实施例中，可通过如下方式实现对业务域名的校验：客户端的后台服务器(即小程序的后台服务器)根据业务域名生成随机的校验文件，开发者从客户端的后台服务器下载生成的校验文件，然后上传到服务器的指定位置的目录(配置的业务域名的根目录下)，由客户端的后台服务器访问并验证存储的校验文件与自身生成的是否一致，如果一致，校验通过；如果不一致，校验失败。

在本发明一些实施例中，还可通过如下方式实现对业务域名的校验：开发者向客户端的后台服务器提交业务域名的域名***(DNS，Domain Name System)解析记录进行验证。其中，DNS解析记录包括业务域名所对应的IP地址，客户端的后台服务器判断自身的IP地址与提交的解析记录中的IP地址是否相同，如果相同，则校验通过；如果不相同，则校验失败。

对业务域名进行校验成功后，完成业务域名在小程序的后台服务器的配置，作为配置的受力，一个小程序支持配置最多20个业务域名，一个业务域名支持最多被20个小程序配置，一个小程序支持一个月最多修改50次。

在对业务域名配置成功后，在小程序项目中新建页面，配置路径，通过Web-View组件实现业务域名的网页嵌入小程序。Web-View组件是一个可以用来承载网页的和当前页面一样大小的容器，会自动铺满整个小程序页面，容器里显示的是属性src引用的网页对应的URL的内容。可在小程序页面利用WXML语言直接使用Web-View组件，这样网页的展示便保持在小程序体系下，实现了网页在小程序内的嵌入。

基于上述对小程序内嵌入网页的说明，作为本发明实施例提供的网页处理方法的一个可选实施例，图5A示出了本发明实施例提供的网页处理方法的一个可选的流程示意图，参见图5A，本发明实施例提供的网页处理方法涉及步骤101至步骤105，以下分别进行说明。

步骤101：客户端获取小程序。

步骤102：获取所述小程序中配置的业务域名。

步骤103：在客户端中创建所述小程序的网络视图组件，并在所述小程序的页面框架中显示所述网络视图组件承载的所述业务域名的网页。

步骤104：接收所述网页发送的数据。

步骤105：将所述数据发送到所述小程序，所述数据用于供所述小程序调用相应的小程序接口来更新所述网页。

应用本发明上述实施例，通过在客户端中创建小程序的网络视图组件，实现了在小程序中嵌入业务域名的网页，并通过客户端实现了内嵌网页和小程序间的数据通信。

图5B为本发明实施例提供的网页处理方法的另一个可选的流程示意图，参见图5B，本发明实施例提供的网页处理方法包括：

步骤201：客户端发送小程序的请求给客户端的后台服务器。

步骤202：客户端接收返回的小程序的源代码。

客户端通过发送小程序的请求以获取小程序，在本发明一些实施例中，客户端(如微信客户端)可以主动或根据用户在客户端中的搜索进行小程序的获取，如用户进入客户端的小程序的功能入口，提示用户安装小程序，或者根据用户以关键字的搜索，下载小程序；在客户端中显示小程序的入口，当接收到触发入口的操作时，触发小程序的请求的发送。

小程序的源代码中包括能够在小程序中访问的业务域名，即在小程序中配置的业务域名。小程序中配置的业务域名满足以下条件：在客户端的后台服务器通过域名身份验证(即对业务域名的校验)，并配置在客户端的后台服务器。

在本发明一些实施例中，客户端向客户端的后台服务器发送小程序的请求后，客户端的后台服务器可直接返回小程序的源代码给客户端，或者将小程序的请求重定向至CDN，由CDN中距离客户端最近的节点服务器发送小程序的源代码给客户端。

需要说明的是，仅在客户端首次运行小程序时需要下载小程序，即获取小程序的源代码，后续可直接应用。

步骤203：客户端从小程序的源代码中提取小程序中配置的业务域名。

步骤204：客户端创建小程序的网络视图组件，并在小程序的页面框架中显示网络视图组件承载的业务域名的网页。

在本发明一些实施例中，客户端创建小程序的Web-View组件，小程序调用Web-View组件，在小程序的页面框架中显示网络视图组件承载的业务域名的网页，实现在小程序中嵌入网页。

步骤205：响应于对网页的操作，网页发送数据给客户端。

当用户通过小程序打开内嵌的网页后，用户对网页进行操作，如点击操作，产生对应该操作的数据。在本发明一些实施例中，客户端包括可供调用的客户端接口(JSAPI)，网页调用客户端的接口将数据传递给客户端。数据包括在网页中实现功能时所需要调用的接口以及参数；其中，功能包括以下至少之一：扫码功能、支付功能、定位功能、网页跳转功能。

在本发明一些实施例中，数据具备规定协议的格式，例如：数据以json字符串的形式呈现包括表示需要调用的接口名的name字段，以及表示接口的参数的args字段的结构体。例如，针对嵌入网页的跳转的场景，数据包括需要调用的接口为navigation to，参数为跳转的网页；再例如，针对嵌入网页的支付的场景，数据包括需要调用的接口为支付接口，参数为支付金额、收款方、支付方等。

步骤206：客户端向网页确认数据接收成功。

在本发明一些实施例中，客户端接收网页发送的数据之后，可以调用回调函数向网页确认数据接收成功，即call back确认收到。例如，网页对客户端的JSAPI调用成功后，立即触发call back。

步骤207：客户端将数据封装为事件，发送事件至小程序。

所述数据包括实现更新所述网页的功能时所需要调用的小程序接口以及参数；所述更新所述网页的功能包括以下至少之一：扫码功能，支付功能，定位功能，网页跳转功能。

这里，客户端接收网页发送的数据后，将数据以事件的形式发送至小程序的逻辑层，即通过WEB_INVOKE_APPSERVICE通知小程序。

步骤208：小程序对事件进行解析，并调用解析得到的小程序接口参数以及小程序接口。

作为通过网页跳转功能来更新网页的示例，小程序的逻辑层对接收到的事件进行解析，得到网页发送的数据，根据数据中的name字段确定需要调用的接口，并根据数据中args字段得到相应的接口参数，进而可对确定的小程序接口进行调用。例如确定的接口为返回上一页，则逻辑层调用小程序的返回上一页的接口进行页面跳转。

可以看出，网页获取到用户的操作数据后，通过客户端中转至小程序，小程序解析后进行接口调用，如此，避免了网页对小程序的接口调用的接口权限越界、不受管制等问题。

举例来说，客户端在小程序和网页之间中转的功能，使得事件(即数据通知事件)并不会暴露给小程序的开发者，开发者所设计的小程序自然也就不能直接监听该事件。具体来说，小程序的代码使用JavaScript闭包的形式实现，并且当在小程序中嵌入网页后，小程序对应的代码中监听事件的接口(即WeiXinJSBridge对象)在JavaScript闭包内被开发者改写，这就导致小程序对应的代码并不能通过读取全局的WeiXinJsBridge对象来监听网页对小程序接口的调用，从而实现了对小程序接口调用的限制。

在实际实施时，为了向网页开放对小程序接口的有限调用，小程序中预设识别有限数量的name字段值的机制，从而通过数据中包含的name字段值确定网页需要调用的接口名，进而调用小程序体系下相应的小程序接口，也就是说，预先设置小程序仅能识别有限数量的接口名，而对除预设的接口名以外的其它接口名并不能识别，因此，即便网页发送的数据的name字段值包含了其它接口信息，小程序也无法识别，即无法执行相应的接口调用，这样就能做到网页对小程序接口的有限接口调用。

在本发明一些实施例中，为了满足将小程序内嵌的网页状态同步给小程序的需求，可以增加post Message的name值，状态数据通过args参数一起打包，这些状态数据在小程序侧接收到后会先缓存起来，等到预设条件(如Web-View组件被销毁时、后退、分享等)满足时，小程序将缓存的状态数据发送至小程序的服务器，即把缓存的数据给到开发者。这里，以小程序为购物小程序对网页的状态数据举例说明，若用户当前在小程序的内嵌网页上下了购物订单，相应的网页的状态即为当前的订单状态。

基于本发明上述实施例，在实际应用中，方法还包括：

小程序调用客户端的创建网络视图组件接口(insert HTML Web-View)告知客户端创建Web-View组件，同时以参数的形式将小程序数据传递给客户端；

客户端响应对创建网络视图组件接口的调用，创建Web-View组件，并缓存小程序传递的小程序数据，在Web-View组件被创建完成、且Web-View组件对网页加载完成后，发送缓存的小程序数据给网页。例如小程序通过发送cookie给网页，实现再次访问同一业务域名时登录态的保持。

其中，小程序数据可以包括：小程序中内嵌网页当前的打开环境数据(即表征当前被打开的网页是在小程序环境中打开的数据)，小程序的登录状态数据(即用户在小程序的登录信息)等；Web-View组件用于在小程序的页面框架中进行网页显示。

在本发明一些实施例中，小程序可以和内嵌小程序中的网页做到账号互通，即网页能够获取用户身份标识符openid，而这需要依托某个公众号的授权登录能力，本发明实施例采用unionid机制，使得同一个用户unionid，在这个开发者账号下是唯一的，即小程序和网页依托的公众号对应的unionid相同。

应用本发明上述实施例，实现了将业务域名的网页在小程序的嵌入，以及通过客户端做数据中转实现了内嵌网页和小程序的数据通信，如此，可实现将原有客户端内的网页服务迁移到小程序架构中，使得用户在客户端中可以更快的找到服务，提高了用户体验；通过将业务域名的网页嵌入小程序，使得开发者无需针对已有的完整应用或网页重新进行开发，降低了技术开发成本；同时，网页和小程序间的数据通信通过客户端进行控制，避免了网页和小程序直接通信所带来的网页对小程序接口的任意调用。

接下来以客户端为微信客户端、小程序为京东购物小程序为例，对本发明实施例网页处理方法进行说明，图6A为本发明实施例提供的网页处理的界面示意图一、图6B为本发明实施例提供的网页处理的界面示意图二、图6C为本发明实施例提供的网页处理的界面示意图三；结合图6A、图6B及图6C，对本发明实施例提供的网页处理的过程进行说明。

首先参见图6A，购物圈使用了小程序内嵌Web-View的能力，即将购物圈对应的网页嵌入了京东购物小程序，这里展示的是普通h5页面。当用户首次使用京东购物小程序时，微信下载京东购物小程序的源代码，初始化京东购物后加载小程序的首页，用户点击购物圈tab键，小程序的视图层的组件捕获到用户的操作，将操作对应的数据以事件的形式通过JSBridge发送至小程序的逻辑层，逻辑层调用小程序的Web-View组件加载购物圈对应的网页，即图6A所示。用户基于小程序显示的内嵌的购物圈网页，点击其中一条信息进入详情，即跳转至图6B所示页面，这里的跳转还是普通的h5网页跳转。在图6B的详情页面下，显示有一排商品列表，用户点击其中一个商品，触发页面跳转至小程序的商品详情页，内嵌的购物圈网页调用微信提供的接口(invokeMiniProgramAPI)，将用户点击商品操作所对应的数据(数据格式如：{name:’navigateTo’,arg:{url:‘path/to/detail’}})发送给微信；微信不对数据进行处理，将收到的数据封装为事件(WEB_INVOKE_APPSERVICE)，发送事件给京东购物小程序；京东购物小程序对事件进行解析，基于解析到的数据识别得到需要跳转至京东购物小程序的其它页面，基于解析得到的接口navigateTo，进行接口调用，完成了内嵌网页与小程序间的数据通信，实现从内嵌网页跳转至小程序的页面，即跳转至图6C所示的页面。

上述京东购物小程序的实施例，通过客户端的数据中转对小程序内嵌的购物圈网页和京东购物小程序之间的数据通信进行了控制，避免了购物圈网页和京东购物小程序直接通信而对京东购物小程序的接口进行的任意调用。

在上述实施例中，通过调用navigateTo接口实现了网页跳转，然而在实际应用中，对应不同的应用场景，可以在小程序内嵌的网页中实现不同的功能，例如：用户对网页进行操作后，网页针对用户的操作发送数据给客户端，客户端以事件的形式发送数据给小程序，小程序解析事件得到网页发送的数据后，通过数据中的name字段得知需要调用的接口为扫码接口，对扫码接口进行调用；或者，通过数据中的name字段得知需要调用的接口为支付接口，对支付接口进行调用；或者，通过数据中的name字段得知需要调用的接口为定位接口，对定位接口进行调用。如此，通过客户端实现小程序中内嵌网页和小程序的间接通信，避免了网页和小程序直接通信所带来的网页对小程序接口的任意调用。

作为上述小程序中的网页处理方法在实际应用中的具体示例，接下来分别从应用场景、业务域名配置、小程序中内嵌网页与小程序间的数据通信等方面进行说明。

首先对本发明实施例小程序中的网页处理方法的应用场景进行说明。本发明实施例提出的将业务域名的网页嵌入小程序中的方案适用于以下的应用场景：

场景1：作为有营销诉求的小程序，尤其是电商类型小程序，活动营销推广页面更换频次高且不同渠道的复用性高；

对于上述情况，如果利用小程序或者公众号实现，需要不断进行小程序或网页功能的迭代更新，而如果把网页嵌入小程序，那么只需要更新网页，因为：

1)小程序本身与网页是解耦的，因而小程序更新网页时，网页可以供不同渠道的小程序复用，且小程序自身不需要进行版本的迭代更新，由于节约了开发成本，因而产品信息可以更快触达用户；

2)对于移动端和PC端可以同时访问，不需要针对移动端和PC端分别进行更新。

场景2：作为此前已有完整APP或网页功能的开发者，短时间内无法把所有的功能迁移到小程序体系内。

对于以上场景，都更适合提供给开发者这样的解决方案，即把网页内嵌到小程序内，实现小程序的部分功能。

接下来对本发明实施例中的业务域名配置进行说明。当开发者把一部分网页内嵌到小程序，先要把这些网页所属的域名配置到小程序后台，校验提交小程序的用户是否是业务域名的注册用户，校验通过后才可使用。图7A为本发明实施例提供的进行业务域名配置的界面示意图一，图7B为本发明实施例提供的进行业务域名配置的界面示意图二，结合图7A及图7B，对业务域名的配置过程包括以下步骤：

步骤301：登陆小程序后台，选择开发者设置，通过管理员扫码验证后，打开业务域名模块。

在一实施例中，对业务域名进行配置时可以对业务域名的相关参数进行配置，如：对小程序支持配置的业务域名数量进行配置、对业务域名支持配置的小程序数量进行配置、对小程序支持的业务域名的修改次数进行配置；在实际应用中，作为配置的受力，一个小程序仅支持配置最多20个业务域名；一个业务域名仅支持被最多20个小程序配置；一个小程序仅支持一个月最多修改50次。

步骤302：打开业务域名后，需要下载校验文件，并把校验文件放到配置的业务域名的根目录下，保存校验成功后完成对业务域名的配置。

配置成功的业务域名的网页，需要通过Web-View组件配置到小程序内，可支持小程序打开内嵌网页，也支持网页内点击后回到原小程序内。但为保持小程序的策略统一，也针对内嵌网页内的jssdk能力有所限制。例如：小程序暂不支持分享到朋友圈，而内嵌网页也是小程序的一部分，同样网页的右上角是该小程序菜单，不支持分享到朋友圈。

接下来对小程序中内嵌网页与小程序间的数据通信进行说明。网页内嵌到小程序之中，不可避免的会有数据需要在网页与小程序之间传输，而且网页是作为小程序的扩展，这种数据交互不能过于自由，否则网页就可以任意传送指令到小程序，从而调起任意的小程序体系下的接口，这样就会有接口权限越界、不受管制等问题。

图8为本发明实施例提供的网页和小程序间的数据通信方法的流程示意图，参见图8，本发明实施例提供的网页和小程序间的数据通信方法包括：

步骤401：网页端调用客户端提供的JSAPI，将数据传递给客户端。

这里的数据可以是任意的字符串，由接收方识别而赋以意义，SDK是指小程序侧框架。

步骤402：客户端调用回调函数向所述网页确认所述数据接收成功。

步骤403：客户端收到数据后立即发送事件给到小程序。

步骤404：小程序对数据进行解析，调用对应的小程序接口。

在一实施例中，通过客户端中转发送给网页的数据具备预设的协议格式，例如，数据以json字符串的形式呈现，包括表示需要调用的接口名的name字段，以及表示接口的参数的args字段的结构体。例如，针对嵌入网页的页面跳转的应用场景，数据包括的name字段携带需要调用的接口为navigation to，args字段携带相应的接口的参数为跳转的网页。

步骤405：客户端调用回调函数向所述网页确认小程序接口调用完成。

在实际应用中，客户端在等到小程序接口调用完成后再触发调用callback函数向网页确认调用完成，并把调用结果返回给开发者。

在实际应用中，为了满足开发者需要把网页状态数据同步给小程序的需求，但又不能随传随到，在上面的方案的基础上，可以增加识别一个postMessage的name值，状态数据通过args参数一起打包，这些状态数据在小程序侧接收到后会先缓存起来，等到某个时机(Web-View组件被销毁时、后退、分享等)时，才把所有缓存的数据给到开发者。

针对网页和小程序间的数据交互的方案，除了现有能力外，也可以扩展从小程序到网页这个方向的数据传输，例如，可以包括以下步骤：

步骤501，小程序在实例化Web-View组件时，需要通过insertHTMLWebview接口通知客户端去创建一个Web-View组件。

步骤502，客户端在调用时把数据作为其中一个参数传给客户端。

步骤503，客户端缓存数据，等待实例化完成并且网页加载完成时，把数据注入到网页，达到向网页传输数据的目的。

此外，实例化Web-View组件也可支持设置cookie或自定义HTTP Headers，以满足开发者的后台服务也能立即收到小程序侧传过去的数据。

本发明实施例还提供了一种存储介质，例如，图2B中示出的存储器212，存储有可执行程序，所述可执行程序被处理器执行时，实现以下操作：获取小程序；获取所述小程序中配置的业务域名；在所述客户端中创建所述小程序的网络视图组件，并在所述小程序的页面框架中显示所述网络视图组件承载的所述业务域名的网页；接收所述网页发送的数据；将所述数据发送到所述小程序，所述数据用于供所述小程序调用相应的接口来更新所述网页。

在本发明一些实施例中，上述指令被处理器执行时还实现：在所述客户端中显示所述小程序的入口；当接收到触发所述入口的操作时，向所述客户端的后台服务器发送小程序的请求；接收所述小程序的源代码，所述小程序的源代码中包括能够在小程序中访问的业务域名。

在本发明一些实施例中，上述指令被处理器执行时还实现：所述客户端包括可供调用的客户端接口；接收所述网页针对客户端接口的调用；获取所述网页通过所述客户端接口发送的数据。

在本发明一些实施例中，上述指令被处理器执行时还实现：将接收的所述数据封装为事件；发送所封装的事件至所述小程序；其中，所述事件供所述小程序解析后确定需要调用的接口及参数，并调用确定的所述接口。

在本发明一些实施例中，上述指令被处理器执行时还实现：接收所述网页发送的数据之后，调用回调函数向所述网页确认所述数据接收成功。

在本发明一些实施例中，上述指令被处理器执行时还实现：响应于所述小程序对客户端的创建网络视图组件接口的调用，创建用于在所述小程序的页面框架中进行网页显示的网页视图组件。

在本发明一些实施例中，上述指令被处理器执行时还实现：缓存所述小程序调用所述创建网络视图组件接口时以参数的形式传递的数据；在所述网络视图组件被创建完成、且所述网络视图组件对所述网页加载完成后，向所述网页发送所述缓存的数据。

综上所述，本发明实施例具有以下有益效果：

技术效果1：提升小程序和网页内部数据统一维护效率。

此前技术架构内，公众账号和小程序的用户账号体系都是openid体系，针对同一个主体下的账号，最终可映射到unionid体系。

网页通过公众账号后台的配置，同样适用于公众账号的openid体系，因此小程序内无论是小程序页面还是内嵌网页，底层数据都支持打通管理。并且，从小程序打开内嵌网页，再从内嵌网页回到小程序内，均支持通过传输参数方式最终实现用户行为数据的跟踪。

技术效果2：提升开发者首次尝试小程序的动力。

此前开发者需要尝试小程序的技术方案，需要完全摒弃此前已有的完整应用或网页，需要重新开发一套完整小程序，因此首次尝试成本很高，通过支持小程序内嵌网页能力，解决该难题。

技术效果3：提升微信用户接受服务的体验和效率。

当开发者把原有的微信内的网页服务迁移到小程序架构中，用户在微信内同时更快找到服务，并且也获得更好体验。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (15)

1.一种网页处理方法，其特征在于，包括：

母应用程序获取子应用程序；

获取所述子应用程序中配置的业务域名；

在所述母应用程序中创建所述子应用程序的网络视图组件；

在所述子应用程序的页面框架中，显示由所述网络视图组件承载的所述业务域名的网页；

接收所述网页发送的数据；

将所述网页发送的数据发送到所述子应用程序，所述数据用于供所述子应用程序调用相应的子应用程序接口来更新所述网页。

2.根据权利要求1所述的方法，其特征在于，所述母应用程序获取子应用程序，包括：

在所述母应用程序中显示所述子应用程序的入口；

当接收到触发所述入口的操作时，向所述母应用程序的后台服务器发送子应用程序的请求；

接收所述子应用程序的源代码，所述子应用程序的源代码中包括能够在子应用程序中访问的业务域名。

3.根据权利要求1所述的方法，其特征在于，

所述子应用程序中配置的业务域名满足以下条件：

配置在所述母应用程序的后台服务器，并通过所述母应用程序的后台服务器的域名身份验证。

4.根据权利要求1所述的方法，其特征在于，所述接收所述网页发送的数据，包括：

所述母应用程序包括可供调用的母应用程序接口；

接收所述网页针对所述母应用程序接口的调用；

获取所述网页通过所述母应用程序接口向所述母应用程序发送的数据。

5.根据权利要求1所述的方法，其特征在于，

所述数据包括实现更新所述网页的功能时所需要调用的子应用程序接口以及参数；

所述更新所述网页的功能包括以下至少之一：

扫码功能，支付功能，定位功能，网页跳转功能。

6.根据权利要求1所述的方法，其特征在于，所述将所述网页发送的数据发送到所述子应用程序，包括：

将所述网页发送的数据封装为事件；

发送所封装的事件至所述子应用程序；

其中，所述事件供所述子应用程序解析后确定需要调用的子应用程序接口及参数，并根据所确定的参数执行相应子应用程序接口的调用。

7.根据权利要求1所述的方法，其特征在于，还包括：

当接收到所述网页发送的数据时，调用回调函数向所述网页确认所述数据接收成功。

8.根据权利要求1所述的方法，其特征在于，还包括：

当接收到所述子应用程序对所述母应用程序的创建网络视图组件接口的调用时，

创建用于在所述子应用程序的页面框架中进行网页显示的网页视图组件；

缓存所述子应用程序调用所述创建网络视图组件接口时发送的数据；

当所述网络视图组件被创建完成、且所述网络视图组件加载完成所述网页时，向所述网页中注入所述缓存的数据。

9.一种网页处理装置，其特征在于，包括：

获取单元，用于获取子应用程序，以及获取所述子应用程序中配置的业务域名；

显示单元，用于在母应用程序中创建所述子应用程序的网络视图组件，在所述子应用程序的页面框架中，显示由所述网络视图组件承载的所述业务域名的网页；

接收单元，用于接收所述网页发送的数据；

发送单元，用于将所述数据发送到所述子应用程序，所述数据用于供所述子应用程序调用相应的子应用程序接口来更新所述网页。

10.如权利要求9所述的装置，其特征在于，

所述获取单元，还用于在所述母应用程序中显示所述子应用程序的入口；

当接收到触发所述入口的操作时，向所述母应用程序的后台服务器发送子应用程序的请求；

接收所述子应用程序的源代码，所述子应用程序的源代码中包括能够在子应用程序中访问的业务域名。

11.如权利要求9所述的装置，其特征在于，

所述接收单元，还用于接收所述网页针对母应用程序接口的调用，所述母应用程序接口为所述母应用程序向所述网页提供的能够被调用的接口；

获取所述网页通过所述母应用程序接口发送的数据。

12.如权利要求9所述的装置，其特征在于，

所述发送单元，还用于将接收的所述数据封装为事件，发送所封装的事件至所述子应用程序；

其中，所述事件供所述子应用程序解析后确定需要调用的子应用程序接口及参数，并根据所确定的参数执行相应子应用程序接口的调用。

13.如权利要求9所述的装置，其特征在于，还包括：

创建单元，用于响应于所述子应用程序对母应用程序的创建网络视图组件接口的调用，创建用于在所述子应用程序的页面框架中进行网页显示的网页视图组件；

缓存单元，用于缓存所述子应用程序调用所述创建网络视图组件接口时以参数的形式传递的数据；

当所述网络视图组件被创建完成、且所述网络视图组件加载完成所述网页后，向所述网页中注入所述缓存的数据。

14.一种终端，其特征在于，包括：

存储器，用于存储可执行程序；

处理器，用于执行所述存储器中存储的可执行程序时，实现如权利要求1至8任一项所述的网页处理方法。

15.一种存储介质，其特征在于，存储有可执行程序，所述可执行程序被处理器执行时，实现如权利要求1至8任一项所述的网页处理方法。