uniapp 可以同時兼容 APP 和 H5，但有時候有些功能在 APP 中實現(xiàn)不了而在 H5 中可以實現(xiàn)，就可以采用 web-view 的方式在 APP 模式下顯示 H5 頁面。但是 APP 和 H5 儲存的參數(shù)是不能共享的，例如token，就涉及到 APP 與 H5 之間的參數(shù)傳遞。
H5 向 APP 傳參：引入 webview.js ，調(diào)用 uni.postMessage({})，如果提示uni.postMessage 不是function，就在 webview.js 里面將 uni 替換掉，如替換成 webUni；在使用webview的頁面通過 webview 上的 message 方法獲取H5傳遞過來的參數(shù)。代碼如下：

// H5 頁面部分代碼
import webUni from "@/common/js/webview.js" // 根據(jù)實際路徑引入webview.js
// 傳參數(shù)到app
webUni.postMessage({
	data: {
		name: '孫悟空',
	},
})

// APP 頁面部分代碼
<!-- #ifdef APP-PLUS -->
<web-view ref="webView" :src="webUrl" :webview-styles="{progress: {color: '#07cd88'}}" @message="handleMessage"></web-view>	
<!-- #endif -->
// app 獲取 H5傳遞過來的參數(shù)
handleMessage(data){
	console.log(data.detail.data[0].name, 'handleMessage')
}

APP 向 H5 傳參：可以將參數(shù)拼接到 webUrl 上，但是這種方法參數(shù)改變時 webUrl 如果存在就不太會自動更新參數(shù)，如果參數(shù)改變時修改webUrl的話頁面會重新加載；還有一種方法是通過create webview來創(chuàng)建 H5 頁面，但是這種方式不能使用 message 方法獲取 H5 傳過來的參數(shù)；2種方式代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-639797.html

// 1. 拼接參數(shù)方式
// APP 頁面部分代碼 
<!-- #ifdef APP-PLUS -->
<web-view ref="webView" :src="webUrl" :webview-styles="{progress: {color: '#07cd88'}}" @message="handleMessage"></web-view>	

// webUrl = "H5_url?token=" + token
<!-- #endif -->
// H5 獲取 app傳遞過來的參數(shù)
// 通過location.href 即可獲取

// 2. 創(chuàng)建webview方式，不能使用 message 方法
// APP 頁面部分代碼 
let wv = plus.webview.create(
	webUrl, // url
	'sipview', // id
	{
		// 這里是style
	},
	{
		token: token,
		name: '孫行者',
	}
)
const pages = getCurrentPages()
const page = pages[pages.length - 1]
const currentWebview = page.$getAppWebview()
currentWebview.append(wv)

// H5 獲取 app 傳遞過來的參數(shù)
getAppMsg(){
	if (window.plus) {
	    plusReady();
	}
	function plusReady() {
	    if (plus.webview.getWebviewById("sipview")) {
	        const token = plus.webview.getWebviewById("sipview").token
	        console.log(token)	
	    }
	}
},

到了這里，關(guān)于uniapp 開發(fā) APP 使用 web-view 引入H5 app與 h5 頁面通信的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！