使用UniApp实现小程序的微信登录功能的代码详解

// 封装全局登录函数// backpage, backtype 2个参数分别代表：// backpage : 登录后返回的页面// backtype : 打开页面的类型[1 : redirectTo 2 : switchTab]Vue.prototype.checkLogin = function( backpage, backtype ){// 同步获取本地数据（uid、随机码、用户名、头像）var user_id = uni.getStorageSync('user_id');var user_nu = uni.getStorageSync('user_nu');var user_nm = uni.getStorageSync('user_nm');var user_fa = uni.getStorageSync('user_fa');if( user_id == '' || user_nu == '' || user_fa == ''){// 使用重定向的方式跳转至登录页面uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});return false;}// 登录成功、已经登录返回数组 [用户 id, 用户随机码, 用户昵称, 用户表情]return [user_id, user_nu, user_nm, user_fa];}// 定义一个全局的请求地址Vue.prototype.apiServer = 'http://0608.cc/'

<template><view><!-- login view html start --><view><view><view class="header"><image src="/static/img/public/login-wx.png"></image></view><view class="content"><view>申请获取以下权限</view><text>获得你的公开信息(昵称，头像、地区等)</text></view><button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">授权登录</button></view></view><!-- login view html end --></view></template><script>export default {data() {return {appid: '*************',secret: '*************************',code: '',sessionKey: '',openId: '',userInfo: {avatarUrl: '',city: '',country: '',gender: 1,language: '',nickName: ''},pageOption: {}};},methods: {// 第一授权获取用户信息 ===》按钮触发wxGetUserInfo() {let _self = this;// 1.获取用户的信息uni.getUserInfo({provider: 'weixin',success: ( infoRes ) => {console.log( infoRes )_self.userInfo = infoRes.userInfo// 2.提交数据到后台、写入数据库uni.request({url: _self.apiServer + 'appletsUserInfo',data: {openid: _self.openId,avatarUrl: _self.userInfo.avatarUrl,city: _self.userInfo.city,country: _self.userInfo.country,gender: _self.userInfo.gender,language: _self.userInfo.language,nickName: _self.userInfo.nickName},method: 'POST',success: res => {if( res.data.code != 0 ){uni.showToast({ title: res.data.msg, icon: 'none' });return false;}// 用户信息写入缓存uni.showToast({title: '登录成功'})uni.setStorageSync( 'user_id', res.data.res.u_id );uni.setStorageSync( 'user_nm', res.data.res.u_nickName );uni.setStorageSync( 'user_fa', res.data.res.u_avatarUrl );uni.setStorageSync( 'user_nu', res.data.res.u_regtime );// 然后跳回原页面if( _self.pageOption.backtype == 1 ){uni.redirectTo({ url: _self.pageOption.backpage })}else{uni.switchTab({ url: _self.pageOption.backpage })}},fail: () => {uni.showToast({ title: '用户信息操作失败', icon: 'none' });}});},fail: () => {uni.showToast({ title: '获取用户信息失败', icon: 'none' });}});return false},// 登录login() {let _self = this;// 0. 显示加载的效果uni.showLoading({title: '登录中...'});// 1. wx 获取登录用户 codeuni.login({provider: 'weixin',success: loginRes => {console.log(loginRes);_self.code = loginRes.code;// 2. 将用户登录code传递到后台置换用户SessionKey、OpenId等信息uni.request({url:'https://api.weixin.qq.com/sns/jscode2session&#63;appid=' +_self.appid +'&secret=' +_self.secret +'&js_code=' +_self.code +'&grant_type=authorization_code',success: codeRes => {console.log(codeRes);_self.openId = codeRes.data.openid;_self.sessionKey = codeRes.data.session_key;// 3.通过 openId 判断用户是否授权uni.request({url: _self.apiServer + 'loginApplets',data: {openid: _self.openId},method: 'POST',success: openIdRes => {console.log(openIdRes);// 隐藏loadinguni.hideLoading();// 还没授权登录、请先授权然后登录if (openIdRes.data.code == 1) {// 提示消息、让用户授权uni.showToast({ title: openIdRes.data.msg, icon: 'none' });}// 已经授权了、查询到用户的数据了if (openIdRes.data.code == 0) {// 用户信息写入缓存uni.showToast({title: '登录成功'})uni.setStorageSync( 'user_id', openIdRes.data.res.u_id );uni.setStorageSync( 'user_nm', openIdRes.data.res.u_nickName );uni.setStorageSync( 'user_fa', openIdRes.data.res.u_avatarUrl );uni.setStorageSync( 'user_nu', openIdRes.data.res.u_regtime );// 然后跳回原页面if( _self.pageOption.backtype == 1 ){uni.redirectTo({ url: _self.pageOption.backpage })}else{uni.switchTab({ url: _self.pageOption.backpage })}}},fail: () => {uni.showToast({ title: '获取授权信息失败', icon: 'none' });return false;}});},fail: () => {uni.showToast({ title: '获取 SesssionKey OpenId 失败', icon: 'none' });return false;}});},fail: () => {uni.showToast({ title: '获取 code 失败', icon: 'none' });return false;}});return false;}},onLoad( options ) {// 接收跳转的参数this.pageOption = options//默认加载this.login();}};</script><style>.header {margin: 90rpx 0 90rpx 50rpx;border-bottom: 1px solid #ccc;text-align: center;width: 650rpx;height: 300rpx;line-height: 450rpx;}.header image {width: 200rpx;height: 200rpx;}.content {margin-left: 50rpx;margin-bottom: 90rpx;}.content text {display: block;color: #9d9d9d;margin-top: 40rpx;}.bottom {border-radius: 80rpx;margin: 70rpx 50rpx;font-size: 35rpx;}</style>

<template><view>我的页面</view></template><script>var loginRes;export default {data() {return {};},onLoad() {// 加载定义好的方法loginRes = this.checkLogin('../my/my', 2);// 没有登录成功，返回空if (!loginRes) {return;}},methods: {}};</script><style></style>

public function loginApplets(Request $request, UserInfo $userInfo){ // 获取数据 $data['u_openid'] = $request->param('openid', ''); // 验证数据 $rule = [  'u_openid' => 'require|max:200|min:10' ]; $message = [  'u_openid.require' => 'openid 不能为空',  'u_openid.max'  => 'openid 格式错误',  'u_openid.min'  => 'openid 格式错误' ]; $validate = Validate::rule($rule)->message($message); if (!$validate->check($data)) {  return json(['code' => 1, 'msg' => $validate->getError(), 'res' => null]); } // 根据 openid 判断是否存在 $where['u_openid'] = $data['u_openid']; $user = $userInfo->selOne($where); if (!$user) {  return json(['code' => 1, 'msg' => '还没授权登录、请先授权然后登录', 'res' => $user]); } return json(['code' => 0, 'msg' => '已授权获取到用户的数据', 'res' => $user]);}

public function appletsUserInfo(Request $request, UserInfo $userInfo){ // 获取数据 $data['u_openid'] = $request->param('openid', ''); $data['u_avatarUrl'] = $request->param('avatarUrl', ''); $data['u_city'] = $request->param('city', ''); $data['u_country'] = $request->param('country', ''); $data['u_gender'] = $request->param('gender', ''); $data['u_language'] = $request->param('language', ''); $data['u_nickName'] = $request->param('nickName', ''); // 验证数据 $rule = [  'u_openid' => 'require|max:200|min:10',  'u_avatarUrl' => 'require',  'u_nickName' => 'require' ]; $message = [  'u_openid.require'  => 'openid 不能为空',  'u_openid.max'   => 'openid 格式错误',  'u_openid.min'   => 'openid 格式错误',  'u_avatarUrl.require' => '用户头像 不能为空',  'u_nickName.max'  => '用户名 格式错误', ]; $validate = Validate::rule($rule)->message($message); if (!$validate->check($data)) {  return json(['code' => 1, 'msg' => $validate->getError(), 'res' => null]); } // 根据 openid 判断是否存在 $where['u_openid'] = $data['u_openid']; $user = $userInfo->selOne($where); // 存在、执行修改 if ($user) {  $user_res = $userInfo->updOne($where, $data);  $res = [];  $res['u_id'] = $user['u_id'];  $res['u_regtime'] = $user['u_regtime']; } // 不存在、执行添加 if (empty($user)) {  $res = [];  $res = $data;  $res['u_regtime'] = time();  $res['u_id'] = $userInfo->addOne($res); } // 判断是否添加成功 if (empty($res['u_id'])) {  return json(['code' => 1, 'msg' => '注册失败,返回重试', 'res' => null]); } return json(['code' => 0, 'msg' => 'ok', 'res' => $res]);}