源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-11-01 05:54 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:VueJs单页应用实现微信网页授权及微信分享功能示例
在实际开发中,无论是做PC端、WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑。废话不多说了,开始正题。 描述点 [list=1] [*]微信相关开发知识了解[/*] [*]怎么样实现微信相关功能本地测试[/*] [*]微信网页授权[/*] [*]微信分享[/*] [/list] [b]微信相关开发知识了解[/b] [list=1] [*]微信公众号的appId,AppSecret [list=1]
  • 当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公众号唯一的标识)和appSecret(可以进行重置),这两个信息是进行微信公众号开发必不可少的,因为微信公众号中几乎所有功能的开发都与这两个信息相关。[/*] [/list]
  • [*]微信公众号中IP白名单 [list=1]
  • 在开发微信公众功能的时候,需要我们添加IP白名单,这样以便能够获取到access_token,关于access_token的介绍请看这里[url=https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183]https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183[/url][/*] [/list]
  • [*]网页授权域名以及JS接口安全域名 [list=1]
  • 网页授权域名:在我们的应用中需要微信用户进行登录、获取微信用户基本信息的时候,需要设置这个域名[/*] [*]JS接口安全域名:在我们的应用中需要实现微信分享等功能,需要设置这个域名。[/*] [/list]
  • [/list] [b]怎么样实现微信相关功能本地测试 [/b] 相对很多人都对这个问题比较感兴趣,因为在进行涉及到微信公众号中功能开发的时候,默认情况下我们是不能进行本地测试的,也就是说测试都需要将代码进行部署才测试,但这非常不利于我们的测试开发,其实进行本地测试开发很简单,只需要我们有一个域名就可以了,然后将我们本地的ip映射到这个域名上,就可以本地测试了。下面我就说说我是怎么做本地测试的. 因为购买域名需要进行备案操作之类的,比较麻烦,所以一般第三方平台就可以让我们得到一个域名。我是在natpp(ngrok)这个网站上注册的[url=https://natapp.cn/]https://natapp.cn/[/url] 我是花了五元钱购买了一个月的隧道,因为免费的不怎么靠谱,毕竟是免费的,哈哈。 [img]http://files.jb51.net/file_images/article/201707/2017726152002403.jpg?2017626152029[/img] 注意,我们不能直接使用这个隧道,因为这个隧道是三级域名,无法用于微信开发,需要绑定一个二级域名或自主域名 当绑定完域名之后,在本地我们需要将本地ip进行映射穿透操作。 windows下打开dos窗口,输入 natapp -authtoken 你的隧道的authtoken [img]http://files.jb51.net/file_images/article/201707/2017726152050686.png?2017626152113[/img] 将你在上面设置的二级域名添加到上述说的网页授权域名以及JS接口安全域名 [img]http://files.jb51.net/file_images/article/201707/2017726152120553.png?2017626152134[/img] 接下来便可以进行本地测试了.最后说一下,开发过程中下载微信开发工具进行调试也是不错的选择,下载地址[url=https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140]https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140[/url] [b]微信网页授权[/b] 微信网页授权的目的主要是实现三方站点微信的登录、获取微信用户信息等 实现微信网页授权获取微信用户的基本信息 先判断当前浏览器是不是微信内置浏览器,微信网页授权api: [url=https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842]https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842[/url]
      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: [url=https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115]https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115[/url] 首先引入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需要进行编码,我也是这样做的,但一直出现config:invalid signature 原来的:
    let url = encodeURIComponent(window.location.href.split('#')[0]);
    修改后
    let url = window.location.href.split('#')[0];
    就不错了,最后来看看效果 [img]http://files.jb51.net/file_images/article/201707/2017726152342997.png?201762615243[/img] 一般出现这个问题,大部分都是url的问题哦。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
    • 全部评论(0)
    联系客服
    客服电话:
    400-000-3129
    微信版

    扫一扫进微信版
    返回顶部