小程序与H5网页的交互

web-view

web-view
基础库 1.6.4 开始支持，低版本需做兼容处理。

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效

src		        webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。	
bindmessage		网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次postMessage 的参数组成的数组	
bindload		网页加载成功时候触发此事件。e.detail = { src }	
binderror		网页加载失败的时候触发此事件。e.detail = { src }	

跳转网页并携带参数

<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com?id=123"></web-view>

网页跳转小程序并传递参数

网页像小程序传值的 有两种方式可以实现，一种是通过url和小程序的转发方法，将需要传给小程序的值当做参数放在当前url上，小程序中通过点击转发即可获取。这种方法缺点是只能在点击转发时才可传

onShareAppMessage: function (options) {
    let webViewUrl = options.webViewUrl;//web-view当前的网址
}

另外一种是通过使用微信sdk的postMessage方法，然后小程序web-viewd中的bindmessage方法会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 
// javascript
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })

<!-- wxml -->
<web-view src="http://a.html?id=123" bindmessage="postMessage"></web-view>
 
postMessage(e) {
    console.log(e)      // 接收参数
},

在网页里判断当前是否是微信环境

window.wx.ready(function () {
    isWxMini = window.__wxjs_environment === 'miniprogram'
})
// 若是微信环境跳到小程序支付，否则原生支付
if (isWxMini) {   
    let jumpUrl = encodeURIComponent(window.location)
    let path = `/page/pay/pay?amount=${amount}&title=${desc}&jumpUrl=${jumpUrl}`
    window.wx.miniProgram.navigateTo({
        url: path
    })
 }