干货 | 携程小程序内嵌webview实践指南

作者简介

思语，携程高级前端开发工程师，关注互动营销领域；

Olivio，携程高级前端开发工程师，关注React Node 组件化；

Stone，携程高级研发经理，关注跨端解决方案，云原生落地等领域。

一、背景

这篇文章将向大家分享团队在小程序 webview 方面的开发心得，以微信小程序为主要环境，介绍在业务开发中处理小程序webview内嵌H5所遇到的问题及解决方案。具体将从小程序平台与H5差异、小程序内嵌webview通信、小程序webview常见问题展开叙述。

二、平台差异

下面将浅析并回顾一下小程序和H5在渲染方面的几点差异。

2.1 小程序方面

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

• iew 视图端通过小程序的框架，将用户采用 WXML 和 WXSS 描述的UI信息处理成 H5 元素，最终交给 WebView 去渲染；

• 逻辑层运行JS逻辑，并且可以调用具有微信开放能力的 JSAPI。逻辑和视图分离，通过事件和数据彼此之间建立联系。

微信小程序使用 WebView 渲染，与原生客户端的是两套不同的视图渲染体系。一个小程序存在多个界面，所以渲染层存在多个 WebView。逻辑层采用 JSCore 线程运行 JavaScript 脚本。这两个线程间的通信经由小程序 Native 侧中转，逻辑层发送网络请求也经由 Native 侧转发。

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

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

2.2 小程序webview内嵌H5

H5页面投放在小程序WebView，在配置完合法域名后，即可在小程序应用中展示。那么，针对不同厂商小程序，可能法务、厂商合规有所差异，需要H5判断所在的环境，去调用不同 api 方法，展示不同的业务页面。

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

并且，H5在检测到当前处于小程序webview环境下时，会根据环境异步加载SDK文件、及其厂商的JS-SDK，初始化小程序版本wx.config。这里的关键点是我们要做个api调用的队列，因为sdk加载异步的过程，如果期间页面内发生了api调用，那肯定得不到正确的响应。因此要做个调用队列，当sdk初始化完毕之后再处理这些调用。其实CWX原理很纯粹，如果你想实现多端适配，那么只需要根据所在的环境去加载不同的sdk就可以了。

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

使用时的注意事项：

使用前，