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>// 获取 modulevar 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格式，或其他方式获取base64uni.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交互，实现扫码功能。相关推荐

uni-app实现扫码功能
调用uni-app的扫码 // 允许从相机和相册扫码 uni.scanCode({success: function (res) {console.log('条码类型:' + res.scanType ...
基于uniapp开发的SUPOIN(销邦) PDA使用广播扫码监听功能
广播扫码监听功能扫码方案摄像头激光封装组件手持 PDA 是 Android 平台,其扫码的解决方案也有摄像头和激光扫描等多种解决方案,这里结合 uni-app 的开发特性,记录一下具体的实现 ...
Uniapp实现扫码功能
写uniapp的时候会遇到扫码功能,下面是在项目中遇到的调试问题,再此记录 <button type="primary" @click="scan3"&g ...
vue3 + uniapp 实现PDA设备的扫码功能
vue3 + uniapp 实现PDA设备的扫码功能这里必须要用input 不然输入框不能再次聚焦!!!!!!!! 只有input 默认聚焦状态,扫码枪的数据才会默认填入input <inpu ...
微信扫码 android sdk,H5中js-sdk扫码功能，Android手机微信中无法调用扫码？
我的H5对接微信JS-SDK中的扫码功能,发现在Android手机微信中无法调用扫码功能,在苹果手机微信中可以使用. 报如下错误: errMsg:scanQRCode:permissi on deni ...
uniapp扫码功能兼容h5
checksaosao(){ //兼容h5的扫码页面/*#ifdef H5*/uni.$u.route(`/pages/my/saoma`)return;/*#endif*/uni.scanCode( ...
uniapp 实现PDA设备的扫码功能超级详细篇
1. 原理说明:项目中使用的是标准的扫码枪,标准的意思就是它都不给开发文档.走的标准"输入事件",和外接键盘是一样的.扫码枪扫描到的条形码每一位会触发一次onkeydown事件. ...
前端怎么从H5调起微信扫描二维码?小程序使用扫码功能.
小程序如何使用扫码的功能呢? wx.scanCode(Object object) 参数属性类型默认值必填说明最低版本 onlyFromCamera boolean false 否是否只 ...
h5打开手机扫码功能
转载至:http://div.io/topic/1562 1.解决的问题: 1.能够在微博客户端呼起摄像头扫描二维码并且解析; 2.能够在原生浏览器和微信客户端中扫描二维码并且解析; 2.优点: we ...
uniapp中H5网页和打包app分别生成二维码
一.h5网页中生成二维码业务引入"qrcodejs2.js":npm install qrcodejs2: <template><view><vie ...

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

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

最新文章

热门文章