Wizzer's Blog

Uniapp 权限设置

"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",

Uniapp Webview 源码

<template>
	<view>
		<web-view :webview-styles="webviewStyles" src="http://192.168.4.108:5001/h5/" @message="showMessage"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				qrCodeWv: null
			}
		},
		onReady() {
			// #ifdef APP-PLUS
			let currentWebview = this.$scope.$getAppWebview()
			setTimeout(() => {
				this.wv = currentWebview.children()[0]
				this.qrCodeWv = currentWebview.children()[0]
				this.wv.setStyle({scalable:true})
			},1000)
			// #endif
		},
		methods: {
			showMessage(event) {
				if(event.detail.data && event.detail.data.length >0){
					let dataInfo = event.detail.data[0]
					console.log(dataInfo)
					let type = dataInfo.type
					if(type==='scanCode') {
						this.startScanCode()
					}
				}
			},
			startScanCode() {
				const self = this 
				uni.scanCode({
					onlyFromCamera: false,
					scanType: ['qrCode'],
					success: function(res) {
						setTimeout(() => {
							const result = res.result.replace(/'/g,'"')
							self.qrCodeWv.evalJS(`appScanCodeResult('${result}')`)
						})
					},
					complete: function(args){
						console.log(args)
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

H5 Vue项目引入js

index.html 引入 public/js 下文件

<script src="<%= BASE_URL %>js/uni.webview.1.5.4.js"></script>

H5 main.js 定义回调方法和对象

window.appScanCodeResult = function (val) {
    window.appScanCodeResultString = val
    window.dispatchEvent(new CustomEvent("scanCodeResult"))
}

H5 Vue扫码页面代码

created() {
        this.getDetailData()
        window.addEventListener("scanCodeResult", this.handleAppScanCode, false)
        document.addEventListener("UniAppJSBridgeReady", function () {
            uni.getEnv(function (res) {
                console.log("获取当前环境:" + JSON.stringify(res))
            })
        })
    },
    onBeforeDestroy() {
        window.removeEventListener("scanCodeResult", this.handleAppScanCode)
    },
    methods: {
        handleAppScanCode() {
            const result = window.appScanCodeResultString
            this.onScanSuccess(result)
        },
        // 扫码
        saoCode() {
            uni.postMessage({
                data: {
                    type: "scanCode"
                }
            })
        },
        //扫码成功
        onScanSuccess(val) {
            this.tankCode = val
            this._getFillingTankInfo()
        }
}