在现实开辟中，无论是做PC端、WebApp端照样微信民众号等范例的项目标时刻，或多或少都邑涉及到微信相干的开辟，近来公司项目请求完成微信网页受权，并猎取微信用户基本信息的功用及微信分享的功用，如今总算完成了，但开辟过程当中碰到好几个坑。空话不多说了，最先正题。
形貌点
- 微信相干开辟学问相识
- 怎样完成微信相干功用当地测试
- 微信网页受权
- 微信分享
微信相干开辟学问相识
微信民众号的appId，AppSecret
- 当我们注册一个微信民众号后，便能够获得一个appId(每一个微信民众号只要一个，一个微信民众号唯一的标识)和appSecret(能够举行重置)，这两个信息是举行微信民众号开辟必不可少的，由于微信民众号中险些一切功用的开辟都与这两个信息相干。
微信民众号中IP白名单
- 在开辟微信民众功用的时刻，须要我们增加IP白名单，如许以便能够猎取到access_token，关于access_token的引见请看这里https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
网页受权域名以及JS接口平安域名
- 网页受权域名:在我们的运用中须要微信用户举行登录、猎取微信用户基本信息的时刻，须要设置这个域名
- JS接口平安域名:在我们的运用中须要完成微信分享等功用，须要设置这个域名。
怎样完成微信相干功用当地测试
相对许多人都对这个题目比较感兴趣，由于在举行涉及到微信民众号中功用开辟的时刻，默许情况下我们是不能举行当地测试的，也就是说测试都须要将代码举行布置才测试，但这异常不利于我们的测试开辟，实在举行当地测试开辟很简朴，只须要我们有一个域名就能够了，然后将我们当地的ip映照到这个域名上，就能够当地测试了。下面我就说说我是怎样做当地测试的.
由于购置域名须要举行备案操纵之类的，比较贫苦，所以平常第三方平台就能够让我们获得一个域名。我是在natpp(ngrok)这个网站上注册的https://natapp.cn/
我是花了五元钱购置了一个月的隧道，由于免费的不怎样靠谱，毕竟是免费的，哈哈。
注重，我们不能直接运用这个隧道，由于这个隧道是三级域名，没法用于微信开辟，须要绑定一个二级域名或自立域名
当绑定完域名以后，在当地我们须要将当地ip举行映照穿透操纵。
windows下翻开dos窗口，输入 natapp -authtoken 你的隧道的authtoken
将你在上面设置的二级域名增加到上述说的网页受权域名以及JS接口平安域名
接下来便能够举行当地测试了.末了说一下，开辟过程当中下载微信开辟工具举行调试也是不错的挑选，下载地点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'
]
});
//处置惩罚考证失利的信息
wx.error(function (res) {
logUtil.printLog('考证失利返回的信息:',res);
});
//处置惩罚考证胜利的信息
wx.ready(function () {
// alert(window.location.href.split('#')[0]);
//分享到朋侪圈
wx.onMenuShareTimeline({
title: _this.newDetailObj.title, // 分享题目
link: window.location.href.split('#')[0], // 分享链接，该链接域名或途径必需与当前页面对应的民众号JS平安域名一致
imgUrl: _this.newDetailObj.thu_image, // 分享图标
success: function (res) {
// 用户确认分享后实行的回调函数
logUtil.printLog("分享到朋侪圈胜利返回的信息为:",res);
_this.showMsg("分享胜利!")
},
cancel: function (res) {
// 用户作废分享后实行的回调函数
logUtil.printLog("作废分享到朋侪圈返回的信息为:",res);
}
});
//分享给朋侪
wx.onMenuShareAppMessage({
title: _this.newDetailObj.title, // 分享题目
desc: _this.desc, // 分享形貌
link: window.location.href.split('#')[0], // 分享链接，该链接域名或途径必需与当前页面对应的民众号JS平安域名一致
imgUrl: _this.newDetailObj.thu_image, // 分享图标
type: '', // 分享范例,music、video或link，不填默许为link
dataUrl: '', // 假如type是music或video，则要供应数据链接，默许为空
success: function (res) {
// 用户确认分享后实行的回调函数
logUtil.printLog("分享给朋侪胜利返回的信息为:",res);
},
cancel: function (res) {
// 用户作废分享后实行的回调函数
logUtil.printLog("作废分享给朋侪返回的信息为:",res);
}
});
//分享到QQ
wx.onMenuShareQQ({
title: _this.newDetailObj.title, // 分享题目
desc: _this.desc, // 分享形貌
link: window.location.href.split('#')[0], // 分享链接
imgUrl: _this.newDetailObj.thu_image, // 分享图标
success: function (res) {
// 用户确认分享后实行的回调函数
logUtil.printLog("分享到QQ挚友胜利返回的信息为:",res);
},
cancel: function (res) {
// 用户作废分享后实行的回调函数
logUtil.printLog("作废分享给QQ挚友返回的信息为:",res);
}
});
//分享到QQ空间
wx.onMenuShareQZone({
title: _this.newDetailObj.title, // 分享题目
desc: _this.desc, // 分享形貌
link: window.location.href.split('#')[0], // 分享链接
imgUrl: _this.newDetailObj.thu_image, // 分享图标
success: function (res) {
// 用户确认分享后实行的回调函数
logUtil.printLog("分享到QQ空间胜利返回的信息为:",res);
},
cancel: function (res) {
// 用户作废分享后实行的回调函数
logUtil.printLog("作废分享到QQ空间返回的信息为:",res);
}
});
});
在这个过程当中涌现的毛病就是:config:invalid signature，这个毛病就申明署名不对，这时刻须要静下心来去想一想，然后举行消除，我末了发明原来是当前的url的毛病，看了网上许多都是url须要举行编码
let url = encodeURIComponent(window.location.href.split('#')[0]);
就不错了，末了来看看结果
平常涌现这个题目，大部分都是url的题目哦。
本日就写到这里，须要交换的小伙伴请加群:526450553
