由于項目使用的某些依賴包是原生js，所以使用uniapp打包apk的時候會報錯，不曉得怎么去解決，所以就使用套殼的方法。準備兩個項目，一個不含原生js專門用來打apk（掃碼插件也打到里面，我用的是：華為ScanKit統一掃碼插件，支持連續掃描模式，安卓-IOS雙端 - DCloud 插件市場），另一個包含原生js，需要打包為H5。通過web-view標簽引入H5頁面。

1.打包apk部分的交互代碼。

<template><view><web-view ref="webview" @message="reciveMessage" src="這里放頁面地址"></web-view></view> </template><script>// 獲取 modulevar ScanModule = uni.requireNativePlugin("wss-scan")export default {data() {return {value: '',value2: '',value3: '',value4: '',img: '',}},mounted() {},methods: {reciveMessage(data) {console.log(JSON.stringify(data))this.scan(data.detail.data[0])},scan(v) {ScanModule.scan(v,(result) => {//ScanModule.stopScan();//ScanModule.showToast({'message':'掃描成功','duration':2000})var ret = result.scanValue;this.evalJss(ret)this.img = result.scanImage;if (ret.sKey) {switch (ret.sKey) {case "wss1":this.value2 = ret.sValue;break;case "wss2":this.value3 = ret.sValue;break;case "wss3":this.value4 = ret.sValue;break;}} else {this.value = ret;}})},photo() {//調用拍照后獲取圖片并轉成base64格式，或其他方式獲取base64uni.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['camera'],success: function(res) {pathToBase64(res.tempFilePaths[0]).then(base64 => {let obj = {"scanKey": "wss","scanMode": "Picture","scanBase64": base64};ScanModule.scan(obj,(result) => {console.log(result)})}).catch(error => {})}});},buildCode() {ScanModule.buildCode(this.scanObj4,(result) => {this.img = result.codeImage})},evalJss(ret) {const currentWebview = this.$scope.$getAppWebview().children()[0];let data = JSON.stringify(ret)currentWebview.evalJS("fdata(" + data + ")");}}} </script> <style> </style>

2.打包H5部分的交互代碼。

<template><view class="box"><button type="default" @click="ceshiFn(scanObj)">點擊開始掃碼1</button><button type="default" @click="ceshiFn(scanObj2)">點擊開始掃碼2</button><button type="default" @click="ceshiFn(scanObj3)">點擊開始掃碼3</button><button type="default" @click="ceshiFn(scanObj5)">連續掃碼</button><view>值：{{ values }}</view></view> </template><script>export default {data() {return {scanObj: {"scanType": ["QRCODE", "CODE93", "CODE128", "DATAMATRIX"],"scanMode": "Customized","scanStyle": {"scanFrameSizePlus": {"width": 300,"height": 150},"scanFrameSize": 100,"scanBgColor": "#1fffffff","scanText": "華為ScanKit掃碼","scanTitle": "掃一掃"},},scanObj2: {"scanType": ["QRCODE", "CODE93", "CODE128", "DATAMATRIX"],"scanKey": "wss1","scanMode": "Customized","scanStyle": {"scanFrameSize": 200,"scanText": "華為ScanKit掃碼","scanTitle": "掃一掃","scanPhoto": "invisible","scanCornerColor": "#ff0000","scanCornerLength": 20,"scanCornerWidth": 5,"scanLingDuration": 2000},"scanRequestImage": "1"},scanObj3: {"scanType": ["QRCODE", "CODE93", "CODE128", "DATAMATRIX"],"scanKey": "wss2",},scanObj4: {"scanKey": "wss3","scanMode": "MultiProcessor","scanStyle": {"scanTitle": "掃一掃","scanMultiTitle": "取消","scanMultiText": "掃描到多個碼，請選擇一個打開","scanPhoto": "visible","scanLight": "invisible"},},scanObj6: {"content": "測試","type": "QRCODE","width": 300,"height": 300,"margin": 1,"background": "#00ffff","color": "#000000"},scanObj5: {"scanType": ["QRCODE"],"scanMode": "Customized","scanStyle": {"scanFrameSize": 200,"scanText": "華為ScanKit掃碼","scanTitle": "掃一掃","scanPhoto": "invisible"},"scanContinuity": {"continue": "1","sleep": 2000}},values:''}},created() {window.fdata = this.fdata},methods: {ceshiFn(data) {this.uniWebview.postMessage({data: {obj: data,}})this.uniWebview.getEnv(function(res) {console.log('當前環境：' + JSON.stringify(res));});},fdata(e){this.values = e}}} </script><style> </style>

?最后補充一句，菜鳥前端一枚，不喜勿噴。

總結

以上是生活随笔為你收集整理的uniapp打包H5与uniapp打包apk交互，实现扫码功能。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。