小程序与h5

作者: js_hcl | 来源:发表于2019-01-24 12:18 被阅读9次
    ['feedList[' + (page - 1) + ']']: newVal,
    
    1. <web-view></web-view>

    一、小程序端

    <web-view src="{{url}}" 
              bindmessage="h5PostMsg" 
              bindload="h5Load" 
              binderror="h5Err">
    </web-view>
    
    //说明
    通过绑定url,可以实现动态web-view
    接收消息:
    "网页向小程序 postMessage 时
    会在特定时机(小程序后退、组件销毁、分享)触发并收到消息
    e.detail = { data }"
    实测:在h5对应的page销毁或分享时,可以获得消息
    并且,
    多条消息是一并获得
    

    要获得消息,如果是navigateTo因为不会销毁Page。所以接收不到消息,改为redirectTo即可
    文档地址

    二、h5端

    <!-- 首先引入  JSSDK 1.3.2  接口-->
    
    <script
        type="text/javascript"
        src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
    ></script>
    
    测试接口
    console.log("h5 网页加载成功")
    wx.miniProgram.postMessage({ data: 'this is data1' });
    wx.miniProgram.postMessage({ data:{foo: 'this is data2'} });
    wx.miniProgram.getEnv(function(res) {
        console.log(res) 
    })
    setTimeout(() => {
        //这边是重定向,如果是导航的化,自己页面不会销毁,则page页获取不到Msg
        wx.miniProgram.redirectTo({url: '/index/three'})
    }, 60000);
    
    1. h5开启调试
    2. 在模拟器界面,上通过右键 - 调试,打开 [<web-view>]组件的调试

    三、消息返回

    相关文章

      网友评论

        本文标题:小程序与h5

        本文链接:https://www.haomeiwen.com/subject/varyjqtx.html