uni-app寫微信登錄 前端

首先我們要明白微信的流程是怎么樣的，才能知道如何去做，話不多說，先上圖

按照微信官方給的文檔，我們首先要獲取到一個臨時code，這個臨時code是用來放到我們項目的后台的，后台發送秘鑰、臨時code和appid，后台一起發送到微信官方服務器，換取用戶的openid，這是微信的唯一標識。頭像和昵稱都不是惟一的，所以這個openid是唯一能夠確定“你是你”的標識。

  uni.login({
  provider: 'weixin', //這個是登錄提供商，這個不寫也沒關系
  success: function (loginRes) { 
     console.log(loginRes.authResult);   //這就是我們的臨時code，叫臨時是因為他有五分鍾的有效期，之后我們把這個code發送給后台
      var code=loginRes.authResult;      //把code保存起來
     uni.request({
       url:'https://www.baidu.com/',     //這里寫我們的后台地址，這里是示例
       method:'POST',
       data:{
        code:code                        //發送code到我們的后台
        },
       header:{
        'content-type':'application/json'   //定義頭部信息，json數據化
        },
       success: (res) => {
        console.log(res.data);          //這里面就有我們想要的信息，openid
        uni.setStorage({                //保存用戶登錄狀態，把openid保存到緩存中
          key: 'openid',
          data: 'res.data.openid',
          success: function () {
          console.log('用戶登錄成功');
              }
           });
        }
     })
  }
});

之后安裝官方所說的方法，我們實驗了一下，用戶體驗並不是很好，但我們可以借用這個思想，在微信緩存中存入一個量，用來用戶是否登錄，下次我們跳轉頁面的時候，我們只要檢測緩存中是否有我們需要的信息就可以了

uni.getStorage({               //讀取緩存中的登錄狀態
key:'openid',
success:function(res){
console.log("用戶已經登錄");     //檢測到用戶已經登錄，在控制台中打印出登錄消息
}，
fail:function(res){
console.log("用戶沒有登錄");     //檢測到用戶沒有登錄，在控制台中打印出沒有登錄的消息
}
})

到此，我們的微信登錄的前端就寫完了，希望大家喜歡