携程前端早读课：小程序和H5在渲染方面的差异

携程业务遇到问题了，看看有没有您需要的。 今天的前端早读课文章由@Siyu、@、@Stone分享，公众号：携程科技授权。

前端早读课：与你分享“我的”技术愿景

正文从这里开始~~

一、背景

本文将与大家分享团队在小程序方面的开发经验。 以微信小程序为主要环境，介绍业务开发过程中处理小程序嵌入H5遇到的问题和解决方案。 具体来说，我们会描述小程序平台与H5的区别、小程序的嵌入式通信以及小程序的常见问题。

2. 平台差异

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

2.1 小程序

以微信小程序为例，相信今天大多数读者都熟悉微信小程序的系统架构。 一般来说，分为两部分：

微信小程序使用的是渲染，与原生客户端是两种不同的视图渲染系统。 一个小程序有多个接口，因此有多个渲染层。 逻辑层使用线程来运行脚本。 两个线程之间的通信通过小程序端进行中继，逻辑层发送的网络请求也通过该端进行转发。

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

值得一提的是，内置组件中一些比较复杂的组件是由客户端原生渲染的。 同时，微信团队通过与LV-CPP结合，融合了C++和Dart上的实现代码，进一步简化了基于小程序的技术栈。 落实跨平台业务开发的框架维护成本，以提供更好的性能。

2.2 小程序嵌入H5

H5页面放置在小程序中。 配置合法域名后即可在小程序应用中显示。 那么，对于不同厂商的小程序，法律事务和厂商合规性可能会有所不同。 H5需要判断环境，调用不同的api方法，展示不同的业务页面。

小程序CWX的SDK封装在携程内部。 小程序主要采用原生+Taro框架。 H5部分主要使用NFES（React）和Vue。 无论哪一端通过CWX连接，每一端内部都进行了封装。 常用的功能如登录、发布、支付、个人中心等功能都可以通过CWX中间件直接调用。

而且，当H5检测到当前处于小程序环境时，会根据环境异步加载SDK文件及其厂商的JS-SDK，并初始化小程序版本wx。 这里的关键点是我们需要创建一个 api 调用队列。 因为SDK是异步加载的，如果这期间页面发生api调用，我们肯定得不到正确的响应。 因此，我们需要在SDK初始化后创建一个调用队列并处理这些调用。 其实CWX的原理非常纯粹。 如果想要实现多终端适配，只需要根据环境加载不同的SDK即可。

下面简单罗列一下工作中常用的几种小程序环境判断：

使用时的注意事项：

使用之前最好先查看对应小程序的文档，因为每个小程序都有不同级别的API支持。 引用.js的方式根据情况而定，因为.js引入JSSDK的方式是在head标签中添加标签。 如果head标签中引入.js，就会报错。 如果打开h5，会显示“页面访问被限制”之类的。 如果出现提示，您可以尝试以下操作：（这种情况一般在测试环境打开h5 url时出现）在IDE中勾选“忽略域名合法性检查”和“忽略域名合法性检查”。

1.快速申请相关

目前，Vivo、Oppo、华为三大厂商已支持新版本快应用。 vivo、OPPO已经推出，华为正在测试，小米不支持。 对于新版本快应用，如果H5页面需要调用新版本快应用JS-SDK提供的API，需要提前将H5链接的域名配置为可信URL（配置应可以写成正则表达式的形式）。

2. 头条相关

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

3.支付宝相关

目前1.0.73版本的.js判断是否在支付宝小程序中的方法会判断h5在支付宝小程序中，将h5在支付宝内置浏览器中视为在支付宝小程序中。 因此，在调整my.XXXX之前，需要调整环境工具功能，确保其确实在支付宝小程序内，而不是在支付宝内置浏览器内。

3. 小程序中的嵌入式通信 3.1 小程序中h5页面和跨页面通信的实现

首先想到的是该方法的实现。 之前有人提出实现该方法，但是经过研究发现该方法在iOS中执行效果符合预期，但在手机中却无法按预期触发。

所以我们有下面的解决方案，需要h5和小程序都需要处理。 核心思想：利用哈希特性。

为什么要执行..go(-1)？ 因为hash变化会导致历史栈长度+1，所以用户需要多进行一次返回操作。 但这一步显然是多余的。 同时，go(-1)之后，hash中添加的参数会被去掉，也可以保证和之前的url一致。

3.2 注意事项

为了顺利接入，我们不能实行一刀切的做法。 我们必须确保现有页面无需任何修改即可继续访问。 新的能力需要通过额外的参数来区分，比如：检测URL中的query部分，用=1，然后通过哈希传递参数。 修改原来的逻辑，让=1，hash处理逻辑有最高的参数定义，前面加两个下划线，目的是为了区分URL中的正常参数。 我们看一下h5端SDK是如何实现的。

总结起来有两点：

1. 方法的实现

绑定一个事件（这里进行处理是为了防止重复绑定事件），将传入的自定义事件缓存在一个数组中，触发时根据唯一标志位和判断是否触发。

2. 方法的实现

触发条件：表示最新触发，也可以通过wx..指定url发送数据

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

因此，为了彻底解决及时刷新的问题，必须允许web-view访问新的地址。 我们假设小程序访问的URL地址为：#/index，其中101是构建的版本号，每次递增，保证每次都不同。

4. 常见问题及解决方法

小程序和h5之间的通信常用的方式基本上有两种。 一是大家都知道，这个方法只有在撤退、毁灭、共享三种情况下才能触发。 但也有一个问题，就是需要注意的是，该方法仅基础库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调用login方法时，将这个参数拼接到url中，然后使用api重新加载，然后就进入第一种情况进行授权。 登录。

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

A：跳转至个人页面，登录完成。 此时是新开启的两端同时登录状态。 单击“返回”可返回上一个。 此时嵌套主页不会触发react-imvc事件。 这个页面比较旧，退出也是一样，所以会跳转到首页h5登录，而不是小程序登录，导致登录不同步。

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

误区：登录后直接进入首页会导致token被替换而没有直接调用注销，导致无法退出。

解决方案：要确定何时从个人页面返回，请在设置的URL中添加参数并刷新。

TAG标签：小程序openid