快捷導(dǎo)航

uniapp使用webview嵌入vue頁面及通信實(shí)現(xiàn)方式

更新時(shí)間：2024年01月09日 16:30:51 作者：會(huì)說法語的豬

項(xiàng)目中有需要嵌入其他H5的頁面的業(yè)務(wù)需求,這篇文章主要給大家介紹了關(guān)于uniapp使用webview嵌入vue頁面及通信實(shí)現(xiàn)方式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

最近剛做的一個(gè)需求，web端（Vue）使用了FormMaking庫，F(xiàn)ormMaking是一個(gè)拖拉拽的動(dòng)態(tài)設(shè)計(jì)表單、快速開發(fā)的一個(gè)東西，拖拽完之后最終可以導(dǎo)出一個(gè)很長的json，然后通過json再進(jìn)行回顯，快速開發(fā)，但是因?yàn)镕ormMaking是基于Vue和ElementUI的，uniapp中不能直接使用，只能采用webview的方式進(jìn)行嵌入。就是把Vue項(xiàng)目中的要嵌入的頁面加入到白名單，也就是不需要登陸就可以訪問該頁面，直接將該頁面通過webview嵌入到uniapp中即可

本來想著是將uniapp中的token傳到webview頁面中，在要嵌入的webview頁面（Vue頁面）中去獲取json進(jìn)行渲染的，但是通過webview嵌入到uniapp中，在webview頁面去發(fā)請求會(huì)有問題，本來uniapp做的就少一些，更是第一次做webview，所以這兩天還是碰到不少坑。

最終方案就是在uniapp中獲取那一大串兒json，然后傳遞到webview頁面進(jìn)行渲染，然后提交表單的時(shí)候再通知webview頁面（Vue頁面）將表單json再傳遞給uniapp進(jìn)行提交。所以就涉及到了uniapp與webview之間的通信問題，接下來介紹：

1、uniapp中嵌入外部網(wǎng)頁：

<template>
  <view class="index">
    <web-view
      :update-title="false"
      :src="wvSrc"
    ></web-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      wvSrc: ""
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    this.wvSrc = `http://192.168.124.19:3000/#/index`;
    // #endif
  },
}
</script>
<style scoped>
.index {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

就是直接給src復(fù)制就可以。上面給webview標(biāo)簽設(shè)置了update-title為false，它默認(rèn)的是true，也就是默認(rèn)webview嵌入進(jìn)來上面的標(biāo)題會(huì)跟隨webview的自動(dòng)更新，就會(huì)覆蓋掉uniapp自身的標(biāo)題，設(shè)置為false就不會(huì)覆蓋

2、uniapp向webview頁面?zhèn)髦?/h2>

2.1. 先看第一種：通過路徑傳遞

就是在嵌入的時(shí)候就直接在后面拼接上參數(shù)，但是這個(gè)最好只傳遞字符串，因?yàn)閭鬟fjson對象的話在解析的時(shí)候可能會(huì)出問題，并不太推薦這種方式，如果只是一兩個(gè)簡短的字符串的話，還是可以的啦。

uniapp頁面?zhèn)鬟f：

let tk = 'test_token'
let id = 'pppppppiiiiiigggg'
let status = 'start'
this.wvSrc = `http://192.168.124.19:3000/#/index?params=${tk}WFT${id}WFT${status}`

webview頁面接受：

首先得先引入一下：

public/index.html

<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>

或者進(jìn)入瀏覽器輸入該地址，Ctrl + A, Ctrl + C, 復(fù)制粘貼到本地，然后引入本地也是可以的，但是引入的時(shí)候一定是 import uni from '你的路徑'

這樣我們?nèi)执蛴∫幌聈ni就會(huì)看到里面的方法：

然后在monted里面監(jiān)聽UniAppJSBridgeReady方法，也就是Vue該頁面被嵌入到uniapp中的時(shí)候會(huì)觸發(fā)，也就是可以使用uni的API了

mounted(){
  console.log(uni)
  // 待觸發(fā) `UniAppJSBridgeReady` 事件后，即可調(diào)用 uni 的 API。
  document.addEventListener('UniAppJSBridgeReady', () => {
    console.log('UniAppJSBridgeReady-->')
    const [tk, id, status] = this.getQuery('params', 'hash').split('WFT')
    console.log(tk, 'tk-->>')
    console.log(id, 'id-->>')
    console.log(status, 'status-->>')
  })
},
methods: {
  // 解析url傳遞的參數(shù)
  getQuery(name, type = 'search') {
    // const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
    // // const value = window.location.hash.substr(3).match(reg)
    // const value = window.location.search.substr(1).match(reg)
    // if (value) return decodeURIComponent(value[2])
    // return null
    
    // type取值 search | hash
    return window.location[type].split(`${name}=`)[1]
  }
}

如果你的Vue項(xiàng)目是hash模式路由參數(shù)就在window.lacation.hash中，如果不是就是window.location.search中，反正打印一下window.location就可以看到里面的信息了，再截取一下就OK了！

2.2. 第二種：通過調(diào)用當(dāng)前的webview實(shí)例的evalJS方法

通過evalJS為這個(gè)子webview注入一段js。執(zhí)行內(nèi)部的邏輯

還有一點(diǎn)，webview優(yōu)先級很高，并且默認(rèn)都是全部覆蓋app的，而且直接對其修改樣式也是不起作用的，通過當(dāng)前的webview實(shí)例對象也可以對其修改樣式

一般我在嵌入的時(shí)候，就會(huì)拿到當(dāng)前的webview實(shí)例，供后面使用

uniapp代碼

// template代碼
<button @tap="submit" class="btn">啟動(dòng)</button>

//script代碼
onLoad() {
  // #ifdef APP-PLUS
  this.wvSrc = `http://192.168.124.19:3000/#/index`
  setTimeout(() => {
    this.curWebview = this.$scope.$getAppWebview().children()[0]
    this.curWebview.setStyle({ height: '75%', scalable:true }) // scalable是否開啟雙指縮放
  }, 500) //如果是頁面初始化調(diào)用時(shí)，需要延時(shí)一下
  // #endif
},
methods: {
  //調(diào)用webview中的方法（注意getWebviewData一定是window上的方法，所以我們要在Vue頁面中將對應(yīng)的方法掛載到window上）
  submit() {
    let obj = { name: 'wft' }
    //傳遞的參數(shù)如果是引用類型，就要JSON.stringify轉(zhuǎn)一下，否則報(bào)錯(cuò)
    this.curWebview.evalJS(`getWebviewData(${JSON.stringify(obj)})`)
  }
}

webview代碼

<script>
export default {
  created() {
    window.getWebviewData = this.getData
  },
  methods: {
    //我們傳遞過來的是通過JSON.stringify轉(zhuǎn)過的，但是到這兒之后直接轉(zhuǎn)過來了，不需要我們再轉(zhuǎn)通過JSON.parse轉(zhuǎn)一下了，直接可以用
    getData(obj) {
      console.log(obj.name) // wft
    }
  }
}
</script>

這種方式傳遞參數(shù)還是很方便的，我這里方法名寫的getData，是因?yàn)槲业臉I(yè)務(wù)里，在點(diǎn)擊按鈕的時(shí)候要拿到webview中的數(shù)據(jù)，這樣我調(diào)用webview頁面的getData方法，獲取到數(shù)據(jù)然后再通過uni.postMessage傳遞到uniapp就可以了，也是我接下來要介紹的，webview頁面向uniapp傳遞

三、webview向uniapp傳遞消息

這個(gè)還是需要引入uni中的api，上面也有介紹

<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>

通過uni.postMessage傳遞

uni.postMessage({
  data: {
    info: {
      name: 'wft',
      age: 18
    }
  }
})

這個(gè)就很方便了，但是要注意，一定是上面的寫法，上面寫法我們真正傳遞的數(shù)據(jù)是info，data這個(gè)對象是必須要寫的，官網(wǎng)也有寫https://uniapp.dcloud.net.cn/component/web-view.html#web-view

然后在uniapp中監(jiān)聽

//template代碼
<web-view :update-title="false" :src="wvSrc" @message="handlerMessage"></web-view>

//script代碼
// 接受提交參數(shù)
handlerMessage(event) {
  let { info } = event.detail.data[0]
  console.log(info.name, 'info>>') // wft
  console.log(info.age, 'info>>') // 18
}

就是這么接收的，很方便。

有一點(diǎn)細(xì)節(jié)需要注意一下，就是上面代碼中我有使用了 // #ifdef APP-PLUS 和 // #endif

這個(gè)是判斷當(dāng)前是不是運(yùn)行在app中的，因?yàn)閡niapp平時(shí)開發(fā)調(diào)試可以運(yùn)行在真機(jī)上也可以運(yùn)行在瀏覽器上的，如果不加 // #ifdef APP-PLUS 和 // #endif 那么運(yùn)行在瀏覽器上的時(shí)候就會(huì)報(bào)錯(cuò)了，因?yàn)闉g覽器上是沒有this.$scope ，并不用說上面拿webview實(shí)例this.$scope.$getAppWebview().children()[0]了，這樣可以確保只在運(yùn)行在真機(jī)上的時(shí)候才會(huì)用那些api。條件編譯處理多端差異，這是官網(wǎng)，大家有興趣可以去瞅瞅