Vue H5项目，怎么引入uni.webview sdk，调用uni postMessage实现手机扫描功能

前言

目前公司Vue H5项目，用webview打包成APP，现产品提出这样打包出来的app运行较慢，需要用uniapp方式（即使用HBuilder编辑器来打包H5）来打包，那需要的基座就不是安卓的基座而是uniapp的基座，而H5项目实现手机扫描功能就需要调用uniapp的基座的方法。

具体步骤

一、Uniapp Webview 源码

<template><view><web-view:webview-styles="webviewStyles":src="src"@message="showMessage"></web-view></view></template><script>exportdefault{data(){return{webviewStyles:{progress:{color:'#FF3333'}},src:'http://******/',// H5项目地址qrCodeWv:null}},onReady(){// #ifdef APP-PLUSlet 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==='scan'){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>

二、H5 Vue项目引入js

1、在public新建js文件夹uni.webview.1.5.4.js文件，uni.webview.js 最新版地址

https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js

2、index.html 引入 public/js 下文件

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

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

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

4、Vue扫码页面代码

created(){
   window.addEventListener("scanCodeResult",this.handleAppScanCode,false)},onBeforeDestroy(){
   window.removeEventListener("scanCodeResult",this.handleAppScanCode)},methods:{handleAppScanCode(){const result = window.appScanCodeResultString
     console.log('扫码返回值---result',result)},// 点击扫码按钮saoCode(){
    uni.postMessage({data:{type:"scan"}})}}

相关文章

基于ElementUi再次封装基础组件文档

基于ant-design-vue再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档