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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
如何使JavaScript休眠或等待
Apr 27 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
一个用于网络的工具函数库
2006/10/09 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python制作爬虫采集小说
2015/10/25 Python
对numpy中shape的深入理解
2018/06/15 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
Python如何定义一个函数
2015/09/01 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2015年医生个人工作总结
2015/04/25 职场文书