简介：微信小程序可以直接运行网页。这种新的组件网络视图的出现可能直接导致小程序数量达到峰值。这篇博客文章将从业务选择，微信小程序后台配置，使用Web视图完成登录业务以及如何在实战中进行调试开始。它将为您带来小程序嵌入式H5样式的一次性体验，并帮助您更自信地使用微信小程序新组件网络视图。

微信小程序

一、技术选项：

从1.H5到小程序的路线的优缺点比较：

从H5到小程序的路线的优缺点比较

上表比较了从原始H5到类似业务逻辑的微信小程序解决方案路由的优缺点。基于时间限制和当前主流多端编译的可靠性，该团队最终认为小程序组件网络-用H5嵌入视图的方式更适合当前的开发需求。 Web视图的兼容性问题主要是基本库可以在1.6.4+及更高版本中使用，微信官方统计基本库已达到1.6.4+的覆盖范围超过95％的该指标还可以满足成人产品的要求，因此我很高兴选择了Web View嵌入式H5技术解决方案。

2.H5跳小程序：

H5跳跃小程序

从上表中，您可以比较H5与小程序的优缺点，这方便您评估需求。最重要的是小程序的封装程度更高，因此小程序开发的灵活性不如H5高。这需要我们重视交互设计的评估。

二、网络视图微信小程序配置系列问题

1、配置域名

注意：

2、选择基本库

开发时，不要忘记配置微信小程序的基本库。请注意，网络视图只能在基本库1.6.4或更高版本的版本库中使用

3、H5介绍了微信的js

引入的js编写了H5跳转微信小程序的API实现，可以在H5主页中进行介绍，如下面的示例所示

微信的js是在H5中引入的

三、网络视图和小程序之间的通信

官员给出了两种沟通方式（如下图所示）

1、 postMessage通信

在H5中，您需要首先使用wx.miniProgram.postMessage接口将需要共享的信息推送到小程序。

用户单击小程序返回，销毁组件并共享这些特殊事件后，小程序页面通过bindmessage绑定的功能读取帖子信息。

2、设置网络视图组件的URL通信

H5跳小程序：

H5跳跃小程序

小程序跳至H5：

首先介绍.wxml中的Web视图组件

介绍网络视图组件

然后，在小程序的js文件中进行设置，以通过URL将参数传递给H5，并通过问号传递参数

URL参数传输

四、小程序嵌入式H5登录示例

1、 小程序登录实施方案流程图：

流程图

如上图所示：整个登录cookie的传输经历了四个步骤：

首先在登录页面的响应标题中获取登录cookie，并将其放入存储空间

将登录cookie放入存储空间

每次在微信小程序中请求接口时，都会取出存储中的cookie并将其放置在请求标头中。如果输入错误或未传递cookie值，则后台将返回errorCode为3002。前端跳转到登录页面。

请求界面携带cookie

3、获取Cookie并将其拼接到URL中

首先在网络视图页面上获取cookie，并将其与需要传递的字段进行匹配，然后将该字段放入url中，并通过问号将其传递给H5：

4、获取cookie并在H5中使用

获取H5中的cookie值并引入cookie。注意域和路径的设置。这两个值必须具有：

获取cookie并在H5中使用

五、小程序嵌入式H5调试解决方案

1、关于调试效果缓存问题

小程序的更新机制是：当小程序进入后台时，客户端将保持运行状态一段时间，经过一定时间（当前为5分钟）后，它将被主动销毁由微信。

销毁小程序然后重新启动时，如果找到新版本，则将异步下载代码包的新版本，并使用客户端的本地包来启动它，即新版本的小程序需要等待下一次。只有在销毁并重新启动后，它才会应用。

2、嵌入式H5调试问题

由于微信小程序开发人员工具不提供带有嵌入式H5的调试工具，因此我们可以采用以下方法进行调试

六、摘要

看到这里，我们来自

微信小程序 webview组件的使用从五个方面进行了分类。当然，微信小程序组件的Web视图不是完美的，并且很难实现某些特殊的交互。例如，返回按钮返回的页面只能是上级，而不能是任何自定义页面。这需要我们更改良好的沟通和计划交互设计，同时提供反馈并等待微信小程序官方更新和支持。最后，欢迎关注“全栈探索” 微信官方帐户，我们每周都会推送优质文章。