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

一、技术选项：

1.H5转换为applet程序的途径的优缺点比较：

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

2.H5跳转小程序：

从上表中，您可以比较H5和小型程序的优缺点，这方便您极大地评估自己的需求。尤其重要的是，由于小程序封装更加严重，因此小程序开发的灵活性不如H5高，这需要我们注意交互设计的评估。

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

1、配置域名

2、选择基本库

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

3、H5介绍了微信js

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

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

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

1、 postMessage通信

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

用户单击小程序返回，组件破坏和共享的特殊事件后，小程序页面将通过bindmessage绑定的功能读取帖子信息。

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

小程序跳转H5：

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

介绍网络视图组件

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

URL参数传输

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

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

流程图

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

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

将登录cookie放入存储空间

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

请求界面携带cookie

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

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

4、获取cookie并在H5中使用

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

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

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

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

如果在销毁小程序然后重新启动小程序时发现了新版本，它将异步下载代码包的新版本，并同时与客户端的本地包一起启动它，即小程序需要等待下一次销毁。它将仅在重新启动时应用。

2、嵌入式H5调试问题

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