微信小程序+PHP 实现授权登录操作

第一步：

进行书写 wxml 页面

<!--前台页面，通过判断决定展示登录还是信息-->
<view wx:if="{{isHide}}">
    <view wx:if="{{canIUse}}" >
        <view class='header'>
            <image src='/image/hhh.jpg'></image>
        </view>
 
        <view class='content'>
            <view>申请获取以下权限</view>
            <text>获得你的公开信息(昵称，头像等)</text>
        </view>
 
        <button class='bottom' type='primary' open-type="getUserInfo" bindtap="login">
            授权登录
        </button>
    </view>
    <view wx:else>请升级微信版本</view>
</view>
 
<view wx:else>
    <view>我的首页内容</view>
</view>

第二步：

进行书写 wxss 页面

.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;
}

第三步：

进行 js 页面的书写

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    // 前台判断用的就是这个
    isHide: true
  },

  //点击事件
  login(){
    var _this=this;
    wx.getUserProfile({
      desc: 'desc',
      success: (res)=>{
        //点击允许后获取微信昵称与微信头像
        var nickName=res.userInfo.nickName;
        var log=res.userInfo.avatarUrl;
        wx.login({
          success:function(e){
            //请求成功后获取你的code值
            var code=e.code;
            wx.request({
              //请求后台
              url: 'http://www.day12.com/home/Login/loginInfo',
              //传code、nickName、log
              data: {code:code,nickName:nickName,log:log},
              header:{
                'content-type':'application/x-www-form-urlencoded'
              },
              success: function(arr){
                //判断后台请求成功后
                if(arr.data.code==200){
                  //将返回的ID值存入缓存中
                  wx.setStorageSync('id', arr.data.id)
                  //弹框提示
                  wx.showToast({
                    title: arr.data.msg,
                    icon: 'success'
                  })
                  //修改isHide值，以便于前台的判断展示
                  _this.setData({
                    isHide:false
                  })
                }
              }
            })
          }
        })
      },
      fail:(res)=>{
        //点击拒绝后弹框提示
        wx.showToast({
          title: '授权登录失败',
          icon: 'error'
        })
      }
    })
  }
})

第四步：

进行 PHP 后端代码的书写

public function loginInfo(){
//        接收前台传来的值
        $code=input('code');
        $nickName=input('nickName');
        $log=input('log');
//        判断是否为空
        if (empty($code)||empty($nickName)||empty($log)){
            return json(['code'=>1,'data'=>'','mag'=>'参数不正确']);
        }

//        在config中封装的，封装样式如下(这个码用你自己的微信扫描后会出现) 网址:https://mp.weixin.qq.com/
//        return [
//            'appID'=>'',
//            'AppSecret'=>''
//        ];
        $appID=config('appID');
        $appSecret=config('AppSecret');

//        请求地址
        $url="https://api.weixin.qq.com/sns/jscode2session?appid=".$appID."&secret=".$appSecret."&js_code=".$code."&grant_type=authorization_code";
//        getUrl是在common中封装的，封装样式如下
//        function getUrl($url){
//            $ch = curl_init();
//            curl_setopt($ch, CURLOPT_URL, $url);
//            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
//            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
//            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
//            $output = curl_exec($ch);
//            curl_close($ch);
//            $output = json_decode($output,true);
//            return $output;
//        }
        $res=getUrl($url);

//        调用成功后定义一个新的数组，最主要的session_key和openid两个值
        $arr=[
          'nickName'=>$nickName,
          'log'=>$log,
          'session_key'=>$res['session_key'],
          'openid'=>$res['openid'],
          'code'=>$code
        ];

//        new一个模型
        $model=new User();
//        根据openid查询一条数据，重点！！！！tp用find，laravel用first
        $item=$model->where('openid',$res['openid'])->find();
//        如果有就修改session_key这个字段，如果没有就新添加一条数据
        if ($item){
            $data=$model->where('openid',$res['openid'])->update(['session_key'=>$res['session_key']]);
        }else{
            $data=$model->insert($arr);
        }
//        返回主键ID
        return json(['code'=>200,'id'=>$item['id'],'msg'=>'登录成功']);
    }