現在要講的是小程序特有的一些API,可能會比較繞微信小程序云開發watch,不過本質是很簡單的,只要按照步驟操作就會守得云開見日來
一.前言
上一篇章講了如何利用wepy傳遞數據,如何在組件之間共享數據和事件,如何添加方法,計算屬性,數據監聽,共享事件,這一篇文章要講的小程序的用戶登陸流程,在原來的小程序中,只要我們點開,就會彈出用戶授權選項卡,因為有些獲取用戶私有數據的API必須要用戶授權才能使用
二.準備工作
在開始正式編程之前,我們首先要利用wepy搭建項目的框架,并刪除不需要的默認測試內容
1.刪除,,pages文件夾下的內容,并且在pages文件夾下新建index目錄,將原有的index.wpy文件移到該目錄下,在index.wpy文件中僅保留空的,,data,,, wepy from "wepy",以及中的
2.在app.wpy中僅保留 wepy和 async ,修改中的pages目錄為pages/index/index,刪除不必要的生命周期函數,sleep,async,,在中的super()后加上;, Data后面加;.
3.打開項目,使用自己的appId,因為我們在自己的appid中設置了默認的訪問的地址,默認顯示index.wepy文件中的內容,開啟wepy build --watch,即可以看到自己的頁面.
三.登錄流程時序
登錄流程時序.png
登錄流程說明.png
1.由上圖可知,首先通過wx.login獲取登錄code(登錄校驗碼),然后通過wx.將code發送到開發者服務器,憑借用戶的Appid和code從微信服務器獲取(本次會話密鑰)和,在本地服務器根據這兩個信息定義用戶的登錄狀態,并且將用戶的登錄狀態返回到界面,這就是一次完整的用戶授權過程
2.授權注意點
A.過去老版本的API中可以直接通過wx.({scope: "scope."}), 彈出授權界面
騰訊覺得這種授權方式用戶體驗不好, 現在要求我們自己引導用戶授權
B.如何引導用戶授權?
添加一個open-type類型為的按鈕, 只要用戶點擊這個按鈕就可以彈出授權窗口
獲取用戶信息
控件意味著引導用戶授權,不會像以前一樣莫名其妙的就彈出一個窗口
需要用戶授權的原因是使用一些獲取用戶隱私的API需要用戶授權,并不需要剛進入小程序就提示用戶授權,這樣做用戶體驗非常差
3.具體授權步驟
在index.wpy中添加上述的授權按鈕,并且添加(e){.log(e.);}為了保證按鈕的美觀微信小程序云開發watch,可以添加type屬性為"",然后回到微信開發工具,就會彈出授權窗口,并且會執行方法中的內容,打印e.:用戶獲取用戶信息返回對象中所有和key有關的內容.
image.png
用戶授權返回的信息.png
通過添加授權按鈕以及編寫授權方法就可以實現授權,在授權觸發的方法中可以通過e.得到以上圖片中的數據
{: ":ok", : "{"":"","":2,"":"zh_C…Pjg/132"}", : "", : "Z1p4S///Nsp…imvwP/80=", iv: "0Q==", …}
以上引用是我的客戶端實際打印的授權數據
三.微信登錄的簡單流程
1.通過wx.login()獲取登錄憑證code
2.通過組件的open-type="", 獲取用戶信息
3.將獲取到的登錄憑證和用戶信息傳遞到自己的服務器
4.在自己的服務器上將登錄憑證發送到微信的服務器上換取和
5.利用用戶提交的信息在自己的服務器上注冊用戶賬號(等等...)
6.將注冊之后的信息返回給微信小程序
7.將注冊信息保存起來以便以后使用
特殊說明:
0.code: 登錄憑證
1.: 用戶唯一標識
2.: 本次登錄的會話密鑰
注冊信息使用的場景:
由于注冊信息中包含了用戶的唯一標識, 所以例如購物車類似的操作, 我們就需要根據用戶的唯一標識去獲取對應用戶
四.wepy項目中使用async,await
1.上面一節講了如何獲取用戶的授權信息,在實際微信小程序的登錄流程,開發者服務器會通過方法從微信服務器獲取本次會話密鑰用于數據的加密以及用戶的唯一標識appid,這一節將如何通過wepy中的async和await獲取用戶的授權信息
2.在使用wepy提供的用戶登錄方法之前,先來了解一下小程序原生的用戶登錄方法
image.png
image.png
image.png
前面講過微信登錄流程,要先利用wx.login獲取code,然后通過獲取用戶信息,將登錄憑證和用戶信息遞交到自己的服務器上,通過從微信服務其上獲取用戶本次會話登錄密鑰和唯一的appid標識符,一下是在app中生命周期方法中執行的wx.login
login.png
code.png
3.在wepy官網的代碼規范中選擇啟用方法拿到說明文檔
image.png
image.png
完成上述步驟剩下需要知道如何使用提供的異步完成登錄時時數據的請求,在上述說明文檔的側邊欄找到wepy項目中使用async,await,就能看到異步請求的說明文檔
image.png
第一步安裝相應的組件我們在第二小節獲取用戶信息已經安裝了,可以直接略過.
我們可以在側邊欄的針對原生的API進行優化修改第三小節的wx.login代碼
image.png
基本上編寫配置文件重新編譯配置,也就是最后一步,就可以使用優化后的請求代碼了