app端,onPostMessage在nvue頁面下接受參數(shù)，message在vue頁面下接受參數(shù)
<web-view :src="mapUrl" webview-styles="progress:false;" @message="message" @onPostMessage="message"></web-view>
//接受網(wǎng)頁傳遞的信息
message(e){
console.log('來自網(wǎng)頁',e)
let data = e.detail.data[0];
},
鏈接后拼接傳參，只在一開始能傳
let obj = {
aa:'fsafsafsaf',
token: info.token,
bb:'bvvvvvvv'
};
console.log('收拾收拾',obj)
let fs = JSON.stringify(obj);
let params = encodeURIComponent(fs);
this.mapUrl = 'h5鏈接?jyy='+params;
方法傳參
data(){
return{
wv:null, // 定義(app)webview對象節(jié)點(diǎn)
}
}
onReady() {
// #ifdef APP-PLUS
//此對象相當(dāng)于html5plus里的plus.webview.currentWebview()。在uni-app里vue頁面直接使用plus.webview.currentWebview()無效
var currentWebview = this.$scope.$getAppWebview();
setTimeout(() => {
this.wv = currentWebview.children()[0]
}, 1000); //如果是頁面初始化調(diào)用時，需要延時一下
// #endif
},
methods:{
//向H5頁面發(fā)送消息
upH5Event(msg){
// console.log(this.wv,'this.wv');
msg = JSON.stringify({name:'山粉蟲水一雕',sdd:1561515})
this.wv.evalJS(`postJS(${msg})`);
},
}
H5端，我這是用vue2寫的
在index.html頁面加上這個
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
在首頁接受參數(shù)
let data = this.$route.query.jyy;//通過獲取鏈接地址拿參數(shù)
往APP傳參文章來源：http://www.zghlxwxcb.cn/news/detail-560154.html
uni.webView.postMessage({
data:{
name:'on no!!!!',
type:666
}
});
接受APP的方法傳參，變量跟data里面的變量綁定文章來源地址http://www.zghlxwxcb.cn/news/detail-560154.html
<script>
var conc;
//接收app傳遞來的數(shù)據(jù)
window.postJS = function(msg) {
let aaa = JSON.stringify(msg)
console.log('哈哈哈');
console.log(aaa);
conc.title =' 來自APP的你'
}
export default {
data() {
return {
aa:{title:'uni'}
}
},
created() {
conc= this.aa
},
}
</script>
到了這里，關(guān)于uniapp webview交互以及h5傳參到app的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
