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

时间 2019-11-06

标签 vuejs 单页应用实现微信网页受权分享功能栏目 HTML 繁體版

原文原文链接

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

描述点

微信相关开发知识了解
怎么样实现微信相关功能本地测试
微信网页受权
微信分享

微信相关开发知识了解

微信公众号的appId，AppSecretvue
- 当咱们注册一个微信公众号后，便可以获得一个appId(每一个微信公众号只有一个，一个微信公众号惟一的标识)和appSecret(能够进行重置)，这两个信息是进行微信公众号开发必不可少的，由于微信公众号中几乎全部功能的开发都与这两个信息相关。
微信公众号中IP白名单vue-cli
- 在开发微信公众功能的时候，须要咱们添加IP白名单，这样以便可以获取到access_token，关于access_token的介绍请看这里https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
网页受权域名以及JS接口安全域名npm
- 网页受权域名:在咱们的应用中须要微信用户进行登陆、获取微信用户基本信息的时候，须要设置这个域名
- JS接口安全域名:在咱们的应用中须要实现微信分享等功能，须要设置这个域名。

怎么样实现微信相关功能本地测试

相对不少人都对这个问题比较感兴趣，由于在进行涉及到微信公众号中功能开发的时候，默认状况下咱们是不能进行本地测试的，也就是说测试都须要将代码进行部署才测试，但这很是不利于咱们的测试开发，其实进行本地测试开发很简单，只须要咱们有一个域名就能够了，而后将咱们本地的ip映射到这个域名上，就能够本地测试了。下面我就说说我是怎么作本地测试的.windows

由于购买域名须要进行备案操做之类的，比较麻烦，因此通常第三方平台就可让咱们获得一个域名。我是在natpp(ngrok)这个网站上注册的https://natapp.cn/api

我是花了五元钱购买了一个月的隧道，由于免费的不怎么靠谱，毕竟是免费的，哈哈。浏览器

注意，咱们不能直接使用这个隧道，由于这个隧道是三级域名，没法用于微信开发，须要绑定一个二级域名或自主域名缓存

当绑定完域名以后，在本地咱们须要将本地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