# 第三方登录--微信篇
1、首先引入![](https://box.kancloud.cn/902e2820092c6530addc6b048947b81e_483x149.png)
2、使用auth方法![](https://box.kancloud.cn/0740e2d464d428455366f33cd71cbfaf_315x141.png)
3、配置![](https://box.kancloud.cn/8a528a919a2406a85f6cc7e639bf1300_575x136.png)
3 - 1
首页需要到微信开放平台去申请审核 https://open.weixin.qq.com/
![](https://box.kancloud.cn/986dbc55b426e577fba8e35387116e13_1114x824.png)
**注:如果需要ios 和 安卓 使用,请注意上图 将ios和android应用都勾选上**
4、auth方法成功之后,使用getToken方法![](https://box.kancloud.cn/1c5987ee5a02bc2cc4eb8193eecbdc71_337x145.png)
5、在使用getToken方法成功后,使用getUserInfo方法![](https://box.kancloud.cn/f77451b0ffcb80eb6ad5fde84ff0f11a_442x161.png)
> 将获取到的用户信息按需要逻辑处理
* * * * *
附上小编的项目代码
小编的代码有处理是否绑定的逻辑以及登录等,大家只需参考wx登录部分即可
**html部分**
~~~
<div class="aui-col-xs-2" style="text-align: center;" tapmode onclick="wxauth()">
<i class="iconfont icon-liaotian icon_bg2"></i>
<div class="aui-grid-label" style="display:block;margin-top:10px;">微信</div>
</div>
~~~
**js部分**
~~~
//微信登录
function wxauth() {
api.showProgress({
style: 'default',
animationType: 'fade',
title: '',
text: '启动中...',
modal: false
});
var wx = api.require('wx');
wx.auth({
apiKey: 'wx***********'
}, function(ret, err) {
api.hideProgress();
if (ret) {
if (ret.status) {
var code = ret.code;
getToken(code);
} else {
api.toast({
msg: '错误',
duration: 2000,
location: 'middle'
});
}
} else {
switch(err.code) {
case -1:
api.toast({
msg: '未知错误',
duration: 2000,
location: 'middle'
});
break;
case 1:
api.toast({
msg: '用户取消',
duration: 2000,
location: 'middle'
});
break;
case 2:
api.toast({
msg: '用户拒绝授权',
duration: 2000,
location: 'middle'
});
break;
case 3:
api.toast({
msg: '当前设备未安装微信客户端',
duration: 2000,
location: 'middle'
});
break;
}
}
});
}
~~~
~~~
/**
* [getToken 获取用户token]
* @param {[type]} code [授权成功后返回code 参数]
* @return {[type]} [description]
*/
function getToken(code) {
var wx = api.require('wx');
wx.getToken({
apiKey: '',
apiSecret: '',
code: code
}, function(ret, err) {
if (ret) {
if (ret.status) {
var accessToken=ret.accessToken;
var dynamicToken=ret.dynamicToken;
var openId=ret.openId;
getUserInfo(accessToken,openId);
} else {
api.toast({
msg: '错误',
duration: 2000,
location: 'middle'
});
}
} else {
switch(err.code) {
case -1:
api.toast({
msg: '未知错误',
duration: 2000,
location: 'middle'
});
break;
case 1:
api.toast({
msg: 'apiKey值为空或非法',
duration: 2000,
location: 'middle'
});
break;
case 2:
api.toast({
msg: 'apiSecret值为空或非法',
duration: 2000,
location: 'middle'
});
break;
case 3:
api.toast({
msg: 'code值为空或非法',
duration: 2000,
location: 'middle'
});
break;
case 4:
api.toast({
msg: '网络超时',
duration: 2000,
location: 'middle'
});
break;
}
}
});
}
~~~
~~~
/**
* [getUserInfo 获取用户信息]
* @param {[type]} accessToken [getToken 接口或 refreshToken 接口成功获取的 accessToken 值]
* @param {[type]} openId [getToken 接口或 refreshToken 接口成功获取的 openId 值]
*/
function getUserInfo(accessToken,openId) {
var wx = api.require('wx');
wx.getUserInfo({
accessToken: accessToken,
openId: openId
}, function(ret, err) {
if (ret) {
if (ret.status) {
var openid=ret.openid,
unionid = ret.unionid,
nickname=ret.nickname,
head_pic=ret.headimgurl,
source='weixin';
api.ajax({
url: domainName + '/index.php?g=User&m=Api&a=thirdLogin',
method: 'post',
data: {
values: {
openid: openid,
unionid: unionid,
nickname: nickname,
head_pic: head_pic,
source: source
}
}
}, function(ret, err) {
if (ret) {
if (ret.msg == '0') { //已经存在该用户信息
if (ret.binding_status == '1') { /*1:未绑定 2已绑定*/
//未绑定,到绑定页面
api.openWin({
name: 'user_binding_win',
url: './user_binding_win.html',
pageParam: {
openid: openid,
source: source
}
});
} else {
//已绑定,到登录页面
userInfoAll(openid,source);
api.openWin({
name: 'index',
url: '../main.html'
});
}
} else if (ret.msg == '1'){ //添加用户信息成功
api.openWin({
name: 'user_binding_win',
url: './user_binding_win.html',
pageParam: {
openid: openid
}
});
} else if (ret.msg =='2'){
api.toast({
msg: '添加用户失败',
duration: 2000,
location: 'bottom'
});
} else {
api.toast({
msg: '未知错误',
duration: 2000,
location: 'bottom'
});
}
} else {
api.toast({
msg: '未知错误',
duration: 2000,
location: 'middle'
});
}
});
} else {
api.toast({
msg: '错误',
duration: 2000,
location: 'middle'
});
}
} else {
switch(err.code) {
case -1:
api.toast({
msg: '未知错误',
duration: 2000,
location: 'middle'
});
break;
case 1:
api.toast({
msg: 'accessToken 过期',
duration: 2000,
location: 'middle'
});
break;
case 2:
api.toast({
msg: 'openId非法',
duration: 2000,
location: 'middle'
});
break;
case 3:
api.toast({
msg: 'openId值为空',
duration: 2000,
location: 'middle'
});
break;
case 4:
api.toast({
msg: 'accessToken值为空',
duration: 2000,
location: 'middle'
});
break;
case 5:
api.toast({
msg: 'accessToken非法',
duration: 2000,
location: 'middle'
});
break;
case 6:
api.toast({
msg: '网络超时',
duration: 2000,
location: 'middle'
});
break;
}
}
});
}
~~~
- 关于我们
- ApiCloud
- 支付模块
- 微信支付--wxPay(客户端)
- 微信支付--wxPay(服务端)
- 支付宝支付--aliPay(客户端配置)
- 支付宝支付--aliPay(服务端配置)
- DoT模板
- 缓存模块
- 监听模块
- 百度定位模块
- 设置状态栏字体颜色
- 选择城市插件
- 跨页面执行方法
- 安卓-点击返回事件
- 上传图片模块
- 点击弹出放大图片层
- 魅族手机apiready问题
- 分享
- 跨win或frm执行脚本
- 关于ios数字自动识别成手机号
- 百度地图bMap
- 语音识别模块
- tabBarMenu底部导航
- 第三方登录
- QQ网站和appQQ账号的统一问题解决
- 微信登录
- QQ登录
- 微博登录
- 上拉加载、下拉刷新模块
- 图片缓存
- 文件和图片缓存机制分享
- PHP
- 支付宝及时到账
- no input file specified报错解决
- thinkphp 整合kindeditor
- 整合tpshop微信模块到thinkcmf中
- thinkphp3.1.3整合支付宝
- 网站接入QQ OAuth2.0登录教程
- ThinkPHP整合百度编辑器Ueditor
- PHP加快执行效率的写法规范
- ThinkPHP操作大全
- PHP操作大全
- Thinkphp中SQL操作返回值
- php5.3 foreach 使用&(与运算符)引用赋值要注意的问题
- mysql给字段追加值
- 阿里大鱼短信平台接入
- Navicat 导出 Mysql 数据字典
- php 面向对象全面教程
- PHP5下调用SOAP
- PHP处理时间格式添加空格
- 伪装URL请求(.htaccess)
- url请求参数加解密
- JS插件
- artDialog弹窗-页面传值
- jQuery点击遮罩弹出层固定居中
- jeBox原生弹窗
- bxslider轮播
- js生成指定位数随机数
- 发送短信倒计时
- js调试
- jQuery.validator 表单验证规则
- Swiper 轮播
- 获得焦点时-图片抖动
- uploadify无刷新上传图片
- 导航下拉隐藏上拉显示
- 获得焦点时-加黑色蒙版
- jquery.qrcode.js生成二维条形码(支持中文)
- jquery.qrcode.js生成二维条形码(官方不支持中文)
- nth-child 选择器
- 无刷新点击实现加载更多数据
- 刷新页面方法
- 判断滚动条向上向下
- 跨浏览器复制jQuery-zclip
- js校验表单后提交表单的三种方法
- 用JS判断下拉框是否选中
- div中滚动
- 提交时弹出模态框
- 当图片不显示时替换方法
- 前端
- CSS3
- HTML5
- css技巧
- 移动端rem
- Flex布局
- 电商详情滚动条监听
- VueCircleMenu圆环按钮
- iframe自适应页面高度
- 百度Echart
- input:radio改变选中颜色
- Jquery
- 响应式布局基本实现Media Query
- 循环输出只输出新内容
- 小程序
- wx.request坑
- 概要
- git操作
- 本地记住密码
- 操作
- 生成ssh公钥 记住密码
- git避坑
- ES6学习手札
- 调试小插件
- 谷歌插件Postman
- PHP调试助手
- WordPress
- 缓存服务器Redis
- 在线代码运行 Docker
- 在ubuntu下怎样安装https
- BrowserSync 浏览器同步测试工具
- getmarkman高效的设计稿标注、测量工具
- PHPstrom软件
- 服务器
- linux 安装搭建服务器配置及nginx配置
- tpshop的nginx 服务器配置方法
- (服务器访问文件404解决办法)IIS 之 添加MIME扩展类型及常用的MIME类型列表
- mysql部分
- mysql缓存
- MySql监控工具--mytop
- MySql主从搭建
- mysql优化
- Mysql 复制 (主从复制)
- iOS开发笔记 - 上线流程
- VUE避坑指南
- 从零开始学Vue
- Vue-cli
- Webpack
- VUE小记
- npm打包空白
- 打包背景图片/项目图片不显示
- VUE避坑指南/elementUI upload 自定义http-request上传
- 关于watch监听路由重复加载方法
- 解决加载内容的时候闪动问题
- vuecli没有network访问地址
- python学习
- python初始
- pytho内置函数大全
- win10 播放器播放TS文件问题
- 设计网站
- VUE避坑指南/VUE-CLI部署空白
- swiper使用问题
- uni-app学习手册
- 目录结构
- layUI
- nodesass版本sassloader版本问题