H5如何拉起微信扫一扫
扫一扫功能
项目开发中有很多场景需要拉起微信扫一扫，在这里主要记录下开发过程中遇到的一些问题，以及解决方案。仅供参考
拉起方法
官方的sdk文档关于使用方法写的很详细
http://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3
基本上对照官方文档的做法都能完成
问题记录
1.签名失效
2.首次加载签名失效，刷新正常
3.ios 首次进入签名正常，permission denied，刷新无效
问题解决方法及原因
首先说明H5项目开发的框架是VUE SPA单页面应用
1。 签名失效
– 首先利用js校验工具
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 去校验下签名是否正确
– 再确认页面url是否正确(location.href.split(‘#’)[0])，包括’http(s)://’部分，以及’？’后面的GET参数部分,但不包括’#’hash后面的部分
– appId是否正确，config 中的 appid 与用来获取 jsapi_ticket 的 appid
以上是签名失效的检查顺序，并且要确保项目开发的安全域名已经在公众号内配置。
我这里检查完都没有问题，最后发现是因为安全域名配置引起的。
因此当问题阻塞时，还是从头理清楚
2。spa单页面应用，服务端渲染index页面返回客户端，本地页面切换不存在服务端刷新，因此，在需要调起扫一扫的页面传递的url与服务端url不一致，当强制刷新页面时，服务端的url与当前页面一致，因此可以成功获取。
解决方法 再进入该页面后强制刷新一次（reload）
当然要要标记下首次进入才需要刷新，否则会造成很对不必要的刷新
3。ios的签名要在入口页获取，解决了签名失效的问题
其他
- 安卓在当前页面注入config，获取签名
- 如果需要在完成注入后立即调用函数需要放在we.ready()中，而用户操作后的行为不需要
- ios不存在需要在当前页刷新的问题（迷）
- 公众号切换确认是否配置安全域名，因为产线公众号只能配一个安全域名
推荐阅读
其他相关报错请移步：
http://blog.csdn.net/xc765926174/article/details/45227609
H5如何拉起微信扫一扫相关推荐
- 【H5唤起微信“扫一扫”】舒工自定义微信H5唤起扫码Vue组件sg-scan.vue（扫码按钮大概是在底部），注意只是代码片段，不含微信鉴权业务流程
<!--强哥的自定义组件:H5唤起微信"扫一扫"--> <template><div class="sg-scan" :up=&q ...
- UNI-APP 开发微信公众号（H5）JSSDK的使用、微信扫一扫
UNI-APP 开发微信公众号(H5)JSSDK的使用.微信扫一扫 自己做了一个h5端调起微信扫一扫的功能,上网一找,没有说得很详细的,依样画葫芦,结果出了很多问题.下面给大家讲一下做的方法,用这个方 ...
- uni-app微信H5微信扫一扫支持安卓跟苹果
下载微信JSSDK https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1 先登录微信公众平台进入&quo ...
- 微信公众号H5页面实现扫一扫功能
uniappH5实现扫一扫功能 最近遇到一个需求,H5页面使用扫码绑定设备功能,因为uniapp uni.scanCode API H5不支持,网上找了很多方案不合适,因为这个项目是在公众里面运行的, ...
- 微信H5网页调用扫一扫功能（vue）中遇到的问题
微信H5网页使用扫一扫时遇到的问题 首次进入界面调用失败 首次进入界面调用失败 问题:进入页面,点击扫一扫按钮调用微信扫一扫功能失效,但是刷新当前页调用就正常了 解决方法: // 使用扫一扫按钮的页面 ...
- h5中如何调起微信的扫一扫功能？
看到这个需求的时候有点懵,第一反应就是去找文档,最后在微信官方文档-公众号-微信网页开发中-js-sdk文档说明中找到了这个调起微信扫一扫接口的功能. 接下来记录下是如何实现的吧. 首先我们肯定是要引 ...
- uniapp——开发微信H5调用jweixin微信js-sdk(uniapp开发H5使用微信扫一扫功能)
小伙伴们,大家有没有开发过网页或者H5等等web页面时候遇到需要调用微信的jweixin.js的呢? 小编在开发过程中遇到了一个问题,因为我的项目是微信小程序内链的H5页面,所以当时我就使用uniap ...
- 公众号开发-移动端h5页面调用微信扫一扫
前言: 大家好,我是前端小陈.今天为大家讲一下微信公众号开发,调用微信的JSSDK的案例. 前不久,接到这么一个需求:在H5网页实现扫一扫功能. 要求:微信端以及浏览器均可以实现扫一扫功能,而且不能 ...
- 微信环境中h5调用微信扫一扫api
需求:支持微信公众号的h5页面内调用微信扫一扫api,实现产品的扫码签到功能 技术栈:vue, ts 参考资料:微信官方文档 步骤: 项目引入js 文件,有两种引入方式, 全局引入 全局引入,在全局h ...
最新文章
- kubernetes关键特性和概述
- Codeforces Round #712 Div.2（A ~ F） 超高质量题解（每日训练 Day.15 ）
- 微软MCITP系列课程（二七）管理域和林信任
- oracle 日结 数据量大,如何对一个oracle11gsql语
- Ubuntu下Qt中使用pcl库
- python对印刷的用途_用Python式的方法来印刷价值
- swift 2.1 安裝與下載
- java8之Stream API（提取子流和组合流）
- 怎么让某段css代码只在Chrome 火狐 edge 浏览器生效
- 按键精灵手机助手连接不上mumu模拟器问题解决办法
- python 校验邮箱格式、手机号格式
- Java是什么？Java到底能干嘛？
- 微信音频silk导出多个mp3，合并成一个mp3，压缩大小
- 一次安装IE11浏览器的经历
- 创建Silverlight Bussiness Application时报错的解决
- 导入数据库显示服务器发生意外,mysql 数据库无法启动（Ignoring the redo log due to missing M...
- el-date-picker修改为周类型日期插件时间格式是开始时间字段级和结束时间字段两个传参给后台
- git 删除分支和删除文件夹
- 苹果计算机如何改变错误文字,教你如何修改MAC系统默认文字
- dede织梦模板TAG静态化-按编号数字分页