APP part

<template> <view class="box"> <web-view :src="getRouter" ref="videoWebView" id="videoWebView" @message="handleMessage"></web-view> </view> </template> <script> import {mapGetters,mapMutations} from 'vuex' export default { data() { return { wv: null }; }, computed:{ ... mapGetters(['user','token','openid']), GetRouter: function () {let url = 'url = ` http://192.168.3.131:8001/ ` return url}}, the methods: {... MapMutations (['SET_INDEX']), handleMessage:function(e){let data= e.setail.data [0]}, H5Message :function(e){// let data=e.data.data if(data.name &&); // let data=e.data.data if(data.name &&) data.name==="postMessage"){ data=data.arg }else{ return } }, sendMessageH5:function(){ let that=this let params=that.encodeParams({token:that.token,openid:that.openid}) That.wv.evaljs (' savaParams("${params}") ') }}, OnShow :function(){let that=this if(that.wv){// Resend the message when the page is changed that.sendMessageH5()} // #ifdef H5 // The extension will communicate to H5 when the item is not for App if(document.getElementsByTagName("iframe")[0]){ let params={token:that.token,openid:that.openid} document.getElementsByTagName("iframe")[0].contentWindow.postMessage(params, "*"); } // #endif }, onReady:function(){ let that = this; // #ifdef H5 //H5 receives message method window.addEventListener("message", this.H5Message, false) // extension when not for APP is H5, To the webview communication if (document. GetElementsByTagName (" iframe ") [0]) {let that = this let params={token:that.token,openid:that.openid} document.getElementsByTagName("iframe")[0].contentWindow.postMessage(params, "*"); } var currentWebView = that.$scope.$getAppWebView () that.$nextTick(()=>{ that.wv = currentWebview.children()[0] that.sendMessageH5() }) // #endif }, onUnload:function(){ // #ifdef H5 window.removeEventListener("message", this.h5Message, false) // #endif } } </script>

Part H5 (UNI packaged H5)

In the main. Js

Import Vue from 'Vue' import webUni from '@/static/js/webview.js' // HTTP: / / https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js / / significant bugs need to modify the js Vue. Prototype. $webUni = webUni

Part H5 (in webview.js)



About 182 lines after formatting,

Var E = “undefined”! = typeof uni ? uni: {};

Var E = “undefined”! = typeof webUni ? webUni: {};

Otherwise, the default export will not find UNI and will be overwritten by the framework!!

Corresponding page:

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

H5 receives the message sent by APP

App. Js

methods: { ... mapMutations(['SET_TOKEN','SET_OPENID']), SavaParams: function (params) {/ / processing message let query = this. DecodeParams (params) enclosing SET_TOKEN ((query. The 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.c. with our fabrication: urrentTarget. Location. Search) {/ / for the first time can't get, only switch... Etc, so from the url for the let result = e.c. with our fabrication: urrentTarget. 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 mount method is the same as appevaljs ()},