前言

携程在业务上遇到的问题，看看有没有你需要的。今天的前端晨读课文章由@思语、@携程、@公众号分享：携程技术授权。

前端晨读课：和大家分享我的技术视角

正文从这里开始~~

1. 背景

本文将与大家分享团队在开发小程序方面的经验，以微信小程序为主要环境，介绍业务开发中处理小程序内嵌H5所遇到的问题及解决方法，文章将具体讲述小程序平台与H5的区别，小程序内嵌通讯，以及小程序常见问题等。

2. 平台差异

下面将简单分析和回顾一下小程序和H5在渲染上的几个区别。

2.1 小程序

以微信小程序为例，相信今天大部分读者对微信小程序的系统架构都很熟悉，总体来说分为两个部分：

微信小程序采用渲染，是一套和原生客户端不一样的视图渲染体系。一个小程序有多个界面，所以有多个渲染层。逻辑层采用线程来运行脚本，两个线程之间的通信通过小程序端转发，逻辑层发送的网络请求也是通过端转发。

这样设计的初衷是为了控制和安全。微信小程序禁止开发者使用浏览器提供的一些开放接口，比如跳转页面、操作DOM、动态执行脚本等。将逻辑层与视图层分离，视图层与逻辑层之间只进行数据通讯，可以防止开发者对界面进行任意操作，更好地保证用户数据的安全。同时小程序设计了组件框架——，基于这个框架内置了一套组件，覆盖了小程序的基本功能，方便开发者快速搭建任意界面。同时提供了自定义组件的能力，开发者可以自行扩展更多的组件，实现代码复用。

值得一提的是，部分较为复杂的内置组件在客户端均实现了原生渲染。同时，微信团队结合LV-CPP，将实现代码在C++和Dart上进行聚合，进一步简化了基于小程序技术栈跨平台业务开发的框架维护成本，提供更优的性能。

2.2 小程序嵌入H5

H5页面是放置在小程序里面的，配置合法的域名后，即可在小程序应用中展示，不同厂商的小程序，法律事务、厂商合规性可能有所不同，H5需要判断环境，调用不同的API方法，展示不同的业务页面。

小程序CWX的SDK是在携程内部封装的，小程序端主要采用原生+Taro框架，H5部分主要是NFES()和Vue，不管是哪个端都是通过一个CWX来对接的，内部封装了各个端的通用功能，比如登录、发布、支付、个人中心等，这些功能可以通过CWX中间件直接调用。

而且当H5检测到当前处于小程序环境时，会根据环境异步加载SDK文件和厂商的JS-SDK，初始化小程序版本wx。这里比较关键的一点就是我们需要对API调用做队列，因为SDK是异步加载的，如果在此期间页面有API调用发生，肯定得不到正确的响应，所以我们需要做调用队列，在SDK初始化完成后再处理这些调用。其实CWX的原理很纯粹，如果要实现多端适配，只需要根据环境加载不同的SDK就可以了。

下面简单列举了工作中常用的几个小程序环境判断：

使用注意事项：

使用前最好查阅对应小程序的文档，因为每个小程序对API的支持程度不一样。引用.js的方式视情况而定，因为引入.js的方式是要在head标签中添加标签，如果在head标签中引入.js会报错。如果打开h5显示“页面访问被限制”等提示信息，可以尝试如下操作：（这种情况一般出现在打开测试环境的h5 url时）在IDE中勾选“忽略域名有效性检查”和“忽略域名有效性检查”。

1.快捷应用相关

目前，vivo、OPPO、华为已支持新版快应用，其中vivo、OPPO已上线，华为正在测试中，小米暂不支持。对于新版快应用，若H5页面需要调用新版快应用JS-SDK提供的API，需要提前将H5链接的域名配置为可信URL（以正则表达式的形式配置）。

2. 标题相关

今日头条小程序页面跳转API仅支持以/开头的绝对路径。

3.支付宝相关

目前1.0.73版本的.js会判断是否在支付宝小程序中，如果h5在支付宝小程序中或者h5在支付宝内置浏览器里，都会被认为是在支付宝小程序中，所以在调用my.XXXX前需要先调用工具函数确定是在支付宝小程序中，而不是支付宝内置浏览器里。

3. 小程序内嵌通信 3.1 小程序中h5页面及跨页面通信的实现

首先想到的就是方法的实现，之前有人提出用该方法来实现，但是研究之后发现这个方法在iOS上表现符合预期，但是在手机上却无法按预期触发。

于是就有了下面的方案，需要h5和小程序两个方面处理，核心思想：利用hash特性。

为什么要执行 ..go(-1) 呢？因为 hash 变化会让历史栈长度增加 1，用户需要再返回一次。但这一步显然是多余的。同时 ..go(-1) 之后，hash 中添加的参数会被移除，URL 会和之前保持一致。

3.2 注意事项

为了接入的顺畅，我们不能一刀切，必须保证已有的页面不做任何修改，可以继续接入。新的能力必须通过增加参数来区分，比如：检测URL中=1的部分，然后通过hash传递参数。修改原有逻辑，让=1时，hash处理逻辑优先参数定义，并在前面增加两个下划线，区分URL中的正常参数。我们来看看h5 SDK是怎么实现的。

总结起来就是两点：

1.方法的实现

绑定事件（这里做了一些工作，防止重复绑定事件），将传入的自定义事件缓存在数组中，当触发时，根据唯一的标志位判断是否触发。

2. 方法的实现

触发条件：表示最近一次触发，或者指定通过wx.发送数据的URL。

浏览器是通过URL地址来访问资源的，如果内嵌H5的地址没有变化，web-view就会从缓存中访问资源，但是缓存中并没有最新的数据，这就导致服务器上最新的资源根本无法到达浏览器，这也就解释了为什么修改配置无法生效。

所以，为了彻底解决及时刷新的问题，web-view必须访问新的地址，我们假设小程序访问的URL地址为：#/，其中101是的一个版本号，每次递增，保证每次都不一样。

4.常见问题及解决方法

小程序与h5通信基本就两种常用方式，一种是大家都知道的，这种方法只有在back、、三种情况下才会触发。但是也有一个问题，就是需要注意这种方法只有基础库1.7.1才支持，在1.7.1以下只能通过第二种方式，也就是设置并检测组件URL变化来传输数据，类似PC时代的通信方式。

在SDK中怎么做呢？定义一个方法，先检查基础库版本是否支持，如果支持就直接调用，如果不支持就把分享参数拼接到URL里然后。也就是说通过URL传递数据有一个缺点，就是可能需要刷新一次页面才能设置成功。

目前该环境支持以下通用服务：

4.1 返回左上角

当访问小程序页面时，先进入一个空白的转入页面，再进入h5页面，这样左上角就会出现一个返回按钮，当用户点击左上角的返回按钮后，页面就会重新加载到小程序首页。这个看似简单小动作其实对业务的影响是很大的。

根据我们的数据统计，左上角返回按钮的点击率高达70%，因为这种落地页一般都是用户共享的，以前纯H5的时候只能通过左上角返回，所以小程序里的用户也习惯了这个；第二个数字，重新加载到首页之后，后续的页面访问率在10%以上。这两个数字对于业务提升其实还是挺显著的，实现原理很简单，通过二次触发来处理。

4.2 H5与小程序登录状态同步问题

这里分两种情况，连接的H5可能一开始就要求登录，也可能一开始不需要登录，中间需要登录，这两种情况，我们都约定了H5通过自身URL上的一个参数来控制。

一开始就要求登录态的情况，具体就是在加载之前，先进行授权登录，然后把登录信息拼接到url里面，再进行加载。在h5中，把登录信息提取出来存入其中，这样一进来h5就是登录状态。

在一开始不需要登录的情况下，一进入小程序，直接加载h5就可以了，h5调用方法的时候会把这个参数拼接到URL里，然后使用API​​重新加载，然后就用第一种情况进行授权登录。

问：可能存在登录同步问题

A：登录个人页后，新登录状态是同步状态，点击返回上一级页面，这个嵌套的首页不会触发-imvc事件，这个页面比较老，退出登录也是一样，所以首页会跳转到h5登录，而不是小程序登录，导致登录不同步。

解决方法：需要返回首页，刷新h5页面。

误区：登录后直接进入首页会导致无法直接退出。

解决办法：从个人页面返回时，在设置的URL中添加参数，再次刷新即可。