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

在实际开发中，无论是做PC端、WebApp端还是微信公众号等类型的项目的时候，或多或少都会涉及到微信相关的开发，最近公司项目要求实现微信网页授权，并获取微信用户基本信息的功能及微信分享的功能，现在总算完成了，但开发过程中遇到好几个坑。废话不多说了，开始正题。

描述点

1. 微信相关开发知识了解
2. 怎么样实现微信相关功能本地测试
3. 微信网页授权
4. 微信分享

微信相关开发知识了解

1. 微信公众号的appId，AppSecret
   1. 当我们注册一个微信公众号后，便能够得到一个appId(每个微信公众号只有一个，一个微信公众号唯一的标识)和appSecret(可以进行重置)，这两个信息是进行微信公众号开发必不可少的，因为微信公众号中几乎所有功能的开发都与这两个信息相关。
2. 微信公众号中IP白名单
   1. 在开发微信公众功能的时候，需要我们添加IP白名单，这样以便能够获取到access_token，关于access_token的介绍请看这里https://mp.weixin.qq.com/wiki"_blank" href="https://natapp.cn/" rel="external nofollow" >https://natapp.cn/

      我是花了五元钱购买了一个月的隧道，因为免费的不怎么靠谱，毕竟是免费的，哈哈。

      

      注意，我们不能直接使用这个隧道，因为这个隧道是三级域名，无法用于微信开发，需要绑定一个二级域名或自主域名

      当绑定完域名之后，在本地我们需要将本地ip进行映射穿透操作。
      

      windows下打开dos窗口，输入 natapp -authtoken 你的隧道的authtoken

      

      将你在上面设置的二级域名添加到上述说的网页授权域名以及JS接口安全域名

      

      接下来便可以进行本地测试了.最后说一下，开发过程中下载微信开发工具进行调试也是不错的选择，下载地址https://mp.weixin.qq.com/wiki"_blank" href="https://mp.weixin.qq.com/wiki" rel="external nofollow" >https://mp.weixin.qq.com/wiki"htmlcode">

        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"htmlcode">

      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需要进行编码，我也是这样做的，但一直出现config:invalid signature

      原来的:

      let url = encodeURIComponent(window.location.href.split('#')[0]);

      修改后

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

      就不错了，最后来看看效果

      

      一般出现这个问题，大部分都是url的问题哦。
      

      以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。