欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文詳解如何在uniapp中優(yōu)雅地使用WebView

 更新時(shí)間：2023年01月03日 10:59:29   作者：林恒smileZAZ  
最近工作中遇到webview,對于我這個(gè)剛接觸前端的小白來說真的不懂啥意思,下面這篇文章主要給大家介紹了關(guān)于如何在uniapp中優(yōu)雅地使用WebView的相關(guān)資料,需要的朋友可以參考下

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

從webview頁面?zhèn)髦档絬niapp中

官方文檔已經(jīng)很詳細(xì)了,這里給大家上我的實(shí)戰(zhàn)代碼，首先在webview頁面中引入相關(guān)依賴：

<!-- uniapp各平臺依賴 -->
<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頁面

按照官方文檔，從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) {
        // 對參數(shù)值進(jìn)行解碼
        return decodeURIComponent(r[2]);
    }
    return null;
}

但是，我發(fā)現(xiàn)，通過向web-view的src中傳值，只能傳一次，如果參數(shù)改變了，沒法動(dòng)態(tài)傳到webview。

對于這種需要?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刷新頁面：

// #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ī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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論