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


Posted in Javascript onJuly 26, 2017

在实际开发中,无论是做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/

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

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

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

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

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

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

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

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

接下来便可以进行本地测试了.最后说一下,开发过程中下载微信开发工具进行调试也是不错的选择,下载地址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];

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

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

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

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

Javascript 相关文章推荐
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
jquery手风琴特效插件
Feb 04 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
node实现简单的反向代理服务器
Jul 26 #Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 #Javascript
Vue中计算属性computed的示例解读
Jul 26 #Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 #Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 #Javascript
js实现图片轮播效果学习笔记
Jul 26 #Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 #Javascript
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
用户的详细注册和判断
2006/10/09 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
CCPry JS类库 代码
2009/10/30 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
python实现微信自动回复功能
2018/04/11 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Python configparser模块常用方法解析
2020/05/22 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
金融行业务员的自我评价
2013/12/13 职场文书
娱乐节目策划方案
2014/06/10 职场文书
职工小家建设活动方案
2014/08/25 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
2015年少先队活动总结
2015/03/25 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
团委工作总结2015
2015/04/02 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
详解Redis主从复制实践
2021/05/19 Redis
使用Java去实现超市会员管理系统
2022/03/18 Java/Android