小程序与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
    })
 }

你可能感兴趣的:(小程序,小程序,交互,javascript)