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

阿新 • • 發佈：2020-12-26

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

第一種模式：設定小程式啟動頁為登入頁

1.wxml程式碼（佈局的，最終要的是按鈕）

 1 <view class='header'>
 2   <image src='/image/1.png'></image> //圖片自己引入
 3 </view>
 4 <view class='content'>
 5   <view>申請獲取以下許可權</view>
 6   <text>獲得你的公開資訊(暱稱，頭像等)</text>
 7 </ 
view>
 8 <button class='bottom' type='primary' open-type="getUserInfo" bind:getuserinfo="bindGetUserInfo">
 9   授權登入
10 </button>

2.butten按鈕的設定

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

給按鈕繫結觸發事件放可進入授權登入的小視窗

3.繫結觸發事件後在js檔案中寫相對應的方法（以下是login.js中的全部程式碼）

 1 Page({
 2   data: {
 3     //判斷小程式的API，回撥，引數，元件等是否在當前版本可用。 

 4     canIUse: wx.canIUse('button.open-type.getUserInfo'),
 5     isHide: false
 6   },
 7   onLoad: function () {
 8     //頁面初次載入判斷使用者是否授權過 去快取中讀取是否有
 9     wx.getStorage({
10       key: 'openid',
11       success(res) {
12        //判斷是否有openid  如果不為空則跳轉到首頁
13         if (res.data != "") {
14           // 
跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
15           wx.switchTab({
16             url: '/pages/index/index'
17           })
18         }
19       }
20     })
21   },
22   bindGetUserInfo(e) {
23     console.log(e)
24     //如果不允許  則沒有userInfo這個值
25     //獲取使用者的暱稱 判斷使用者點選的是允許還是拒絕
26     if (e.detail.userInfo) {
27       //如果使用者允許，則能得到userInfo
28       console.log(e.detail.userInfo)
29       //獲取使用者的暱稱 
30       let nickname = e.detail.userInfo.nickName
31       // console.log(nickname)
32       //獲取使用者的暱稱  去獲取code
33       wx.login({
34 
35         success(res) {
36           if (res.code) {
37             //得到了code值  攜帶引數傳送請求
38             console.log(res.code)
39             //發起網路請求
40             wx.request({
41               url: 'http://www.tpshop2.com/index.php/users/index/index',
42               data: {
43                 code: res.code,
44                 nickname: nickname,
45               },
46               dataType: "json",
47               method: "GET",
48               success(res) {
49                 console.log(res.data.data.openid)
50                 console.log(res.data.code)
51                 //判斷是否授權成功
52                 if (res.data.code == 200) {
53                   //將使用者的openid快取起來
54                   wx.setStorage({
55                     key: "openid",
56                     data: res.data.data.openid
57                   })
58                   //頁面跳轉
59                   wx.switchTab({
60                     //跳轉地址
61                     url: '/pages/index/index',
62                   })
63                 } else {
64 
65                 }
66               }
67             })
68           } else {
69             console.log('登入失敗！' + res.errMsg)
70           }
71         }
72       })
73 
74     }
75 
76   }
77 
78 })

4.php中的邏輯處理如何獲取使用者資訊

 1     public function index()
 2     {
 3         //獲取到code值
 4         $code=input('code');
 5        //已知appid 與 secret   從自己的微信公眾平臺註冊獲取
 6         $appid="xxxxxxx";
 7         $secret="xxxxxxxxx";
 8         $url="https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";
 9         //通過curl函式獲取使用者的oppid和sessionkey  將其進行新增入庫
10         $res=curl_request($url,false,[],true);
11         //對 JSON 格式的字串進行解碼，轉換為 PHP 變數   此次將 JSON 格式的字串轉化為陣列
12         $res=\Qiniu\json_decode($res,true);
13         //判斷使用者是否已經授權過
14         $user=\app\wxxcx\model\Users::where('openid',$res['openid'])->find();
15         //如果使用者已將存在則直接返回資料
16         if ($user){
17             return json(['code'=>200,'msg'=>'success','data'=>$user]);
18         }
19         //拼接陣列入庫儲存
20         $info=[
21             'openid'=>$res['openid'],
22             'sessionkey'=>$res['session_key']
23         ];
24         //新增入庫
25         $data=\app\wxxcx\model\Users::create($info)->toArray();
26         //將資料返回
27         if ($data){
28             return json(['code'=>200,'msg'=>'success','data'=>$data]);
29         }else{
30             return json(['code'=>500,'msg'=>'error','data'=>""]);
31         }
32 
33     }