1.文檔背景：最近有朋友問我我的https://www.cnblogs.com/lizhao123/p/12005868.html這個webview傳值收不到（原因引入了另一個uniapp打包的h5）
2.實現方案
首先你要引入的另一個uniapp的h5,這個uniapp項目中需要引入官方的https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js
引入方式有兩種方式：1.在main.js中引入
import * as webview from '@/common/function/webview.1.5.3.js'
第二種引入方式：在根目錄下創建template.h5.html內容如下
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title> <%= htmlWebpackPlugin.options.title %> </title> <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /> </head> <body> <noscript> <strong>Please enable JavaScript to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> <script type="text/javascript" src="/common/function/webview.1.5.3.js"></script> <script> document.addEventListener('UniAppJSBridgeReady', function() { uni.webView.getEnv(function(res) { console.log('當前環境：' + JSON.stringify(res)); }); }); </script> </html>
並在manifest.json的源碼視圖中添加剛剛的html
"h5" : { "template" : "template.h5.html", }
這樣uniapp的h5項目就可以使用一些特定的api了如傳值到另一個APP中
uni.webView.getEnv(function(res) { console.log('當前環境：' + JSON.stringify(res)); }); uni.webView.postMessage({ data:{ action: 'message', aaa:'112121' } }) uni.webView.navigateBack()
二、APP的接收（記住這app不能運行到瀏覽器，需要真機運行才能接收到h5發送過來的值）原因：因為uniapp運行到瀏覽器是h5,你h5去引入另一個uniapp打包的h5，前者必須是app
//@message為接收的方法
<web-view :src="webView.src" @message="messageFn"></web-view>