精华内容
下载资源
问答
  • uniapp H5扫码解决方案
    千次阅读
    2021-05-18 11:13:06

    通过webview来解决这个问题

    webView引入的代码案例

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <title>二维码扫描</title>
        <link rel="stylesheet" type="text/css" href="lib/my.css">
    </head>
    
    <body>
        <div>
            <div class="qr-btn" node-type="qr-btn">扫描二维码1
                <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
            </div>
        </div>
        <div>
            <div class="qr-btn" node-type="qr-btn">扫描二维码2
                <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码2" />
            </div>
        </div>
        <div class="result-qrcode">
        </div>
        <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
        <script src="lib/zepto.js"></script>
        <script src="lib/qrcode.lib.min.js"></script>
        <script src="lib/qrcode.js"></script>
        <script>
        //初始化扫描二维码按钮,传入自定义的 node-type 属性
        $(function() {
            Qrcode.init($('[node-type=qr-btn]'));
        });
        </script>
    </body>
    
    </html>
    
    

    qrcode.js webView 发送消息核心操作

    uni 是上面的html引入的uniapp的sdk

      oFReader.onload = function(oFREvent) {
                    qrcode.decode(oFREvent.target.result);
                    qrcode.callback = function(data) {
                        //得到扫码的结果
                        // $('.result-qrcode').append(data + '<br/>');
                        uni.postMessage({
                            data: {
                              action: data
                            }
                          });
                    };
                };
    

    uniapp页面监听消息操作

    <template>
    	<view class="content">
    		<!-- #ifdef H5 -->
    			<web-view  
    			src="http://192.168.1.21/"></web-view>
    		<!-- #endif -->
    	</view>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				title: 'Hello'
    			}
    		},
    		onLoad() {
    			
    		},
    		mounted() {
    			// #ifdef H5
    			window.addEventListener("message", receiveMessage, false);
    			function receiveMessage(event)
    			{
    			  // For Chrome, the origin property is in the event.originalEvent
    			  // object.
    			  // 这里不准确,chrome没有这个属性
    			  // var origin = event.origin || event.originalEvent.origin;
    			  var origin = event.data
    		console.log(origin);
    			
    			}
    			// #endif
    		},
    		methods: {
    
    		}
    	}
    </script>
    

    webView代码 地址

    更多相关内容
  • h5-scan扫码h5扫码模拟原生扫码功能
  • 包含jsQR.js和html5-qrcode.min.js 文件包,调用video识别二维码,不是上传图片那一套,注意一定要在https条件下运行
  • 亲自测试可用,获取摄像头授权并扫码解码(二维码)成功,需要的可以自己扩展
  • H5扫码特效,可以做二维码识别,银行卡识别,提交给接口
  • 微信H5扫码

    最近用uniapp开发h5 实现扫码功能 前端界面如图
    扫码
    首先打开uniapp官网,在uni-app官网上发现uni-app不支持H5扫码功能。失望ing在这里插入图片描述
    but 往官网下面看 有几行提示信息 惊喜ing
    在这里插入图片描述

    话不多说 上才艺

    步骤一:引入sdk
    这里有两种引入方式:
    1.按照文档的方法,下载js文件,直接引入到项目里

    2.通过npm安装

    npm install weixin-js-sdk --save
    // 按需引入
    import wx from 'weixin-js-sdk';
    

    步骤二:配置微信config信息

    // 最好是在onLoad中调用
      onLoad: function () { 
        this.getCofig();
      },
    
    methods: {
        // 配置信息
        getCofig() {
          const that = this;
          let url = '';
          let ua = navigator.userAgent.toLowerCase();
          url = window.location.href.split('#')[0]; //获取到的url是当前页面的域名
    
          // GetWeixinScan 后端提供配置信息
          uni.request({
            url: '/api/goods/wx/wx_jsapi_ticket', // 此处找后端要接口 微信不能使用端口访问端口改为 wx
            method: 'GET',
            data: {
              url: url // 当前页面的域名
            },
            success: (response) => {
              const res = response.data;
              console.log(res, 'resres')
              if (res) {
                that.wxConfig(
                  res.appId,
                  res.timestamp,
                  res.nonceStr,
                  res.signature
                );
              } else {
                alert('获取配置信息返回为空');
              }
            }
            , fail: error => {
              console.log(error, '请求获取微信配置失败 请求方法:http://xx.haileer.top:8901/wx_jsapi_ticket');
            }
          });
        },
        //wx.config的配置
        wxConfig(appId, timestamp, nonceStr, signature) {
          wx.config({
            debug: false, // 开启调试模式,
            appId: appId, // 必填,企业号的唯一标识
            timestamp: timestamp, // 必填,生成签名的时间戳
            nonceStr: nonceStr, // 必填,生成签名的随机串
            signature: signature, // 必填,签名
            jsApiList: ['scanQRCode', 'checkJsApi'], // 必填,需要使用的JS接口列表
          });
          wx.ready(() => {
            console.log('配置完成,扫码前准备完成')
          })
          wx.error(function (res) {
            alert('出错了:' + res.errMsg); //wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
          });
        },
       
    }
    
    

    步骤三:触发事件实现扫码功能

     // 点击扫码 区分普通扫码和H5扫码
        scan() {
          const that = this
          // #ifndef H5
          uni.scanCode({
            success: function (res) {
              console.log("进来了1")
              console.log('条码res:' + res);
              console.log('条码类型:' + res.scanType);
              console.log('条码内容:' + res.result);  
            },
            fail: error => {
              console.log("暂不支持1") 
            }
    
          });
          // #endif
          // #ifdef H5
          // this.log("暂不支持H5扫码 走onScan这个方法") 
          this.onScan()
          // #endif
        },
           // h5扫描二维码并解析  
        onScan() {
          const that = this; 
          wx.scanQRCode({
            needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
            scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
            success: function (res) { 
              var result = res.resultStr; // 当 needResult 为 1 时,扫码返回的结果
              var resultArr = result.split(','); // 扫描结果以逗号分割数组
              var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素,也就是最终的内容 
            },
            fail: function (response) {
              console.log("调用扫码失败")
              that.$toast(response);
              alert(' wx.scanQRCode失败')
            },
          });
    
        },
    

    注意事项
    在调用后端接口获取config信息的时候
    1.后端提供的接口 端口号使用wx代替
    2.传给后端的url参数,记得一定是网页域名 const url = location.href.split(‘#’)[0]
    3.可以提醒后端把jsapi_ticket的值也返回,便于在自行使用工具校验签名算法的时候输入
    4.可以提醒后端把timestamp把后三位数去掉,因为签名校验中的timestamp最多只能输入10位

    展开全文
  • Uniapp h5扫码功能

    2022-04-06 20:48:04
    展示扫码界面 开始扫码 //关闭扫码窗口 hideScanModal() { this.modalName = null; this.stop(); }, getCameras() { Html5Qrcode.getCameras() .then((devices) => { /** * ...

    使用到的组件https://github.com/mebjas/html5-qrcode/tree/master/examples/vuejsicon-default.png?t=M276https://github.com/mebjas/html5-qrcode/tree/master/examples/vuejs

    首先根目录下创建index.html,在其中引入js库

    <script src="https://unpkg.com/html5-qrcode"></script>

    其次在manifest.json中引入index.html

    "h5" : {
            "title" : "xxxx",
            "domain" : "",
            "router" : {
                "mode" : "history"
            },
    		// 这里引入html
    		 "template" : "index.html",
    		 "optimization" : {
    			 "treeShaking" : {
    				 "enable" : true
    			 }
    		 }
        }

     最后在页面中调用

    <button @click="getCameras" type="warn" class="margin-top" >扫一扫</button>

     展示扫码界面

            <view class="cu-modal" :class="modalName == 'scanModal' ? 'show' : ''">
    			<view class="cu-dialog">
    				<view class="cu-bar bg-white justify-end">
    					<view class="content">开始扫码</view>
    					<view class="action" @click="hideScanModal">
    						<view class="cuIcon-close text-red"></view>
    					</view>
    				</view>
    				<view class="padding-xl">
    					<scroll-view scroll-y class="page">
    						<div id="qr-reader" style="height: 250px;"></div>
    					</scroll-view>
    				</view>
    			</view>
    		</view>
                //关闭扫码窗口
                hideScanModal() {
    				this.modalName = null;
    				this.stop();
    			},
    			getCameras() {
    				Html5Qrcode.getCameras()
    					.then((devices) => {
    						/**
    						 * devices would be an array of objects of type:
    						 * { id: "id", label: "label" }
    						 */
    						if (devices && devices.length) {
    							if (devices.length > 1) {
    								this.cameraId = devices[1].id;
    							} else {
    								this.cameraId = devices[0].id;
    							}
    
    							console.log(this.cameraId, "cameraId");
    							this.start();
    							// .. use this to start scanning.
    						}
    					})
    					.catch((err) => {
    						// handle err
    					});
    			},
                //扫码成功
    			getCode(qrCodeMessage) {
    				console.log('qrCodeMessage', qrCodeMessage)
    				let dzbm = qrCodeMessage.split('?')[1].split('&')[0].split('=')[1]
    				console.log("dzbm,", dzbm)
    				this.modalName = null;
    				if (dzbm) {
    
    					
    
    				}
    				return
    				let codeId = getUrlParamFromUrl(qrCodeMessage, "id");
    				console.log(codeId);
    				if (codeId) {
    					this.$router.push({
    						path: "/home",
    						query: {
    							codeId: codeId
    						}
    					});
    				} else {
    					Dialog.confirm({
    							title: "提示",
    							message: "二维码错误,请重新扫码",
    						})
    						.then(() => {
    							this.start();
    						})
    						.catch(() => {
    							// on cancel
    						});
    				}
    			},
    			stop() {
    				this.html5QrCode
    					.stop()
    					.then((ignore) => {
    						// QR Code scanning is stopped.
    						console.log("QR Code scanning stopped.");
    						this.show = false;
    					})
    					.catch((err) => {
    						// Stop failed, handle it.
    						console.log("Unable to stop scanning.");
    					});
    			},
    			start() {
    				this.show = true;
    				this.modalName = 'scanModal'
    				this.html5QrCode = new Html5Qrcode("qr-reader");
    
    				this.html5QrCode
    					.start(
    						this.cameraId, // retreived in the previous step.
    						{
    							fps: 10, // sets the framerate to 10 frame per second
    							qrbox: 250, // sets only 250 X 250 region of viewfinder to
    							// scannable, rest shaded.
    						},
    						(qrCodeMessage) => {
    							// do something when code is read. For example:
    							if (qrCodeMessage) {
    								this.stop();
    								this.getCode(qrCodeMessage);
    							}
    						},
    						(errorMessage) => {
    							// parse error, ideally ignore it. For example:
    							console.log(`QR Code no longer in front of camera.`);
    						}
    					)
    					.catch((err) => {
    						// Start failed, handle it. For example,
    						console.log(`Unable to start scanning, error: ${err}`);
    					});
    			},

    展开全文
  • 前段时间公司要求做个H5扫码的功能,几番折腾,发现移动端的扫码兼容性有限。所以在开发H5扫码前各位要提前调研好。 H5 扫码实现主要用到浏览器的navigator.mediaDevices.getUserMedia 方法打开video录像一直重复...

    前段时间公司要求做个H5扫码的功能,几番折腾,发现移动端的扫码兼容性有限。所以在开发H5扫码前各位要提前调研好。

    H5 扫码实现主要用到浏览器的 navigator.mediaDevices.getUserMedia 方法打开video录像一直重复调用,每次生成一张canvas图片,再利用网上已有得库(我用的是jsQR)解析图片,获得二维码。

    该方法在浏览器的兼容性 https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

     因为是H5,所以国内用户很多会直接在微信里面打开。微信安卓端,基本都兼容。但是注意:微信ios端的话必须苹果系统是14.3才支持,所以大部分苹果用户都无法用。这就很痛苦了,因为我们公司也是不想太依赖微信,才打算开发的H5扫码,但我功能已经开发好了,当时没调研清楚,事后我吐了2斤的血。

    最后为了兼容到H5的用户,就做了个中转的扫码页面,通过判断微信还是H5用户调用不同的方法。

    在这里我就提供几个参考的库

    H5扫码的库 :https://gitee.com/mirrors/jsQR

    Vue Qrcode Reader :   https://gruhn.github.io/vue-qrcode-reader/

    本人🙈的代码链接: https://gitee.com/itemsye/qrcode-scan 

    展开全文
  • H5扫码功能实现

    千次阅读 2020-07-29 14:15:47
    H5扫码功能的实现 功能实现要用到H5+ 1.首先需要下载Hbuilder,然后创建H5+项目。再把自己的项目文件替换到新创建的项目里。项目要引入common.js 2.添加一个扫码按钮,给按钮添加点击事件 $(".Scan-three").on(...
  • uniapp H5 扫码 扫一扫 功能

    千次阅读 热门讨论 2021-05-25 09:30:39
    没想到用H5来实现扫码,也是第一次接触,由于项目是打包成H5 ,所以无法调用uniapp scanCode扫码API,在查阅其他前辈博客之后发现H5不是很好实现,最后决定以文件上传的形式来实现。 (效果为 拍照识别,相册照片...
  • uniapp实现H5扫码功能

    2021-10-09 15:29:38
    调用相机并结合qrcode.js解析二维码来实现 qrcode.js源码链接 <!-- html部分(简单的icon图标... <template> <view class="">...u-icon name="scan" size="100" @click="scanCode()">... // 引入qrcode.
  • 安卓,华为荣耀平板自带浏览器亲测H5页面调用摄像头扫码识别成功,测试项目源码完整下载。****注意电脑端浏览器不可用,请用IIS部署,用平板或者安卓手机测试。
  • vue基于H5+扫码demo演示 如何使用 1.Clone ,然后终端进入项目根目录。 2.打开Hbuilder,打开目录,将目录指向 /dist ,然后添加Hbuilder中manifest.json,真机usb连接运行。 3.真机依次点击1、2、3、4按钮查看演示...
  • 【uniapp】H5扫码方案,解决uni.scanCode不支持H5的问题

    千次阅读 多人点赞 2021-11-05 11:43:59
      在参考了前辈的文章后(在此特别感谢 uniapp H5扫码实现 提供的方案和灵感),本文的解决方案是:通过调用相机拍照,拍完进行二维码识别。 2. 效果 完整demo下载地址(希望花您两秒钟的时间点个 star,这将是我...
  • uniapp 微信公众号H5扫码功能

    千次阅读 2020-10-09 16:49:10
    uniapp 不支持H5扫码功能 所以需要调用微信的SDK https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2 第一步 先下载sdk文件,然后引入 index.js文件 也可以放在components方法里 ...
  • 微信H5扫码支付 java

    2020-07-08 16:42:20
    扫码支付带源码
  • Custom-scanCode-for-uni-app uni-app中h5+自定义二维码扫码界面
  • 支付宝支付h5扫码.rar

    2021-10-09 09:48:44
    支付宝支付h5扫码
  • 调出摄像头,拍照保存到画布,定时传送到解析函数 解析函数是后台c# .net MVC 实现的,解析函数用到的二维码解析API依赖于第三方二维码库google zxing , 因此需要先引用类库:zxing.dll、zxing.presentation.dll
  • HTML5+MUI实现手机app扫码功能
  • 阿里云钉钉应用python后端开发之安装调用钉钉H5扫码接口 调用钉钉H5扫码接口网页显示效果如下图所示, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name...
  • H5+ APP扫码测试完整版

    2021-04-24 10:02:13
    H5+ APP扫码测试完整版
  • 第三第四方支付源码修复版 H5扫码支付微信收款钱包 快捷支付 API聚合支付
  • 如下两行代码来实现其他扫码枪的扫码功能。 filter.addAction("android.intent.action.SCANRESULT");//监听扫描广播 指定广播地址 var result = intent.getStringExtra("value"); //返回结果 IData T1根据
  • 志汇-餐饮外卖小程序 zh_dianc 8.6 全开源版安装更新一体包.zip
  • H5界面通过js调android功能,项目中自带H5代码,
  • H5扫码解决-限https

    2021-08-20 17:05:13
    h5-scan(转载github) 移动端调用摄像头,扫描二维码(支持react和原生js) 封装jsQR,调用摄像头扫描获取二维码 测试地址:https://zyzcss.github.io/scan/scan.html 包含2个版本:react环境,原生js环境 源码...
  • 扫码页面 <template> <div class="scan"> <div class="nav"> <!-- <a class="close" @click="handleLast()"></a> --> <p class="title">扫一扫</p> </div&...
  • 微信扫码支付和H5支付demo,springboot工程,下载后修改application.properties中的微信支付参数,然后接启动项目;浏览器访问:http://localhost:8080/index.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,887
精华内容 3,554
关键字:

h5扫码