一文詳解如何在uniapp中優(yōu)雅地使用WebView
更新時(shí)間：2023年01月03日 10:59:29 作者：林恒smileZAZ
最近工作中遇到webview,對(duì)于我這個(gè)剛接觸前端的小白來說真的不懂啥意思,下面這篇文章主要給大家介紹了關(guān)于如何在uniapp中優(yōu)雅地使用WebView的相關(guān)資料,需要的朋友可以參考下
這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識(shí)，希望對(duì)大家有所幫助
從webview頁(yè)面?zhèn)髦档絬niapp中
官方文檔已經(jīng)很詳細(xì)了,這里給大家上我的實(shí)戰(zhàn)代碼，首先在webview頁(yè)面中引入相關(guān)依賴：
<!-- uniapp各平臺(tái)依賴 -->
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付寶小程序的 JS-SDK 防止 404 需要?jiǎng)討B(tài)加載，如果不需要兼容支付寶小程序，則無需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，則無需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 字節(jié)跳動(dòng)小程序 JS-SDK 如果不需要兼容字節(jié)跳動(dòng)小程序，則無需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，則無需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
}
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
然后通過uni.postMessage向uniapp傳值：
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
action: 'message'
}
});
uni.getEnv(function(res) {
console.log('當(dāng)前環(huán)境：' + JSON.stringify(res));
});
});在uniapp中監(jiān)聽message：
<template lang="pug">
view
web-view.webview(:src="url" @message="getMessage")
</template>
<script>
export default {
data() {
return {
url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",
}
},
methods: {
getMessage(event) {
let data = event.detail.data
console.log(data);
}
}
}
</script>
<style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
width 750rpx
height $webviewHeight
</style>從uniapp中動(dòng)態(tài)傳值到webview頁(yè)面
按照官方文檔，從uniapp傳值到webview中，只能通過query：
<template lang="pug">
view
<!-- #ifdef APP-PLUS -->
web-view.webview(:src="url")
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",
}
}
}
</script>
<style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
width 750rpx
height $webviewHeight
</style>
在webview中解析query：
let data = getQuery('data')
console.log(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;
}但是，我發(fā)現(xiàn)，通過向web-view的src中傳值，只能傳一次，如果參數(shù)改變了，沒法動(dòng)態(tài)傳到webview。
對(duì)于這種需要?jiǎng)討B(tài)傳遞參數(shù)的需求，我們可以使用動(dòng)態(tài)創(chuàng)建webview達(dá)到目的，而不是通過webview組件。
實(shí)現(xiàn)如下：
<template lang="pug">
view
</template>
<script>
export default {
data() {
return {
url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html",
}
},
mounted() {
// #ifdef APP-PLUS
var w = plus.webview.create(this.url + '?data=good');
w.show();
setTimeout(() => {
plus.webview.close(w);
setTimeout(() => {
w = plus.webview.create(this.url + '?data=123');
w.show();
}, 1000)
}, 1000)
// #endif
}
}
</script>以上，通過plus.webview.create創(chuàng)建一個(gè)webview，然后顯示。如果數(shù)據(jù)更新了，可以先關(guān)閉之前的一個(gè)webview，然后重新創(chuàng)建一個(gè)，再顯示。
也可以直接使用open刷新頁(yè)面：
// #ifdef APP-PLUS
var w = plus.webview.open(this.url + '?data=good');
setTimeout(() => {
w = plus.webview.open(this.url + '?data=123');
}, 1000)
// #endif相關(guān)API：
// 創(chuàng)建窗口 WebviewObject plus.webview.create( url, id, styles, extras ); // 創(chuàng)建并打開窗口 WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB ); // 顯示窗口 void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras ); // 隱藏窗口 void plus.webview.hide( id_wvobj, aniHide, duration, extras ); // 關(guān)閉窗口 void plus.webview.close( id_wvobj, aniClose, duration, extras );
調(diào)用webview中的方法
動(dòng)態(tài)傳值還有一種解決方案，就是通過evalJs方法直接調(diào)用webview中方法。
具體實(shí)現(xiàn)如下：
在模板中，通過ref暴露web-view元素：
<template lang="pug"> web-view(:src="url" ref="wb") </template>
在mounted生命周期的時(shí)候獲取此元素：
// #ifdef APP-PLUS this.wb = this.$refs.wb // #endif
在需要調(diào)用webview中方法的時(shí)候使用evalJs：
// #ifdef APP-PLUS
this.wb.evalJs(`showAlert(${this.num})`)
// #endif在webview頁(yè)面定義對(duì)應(yīng)的方法即可：
function showAlert(num) {
alert(num)
}從uniapp動(dòng)態(tài)傳值，可以使用這種方式。
注意：
在nvue中，只有通過ref暴露webview節(jié)點(diǎn)才能拿到webview本身
注意
evalJs的拼寫方式，官方文檔是evalJS，但通過ref獲取時(shí)，S應(yīng)該為小寫
總結(jié)
到此這篇關(guān)于如何在uniapp中優(yōu)雅地使用WebView的文章就介紹到這了,更多相關(guān)uniapp使用WebView內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript使用promise處理多重復(fù)請(qǐng)求
處理重復(fù)請(qǐng)求的文章想必大家也看過了很多，大多數(shù)都是分為在response返回之前發(fā)現(xiàn)重復(fù)請(qǐng)求就return掉的和使用節(jié)流/防抖來間接規(guī)避用戶頻繁操作兩種版本的。本文主要介紹了JavaScript使用promise處理多重復(fù)請(qǐng)求，感興趣的可以了解一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下拉刷新和輪播圖效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
下面小編就為大家?guī)硪黄猨s操作瀏覽器的參數(shù)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
JavaScript詞法作用域與調(diào)用對(duì)象深入理解
關(guān)于 Javascript 的函數(shù)作用域、調(diào)用對(duì)象和閉包之間的關(guān)系很微妙，關(guān)于它們的文章已經(jīng)有很多，本文做了一些總結(jié)，需要的朋友可以參考下2012-11-11
今天小編就為大家分享一篇layui使用label標(biāo)簽的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript生成不重復(fù)的隨機(jī)數(shù)
這篇文章主要介紹了javascript在指定范圍內(nèi)生成不重復(fù)的隨機(jī)數(shù)的方法和相關(guān)實(shí)例，有需要的小伙伴可以參考下。2015-07-07
JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問題解決方案
這篇文章主要介紹了JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問題解決方案,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JavaScript新窗口與子窗口之間的傳值,需要的朋友可以參考下2014-02-02
詳解如何用JavaScript編寫一個(gè)單元測(cè)試
測(cè)試代碼是確保代碼穩(wěn)定的第一步。能做到這一點(diǎn)的最佳方法之一就是使用單元測(cè)試。這篇文章主要介紹了如何用JavaScript編寫你的第一個(gè)單元測(cè)試，感興趣的可以了解一下2022-11-11
基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算),文章圍繞主題展開詳細(xì)的內(nèi)容介紹，感興趣的朋友可以參考與一下2022-06-06