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 源码

<code data-enlighter-language="html" class="EnlighterJSRAW"><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 下文件

<code data-enlighter-language="html" class="EnlighterJSRAW"><script src="<%= BASE_URL %>js/uni.webview.1.5.4.js"></script>

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

<code data-enlighter-language="generic" class="EnlighterJSRAW">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()
        }
}