開始第一個微信小程序（六）

經過前段時間的幸苦研究，終於做到了差不多的很多功能
1.開發環境搭建成功了
2.頁面結構瞭解了，全局，wxml，vue的寫法
3.頁面數據傳遞
4.接口請求方式
5.調用函數方法
好像看上去詳細優化豐富一下就可以是一個簡單的小程序了，但是總覺得哪裏不對？
原來我忘記了登錄問題，以前網頁端的登錄我們需要註冊一個用戶名或者由官方提供一個用戶名來做登錄請求，經常玩小程序的人肯定知道，小程序和微信是連通的，微信又是綁定在你的手機號碼上的，那麼登錄在小程序裏面就不需要那麼麻煩，只需要一鍵授權就可以了。

因爲我第一時間想到的是微信授權，獲取微信的OPENID然後通過OPENID來匹配，後來發現：這樣做，我除了需要授權完去數據庫匹配用戶以外，我首先必須把現有用戶的openid都獲取到，而沒有關注我們微信公衆號的用戶又獲取不到openid，這樣就無法使用我們商城手機端了，很不靈活。
因爲我們的需求是網頁端用戶和微信端用戶是通用的，而網頁端用戶都有記錄用戶手機號碼的，這樣我改變了一下策略，使用手機號碼驗證登錄（可能我的方案不是很好，歡迎高手指點指點）。

那麼我要開始準備了
1.授權登錄頁面
2.每個頁面裏面獲取登錄後的用戶
3.如果用戶沒有登錄有些頁面只有查看權限，沒有下單權限

授權登錄頁面

這個很簡單。我拖了個很大的圖標，圖標下面放了個按鈕，按鈕使用的就算手機授權模式。

最重要的就是紅框裏面的2個，open-type="getPhoneNumber"這個就是手機授權按鈕
bindgetphonenumber="getPhoneNumber" 這個就是綁定方法 getPhoneNumber

如上圖，首先wx.login 登錄獲取code ---- 然後將code發送給微信接口
https://api.weixin.qq.com/sns/jscode2session?appid=wx521f5505a73d3b18&secret=0b27e4a7250fb1868bb51e5fb6fc629f&grant_type=authorization_code&js_code="+ code + " 獲取session_key
然後再寫一個解密函數接口將手機授權成功後獲取的IV 和encryptedDataStr ，session_key 進行解密

解密成功後的數據裏面包含了當前授權用戶的手機號碼
![](https://s4.51cto.com/images/blog/202012/07/81a8deba61fc5192bddb6e0b9decefe5.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
然後將手機號碼保存在全局緩存裏面，跳轉到首頁

wx.setStorageSync('telphone', res.data.phoneNumber);

每個頁面裏面獲取登錄後的用戶

這個比較簡單，上面設置已經做好了，在頁面onload的時候和onshow的時候寫這樣一句話

如果獲取到的不是手機號或者null那就跳回到授權頁面，或者你可以做你想讓用戶看到的頁面

如果用戶沒有登錄有些頁面只有查看權限，沒有下單權限

這個就是根據上面獲取用戶來做的，如果得到爲null的話列表頁面和詳情頁面是給用戶查看的，我這邊會隱藏下單頁面。

基本上一個授權登錄就是這麼簡單的完成了，接下來就只有下單，我的訂單這些功能了。下回繼續研究，謝謝大家！！！