在实际开发中，无论是PC端，WebApp端还是微信公众号项目，或多或少都会涉及到微信相关的项目开发，公司最近的项目需要微信网页的授权，获取微信用户基本信息的功能和微信分享的功能。现在终于完成了，但是在开发过程中遇到了几个坑。废话不多说，开始正题。描述微信相关的开发知识了解如何实现微信相关的功能本地测试微信网页授权微信分享微信相关的开发知识知道微信的appId和AppSecret公众号当我们注册一个微信公众号时，我们可以得到一个appId（每个微信只有一个公众号，一个微信的唯一ID公众号）和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=mp1421140842isweixin(){constua=window.navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=='micromessenger'){返回真；}else{返回false;}},1第一步：用户同意授权，获取code2第二步：通过代码换取网页授权access_token3第三步：刷新access_token（如果需要）4第四步：拉取用户信息（要求scope为snsapi_userinfo）5附：检查授权凭证（access_token）是否有效微信API介绍了更多关于这些要说清楚，我就说说我在这个过程中遇到的问题和解决方法。在第一步获取代码的时候，因为代码只能在五分钟内使用一次，所以必须把代码缓存起来。否则会出现"errcode":40163,"errmsg":"codebeenused,hints:[req_id:nOCEBa0466th12]"or{"errcode":40029,"errmsg":"invalidcode"}错误。微信分享微信分享其实很好用。下面简单说一下如何在vue-cli中引入微信分享的SDK，以及如何实现分享功能。微信分享API：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115先导入sdk：npminstallweixin-js-sdk--save-dev然后从'weixin-js导入wx-sdk'通过要求或导入；微信分享中最重要的就是获取到签名后，我们就可以实现微信分享，然后根据当前url获取需要的参数，完成签名的验证。参数主要使用appId,nonceStr,timestamp,signature，然后使用wx对象的config方法进行配置验证Signaturewx.config({debug:false,appId:appId,//必须和使用的一样获得门票-----需要，timestamp:timestamp,//required,生成签名的时间戳nonceStr:nonceStr,//required,用于生成签名的随机字符串signature:signature,//required,签名，见附件1//需要分享的Listitems:发送给好友，分享到朋友圈，分享到QQ，分享到QQ空间//处理验证失败消息wx.error(function(res){logUtil.printLog('验证失败返回的信息：',res);});//处理验证成功的信息wx.ready(function(){//alert(window.location.href.split('#')[0]);//分享到朋友圈wx.onMenuShareTimeline({title:_this.newDetailObj.title,//分享标题链接:window.location.href.split('#')[0],//分享链接，链接的域名或路径必须是当前页面对应的公众号JS安全域名同imgUrl:_this.newDetailObj.thu_image,//分享图标成功:function(res){//用户确认分享后执行的回调函数logUtil.printLog("分享后返回的信息给时刻是:",res);_this.showMsg("分享成功！")},cancel:function(res){//用户取消分享后执行的回调函数logUtil.printLog("取消分享朋友圈返回的信息为：",res);}});//分享给好友wx.onMenuShareAppMessage({title:_this.newDetailObj.title,//分享标题desc:_this.desc,//分享描述链接：window.location.href.split('#')[0],//分享链接，链接域名或路径必须对应当前页面公众号JS安全域名一致imgUrl:_this.newDetailObj.thu_image,//分享图标类型:'',//分享类型，音乐，视频或链接，不填默认为链接dataUrl:'',//如果类型是music或video，则需要提供数据链接，默认为空。success:function(res){//用户确认分享后执行的回调函数logUtil.printLog("分享成功返回给好友的信息为：",res);},cancel:function(res){//用户取消分享后执行的回调函数logUtil.printLog("取消分享给好友返回的信息为：",res);}});//分享到QQwx.onMenuShareQQ({title:_this.newDetailObj.title,//分享标题desc:_this.desc,//分享描述链接：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){//用户确认分享后执行的回调函数logUtilprintLog("分享到空间成功返回的信息是：",res);},cancel:function(res){//用户取消分享后执行的回调函数logUtil.printLog("取消分享到空间返回的信息for:",res);}});});这个过程中出现的错误是：config:invalidsignature，这个错误的意思是签名不正确，这时候需要冷静下来想一想，然后去掉，我最后发现是当前url不对，在网上看到很多url需要编码，leturl=encodeURIComponent(window.location.href.split('#')[0]);还不错，最后看一下一般出现这个问题，多半是url导致的。今天就写到这里吧。如需交流，请加群：526450553
