快捷導(dǎo)航

uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能

更新時(shí)間：2024年07月11日 11:13:30 作者：Motion_zq

微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進(jìn)行開(kāi)發(fā)實(shí)現(xiàn)需求,這篇文章主要給大家介紹了關(guān)于uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能的相關(guān)資料,需要的朋友可以參考下

直接上圖，注意事項(xiàng)是這里

官網(wǎng)鏈接: https://uniapp.dcloud.net.cn/component/web-view.html

傳遞方法的話好像只能通過(guò)url來(lái)傳，其它方式不支持，，，我這個(gè)參數(shù)沒(méi)做處理，用的話記得把參數(shù)做一下處理

也就是說(shuō)傳遞數(shù)據(jù)之后需要
uni.redirectTo({ url: '/pages/testFabric/index' }) 特定時(shí)機(jī)，當(dāng)然用其他的也行，比如uni.navigateBack()，但是在我這不好使。這樣vue中 @message="handlerMessage"才會(huì)觸發(fā)

下面是代碼

vue3 ts代碼 src就是項(xiàng)目啟動(dòng)的網(wǎng)絡(luò)地址，他必須要用網(wǎng)絡(luò)地址， scr后面拼接參數(shù)記得做處理，轉(zhuǎn)成json

<template>
  <view>
    <web-view
      src="http://xxxx:5173/src/static/fabric.html?iii=0"
      @message="handlerMessage"
      ref="webview"
    ></web-view>
    <view class="button">evalJs(改變webview背景顏色)</view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const webview = ref(null)
const handlerMessage = (e:any) => {
  console.log('快來(lái)---------')
  console.log('webview的', e)
  console.log('webview的webview', webview.value)
}
</script>
<style lang="scss" scoped>
.test {
  position: relative;
}
.button {
  position: absolute;
  top: 1200rpx;
  left: 0;
}
</style>

注意這里的script標(biāo)簽，需要引入

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn" id="btn">點(diǎn)擊</button>
    測(cè)試fabric 來(lái)一個(gè)window
  </body>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script
    type="text/javascript"
    src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"
  ></script>

  <script>
    const button = document.getElementsByClassName('btn')
    const button2 = document.querySelector('.btn')
    button2.addEventListener('click', () => {
      console.log('h5 click')
      uni.postMessage({
        data: {
          action: 'autoLogin'
        }
      })
      //   uni.navigateBack()

      //   可以跳轉(zhuǎn)
      uni.redirectTo({
        url: '/pages/testFabric/index'
      })

      uni.getEnv(function (res) {
        console.log('當(dāng)前環(huán)境：' + JSON.stringify(res))
      })
    })
  </script>
</html>

需要說(shuō)明一下的是你在html中寫console.log的時(shí)候，在微信小程序不觸發(fā)是正常的，不要想著用console.log去調(diào)試了，alert是可以用的

因?yàn)樾〕绦騼?nèi)嵌的是一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)是支持放大縮小的，但是沒(méi)有辦法規(guī)定死不讓他放大縮小，只能在mate標(biāo)簽上加點(diǎn)限制了

 <meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1, minimum-scale=1, user-scalable=no">

總結(jié)

到此這篇關(guān)于uniapp vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能的文章就介紹到這了,更多相關(guān)uniapp vue3 webview小程序雙向通訊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: