小程序内嵌H5初探

因为有一个活动页，要同时在app和小程序里面做推广，所以决定使用web的H5页面。
第一次做小程序内嵌H5，总结几点如下：

1. 小程序内嵌H5能调用的微信接口是由明确限制的，可参考如下链接
   https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

部分截图

但是还好有下载图片的接口，这样我就可以使用downloadImage接口将已有的图片保存到本地,开森~
然而，深入调研了接口的使用，却发现downloadImage接口不可单独使用，详情点击这里

wx.downloadImage接口需要上传wx.uploadImage返回的severId，而wx.uploadImage需要上传wx.chooseImage返回的localId。故而，该接口并不能用于下载已有图片，只能拍照或从手机相册选择图片

图像接口

2. 小程序页面链接请求参数有长度限制，之前想要带参数给小程序原生页，直接放在了原生链接的get路由请求里，其中带了一个图片地址，并不是很长，却在某些ios系统里被截断，小程序提示找不到该页面，最后只好将图片id带给小程序。
3. 微信有一个bug，退出了小程序，audio标签的音乐还在播放，官方已经知道该问题，并未宣布什么时候修复。所以自己先通过监听页面隐藏时暂停音乐，展示时继续播放，解决一部分机型：

var hiddenProperty = 'hidden' in document ? 'hidden' :
    'webkitHidden' in document ? 'webkitHidden' :
      'mozHidden' in document ? 'mozHidden' :
        null;

  if (hiddenProperty) {
    var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    var onVisibilityChange = function () {
      if (document[hiddenProperty]) {
        !$bgAudio[0].paused && $bgAudio[0].pause()
      } else {
        $bgAudio[0].play()
      }
    }
  }
  document.addEventListener(visibilityChangeEvent, onVisibilityChange);

4. 说到audio标签，发现在webview中时，其autoplay配置并不生效。所以只能自己监听用户第一次点击屏幕事件，触发音乐播放：

 $('html').one('click', function (e) {
      $('audio')[0].play()
  })