首页 > 其他分享 >微信浏览器环境H5使用扫一扫功能

微信浏览器环境H5使用扫一扫功能

时间:2023-10-11 16:36:59浏览次数:45  
标签:浏览器 url 微信 扫一扫 H5 签名

一、需求:
1、微信浏览器环境H5使用扫一扫功能=>方案:引入wxjssdk,然后获取公众号的签名信息;再在config中配置;配置好了就能使用扫一扫api了
2、短信链接内部实现扫一扫功能=>方案:使用input accpet=“image/*”,读取图片区识别,识别二维码数据后发送给后台
|--> 由于手机浏览器兼容性问题,部分确实可以实现该功能,具体流程就是:获取手机摄像头权限,拿到数据流,数据流在canvas或者video中展示;视频逐帧扫描,扫到了就展示出来;

二、实现
需求1、微信浏览器公众号H5环境
1)线上文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#附录1-JS-SDK使用权限签名算法
文档里面讲的很详细了,大概就是:
前端工作:1、引入sdk cdn;把url.split('#')[0] 传给后端;
后端工作:2、后端拿到url,先获取token什么的进行缓存,再获取ticket;再把前端url进行签名算法;算好后把所需信息都返回给前端;
产品工作:3、把域名加入白名单,否则签名了也没有;
前端工作:4、把后端返回的签名数据配置到sdk中,然后获取scan权限,checkapi权限;成功后就能调用扫一扫api了;
2)主要代码图片

需求2、本地图片识别
1)引入插件,读取资源就行了;比较简单

标签:浏览器,url,微信,扫一扫,H5,签名
From: https://www.cnblogs.com/MrZhous/p/17757429.html

相关文章

  • 关于微信小程序VM22:2 (in promise) MiniProgramError {“errMsg“:“hideLoading:fai
    参考地址:https://blog.csdn.net/qq_41227106/article/details/108465104 出现错误的原因如下1、是微信小程序2、把请求接口统一封装,开始请求接口时showLoading,请求接口后hideLoading3、一个页面同时请求多个接口,由于请求是异步的,很有可能上一个开启了showLoading还没请求完......
  • PHP 微信v3 敏感信息解密
    protectedstaticfunctiongetDecrypt($encrypted){$private_key=config('wx.merchantPrivateKeyFilePath');//商户私钥如果是路劲,可以使用file_get_content来获取$pi_key=openssl_pkey_get_private($private_key);//这个函数可用来判断私钥是......
  • PHP 微信v3 敏感信息加密
    protectedstaticfunctiongetEncrypt($str){$public_key=config('wx.platformCertificateFilePath');//平台证书,如果是地址,可以使用file_get_content来获取内容$pu_key=openssl_pkey_get_public($public_key);//这个函数可用来判断公钥是否是可......
  • vconsole 前端调试神器,h5页面调试工具
    npminstallvconsole在需要的页面引入,并初始化<script> importVconsolefrom'vconsole'; exportdefault{ created(){ letvConsole=newVconsole(); } }</script>先安装vconsole组件,然后vue页面调用即可,注意一定要放在created方法里面。否则......
  • 微信小程序开发环境搭建
    浏览器打开https://mp.weixin.qq.com/ 立即注册,点击小程序    填写账号和密码 采用邮箱激活   用户主体           下载开发工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 安装之后,扫码,      ......
  • 低代码助力微信小程序对接,提升开发效率
    摘要:本文由葡萄城技术团队原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言微信小程序相信大家都用过,相较于APP,微信小程序的优势在于其便捷性,只需要下载一个微信就可以访问所有的小程序,因此许多开发者也逐渐将自己开发......
  • h5适配
    1.其他1.1常用字级单位:pxrempt百分比em等`1.2css媒介查询临界点(7个范围设置)html{font-size:10px}@mediascreenand(min-width:321px)and(max-width:375px){html{font-size:11px}}@mediascreenand(min-width:376px)and(max-width:414px){html{font-size:......
  • h5基础
    1.介绍1.1IPhone6的参数设备像素750*1334设备独立像素375*667屏幕分辨率750*1334ppi326一般设置的移动端最大和最小宽度min-width:320px;max-width:640px;1.2980布局视口980像素就是浏览器厂商设置的布局视口的初始宽度1.3数据共享的方法......
  • uniapp微信小程序设置动态高度为数据量高度
    我的需求是输入信息,然后点击查询按钮,有数据才就调用this.getSvheight函数来设置动态高度,没数据获取到类名的高度为0,我这里做了v-if判断没数据就不渲染这个标签了如果是订单列表那种直接请求列表数据可以在onReady页面进入的时候调用一次,或按照需求调用即可svHeight:0,list:[]......
  • 仿京细菜谱微信小程序源码/云开发菜谱微信小程序源码
        仿京细菜谱微信小程序源码,云开发菜谱微信小程序源码。京细菜谱是一个美食分享网站,提供优质的家常菜谱大全,仿京细菜谱小程序源码为喜欢美食的朋友提供了很多的美食烹饪教程,让您轻松学会做美食。对不同食材和地域的饮食做了不同的分类和详细的做菜方法,分类十分详细,八大菜......