微信小程序web-view ， 嵌入H5页面

需求：

1、将已开发好的H5页面，嵌入先有的小程序。

2、并且要实现H5支付功能

解决方式 ：web-view

1、 登陆 小程序管理后台

a . 如果是公众号 。则进行双向绑定

完成这一步 ，那么基本上就差不多成功了一大半

2、在小程序里面嵌入h5

web-view

文档里面有的东西，就不赘述le~

a.在小程序里面定义一个你想要的H5入口

b. 新建一个页面，用来放H5的链接

ok~现在已经完成h5的嵌入

3、h5实现支付功能 - 唤醒微信支付

目前只有这种实现方式。等待微信更新 支持小程序的web-view可以唤醒微信支付

总结：

个人见解： 微信内置浏览器， 打开微信公众号H5页面，也可以唤醒微信支付。微信小程序里面web-view相当于小程序的内置浏览器，暂时不支持唤醒微信支付。虽然小程序是在微信里面，但是web-view又和微信内置浏览器不同~ 感觉微信想把小程序独立出来~

 功能已通过原生+vue混合开发的方式实现了，现需要将这个功能原封不动的搬到微信小程序。综合各方面评估，选择了微信小程序套webview的方式实现（若时间允许，建议还是通过小程序实现）。

 采用小程序webview的方式，可以复用大部分H5页面，但H5调用的原生方法还是需要重新实现。实现方式主要分以下几种情况（当然也可以通过jssdk的方式去实现 https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3 ，但不在本文讨论范围内）：

 (1) 获取照片，可通过html的input标签实现；

 (2) 获取经纬度，可通过webview的url拼接参数实现；

  (3) 人脸识别，可通过H5调起刷脸小程序的方式实现。

 下面主要描述下第3种情况的实现方式。

 H5与小程序交互所涉及的数据部分主要包括两块：

 (1)H5如何将数据传给小程序？

   url参数拼接。

 (2)小程序如何将数据传给H5？

   wx.setStorage及wx.getStorage。

 详细流程如图所示。

 webview小程序pageA调起人脸小程序pageB，pageB回退到pageA。因为pageA重新设置了webview的url，其所嵌套的H5与历史H5页面无法进行数据共享，导致业务功能无法继续。解决办法就是调起人脸小程序之前，在H5页面先将必要的信息通过 localStorage.setItem 保存，人脸识别结束回到H5页面时，再通过 localStorage. getItem 获取所需要的业务数据。

---