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)過多方研究了解，最后決定使用webview嵌套H5的方式來實(shí)現(xiàn)，共耗時(shí)兩天半，以下為各種踩坑記錄，希望能幫到大家（看完整代碼直接拉到最后）。
一、技術(shù)準(zhǔn)備與實(shí)現(xiàn)方案
因?yàn)橹耙呀?jīng)寫好了相應(yīng)的上傳頁面與邏輯，在看了官網(wǎng)的webview示例后，就想著能夠直接使用之前的界面，不再單獨(dú)寫html（真不想寫T_T），正好項(xiàng)目（uniapp vue3+ts）是需要發(fā)布H5的，于是便開始探究如何自己調(diào)自己。下面為具體實(shí)現(xiàn)步驟(非最終代碼)：
1.1 將項(xiàng)目發(fā)布為H5可以外網(wǎng)訪問。
1.2 小程序中使用webview嵌入H5對(duì)應(yīng)界面。
有其他方式可以實(shí)現(xiàn)通信（wx有專門的postMessage），筆者這里直接將參數(shù)帶在url后面，再通過@message方法接收參數(shù)回調(diào)實(shí)現(xiàn)通信（實(shí)際上傳邏輯都在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個(gè)步驟就是小程序調(diào)自身H5的所有步驟了，但是，你以為實(shí)現(xiàn)了嗎，還有一堆問題等著解決呢。
二、問題處理
2.1 uni-webview.js的引入
筆者本以為在uniapp中就可以直接調(diào)用uni的方法，結(jié)果在調(diào)用uni.postMessage就會(huì)報(bào)錯(cuò):類型“Uni”上不存在屬性“postMessage”。ts(2339)
一番查看后發(fā)現(xiàn)uni確實(shí)沒有導(dǎo)出postMessage方法，再次看看文檔，發(fā)現(xiàn)需要引入uni-webview.js文件，但是在引入過后也依然不能調(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，這是筆者修改過的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是沒有的，所以本地運(yùn)行就可以，打包上線就沒效，根據(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í)沒了，但是上線小程序請(qǐng)求webview時(shí)，會(huì)報(bào)錯(cuò)無法訪問，但是開啟調(diào)試模式就可以訪問，大家肯定一眼就知道啥問題了吧。
沒錯(cuò)，就是沒配webview合法域名。所以登錄小程序管理平臺(tái)==>開發(fā)管理==>業(yè)務(wù)域名，添加webview合法域名就可以了。
添加不上可以查看詳情，需要下載授權(quán)文件放在H5根目錄，注意不是項(xiàng)目的根目錄，是打包發(fā)布在服務(wù)器的根目錄，要通過https://配置域名/授權(quá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訪問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)進(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ù)的話可以通過 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];
}
}當(dāng)有差異化功能時(shí)就可以通過微信sdk的接口進(jìn)行當(dāng)前是否小程序/公眾號(hào)的判斷，然后進(jìn)行webview新頁面的開發(fā)。
/ 判斷是否是小程序端
isMiniPrograms() {
var isMiniprogram = false;
// 判斷是否是小程序打開
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)文章
Vue中對(duì)iframe實(shí)現(xiàn)keep alive無刷新的方法
這篇文章主要介紹了Vue中對(duì)iframe實(shí)現(xiàn)keep alive無刷新的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue解決element-ui消息提示$message重疊問題
這篇文章主要為大家介紹了Vue解決element-ui消息提示$message重疊問題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
利用Vue與D3.js創(chuàng)建交互式數(shù)據(jù)可視化
在現(xiàn)代Web開發(fā)中,數(shù)據(jù)可視化是一個(gè)引人矚目的熱點(diǎn)領(lǐng)域,從簡(jiǎn)單的圖表到復(fù)雜的交互式儀表盤,數(shù)據(jù)可視化能夠幫助用戶更好地理解數(shù)據(jù),而Vue與D3.js的結(jié)合則為我們提供了構(gòu)建這些可視化效果的強(qiáng)大工具,本文將向您展示如何利用Vue與D3.js創(chuàng)建一個(gè)基本的交互式數(shù)據(jù)可視化項(xiàng)目2025-02-02
vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)
這篇文章主要介紹了vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出)
這篇文章主要介紹了vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
安裝@vue/cli 報(bào)錯(cuò)npm WARN deprecated request
這篇文章主要介紹了安裝@vue/cli 報(bào)錯(cuò)npm WARN deprecated request@2.88.2問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue指令之v-for的使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
element step組件在另一側(cè)加時(shí)間軸顯示
本文主要介紹了element step組件在另一側(cè)加時(shí)間軸顯示，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了Vue Steps步驟條渲染異常問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vueJs實(shí)現(xiàn)DOM加載完之后自動(dòng)下拉到底部的實(shí)例代碼
這篇文章主要介紹了vueJs實(shí)現(xiàn)DOM加載完成之后自動(dòng)下拉到底部的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08