uniapp打包H5与uniapp打包apk交互，实现扫码功能。

由于项目使用的某些依赖包是原生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>
	// 获取 module
	var 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格式，或其他方式获取base64
				uni.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交互，实现扫码功能。的全部内容，希望文章能够帮你解决uniapp打包H5与uniapp打包apk交互，实现扫码功能。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。