uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動(dòng)態(tài)傳參代碼示例
概要
在使用uni-app開發(fā)app的過程中使用到公司其他項(xiàng)目h5的頁面,app項(xiàng)目中使用了web-view來進(jìn)行內(nèi)嵌,h5項(xiàng)目中核心功能是調(diào)用掃一掃進(jìn)行掃碼,由于h5本身基于微信開發(fā),可以直接調(diào)用 this.$wx.scanQRCode()實(shí)現(xiàn)掃一掃功能,但通過web-view嵌入app中,無法使用微信環(huán)境,導(dǎo)致直接調(diào)用攝像頭失敗,點(diǎn)擊沒有反應(yīng)。
思路
后面看到web-view可以跟應(yīng)用進(jìn)行交互,于是想到從這里入手應(yīng)該可以解決。h5調(diào)用app中的uni.scanCode(),拿到結(jié)果后回傳h5內(nèi),即實(shí)現(xiàn)了app內(nèi)嵌h5的掃碼需求。
代碼
1.因?yàn)閔5需要向app發(fā)送事件,所以需要引入對應(yīng)的webview.js文件。這是基礎(chǔ)。uniapp官方文檔下載uni.webview.1.5.4.js到本地,在h5項(xiàng)目的main.js中全局引入
h5的main.js
// #ifdef H5 // 引入uni.webview.1.5.4.js import '@/mixin/uni.webview.1.5.4.js'; // #endif
2.在h5頁面 methods調(diào)用uni.webView.postMessage向app傳參,mounted 里通過使用監(jiān)聽app中使用的evalJs()方法接收app傳過來的參數(shù),
h5的index.vue
mounted() { //document.addEventListener() 方法用于向文檔添加事件句柄,即事件監(jiān)聽。當(dāng)相應(yīng)的事件發(fā)生了,就執(zhí)行對應(yīng)的函數(shù)。 document.addEventListener("getAppMsg", (e) => { //webview接收uniapp傳過來的信息 console.log('getAppMsg', e.detail.code) }, false) }, methods: { testScan() { //h5向app傳參,觸發(fā)事件 uni.webView.postMessage({ data: { action: 'scanCode', } }) } }
3.app的內(nèi)嵌webview頁面中,在 的 message 事件回調(diào)event.detail.data中接收H5發(fā)送給App的信息;通過拿到webview的內(nèi)部對象,去調(diào)用系統(tǒng)的evalJS方法,傳入字符串,將該方法內(nèi)部的字符串在webview的H5中當(dāng)做js代碼去執(zhí)行。
app的scanCode.vue
//template <web-view :src="src" @message="message"></web-view> //script onLoad() { let height = 0; //定義動(dòng)態(tài)的高度變量 let statusbar = 0; // 動(dòng)態(tài)狀態(tài)欄高度 uni.getSystemInfo({ // 獲取當(dāng)前設(shè)備的具體信息 success: (sysinfo) => { statusbar = sysinfo.statusBarHeight + 55; height = sysinfo.windowHeight - 65; console.log("高度", statusbar, height) } }); // #ifdef APP-PLUS let currentWebview = this.$mp.page.$getAppWebview(); //獲取當(dāng)前web-view let that = this setTimeout(function() { that.wv = currentWebview.children()[0]; that.wv.setStyle({ //設(shè)置web-view距離頂部的距離以及自己的高度,單位為px top: statusbar, //此處是距離頂部的高度,應(yīng)該是你頁面的頭部 height: height, //webview的高度 }) }, 200); //如頁面初始化調(diào)用需要寫延遲 // #endif }, methods: { message(e) { //接收H5發(fā)送給app的消息 // e.detail.data即為H5中uni.webView.postMessage()的data的內(nèi)容 let mesg = e.detail.data[0] console.log("mesg", mesg) if (mesg.action == "scanCode") { // 允許從相機(jī)和相冊掃碼 uni.scanCode({ onlyFromCamera: true, //只允許通過相機(jī)掃碼 scanType: ['qrCode'], //調(diào)起條碼掃描 autoDecodeCharset: true, success: (res) => { console.log(`res=${res.result}`) //res.result為掃碼結(jié)果 this.wv.evalJS( "document.dispatchEvent(new CustomEvent('getAppMsg',{detail: {code:" +JSON.stringify(res.result) + "}}))" ) //通過evalJS(),傳入方法字符串,將該方法內(nèi)部的字符串在webview的H5中當(dāng)做js代碼去執(zhí)行。 //document.dispatchEvent()為創(chuàng)建自定義事件在h5中執(zhí)行 } }) } } }
至此,完成了app與h5之間的動(dòng)態(tài)傳參通信
總結(jié)
到此這篇關(guān)于uniapp APP中內(nèi)嵌webview的H5與APP相互通訊動(dòng)態(tài)傳參的文章就介紹到這了,更多相關(guān)uniapp APP中H5與APP動(dòng)態(tài)傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 將多個(gè)過濾器封裝到一個(gè)文件中的代碼詳解
這篇文章主要介紹了vue 將多個(gè)過濾器封裝到一個(gè)文件中實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-09-09vue安裝和使用scss及sass與scss的區(qū)別詳解
這篇文章主要介紹了vue安裝和使用教程,用了很久css預(yù)編譯器,但是一直不太清楚到底用的sass還是scss,直到有天被問住了有點(diǎn)尷尬,感興趣的朋友一起看看吧2018-10-10