1.写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>

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

3.写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('token', arr.data.data.token)
                  //弹框提示
                  wx.showToast({
                    title: arr.data.msg,
                    icon: 'success'
                  })
                  //修改isHide值，以便于前台的判断展示
                  _this.setData({
                    isHide:false
                  })
                }
              }
            })
          }
        })
      },
      fail:(res)=>{
        //点击拒绝后弹框提示
        wx.showToast({
          title: '授权登录失败',
          icon: 'error'
        })
      }
    })
  }
})

4.写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'],
        ];

        //根据openid查询一条数据
        $item=User::where('openid',$res['openid'])->find();
        //如果有就修改session_key这个字段，如果没有就新添加一条数据
        if ($item){
            $data=User::where('openid',$res['openid'])->update(['session_key'=>$res['session_key']]);
            $token=JWTS::createJwt($item->id);
            //返回主键ID TOKEN
            return json(['code' => 200, 'data'=>[
                'uid' => $item->id,
                'token'=>$token,
            ], 'msg' => '登录成功',]);
        }else{
            //添加
            $data =User::addUser($arr);
            $token=JWTS::createJwt($data->id);
            //返回主键ID TOKEN
            return json(['code' => 200, 'data'=>[
                'uid' => $data->id,
                'token'=>$token,
            ], 'msg' => '登录成功',]);
        }
    }