今日励志名言必须接受自己行动带来的责任而不是自己成就带来的荣耀。前言微信小程序可以直接运行网页。这种新的组件web-view的出现，可能会直接导致一波小程序数量的高峰。本篇博文将带你了解业务选择、微信小程序后台配置、使用web-view完成登录业务，以及如何在实战中调试。带您体验H5嵌入小程序的风采，助您更放心地使用微信小程序。编写新组件Web视图。技术选型H5转小程序路线优劣势对比上表为业务逻辑相似的原H5转微信小程序路线的优劣势对比。基于目前主流多端编译的时间限制和可靠性考虑，最终团队认为采用小程序组件web-view嵌入H5的方式更适合当前的开发需求。web-view的兼容问题主要是因为基础库是1.6.4+及以上，微信官方统计的基础库覆盖率1.6.4+已经达到95%以上，也符合与产品。需求，于是欣然选择了web-view嵌入H5的技术方案。H5与小程序的技术对比从上表我们可以比较出H5与小程序相比的优缺点，方便大家对前端的需求进行极大的评估。更重要的是，由于小程序包装严重，小程序开发的灵活性没有H5高，这就需要我们重视交互设计的评价。web-view微信小程序配置系列题配置域名业务域名在小程序中配置，在H5和H5中引用iframe的域名。这里要特别注意，如果H5中有内嵌的iframe，也必须在里面配置。这里需要服务端的小伙伴们配合，把验证文件放到要嵌套的业务域名的根目录下。所以要注意后端能不能支持，不然会出现各种乱七八糟的问题。选择开发的基础库时，不要忘记配置微信小程序的基础库。注意web-view只能在基础库1.6.4以上的版本库中使用。H5引入微信jssdk，包含了h5与小程序直接通信的方式。web-view和applets之间的通信官方提供了两种通信方式（如下图所示）1.H5中需要使用PostMessage通信wx.miniProgram.postMessage接口将要分享的信息推送到小程序.用户点击支持小程序、销毁组件、分享等特殊事件后，小程序页面通过bindmessage绑定的函数读取post信息。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登录示例传递经历了四步：小程序登录后，获取后台传过来的cookie并保存，在web-view中通过url传给H5，获取传递的值在H5中写入cookie，在访问接口时带上2、从微信小程序的响应头中获取cookie并存入storage：首先在登录页面的响应头中获取登录cookie，将它存储在存储中wx.setStorageSync('cookie',res.header["Set-Cookie"]);微信小程序中每次请求接口时，取出storage中的cookie放在请求头中。如果输入错误或者没有输入cookie值，后台会返回errorCode3002。当前端跳转到登录页面时。varheaderCookie=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&¶meter.success(res);}}3.获取cookie并拼接放入url中，首先获取web-view页面上的cookie，匹配到需要传递的字段，然后将此字段放入url中，通过问号的方式传递给H5。try{varvalue=wx.getStorageSync('cookie');if(value){test=value.match(newRegExp("(^|)"+"jxi-m-sid"+"=([^;]*)(;|$)"))[2];}}url:'https://www.xxx.com#',if(!option.page){this.setData({//把传递过来的字段（比如test)网址:`${this.data.url}?${test}`});}else{this.setData({//这里放传过来的字段，也可以拼接更多信息（比如option.page）url:`${this.data.url}${option.page}?${test}`});}4。获取cookie并在H5中使用在H5中获取cookie值并带入cookie。注意域和路径的设置。两个值都必须有：letisDebug=(window.location.href).indexOf('myf')>-1;lethost=isDebug?'jd':'jdf';//获取传递的字段letc=window.location.href.split('?')[1];//设置cookiedocument.cookie=`jxi-m-sid=${c};domain=${host};path=/`;小程序内嵌H5调试解决方案关于调试效果缓存问题小程序更新机制即小程序进入后台后，客户端会保持一段时间的运行状态。一定时间后（目前为5分钟），会被微信主动销毁。如果小程序销毁重启时发现有新版本，则异步下载。新版代码包，同时使用客户端本地包启动，即新版小程序要等到下次销毁再重启时才会应用。内嵌H5调试问题由于微信小程序开发者工具没有提供内嵌H5调试工具，我们可以采取以下方法进行调试。开发H5时，我们可以在微信小程序开发者工具中找到web-view将H5的URL链接粘贴到浏览器中，像平时H5开发一样调试移动端H5的测试调试，可以引入vconsole插件在H5中调试程序，他可以让我们在H5中看到接口状态和日志。总结看到这里，我们分别从web-view技术的优缺点web-view微信小程序配置系列问题web-view与小程序通信小程序内嵌H5登录实例小程序内嵌H5调试解决方案五个方面梳理微信小程序的使用网络视图组件。当然微信小程序组件web-view还不完善，很难实现一些特殊的交互。比如后退按钮返回的页面只能是上一层，不能是任何自定义页面。这就需要我们完善沟通和规划交互设计，同时给予反馈，等待微信小程序的官方更新和支持。文章来源：京东设计中心打开微信，扫一扫关注早都君，每天早上为你推送前端知识，打发拥挤的地铁公交时间
