05 uniapp/微信小程式 項目day05
一.登錄與支付
1.1 登錄
1.1.1 條件判斷
當我們點擊結算應當進行條件判斷
第一個如果沒有勾選商品
第二個是沒選擇地址
第三個是未登錄
1.1.2 頁面布局
應該有兩個頁面，一個點擊登錄，一個登陸成功後的頁面，所以應該創建兩個組件
他們應該按需展示，並且條件為是否有token
然後未登錄的頁面結構
uni icon的頭像icon
1.1.3 獲取用戶基本資訊
由於微信登錄並不像pc點擊登錄就去調用介面，微信登錄需要調用自己的登錄api，然後獲取到一些資訊密匙等，而我們的登錄介面就需要這些密匙
也會彈出登錄授權框
用到一個api
uni.getUserProfile其中desc為這次調用的登陸的資訊說明
首先是取消登錄的驗證
登錄成功將我們的用戶資訊存進vuex
然後組件這邊存進來
注意這裡做了改造用它規定的回調來寫
1.1.4 獲取code
我們的登錄介面還需要一個參數code
這個碼只能通過 uni.login這個api獲取
所以我們登錄成功獲取了profile資訊後還應該再去獲取code
現在有了code就可以去發起請求了
登錄成功應該將token永久存儲
state裡面也要修改
注意我們的數據回來不僅是要存在storage裡面，要讓頁面能夠響應到還應該給她賦一次值
1.2 用戶資訊
1.2.1 渲染用戶頭像和昵稱
現在組件定義好基本結構
然後從vuex拿回我們之前存進去的數據，並渲染上來
1.2.2 三個面板
接下來是這個頁面三個面版的渲染
主要是一些html及css的規劃
1.2.3 退出登錄
主要就是要用到一個api 來彈出是否退出登錄的消息框
uni.showModal
同樣的會有兩個返回，一個是否為null的錯誤返回，一個是成功返回，而且promise catch捕獲一下錯誤
如果返回有值，且有confirm這個對象，那麼就清空token、userinfo、地址資訊
1.2.4 三秒跳轉
當未登錄的時候在購物車點擊結算應該提示未登錄，還有多少s跳轉到登錄頁
定義一個初試的秒數
當我們沒有token也就是沒有登陸的時候就去調用一個定時器每秒鐘執行這個提示
注意，toast有一個屬性mask，表示開啟了面罩不能夠點擊後面的內容，防止點擊穿透
現在要解決的問題，就是讓秒數到0後就跳轉過去並且停止定時器
創建一個定時器
判斷seconds是否小於0，如果是就停止定時器，並且跳轉過去，最重要的return返回seconds為3
登錄成功後導航跳轉
當我們登陸成功應該從哪來回哪去，這裡用的方法是
首先在vuex定義一個對象，這個對象應該存儲兩個資訊，opentype以及form，分別表示跳轉的方式和跳轉的地址
然後我們在點擊結算那裡進行一個傳值
在我們跳轉的成功回調裡面進行傳值
這個時候，我們的登陸成功得到token後面應該去判斷一下是否有這兩個值，有就跳轉，並且把redirectInfo重置為空對象，不然容易出現問題
1.3 微信支付
首先前提：我們需要將請求頭改變，因為只有登錄之後才能調用支付相關的介面，所以必須為有許可權的介面添加請求頭欄位
在請求攔截器操作，我們的請求攔截器參數，會有url以及Authorization等屬性，如果說url裡面帶有my就是表示需要許可權的介面，這個時候就要參數裡面的header的authorization屬性帶上我們的token去發起請求
微信支付三部曲：
首先創建訂單
在我們點擊結算那裡都通過了驗證就整合數據，創建訂單介面需要的數據
整合數據
然後發起請求並保存下來
訂單預支付
然後繼續拿這個訂單編號去發起預支付的請求，獲取到要調用微信支付api的一些參數
實現支付
用到微信支付的api uni.requestPayment
接受兩個回調如果有錯誤就返回錯誤
如果沒有錯誤還要再次調用我們的介面去判斷一些有沒有支付成功
二.發布
為什麼要進行發布？
因為只要發布後才能被用戶搜索到，而且現在體積是偏大的，只有發布後進行壓縮了體積才會變小
2.1 發布為小程式
首先發行
需要去dccloud添加應用並重新在manifest.json輸入uniappId
發行成功後點擊開發者工具上傳
上傳成功後在微信公眾平台提交審核
按照他的步驟一步一步來把詳細資訊弄完整
審核成功後發布上線即可
2.2 發布為Androidapp
首先還是要設置好我們的manifest裡面的appid
然後要設置好圖標
直接選擇雲打包
