[TOC] # 在uniapp中優雅地使用WebView ## 從webview頁面傳值到uniapp中 官方文檔已經很詳細了，首先在webview頁面中引入相關依賴： ```html <!-- uniapp各平臺依賴 --> <script type="text/javascript"> var userAgent = navigator.userAgent; if (userAgent.indexOf('AlipayClient') > -1) { // 支付寶小程序的 JS-SDK 防止 404 需要動態加載，如果不需要兼容支付寶小程序，則無需引用此 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)) { // 字節跳動小程序 JS-SDK 如果不需要兼容字節跳動小程序，則無需引用此 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傳值： ```js document.addEventListener('UniAppJSBridgeReady', function() { uni.postMessage({ data: { action: 'message' } }); uni.getEnv(function(res) { console.log('當前環境：' + JSON.stringify(res)); }); }); ``` 在uniapp中監聽message： ```vue <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中動態傳值到webview頁面 按照官方文檔，從uniapp傳值到webview中，只能通過query： ```vue <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： ```js let data = getQuery('data') console.log(data); // 獲取 uni-app 傳來的值 // 取url中的參數值 function getQuery(name) { // 正則：[找尋'&' + 'url參數名字' = '值' + '&']（'&'可以不存在） let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); let r = window.location.search.substr(1).match(reg); console.log(r); if(r != null) { // 對參數值進行解碼 return decodeURIComponent(r[2]); } return null; } ``` 但是，我們發現，通過向web-view的src中傳值，只能傳一次，如果參數改變了，沒法動態傳到webview。 對于這種需要動態傳遞參數的需求，我們可以使用動態創建webview達到目的，而不是通過webview組件。 實現如下： ```vue <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`創建一個webview，然后顯示。如果數據更新了，可以先關閉之前的一個webview，然后重新創建一個，再顯示。 也可以直接使用open刷新頁面： ```js // #ifdef APP-PLUS var w = plus.webview.open(this.url + '?data=good'); setTimeout(() => { w = plus.webview.open(this.url + '?data=123'); }, 1000) // #endif ``` 相關API： ```js // 創建窗口 WebviewObject plus.webview.create( url, id, styles, extras ); // 創建并打開窗口 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 ); // 關閉窗口 void plus.webview.close( id_wvobj, aniClose, duration, extras ); ``` ## 調用webview中的方法 動態傳值還有一種解決方案，就是通過`evalJs`方法直接調用webview中方法。 具體實現如下： 在模板中，通過ref暴露web-view元素： ```vue <template lang="pug"> web-view(:src="url" ref="wb") </template> ``` 在mounted生命周期的時候獲取此元素： ```js // #ifdef APP-PLUS this.wb = this.$refs.wb // #endif ``` 在需要調用webview中方法的時候使用`evalJs`： ```js // #ifdef APP-PLUS this.wb.evalJs(`showAlert(${this.num})`) // #endif ``` 在webview頁面定義對應的方法即可： ```js function showAlert(num) { alert(num) } ``` 從uniapp動態傳值，可以使用這種方式。 注意： 1. 在nvue中，只有通過ref暴露webview節點才能拿到webview本身 2. 注意`evalJs`的拼寫方式，官方文檔是`evalJS`，但通過ref獲取時，`S`應該為小寫 ## 參考資料 - [uniapp web-view](https://uniapp.dcloud.io/component/web-view) - [h5+ webview](https://www.html5plus.org/doc/zh_cn/webview.html) - [uniapp 窗體](https://uniapp.dcloud.io/api/window/window) - [uni-app中如何使用5+的原生界面控件（包括map、video、livepusher、barcode、nview）](https://ask.dcloud.net.cn/article/35036) - [在web-view加載的本地及遠程HTML中調用uni的API及網頁和vue頁面通訊](https://ask.dcloud.net.cn/article/35083) - [封裝一個簡單實用的 plusready 方法](https://ask.dcloud.net.cn/article/34922) - [plus.webview.create()創建的webview 怎么接受網頁發送的postMessage數據？](https://ask.dcloud.net.cn/question/93615)