如何在uniapp中優雅地使用WebView

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

從webview頁面傳值到uniapp中

官方檔案已經很詳細了,這里給大家上我的實戰代碼，首先在webview頁面中引入相關依賴：

<!-- 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傳值：

  document.addEventListener('UniAppJSBridgeReady', function() {
    uni.postMessage({
      data: {
        action: 'message'
      }
    });

    uni.getEnv(function(res) {
        console.log('當前環境：' + JSON.stringify(res));
    });
  });

在uniapp中監聽message：

<template lang="pug">
  view
    web-view.webview(:src="https://www.cnblogs.com/smileZAZ/archive/2022/10/28/url" @message="getMessage")
</template>

<script>
  export default {
    data() {
      return {
        url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=https://www.cnblogs.com/smileZAZ/archive/2022/10/28/123",
      }
    },
    methods: {
      getMessage(event) {
        let data = https://www.cnblogs.com/smileZAZ/archive/2022/10/28/event.detail.data
        console.log(data);
      }
    }
  }
</script>

<style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
  width 750rpx
  height $webviewHeight
</style>

從uniapp中動態傳值到webview頁面

按照官方檔案，從uniapp傳值到webview中，只能通過query：

<template lang="pug">
  view
    <!-- #ifdef APP-PLUS -->
    web-view.webview(:src="https://www.cnblogs.com/smileZAZ/archive/2022/10/28/url")
    <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=https://www.cnblogs.com/smileZAZ/archive/2022/10/28/123",
      }
    }
  }
</script>

<style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
  width 750rpx
  height $webviewHeight
</style>

在webview中決議query：

let data = https://www.cnblogs.com/smileZAZ/archive/2022/10/28/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組件，

實作如下：

<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=https://www.cnblogs.com/smileZAZ/archive/2022/10/28/good');
      w.show();

      setTimeout(() => {
        plus.webview.close(w);
        setTimeout(() => {
          w = plus.webview.create(this.url + '?data=https://www.cnblogs.com/smileZAZ/archive/2022/10/28/123');
          w.show();
        }, 1000)
      }, 1000)
      // #endif
    }
  }
</script>

以上，通過plus.webview.create創建一個webview，然后顯示，如果資料更新了，可以先關閉之前的一個webview，然后重新創建一個，再顯示，

也可以直接使用open重繪頁面：

// #ifdef APP-PLUS
var w = plus.webview.open(this.url + '?data=https://www.cnblogs.com/smileZAZ/archive/2022/10/28/good');
setTimeout(() => {
    w = plus.webview.open(this.url + '?data=https://www.cnblogs.com/smileZAZ/archive/2022/10/28/123');
}, 1000)
// #endif

相關API：

// 創建視窗
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元素：

<template lang="pug">
  web-view(:src="https://www.cnblogs.com/smileZAZ/archive/2022/10/28/url" ref="wb")
</template>

在mounted生命周期的時候獲取此元素：

// #ifdef APP-PLUS
this.wb = this.$refs.wb
// #endif

在需要呼叫webview中方法的時候使用evalJs：

// #ifdef APP-PLUS
this.wb.evalJs(`showAlert(${this.num})`)
// #endif

在webview頁面定義對應的方法即可：

function showAlert(num) {
  alert(num)
}

從uniapp動態傳值，可以使用這種方式，

注意：

1. 在nvue中，只有通過ref暴露webview節點才能拿到webview本身

2. 注意evalJs的拼寫方式，官方檔案是evalJS，但通過ref獲取時，S應該為小寫

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：其他

上一篇：webgl(three.js)3D光伏,3D太陽能能源,3D智慧光伏、光伏發電、清潔能源三維可視化解決方案——第十六課

下一篇：javascript學習 - bind()方法及this指向問題