uniapp與webview之間的相互傳值的實(shí)現(xiàn)
1.uni-app 如何發(fā)送數(shù)據(jù)到 H5? 其實(shí)很接單、在 web-view 中只需要通過 URL 就可以向 H5 進(jìn)行傳參 例如在 uni-app 中:
<template>
<view class="advertisement" style="width: 100%;">
<web-view :src="url" @message="message"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url:'/hybrid/html/local.html?data='
};
},
onLoad(data) {<br> //這里對(duì)要傳入到webview中的參數(shù)進(jìn)行encodeURIComponent編碼否則中文亂碼
this.url+=encodeURIComponent(data.data)
},
mounted() {},
methods: {
message(event){
console.log(event.detail.data);
}
}
};
</script>
<style scoped="scoped" lang="scss">
@import './advertisement.scss';
</style>
那么在 H5 中是如何接收值得呢?
console.log(getQuery('data')); //獲取 uni-app 傳來的值
//取url中的參數(shù)值
function getQuery(name) {
// 正則:[找尋'&' + 'url參數(shù)名字' = '值' + '&']('&'可以不存在)
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
console.log(r);
if(r != null) {
// 對(duì)參數(shù)值進(jìn)行解碼
return decodeURIComponent(r[2]);
}
return null;
}
2.webview向uniapp傳值
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
//向uniapp傳值
uni.postMessage({
data: {
action: 'message'
}
});
uni.getEnv(function(res) {
console.log('當(dāng)前環(huán)境:' + JSON.stringify(res));
});
});
</script>
uniapp接受
//message接受方法
<template>
<view class="advertisement" style="width: 100%;">
<web-view :src="url" @message="message"></web-view>
</view>
</template>
到此這篇關(guān)于uniapp與webview之間的相互傳值的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)uniapp與webview相互傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
原生JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名表
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01
使用javascript函數(shù)編寫簡(jiǎn)單銀行取錢存錢流程
本文通過實(shí)例代碼給大家講解了使用javascript函數(shù)編寫簡(jiǎn)單銀行取錢存錢流程,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-05-05
JavaScript位置參數(shù)實(shí)現(xiàn)原理及過程解析
這篇文章主要介紹了JavaScript位置參數(shù)實(shí)現(xiàn)原理及過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
JS動(dòng)態(tài)創(chuàng)建元素的兩種方法
這篇文章主要為大家詳細(xì)介紹了JS動(dòng)態(tài)創(chuàng)建元素的兩種方法,字符串拼接形式,或是使用Document、Element對(duì)象自帶的一些函數(shù) ,需要的朋友可以參考下2016-04-04
js prototype 格式化數(shù)字 By shawl.qiu
js prototype 格式化數(shù)字 By shawl.qiu...2007-04-04

