当前位置:   article > 正文

h5公众号调取微信扫一扫功能,处处都是坑~_h5扫码 必须要公众号id 吗

h5扫码 必须要公众号id 吗

1、安装weixinsdk

npm install weixin-js-sdk

2、引入

import wx from "weixin-js-sdk";

3、点击扫一扫获取微信签名

  1. //点击扫一扫
  2. onScan() {
  3. this.getWxSign();
  4. },
  5. // 获取微信签名
  6. getWxSign() {
  7. let that = this;
  8. let signUrl = window.location.href.split("#")[0];
  9. if (window.signUrl !== undefined) {
  10. signUrl = window.signUrl;
  11. }
  12. let params = {
  13. url: encodeURIComponent(signUrl),
  14. // url: encodeURIComponent('https://octopus.zhangyukanghu.com/'),
  15. };
  16. getWxSign(params).then((res) => {
  17. if (res.code == 200) {
  18. wx.config({
  19. debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
  20. appId: res.data.appId, // 必填,公众号的唯一标识
  21. timestamp: parseFloat(res.data.timestamp), // 必填,生成签名的时间戳
  22. nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
  23. signature: res.data.sign, // 必填,签名
  24. jsApiList: ["checkJsApi", "scanQRCode", "chooseWXPay"], // 必填,需要使用的JS接口列表
  25. });
  26. // 通过ready接口处理成功验证
  27. wx.ready(function () {
  28. wx.checkJsApi({
  29. jsApiList: ["scanQRCode"],
  30. success: function (res1) {
  31. if (res1.checkResult.scanQRCode === true) {
  32. wx.scanQRCode({
  33. needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  34. scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
  35. success: function (res2) {
  36. var result = res2.resultStr; //当needResult 为 1 时,扫码返回的结果
  37. //需要加setTimeout,否则获取不到结果
  38. setTimeout(() => {
  39. if (result != "" && result != undefined) {
  40. //验卷接口
  41. that.scanCode(result);
  42. } else {
  43. alert("未扫描到卷码");
  44. }
  45. }, 500);
  46. },
  47. });
  48. } else {
  49. alert("当前登录环境不支持扫码,请切换微信环境");
  50. }
  51. },
  52. fail: function (e) {
  53. alert("当前登录环境不支持扫码,请切换微信环境");
  54. },
  55. });
  56. // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
  57. });
  58. // 通过error接口处理失败验证
  59. wx.error(function (res) {
  60. console.warn(res);
  61. // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
  62. });
  63. }
  64. });
  65. },
  66. scanCode(result) {
  67. let params = {
  68. couponsId: result,
  69. typeId: this.type,
  70. payAmount: 0,
  71. optId: this.userId,
  72. };
  73. API.getScan(params).then((res) => {
  74. if (res.code == 200) {
  75. Dialog.alert({
  76. title: "扫码成功",
  77. message: result,
  78. confirmButtonColor: "#3ab295",
  79. }).then(() => {
  80. // on close
  81. });
  82. this.getListData();
  83. } else {
  84. this.$notify({
  85. type: "error",
  86. duration: 2000,
  87. message: res.msg,
  88. });
  89. }
  90. });
  91. },

4.需要注意⚠️

        报错原因,从登陆页到扫一扫页面,路由跳转了,但是url地址没有变更,导致签名地址不一致,安卓机不报错,ios报错~

        解决方法:

                window.open(url,'_self');或者window.location.href=url;

        

 

 

        

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/274349
推荐阅读
相关标签
  

闽ICP备14008679号