快捷導(dǎo)航

uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參代碼示例

更新時間：2024年04月02日 09:16:58 作者：夕溯流光

最近外部公司的app要接入我司的uni H5項目,所以這篇文章主要給大家介紹了關(guān)于uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參的相關(guān)資料,需要的朋友可以參考下

概要

在使用uni-app開發(fā)app的過程中使用到公司其他項目h5的頁面，app項目中使用了web-view來進行內(nèi)嵌，h5項目中核心功能是調(diào)用掃一掃進行掃碼，由于h5本身基于微信開發(fā)，可以直接調(diào)用 this.$wx.scanQRCode(）實現(xiàn)掃一掃功能，但通過web-view嵌入app中，無法使用微信環(huán)境，導(dǎo)致直接調(diào)用攝像頭失敗，點擊沒有反應(yīng)。

思路

后面看到web-view可以跟應(yīng)用進行交互，于是想到從這里入手應(yīng)該可以解決。h5調(diào)用app中的uni.scanCode()，拿到結(jié)果后回傳h5內(nèi)，即實現(xiàn)了app內(nèi)嵌h5的掃碼需求。

代碼

1.因為h5需要向app發(fā)送事件，所以需要引入對應(yīng)的webview.js文件。這是基礎(chǔ)。uniapp官方文檔下載uni.webview.1.5.4.js到本地，在h5項目的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; //定義動態(tài)的高度變量
            let statusbar = 0; // 動態(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") {
                    // 允許從相機和相冊掃碼
                    uni.scanCode({
                        onlyFromCamera: true, //只允許通過相機掃碼
                        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之間的動態(tài)傳參通信

總結(jié)

到此這篇關(guān)于uniapp APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參的文章就介紹到這了,更多相關(guān)uniapp APP中H5與APP動態(tài)傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: