H5与小程序数据交互

 功能已通过原生+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 获取所需要的业务数据。

微信小程序可以通过后台接口传递数据，实现数据传递、交互功能而不需要页面跳转。当小程序需要传递数据时，可以使用wx.request请求后台接口，将数据发送给后台，然后后台返回需要的数据，小程序再将收到的数据进行处理，完成交互。此外，小程序还可以通过Storage API存储数据，再通过读取Storage中的数据实现页面间信息的交互传递，避免页面跳转的过程，提升用户体验。虽然不跳转页面传递数据的实现方式有所限制，但对于某些需要快速响应、处理的交互场景具有很好的适用性。

微信小程序是不能直接连数据库，要通过接口连接数据库，目前微信小程序只支持https。

小程序是指微信公众平台小程序，可以帮助开发者快速的开发小程序，小程序可以在微信内被便捷地获取和传播，是一种不需要下载安装即可使用的应用小程序，和原有的三种公众号是并行的体系。

2017年1月9日，微信小程序正式上线。

线下扫码：用户可以在小程序中使用扫一扫。

对话分享：用户可以分享小程序或其中的任何一个页面给好友或群聊。

消息通知：商户可以发送模板消息给接受过服务的用户，用户可以在小程序内联系客服，支持文字和图片。

---