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

uniapp微信小程序使用webview嵌套uniappH5并實現(xiàn)通信詳細步驟

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

前言

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

一、技術準備與實現(xiàn)方案

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

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

1.2 小程序中使用webview嵌入H5對應界面。

有其他方式可以實現(xiàn)通信（wx有專門的postMessage），筆者這里直接將參數(shù)帶在url后面，再通過@message方法接收參數(shù)回調(diào)實現(xià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頁面具體訪問路徑/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個步驟就是小程序調(diào)自身H5的所有步驟了，但是，你以為實現(xiàn)了嗎，還有一堆問題等著解決呢。

二、問題處理

2.1 uni-webview.js的引入

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

報錯

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

2.2 修改uni-webview.js源碼

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

<!-- 引入微信小程序兼容文件，官網(wǎng)上還有其他平臺的兼容文件，這里只用了微信小程序，所以就不判斷環(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="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類型報錯

別急還有ts類型報錯

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

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

2.4 打包警告

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

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

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

2.5 配置webview合法域名

總該完了吧，代碼層面確實沒了，但是上線小程序請求webview時，會報錯無法訪問，但是開啟調(diào)試模式就可以訪問，大家肯定一眼就知道啥問題了吧。

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

三、最后所有代碼

1.index引入uni.webview.js

<!-- 引入微信小程序兼容文件，官網(wǎng)上還有其他平臺的兼容文件，這里只用了微信小程序，所以就不判斷環(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訪問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頁面具體訪問路徑/webview-upload?data=${encodeURIComponent(JSON.stringify(testData))}`
//接收回調(diào)參數(shù)
const getMessage = (e: any) => {
  console.log(e, 'getMessage');
}

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

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
   });
  }

真是一場酣暢淋漓的踩坑之旅T_T…

附：小程序和H5之間傳參

小程序和H5之間互相跳轉，我們?nèi)绻枰獋鬟f參數(shù)的話可以通過 url 路徑拼接的方式來傳遞參數(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];
   }
}

當有差異化功能時就可以通過微信sdk的接口進行當前是否小程序/公眾號的判斷，然后進行webview新頁面的開發(fā)。

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

總結

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

相關文章

最新評論