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

uniapp微信小程序使用webview嵌套u(yù)niappH5并實(shí)現(xiàn)通信詳細(xì)步驟

 更新時(shí)間：2024年05月16日 09:15:49   作者：Hlu_xx  
在開(kāi)發(fā)微信小程序的時(shí)候,我們有時(shí)候會(huì)遇到將H5頁(yè)面嵌入到小程序頁(yè)面中的情況,這篇文章主要給大家介紹了關(guān)于uniapp微信小程序使用webview嵌套u(yù)niappH5并實(shí)現(xiàn)通信的詳細(xì)步驟,需要的朋友可以參考下

前言

公司業(yè)務(wù)需要實(shí)現(xiàn)微信小程序調(diào)起手機(jī)文件管理實(shí)現(xiàn)pdf上傳，但是微信不支持這種操作，使用wx.chooseMessageFile或者uni.chooseMessageFile，只能調(diào)起微信聊天框選擇文件，經(jīng)過(guò)多方研究了解，最后決定使用webview嵌套H5的方式來(lái)實(shí)現(xiàn)，共耗時(shí)兩天半，以下為各種踩坑記錄，希望能幫到大家（看完整代碼直接拉到最后）。

一、技術(shù)準(zhǔn)備與實(shí)現(xiàn)方案

因?yàn)橹耙呀?jīng)寫(xiě)好了相應(yīng)的上傳頁(yè)面與邏輯，在看了官網(wǎng)的webview示例后，就想著能夠直接使用之前的界面，不再單獨(dú)寫(xiě)html（真不想寫(xiě)T_T），正好項(xiàng)目（uniapp vue3+ts）是需要發(fā)布H5的，于是便開(kāi)始探究如何自己調(diào)自己。下面為具體實(shí)現(xiàn)步驟(非最終代碼)：

1.1 將項(xiàng)目發(fā)布為H5可以外網(wǎng)訪問(wèn)。

1.2 小程序中使用webview嵌入H5對(duì)應(yīng)界面。

有其他方式可以實(shí)現(xiàn)通信（wx有專門(mén)的postMessage），筆者這里直接將參數(shù)帶在url后面，再通過(guò)@message方法接收參數(shù)回調(diào)實(shí)現(xiàn)通信（實(shí)際上傳邏輯都在H5完成了，并沒(méi)有用到回調(diào)）

<template>
  <view class="box">
    <web-view :webview-styles="webviewStyles" :src=webViewUrl @message="getMessage"></web-view>
  </view>
</template>

const webViewUrl = ref<string>('');
//小程序向H5傳參帶在url后面
webViewUrl.value = `你的H5頁(yè)面具體訪問(wèn)路徑/webview-upload?data=${encodeURIComponent(JSON.stringify(testData))}`
//接收回調(diào)參數(shù)
const getMessage = (e: any) => {
  console.log(e, 'getMessage');
}

1.3 H5界面獲取參數(shù)。

onLoad(() => {
  //獲取地址欄傳參
  const paraString = window.location.href;
  const queryData = JSON.parse(decodeURIComponent(paraString.split("=")[1]));
  console.log(queryData, 'queryData');
})

1.4 H5回調(diào)傳參

uni.postMessage定義回調(diào)參數(shù)，uni.navigateBack銷毀界面觸發(fā)回調(diào)

const confirm = () => {
  console.log('confirm');
   uni.postMessage({
     data: {
       action: 'message'
     }
   });
   uni.navigateBack({
     delta: 1
   });
  }

以上4個(gè)步驟就是小程序調(diào)自身H5的所有步驟了，但是，你以為實(shí)現(xiàn)了嗎，還有一堆問(wèn)題等著解決呢。

二、問(wèn)題處理

2.1 uni-webview.js的引入

筆者本以為在uniapp中就可以直接調(diào)用uni的方法，結(jié)果在調(diào)用uni.postMessage就會(huì)報(bào)錯(cuò):類型“Uni”上不存在屬性“postMessage”。ts(2339)

報(bào)錯(cuò)

一番查看后發(fā)現(xiàn)uni確實(shí)沒(méi)有導(dǎo)出postMessage方法，再次看看文檔，發(fā)現(xiàn)需要引入uni-webview.js文件，但是在引入過(guò)后也依然不能調(diào)用，人麻了。

2.2 修改uni-webview.js源碼

花費(fèi)了不少時(shí)間，最后發(fā)現(xiàn)引入的uni-webview.js文件也導(dǎo)出了uni對(duì)象，會(huì)被uniapp本身的uni對(duì)象覆蓋，改源碼吧，把uni-webview.js下載到本地，全局搜一下uni，把定義的uni與導(dǎo)出的uni改為webUni，這是筆者修改過(guò)的uni.webview.1.5.5.js文件。
然后把文件放在本地（筆者放在了src/static/js下），在index.html文件中按官方文檔正常引入

<!-- 引入微信小程序兼容文件，官網(wǎng)上還有其他平臺(tái)的兼容文件，這里只用了微信小程序，所以就不判斷環(huán)境了 -->
	<script type="text/javascript">
      document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
    </script>
<!-- 需要把 uni.webview.1.5.5.js 下載到自己的服務(wù)器 -->
    <script type="text/javascript" src="./src/static/js/uni.webview.1.5.5.js"></script>

然后就可以使用postMessage了，1.4中的代碼就可以改為

const confirm = () => {
  webUni.log('confirm');
   webUni.postMessage({
     data: {
       action: 'message'
     }
   });
   webUni.navigateBack({
     delta: 1
   });
  }

2.3 ts類型報(bào)錯(cuò)

別急還有ts類型報(bào)錯(cuò)

筆者這里采用了一種最簡(jiǎn)單的辦法，在全局聲明一個(gè)名為 webUni 的未定義與初始化的變量，引入的uni-webview.js中的同名變量會(huì)覆蓋webUni ：

declare var webUni: any;
   webUni.postMessage({
     data: {
       action: 'message'
     }
   });
   webUni.navigateBack({
     delta: 1
   });
  }

2.4 打包警告

你以為完了嗎？打包警告了解一下

這個(gè)警告只在build的時(shí)候出現(xiàn)，dev是沒(méi)有的，所以本地運(yùn)行就可以，打包上線就沒(méi)效，根據(jù)提示查找后發(fā)現(xiàn)，使用了JS的模塊化，將type="text/javascript"替換type='module’屬性就能夠引入成功，解決報(bào)錯(cuò)。
所以2.2的引入代碼要改為

<!-- 需要把 uni.webview.1.5.5.js 下載到自己的服務(wù)器 -->
    <script type="module" src="./src/static/js/uni.webview.1.5.5.js"></script>

2.5 配置webview合法域名

總該完了吧，代碼層面確實(shí)沒(méi)了，但是上線小程序請(qǐng)求webview時(shí)，會(huì)報(bào)錯(cuò)無(wú)法訪問(wèn)，但是開(kāi)啟調(diào)試模式就可以訪問(wèn)，大家肯定一眼就知道啥問(wèn)題了吧。

沒(méi)錯(cuò)，就是沒(méi)配webview合法域名。所以登錄小程序管理平臺(tái)==>開(kāi)發(fā)管理==>業(yè)務(wù)域名，添加webview合法域名就可以了。
添加不上可以查看詳情，需要下載授權(quán)文件放在H5根目錄，注意不是項(xiàng)目的根目錄，是打包發(fā)布在服務(wù)器的根目錄，要通過(guò)https://配置域名/授權(quán)文件名， 這種方式能能接訪問(wèn)到授權(quán)文件，這樣就能添加上了。

三、最后所有代碼

1.index引入uni.webview.js

<!-- 引入微信小程序兼容文件，官網(wǎng)上還有其他平臺(tái)的兼容文件，這里只用了微信小程序，所以就不判斷環(huán)境了 -->
	<script type="text/javascript">
      document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
    </script>
<!-- 需要下載 uni.webview.1.5.5.js 并修改源碼,前面筆者有提供修改文件 -->
    <script type="module" src="./src/static/js/uni.webview.1.5.5.js"></script>

2.小程序使用webview訪問(wèn)H5并傳參，定義回調(diào)

<template>
  <view class="box">
    <web-view :webview-styles="webviewStyles" :src=webViewUrl @message="getMessage"></web-view>
  </view>
</template>

const webViewUrl = ref<string>('');
//小程序向H5傳參帶在url后面
webViewUrl.value = `你的H5頁(yè)面具體訪問(wèn)路徑/webview-upload?data=${encodeURIComponent(JSON.stringify(testData))}`
//接收回調(diào)參數(shù)
const getMessage = (e: any) => {
  console.log(e, 'getMessage');
}

3.H5獲取參數(shù) 并回調(diào)進(jìn)行通信

onLoad(() => {
  //獲取地址欄傳參
  const paraString = window.location.href;
  const queryData = JSON.parse(decodeURIComponent(paraString.split("=")[1]));
  console.log(queryData, 'queryData');
})

declare var webUni: any;
   webUni.postMessage({
     data: {
       action: 'message'
     }
   });
   webUni.navigateBack({
     delta: 1
   });
  }

真是一場(chǎng)酣暢淋漓的踩坑之旅T_T…

附：小程序和H5之間傳參

小程序和H5之間互相跳轉(zhuǎn)，我們?nèi)绻枰獋鬟f參數(shù)的話可以通過(guò) url 路徑拼接的方式來(lái)傳遞參數(shù)；

url:'/page/index?id=1'

參數(shù)傳遞之后，下面是參數(shù)的獲?。?br />1、微信小程序

onLoad:function(options){
	console.log(options)
}

2、H5

mounted(){
	let name = this.getQueryString('name')
	console.log(name )
},
methods:{
	//解析url獲取指定參數(shù)的值
	getQueryString(name)  {
	    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
	    const search = window.location.search.split('?')[1] || '';
	    const r = search.match(reg) || [];
	    return r[2];
   }
}

當(dāng)有差異化功能時(shí)就可以通過(guò)微信sdk的接口進(jìn)行當(dāng)前是否小程序/公眾號(hào)的判斷，然后進(jìn)行webview新頁(yè)面的開(kāi)發(fā)。

/ 判斷是否是小程序端
    isMiniPrograms() {
      var isMiniprogram = false;
      // 判斷是否是小程序打開(kāi)
      wx.miniProgram.getEnv(res => {
        console.log(res.miniprogram)
        if (res.miniprogram) {
          //在小程序中
          isMiniprogram = true;
        }
      });
      return isMiniprogram;
    }

總結(jié)

到此這篇關(guān)于uniapp微信小程序使用webview嵌套u(yù)niappH5并實(shí)現(xiàn)通信的文章就介紹到這了,更多相關(guān)webview嵌套u(yù)niappH5實(shí)現(xiàn)通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論