微信小程序實現登錄功能 （第一種模式）

------------恢復內容開始------------

第一種模式：設置小程序啟動頁為登錄頁

1.wxml代碼（布局的，最終要的是按鈕）

 

<view class='header'>
  <image src='/image/1.png'></image> //圖片自己引入
</view>
<view class='content'>
  <view>申請獲取以下權限</view>
  <text>獲得你的公開信息(昵稱，頭像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" bind:getuserinfo="bindGetUserInfo">
  授權登錄
</button>

 

 

 

 

2.butten按鈕的設置

 

 注：上圖來源於網絡截圖，如有冒犯請聯系撤回，謝謝！

  

給按鈕綁定觸發事件 放可進入授權登錄的小窗口

 

 

3.綁定觸發事件后在js文件中寫相對應的方法（以下是login.js中的全部代碼）

 

Page({
  data: {
    //判斷小程序的API，回調，參數，組件等是否在當前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    isHide: false
  },
  onLoad: function () {
    //頁面初次加載判斷用戶是否授權過 去緩存中讀取是否有
    wx.getStorage({
      key: 'openid',
      success(res) {
       //判斷是否有openid  如果不為空則跳轉到首頁
        if (res.data != "") {
          //跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
          wx.switchTab({
            url: '/pages/index/index'
          })
        }
      }
    })
  },
  bindGetUserInfo(e) {
    console.log(e)
    //如果不允許  則沒有userInfo這個值
    //獲取用戶的昵稱 判斷用戶點擊的是允許還是拒絕
    if (e.detail.userInfo) {
      //如果用戶允許，則能得到userInfo
      console.log(e.detail.userInfo)
      //獲取用戶的昵稱 
      let nickname = e.detail.userInfo.nickName
      // console.log(nickname)
      //獲取用戶的昵稱  去獲取code
      wx.login({

        success(res) {
          if (res.code) {
            //得到了code值  攜帶參數發送請求
            console.log(res.code)
            //發起網絡請求
            wx.request({
              url: 'http://www.xxxxxx.com/index.php/users/index/index',
              data: {
                code: res.code,
                nickname: nickname,
              },
              dataType: "json",
              method: "GET",
              success(res) {
                console.log(res.data.data.openid)
                console.log(res.data.code)
                //判斷是否授權成功
                if (res.data.code == 200) {
                  //將用戶的openid緩存起來
                  wx.setStorage({
                    key: "openid",
                    data: res.data.data.openid
                  })
                  //頁面跳轉
                  wx.switchTab({
                    //跳轉地址
                    url: '/pages/index/index',
                  })
                } else {

                }
              }
            })
          } else {
            console.log('登錄失敗！' + res.errMsg)
          }
        }
      })

    }

  }

})

 

4.php中的邏輯處理 如何獲取用戶信息

    public function index()
    {
        //獲取到code值
        $code=input('code');
       //已知appid 與 secret   從自己的微信公眾平台注冊獲取
        $appid="xxxxxxx";
        $secret="xxxxxxxxx";
        $url="https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";
        //通過curl函數獲取用戶的oppid和sessionkey  將其進行添加入庫
        $res=curl_request($url,false,[],true);
        //對 JSON 格式的字符串進行解碼，轉換為 PHP 變量   此次將 JSON 格式的字符串轉化為數組
        $res=\Qiniu\json_decode($res,true);
        //判斷用戶是否已經授權過
        $user=\app\wxxcx\model\Users::where('openid',$res['openid'])->find();
        //如果用戶已將存在則直接返回數據
        if ($user){
            return json(['code'=>200,'msg'=>'success','data'=>$user]);
        }
        //拼接數組入庫保存
        $info=[
            'openid'=>$res['openid'],
            'sessionkey'=>$res['session_key']
        ];
        //添加入庫
        $data=\app\wxxcx\model\Users::create($info)->toArray();
        //將數據返回
        if ($data){
            return json(['code'=>200,'msg'=>'success','data'=>$data]);
        }else{
            return json(['code'=>500,'msg'=>'error','data'=>""]);
        }

    }

 

 

 

5.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

 

 注釋：上面這種做法的好處的，設置登錄頁為默認啟動頁，而tabbar並未設置該頁，所以說不用考慮tabbar在未登錄狀態下的是否顯示問題，后端處理成功后考慮到后面會驗證用戶是否登錄，所以要將用戶的openid存入緩存中，等待隨時取值

 

以上是以啟動頁來獲取用戶個人信息，微信小程序還提供了可以在app.js中通過獲取當前瀏覽者的code進而獲取openid和session_key