热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

在实际开发中,无论是做PC端、WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页

在实际开发中,无论是做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?t=resource/res_main&id=mp1421140183
  3. 网页授权域名以及JS接口安全域名
    1. 网页授权域名:在我们的应用中需要微信用户进行登录、获取微信用户基本信息的时候,需要设置这个域名
    2. 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

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

原来的:

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

修改后

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

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

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

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


推荐阅读
  • 调试利器SSH隧道
    在开发微信公众号或小程序的时候,由于微信平台规则的限制,部分接口需要通过线上域名才能正常访问。但我们一般都会在本地开发,因为这能快速的看到 ... [详细]
  • 吴石访谈:腾讯安全科恩实验室如何引领物联网安全研究
    腾讯安全科恩实验室曾两次成功破解特斯拉自动驾驶系统,并远程控制汽车,展示了其在汽车安全领域的强大实力。近日,该实验室负责人吴石接受了InfoQ的专访,详细介绍了团队未来的重点方向——物联网安全。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 在日常生活中,支付宝已成为不可或缺的支付工具之一。本文将详细介绍如何通过支付宝实现免费提现,帮助用户更好地管理个人财务,避免不必要的手续费支出。 ... [详细]
  • 七大策略降低云上MySQL成本
    在全球经济放缓和通胀压力下,降低云环境中MySQL数据库的运行成本成为企业关注的重点。本文提供了一系列实用技巧,旨在帮助企业有效控制成本,同时保持高效运作。 ... [详细]
  • 为何Compose与Swarm之后仍有Kubernetes的诞生?
    探讨在已有Compose和Swarm的情况下,Kubernetes是如何以其独特的设计理念和技术优势脱颖而出,成为容器编排领域的领航者。 ... [详细]
  • Docker安全策略与管理
    本文探讨了Docker的安全挑战、核心安全特性及其管理策略,旨在帮助读者深入理解Docker安全机制,并提供实用的安全管理建议。 ... [详细]
  • 本文介绍了.hbs文件作为Ember.js项目中的视图层,类似于HTML文件的功能,并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]
  • 对于初学者而言,搭建一个高效稳定的 Python 开发环境是入门的关键一步。本文将详细介绍如何利用 Anaconda 和 Jupyter Notebook 来构建一个既易于管理又功能强大的开发环境。 ... [详细]
  • 龙蜥社区开发者访谈:技术生涯的三次蜕变 | 第3期
    龙蜥社区的开发者们通过自己的实践和经验,推动着开源技术的发展。本期「龙蜥开发者说」聚焦于一位资深开发者的三次技术转型,分享他在龙蜥社区的成长故事。 ... [详细]
  • 最新版 EasyCriteria 3.0 已正式上线,该版本经过全面重构,带来了多项性能优化与功能增强。更多详情请参阅官方文档:http://uaihebert.com/?p=1898 ... [详细]
  • 解决Win10系统自动删除破解软件的问题
    如何处理Win10系统频繁自动删除安装的破解软件?本文将详细介绍可能的原因及解决方案,帮助用户顺利安装所需软件。 ... [详细]
  • 从理想主义者的内心深处萌发的技术信仰,推动了云原生技术在全球范围内的快速发展。本文将带你深入了解阿里巴巴在开源领域的贡献与成就。 ... [详细]
  • 精选10款Python框架助力并行与分布式机器学习
    随着神经网络模型的不断深化和复杂化,训练这些模型变得愈发具有挑战性,不仅需要处理大量的权重,还必须克服内存限制等问题。本文将介绍10款优秀的Python框架,帮助开发者高效地实现分布式和并行化的深度学习模型训练。 ... [详细]
  • Windows操作系统提供了Encrypting File System (EFS)作为内置的数据加密工具,特别适用于对NTFS分区上的文件和文件夹进行加密处理。本文将详细介绍如何使用EFS加密文件夹,以及加密过程中的注意事项。 ... [详细]
author-avatar
隔壁小王
刚开始
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有