Vue 调用微信扫一扫功能

这个功能呢就是公众号里面埋一个网页,有个功能扫一扫,调用微信的js-sdk来弄;

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 官方文档

第一步绑定域名,就是你在公众号登录之后要设置域名,还有白名单,这个喊后端去弄,前端又不晓得哪些是白名单,域名是好多

第二部:安装js-sdk的包(用npm 或yarn安装npm install weixin-js-sdk --save)

第三部:配置wx.config

这个里面需要的东西全部由后端给你,你只需要去掉后端给你的接口,它的接口会返回wx.config里面需要的字段,(你只需要传递url参数就行了)

切记是去掉#及#后的url

let url = location.href.split("#")[0];

mounted()里面去掉,配置成功就会打印成功,可以吧debug:true调试模式打开,ok才是对的报错就会更好找

页面上有

点击就调用扫码功能

ok

***************************************************************************************************************************************************************************************************

***************************************************************************************************************************************************************************************************

搬砖中遇到的问题

{"errMsg":"checkJsApi:ok","checkResult":"{}"}

传了去#及后面参数的url,然后配置wx.config 就报这个错

这个错误既然在报checkJsApi:ok 那我就把它注释掉(这个就是你要用到的微信的功能扫一扫等,如用其他记得写进来)

去掉之后报这个错,无效的签名

无效的签名,https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

通过自己提交参数然后生成签名 看跟后端返回的签名是否一致

这个jsapi_ticket 参数后端给我

AccessToken、jsapi_ticket  微信公众号的这两个东西 一般是前端获取还是后端获取啊-------》后端获取

开发公总号 要绑定成为开发者

开发共总好首先肯定是授权,授权了才能拿到用户信息,如果已授权直接跳到首页,如打开开票工具(配置的地址不是我前端的首页地址,而是后端配置的地址

那个菜单配的地址是http://******wz.cn/htweb/index,它会去调微信授权哪个接口,如果没有就会弹出授权页面,点击确定授权之后重新向到前端的首页,如果已授权则直接跳前端的首页,然后---》进行业务操作)

扫码测试就用

草料二维码--去生成二维码测试

原文地址:https://www.cnblogs.com/myfirstboke/p/11208092.html

时间: 2024-07-28 16:53:32

Vue 调用微信扫一扫功能的相关文章

vue 调用微信分享 遇到的问题

关于微信分享网上有一堆的教程,就不详细说了,大致如下: 1.安装 cnpm install weixin-js-sdk --save-dev 2.新建一个share.js,与main.js放在同一层级(我只是偷懒,方便调用) import wx from 'weixin-js-sdk' exports.install = function (Vue, options) { Vue.prototype.shareList = function (imgUrl, link, desc, title)

微信JS-SDK使用步骤(以微信扫一扫为例)

概述: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. JSSDK使用步骤: 1.先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口

asp.net mvc 如何调用微信jssdk接口:分享到微信朋友(圈)| 分享到qq空间

如何在asp.net mvc 项目里, 调用微信jssdk接口,现实功能: 分享到微信朋友(圈)| 分享到qq空间 1 创建一个Action,准备一些数据,初始化数据(签名): /// <summary> /// 分享的内容 /// 必须写在html的head里面才可以生效 /// </summary> /// <param name="fxUrl"></param> /// <returns></returns>

调用微信扫一扫功能,踩坑&#39;invalid signature&#39;

在vue项目中,调用微信扫一扫功能,在安卓系统下完全正常,ios系统下却报错'invalid signature'的错误,这可能令许多小伙伴困惑,经过查询大量博客相关资料,才找到了解决的方法. 原因:由于在ios和android中,location.href在spa页面的机制不同(不同在于ios是只要不刷新页面,href就不会改变,在vue项目中就会出现类型的问题),所以我们需要借助路由钩子函数,手动改变其页面的url地址,这样ios系统的手机才能正常调起微信扫一扫. beforeRouteEn

微信公众号开发纪要(4)-调用微信扫一扫功能

在微信公众号页面中调用微信扫一扫功能,就是调用微信JS-SDK.让JS-SDK完成调用摄像头扫描,然后我们将扫描结果进行业务操作.微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验.如何调用微信JS-SDK,在微信公众平台技术文档中的微信网页开发-->微信JS-SDK说明文档中有详细

最全面的调用微信的扫一扫功能(java 排坑版)

最近碰到了这么一个需求,说是在前端页面调用手机本地的相机,扫描二维码这么一个需求,对于我一个后端来说, 这实在是难,难于上青天,但是决不能说一个不字.我说可以使用微信的扫码工具吗,这样可以方便一点,...(起码有个思路) 看着微信文档,一步一步坑下去.不对,是走下去. 这里我们用测试是公众号,方便测试. 首先配置自己的appID和appsecret,这里的测试帐号直接就给出了 第二步: 验证服务器,这个很简单,按照文档的规则验证就好了 第三步: 直接使用二级域名,不能添加http://前缀,或者

asp微信扫一扫代码,用asp写的实现调用微信扫一扫功能

最近一个客户要求想在他的微信会员卡系统中实现调用微信扫一扫功能,扫描他的会员卡上的条形码,读出会员卡号来,研究了一会,发现并不难,下面上代码: <div id="result"></div><button id="wxscan">调起扫一扫功能</button> <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"><

.Net微信网页开发之使用微信JS-SDK调用微信扫一扫功能

前言: 之前有个项目需要调用微信扫描二维码的功能,通过调用微信扫码二维码功能,然后去获取到系统中生成的二维码信息.正好微信JS-SDK提供了调用微信扫一扫的功能接口,下面让我们来看看是如何实现的吧. 第一步.微信JS-SDK的使用步骤,配置信息的生成获取讲解: 关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token(接口调用凭据)生成获取的详细说明在这里:https://www.cnblogs.com/Can-d

asp.net调用微信扫一扫功能

1.页面引用http://res.wx.qq.com/open/js/jweixin-1.0.0.js 2.前台代码 function shaomiao() { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印. appId: '', // 必填,公众号的唯一标识 timestamp: '<%=time %>', // 必填,生成签名的时