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

更新時間：2024年01月09日 16:30:51 作者：會說法語的豬

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

前言

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

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

最終方案就是在uniapp中獲取那一大串兒json，然后傳遞到webview頁面進行渲染，然后提交表單的時候再通知webview頁面（Vue頁面）將表單json再傳遞給uniapp進行提交。所以就涉及到了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復制就可以。上面給webview標簽設置了update-title為false，它默認的是true，也就是默認webview嵌入進來上面的標題會跟隨webview的自動更新，就會覆蓋掉uniapp自身的標題，設置為false就不會覆蓋

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

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

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

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>

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

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

然后在monted里面監(jiān)聽UniAppJSBridgeReady方法，也就是Vue該頁面被嵌入到uniapp中的時候會觸發(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項目是hash模式路由參數(shù)就在window.lacation.hash中，如果不是就是window.location.search中，反正打印一下window.location就可以看到里面的信息了，再截取一下就OK了！

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

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

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

一般我在嵌入的時候，就會拿到當前的webview實例，供后面使用

uniapp代碼

// template代碼
<button @tap="submit" class="btn">啟動</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)用時，需要延時一下
  // #endif
},
methods: {
  //調(diào)用webview中的方法（注意getWebviewData一定是window上的方法，所以我們要在Vue頁面中將對應的方法掛載到window上）
  submit() {
    let obj = { name: 'wft' }
    //傳遞的參數(shù)如果是引用類型，就要JSON.stringify轉一下，否則報錯
    this.curWebview.evalJS(`getWebviewData(${JSON.stringify(obj)})`)
  }
}

webview代碼

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

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

三、webview向uniapp傳遞消息

這個還是需要引入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
    }
  }
})

這個就很方便了，但是要注意，一定是上面的寫法，上面寫法我們真正傳遞的數(shù)據(jù)是info，data這個對象是必須要寫的，官網(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
}

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

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

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