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

  • 相关阅读:
    completable 用法
    spring 纯注解方式 与AOP
    springIOC原理加载过程
    多线程手写Future模式
    springMVC 实现redis分布式锁
    java线程池学习
    本地跑 spark ui 报错
    九度oj 题目1452:搬寝室
    九度oj 题目1456:胜利大逃亡
    九度oj 题目1455:珍惜现在,感恩生活
  • 原文地址:https://www.cnblogs.com/zjhblogs/p/9896104.html
Copyright © 2011-2022 走看看