VueJs单页应用实现微信网页授权及微信分享功能示例

2020-06-14 06:04:48易采站长站整理

接下来便可以进行本地测试了.最后说一下,开发过程中下载微信开发工具进行调试也是不错的选择,下载地址https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

微信网页授权

微信网页授权的目的主要是实现三方站点微信的登录、获取微信用户信息等

实现微信网页授权获取微信用户的基本信息

先判断当前浏览器是不是微信内置浏览器,微信网页授权api: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842


isweixin() {
const ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
} else {
return false;
}
},

1 第一步:用户同意授权,获取code

2 第二步:通过code换取网页授权access_token

3 第三步:刷新access_token(如果需要)

4 第四步:拉取用户信息(需scope为 snsapi_userinfo)

5 附:检验授权凭证(access_token)是否有效

微信API里面关于这些都介绍得比较清楚的,我就说说在这个过程中我所遇到的问题,以及解决办法

在第一步获取code的时候,因为这个code在五分钟之内只能够使用一次,所以必须对这个code进行缓存起来。否则会出现”errcode”:40163,”errmsg”:”code been used, hints: [ req_id: nOCEBa0466th12 ]”或{“errcode”:40029,”errmsg”:”invalid code”} 错误。

微信分享

微信分享其实用得非常得多,我就简单说下在vue-cli中怎么引入微信分享的sdk,以及怎么样实现分享功能.

微信分享APi: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

首先引入sdk:


npm install weixin-js-sdk --save-dev

然后通过require或者import引入


import wx from 'weixin-js-sdk';

微信分享中最重要的是获取到签名,才能够实现微信的分享

再根据当前的url去获取到所需要的参数来完成签名的验证,参数主要用appId、nonceStr、timestamp、signature,然后通过wx对象的config方法去进行配置验证签名


wx.config({
debug: false,
appId: appId, // 和获取Ticke的必须一样------必填,公众号的唯一标识
timestamp:timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature,// 必填,签名,见附录1
//需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间
jsApiList: [
'onMenuShareAppMessage','onMenuShareTimeline',
'onMenuShareQQ','onMenuShareQZone'