关于uni-App webView 与 H5相互通信的问题

APP部分


H5部分(uni 打包的H5)

main.js中

import Vue from 'vue'
import webUni from '@/static/js/webview.js'
//此处用的是uni 提供的 https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js
//有重大bug 需要修改js 
Vue.prototype.$webUni=webUni

H5部分 (webview.js中)

关于uni-App webView 与 H5相互通信的问题_第1张图片
格式化后大约182行,
原代码 :var E = "undefined" != typeof uni ? uni: {};
修改为 :var E = "undefined" != typeof webUni ? webUni: {};
否则默认导出会找不到uni ,被框架覆盖!!!

对应页面中:

methods:{
    sendMessage:function(){
        this.$webUni.postMessage({
            data:{
                type:'swichTab',
                index:0,
                id:0,
                path:'/pages/tabbar/index'
            }
        })
    }
}

H5接收 app传递的消息

App.js中

methods: {
            ...mapMutations(['SET_TOKEN','SET_OPENID']),
            savaParams:function(params){
            //处理传递的信息
                let query=this.decodeParams(params)
                this.SET_TOKEN((query.token||''))
                this.SET_OPENID((query.openid||''))
            },
            getH5Message:function(e){//H5->H5
                let token='',openid=''
                if(e.data.token){
                    token=e.data.token
                    openid=e.data.openid
                }else if(e.currentTarget.location.search){//首次无法拿到,只有切换...等时,所以从url中获取
                    let result=e.currentTarget.location.search.split('?')[1]
                    result=result.split('&')
                    result.map(res=>{
                        let param=res.split('=')
                        if(param[0]==='token'){
                            token=param[1]
                        }else if(param[0]==='openid'){
                            openid=param[1]
                        }
                    })
                } 
            },
        },
onLaunch: function(options) {
            let that=this
            window.addEventListener("message", this.getH5Message, false)//H5->H5
            window.savaParams=that.savaParams//App->H5
            //window挂载的方法与 app evalJS()中方法名一致
        },

你可能感兴趣的:(关于uni-App webView 与 H5相互通信的问题)