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>export default {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.typeif(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 下文件

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

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

window.appScanCodeResult = function (val) {    window.appScanCodeResultString = val    window.dispatchEvent(new CustomEvent("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再次封装基础组件文档

本文链接：https://www.kjpai.cn/news/2024-03-27/149277.html，文章来源：网络cs，作者：亙句，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！