vue实现微信获取用户信息的方法


Posted in Javascript onMarch 21, 2019

本次项目做到一个点赞功能,即分享出去一个页面给微信好友,微信好友点开并点赞,需要将点赞用户的微信昵称,微信头像以及微信openid,微信unionid(这个需要关注公众号才会有该字段)传给后端,记录点赞人的相关信息

代码如下

// created 周期
if(this.$route.query.from) { // 判断链接中是否有from参数,下面的studentId,activityId项目需要
 let _nowUrl = window.location.href.split('?')[0] + `?resource=1&studentId=${this.$route.query.studentId}&activityId=${this.$route.query.activityId}`
 let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
 window.location.href = _shareUrl
 return
}
// 处理微信用户信息
 handleWechatMsg(code) {
  // 调取 获取微信用户信息的接口(后端参考微信官方文档进行封装)  code--参数
  api.getWechatInfo(code).then((res)=>{
   if(res.data.code == 200) {
    // 返回的是json字符串
    let _data = res.data.content
    let _personMsg = JSON.parse(_data)
    this.wechatMsg = _personMsg
    // 本地存储微信用户信息,防止页面被刷新,code失效
    window.localStorage.setItem('wechatMesssage', _data)
   } else if (res.data.code == 400) { // 400-code失效,400是后端返回,具体看后端返回哪个码
    let msgs = window.localStorage.getItem('wechatMesssage')
    this.wechatMsg = JSON.parse(msgs)    
   } else {
    this.$Message.message(res.data.message);
   }

  })
 },

如果需要获取微信unionid,则需要引导用户关注公众号,可以在返回的用户信息中判断是否含有unionid,如果没有,可以展示微信公众号的二维码,供用户识别关注

⚠️--------------------

  1. 当前页面的域名,需要在公众号后台配置添加(详见官网)
  2. 如果页面存在#,可能会出问题,可以使用nginx进行配置

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

Javascript 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
js简单实现交换Li的值
May 22 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
vue里如何主动销毁keep-alive缓存的组件
Mar 21 #Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 #Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 #Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 #Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 #Javascript
详解vue中axios的使用与封装
Mar 20 #Javascript
javascript数组去重方法总结(推荐)
Mar 20 #Javascript
You might like
SONY ICF-SW55的电路分析
2021/03/02 无线电
php上传、管理照片示例
2006/10/09 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
详解Angular4 路由设置相关
2017/08/26 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue百度地图 + 定位的详解
2019/05/13 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python 解析XML文件
2009/04/15 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
20个常用Python运维库和模块
2018/02/12 Python
python实现随机梯度下降法
2020/03/24 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
Python实现一个论文下载器的过程
2021/01/18 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
仓库管理制度
2014/01/21 职场文书
美术指导求职信
2014/03/17 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
个人承诺书格式
2014/06/03 职场文书
2015年教师节主持词
2015/07/03 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript