zoukankan      html  css  js  c++  java
  • 小程序web-view wx.miniProgram.postMessage 坑记录


      web-view吧,其实微信官方应该是非常不支持在小程序上嵌套web的,它希望你直接用小程序上的代码,而放弃web的实现,当然,也是为了防止用小程序去嵌套别的广告页面。所以官方对web-view的操作是,它永远是界面的最上层及z-index最大,而且web-view只能全屏显示。从而,就可以在web-view之上嵌套任何控件,而官方提供web-view与网页之间的交互,只有src和bindmessage,同时还有一些跳转及在js中调用相关代码(wx.miniProgram.navigateTo、wx.miniProgram.navigateBack、wx.miniProgram.switchTab、wx.miniProgram.reLaunch、wx.miniProgram.redirectTo)让开发者可以从web-view的页面跳转到别的页面,还有一个获取当前环境的方法wx.miniProgram.getEnv(其实这个方法也只能用在小程序内,小程序外是无法执行的,所以其实也没有什么判断对错的操做)。

      可能更多人会把注意力放到bindmessage和上,按照文档上写的,Js可以通过wx.miniProgram.postMessage的方法,向小程序传递数据,小程序通过  <web-view src="{{report_src}}" bindmessage="bindGetMsg"></web-view> 然后通过bindGetMsg方法获取到到相关参数,但这是一个无底之坑,因为bindGetMsg这个方法只能在生命周期处于不可操着的状态也就是在onHide这个状态才会被调用,也就是这个不是实时监听的。做到这里就有点尴尬了,这样所谓的“分享”操作也无法实现了,但项目需要这样的操作怎么办,我的解决办法,也就跟以前微信打开网页的操作一样,在网页上提示点击右上角转发。这个也是做微信服务号得出的结果。

    转发兼容IOS方法:

    h5页面每次跳转页面 时 

    wx.miniProgram.postMessage()

    小程序分享

     1.wxml:

    <web-view src="{{src}}" bindmessage="bindmessage"></web-view>

    2.js:

    bindmessage:function(e){
        console.log("获取推送消息");
        console.log(e.detail)
        this.setData({
            history:e.detail.data[e.detail.data.length-1]
       })
    },
    
    onShareAppMessage: function (res) {
        return {
            title: '标题',
            path: this.data.history
        }
    }

    参考:https://blog.csdn.net/huangpb123/article/details/80588693

  • 相关阅读:
    js函数和变量的执行顺序【易错】
    JavaScript实现对象的深度克隆及typeof和instanceof【简洁】【分享】
    java数组与字符串相互转换、整型与字符串相互转换【详解】
    Math对象常用方法(取整细节)
    不使用临时变量互换两个变量的值
    python discover 函数介绍
    Appium+python 一个简单的登录测试实例
    IOS-优质应用推荐
    Appium+Python 自动化-appium常用元素定位方法
    Python+Selenium 自动化实现实例-单元测试报告
  • 原文地址:https://www.cnblogs.com/zjhblogs/p/9896104.html
Copyright © 2011-2022 走看看