小程序嵌入H5

小程序中web-view是一个web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面。所以，如果已经有H5了，想快速开发一个小程序，则可以采用此方法。（小程序采用的uni-app框架开发；以微信小程序为例）

以下列出我在开发小程序嵌入H5的步骤、注意事项等（小程序申请、添加开发者等步骤省略）:

注意点：

1. web-view的H5可以支持微信登录
2. web-view的支付，不支持网页支付；只可以采用小程序支付；微信小程序调查（本节重点）
3. 在小程序首页（/pages/index/index）添加web-view组件的话，小程序左上角将不会有返回按钮；所以，首页只能做个中转，需要一个存放web-view组件的页面。
4. 如果采用第 3 步的话，在web-view页面左滑或者点击返回将会回到首页；是无法左滑或者点击返回即退出小程序，我的解决方法：在首页做了个弹窗（如下），当从web-view返回时显示；点击确定按钮采用button组件open-type="exit"退出小程序，左滑返回也可退出小程序。
5. 小程序分享title，如果想在web-view页面中分享H5的页面title或者H5设置可以通过uni.postMessage；

步骤如下

在小程序后台配置业务域名（web-view）域名

小程序内嵌入H5支付

H5端

1. 引入uni-app的JSSDK；引入微信JSSDK；如果其他小程序则引入对应的jssdk；

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

2. 创建订单后，支付时跳转到小程序支付页面

uni.navigateTo({url: decodeURIComponent('H5的url')})

3. 支付成功后；先设置全局事件web-view要刷新的url，然后返回至web-view

uni.$emit('updateWeb', {
    url: decodeURIComponent('支付成功后跳转的url')
})
uni.navigateBack()

4. 环境判断：

const UA = navigator.userAgent
function isMiniWechat (UA) {
  return /miniProgram/i.test(UA) && /micromessenger/i.test(UA)
}
function isMiniTouTiao (UA) {
  return /toutiaomicroapp/i.test(UA)
}
function isMiniBaidu (UA) {
  return /swan/i.test(UA)
}

5. 小程序分享；可以在H5通过uni.postMessage设置分享；

uni.postMessage({
    data: {
      title: shareData.title,
      desc: shareData.desc,
      link: shareData。link,
      imgUrl: shareData.imgUrl
    }
})

小程序端

1. 进入小程序，先从首页跳转至web-view页面；首页设置字段来控制何情况下显示退出的弹窗；在onShow中判断这个字段进而显示弹窗;
2. 设置全局监听支付成功后的事件；

onLoad(data) {
    this.url = data && data.url || ''
    uni.$on('updateWeb', 处理的方法)
},
onUnload() {
    // 移除监听事件
    uni.$off('updateWeb')
},

3. 分享监听；web-viwe绑定事件@message="bindmessage"

bindmessage(e) {
  console.log('bindmessage', e)
  const data = e.detail.data || []
  if (data.length && data[data.length - 1].title) { // data[data.length - 1] H5端设置的分享信息
    this.shareTitle = data[data.length - 1].title
    this.shareUrl = data[data.length - 1].link
  }
}