编辑推荐：关注微信小程序、微信小游戏、Node.js 和 Java 实时 Bug 监控，真的是一款非常好用的 Bug 监控服务，很多大公司都在用。

前言

微信小程序是可以直接运行网页的，web-view这个新组件的出现，可能直接导致小程序数量的一个高峰。本篇博文将从业务选型、微信小程序后端配置、使用web-view完成登录业务、实战中如何调试等角度，带大家感受小程序中内嵌H5的魅力，帮助大家更放心的使用微信小程序新组件web-view。

H5转小程序技术路线优缺点对比

上表对比了将原有的 H5 转换为具有类似业务逻辑的微信小程序的优缺点。基于时间限制以及目前主流多端编译的可靠性，团队最终认为使用小程序组件 web-view 嵌入 H5 更适合目前的开发需求。web-view 的兼容性问题主要在于基础库在 1.6.4+ 以上才可以使用。根据微信官方统计，1.6.4+ 中基础库的覆盖率已经达到 95% 以上，也符合产品负责人的要求，所以欣然选择了在 web-view 中嵌入 H5 的技术方案。

H5与小程序技术对比

通过上表我们可以对比出H5相较于小程序的优缺点，方便前端高手评估自己的需求。尤为重要的是，由于小程序封装性更强，小程序开发的灵活性不如H5，这就需要我们重视交互设计的评估。

Web-view微信小程序配置系列问题

业务域名中配置的域名是小程序和H5的域名以及H5中引用的域名，这里要注意的是，如果H5中有内嵌域名，也必须配置。

这里需要服务端小伙伴的配合，将验证文件放在需要嵌套的业务域名根目录下。所以需要注意后端是否可以支持，否则会出现各种问题。

开发的时候别忘了配置微信小程序基础库，注意web-view要在基础库1.6.4以上版本才能使用。

web-view与小程序之间的通信

官网提供了两种通信方式（如下图）。 1.通信 在H5中需要使用wx..接口将要分享的信息推送到小程序，用户点击小程序返回、组件销毁、分享等特殊事件后，小程序页面通过绑定的函数读取帖子信息。 2.设置web-view组件的URL 通信 H5跳转到小程序：

toWeixin() { wx.miniProgram.navigateTo({url: '/pages/myWelfare/myWelfare'}); }

小程序跳转到H5：首先在.wxml中引入web-view组件

然后在小程序的js文件中，以问号的形式设置需要通过URL传递给H5的参数。

if(!option.page){ this.setData({ url: `${this.data.url}?${test}` }); } else { this.setData({ url: `${this.data.url}${option.page}?${test}` }); }

小程序内嵌H5登录示例

小程序登录实现流程图：

如上图所示：整个登录过程经过四个步骤：

登录小程序后，获取并保存传递到后端的数据

将web-view中的URL传递给H5

在H5中获取传递的值并写入

访问接口的时候带上2.从微信小程序响应头中获取值：

首先在登录页面的响应头中获取登录名，并放入

wx.setStorageSync('cookie', res.header["Set-Cookie"]);

每次在微信小程序中请求接口的时候就取出来放在请求头里，如果输入错误或者没有输入值，那么后端就会返回3002，前端就会跳转到登录页。

var headerCookie = wx.getStorageSync('cookie'); wx.request({ url: murl, data: parameter.data || {}, header: { 'Cookie': headerCookie }, method: parameter.method || 'POST', success: function(res) { if(res.data.code == 3002) { wx.redirectTo({ url: '../login/login' }) } else { parameter.success && parameter.success(res); } }

3. 获取并连接到 URL

首先从web-view页面获取数据，并匹配需要传递的字段。然后把字段放到URL中，通过问号传参的方式传递给H5。

try { var value = wx.getStorageSync('cookie'); if (value) { test = value.match(new RegExp("(^| )"+"jxi-m-sid"+"=([^;]*)(;|$)"))[2] ; } }

url: 'https://www.xxx.com#', if(!option.page){ this.setData({ //在这里放入传递的字段（如test） url: `${this.data.url}?${test}` }); } else { this.setData({ //在这里放入传递的字段,也可以拼接更多的信息（如option.page） url: `${this.data.url}${option.page}?${test}` }); }

4.获取并在H5中使用获取H5中的值并带进来，注意和路径的设置，两个值都必须存在：

let isDebug = (window.location.href).indexOf('myf') > -1; let host = isDebug ? 'jd' : 'jdf'; //获得传递的字段 let c =window.location.href.split('?')[1]; //设置cookie document.cookie = `jxi-m-sid=${c};domain=${host};path=/`;

小程序内嵌H5调试解决方案

在开发H5的时候，我们可以在微信小程序开发者工具中找到web-view传递给H5的URL链接，把这个链接粘贴到浏览器中，就可以像开发H5时一样正常调试了。

对于手机端H5的测试调试，可以将此插件引入到H5中来调试程序，可以在H5中看到接口状态和日志。

总结

看这里，我们来自

以上就是微信小程序组件使用的五个方面，当然微信小程序组件 web-view 目前还不够完善，一些特殊的交互实现起来比较困难，比如返回按钮返回的页面只能是上一级，不能是任意的自定义页面，这就需要我们更好地沟通和规划交互设计，同时给予反馈，等待微信小程序官方的更新和支持。