在实际开发中，无论是做PC端、WebApp端还是微信公众号等类型的项目的时候，或多或少都会涉及到微信相关的开发，最近公司项目要求实现微信网页授权，并获取微信用户基本信息的功能及微信分享的功能，现在总算完成了，但开发过程中遇到好几个坑。废话不多说了，开始正题。
描述点
微信相关开发知识了解
- 微信公众号的appId，AppSecret
- 微信公众号中IP白名单
- 在开发微信公众功能的时候，需要我们添加IP白名单，这样以便能够获取到access_token，关于access_token的介绍请看这里https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
- 网页授权域名以及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
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:
然后通过require或者import引入
再根据当前的url去获取到所需要的参数来完成签名的验证，参数主要用appId、nonceStr、timestamp、signature，然后通过wx对象的config方法去进行配置验证签名
//<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>到QQ空间
wx.onMenuShareQZone({
title: _this.newDetailObj.title,// <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>图标
success: function (res) {
// <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>确认<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
logUtil.printLog("<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>到QQ空间成功返回的信息为:",cancel: function (res) {
// <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>取消<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
logUtil.printLog("取消<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>到QQ空间返回的信息为:",res);
}
});
});在这个过程中出现的错误就是:config:invalid signature，这个错误就说明签名不对，这时候需要静下心来去想想，然后进行排除，我最后发现原来是当前的url的错误，看了网上很多都是url需要进行编码，我也是这样做的，但一直出现config:invalid signature
原来的:
修改后
就不错了，最后来看看效果
一般出现这个问题，大部分都是url的问题哦。
