小程式初新建的專案，有三個重要檔案app.js、app.json、app.wxss，吶...今天我們就從我個人的實戰經驗講講，app.js檔案裡應該做哪些騷操作，方便我們開發呢。
一、promise（wx.requset）封裝
直接上程式碼，當然這個你也可以放在utils裡單獨引用
// promise（wx.requset）封裝
httpPost: function (url, data, type) {
return new Promise((resolve, reject) => {
//init
const that = this;
const postData = data; // 請求引數
const postType = type // 請求方式 POST、GET、DELETE...
//網路請求
wx.request({
url: that.configHeadAjax.onlinePath + url, // 預設請求域名地址（配置項）+api有效地址
data: postData,
method: postType,
header: { // 公共請求頭，可以按口味新增公共引數
'content-type': 'application/json' ,
'token': wx.getStorageSync('token') ? wx.getStorageSync('token'):'', // token其實就是openid+sessionkey如果沒有就是首次登入服務端做空態判斷處理
},
success: function (res) {
if (res.data.status == 1) {
resolve(res);
} else { // 返回錯誤提示資訊
if (res.data.error_code == 200001){ // 服務端返回狀態碼為判斷標準，無論哪個介面什麼時候登入態過期都重新調起login
wx.setStorageSync("logFlage", 0) // 本地登入標識
wx.navigateTo({ // 跳轉至登入頁
url: '../logs/logs',
})
}else{
reject(res)
}
}
},
fail(res) {
reject('網路出錯');
wx.showToast({
title: '網路出錯',
icon:'none'
})
}
})
});
return promise;
},
複製程式碼之所以把登入態判斷放在這裡，是因為發現，服務端的登入態和我們本地需要wx.checkSession檢測的使用者登入態是不一樣的，所以為了避免其他頁面重複操作，在這裡統一做了處理。
二、環境變數及公共引數配置。
globalData: { // 這塊全域性資料貌似每一個新建專案都有，就不多解釋了，存起來用就完了
userInfo: null, // 授權後登入資訊（微信）
loginStatus: false, // 預設登入狀態為false
user: null, // 登入資訊（賬戶）
secret_key: 'XXXXX',
timestamp: new Date().getTime()
},
configAjaxPath: { //通過呼叫configAjaxPath.onlinePath||
onlinePath: "https://xxx.xxx.com",
testPath:'https://test-xxx.xxx.com',
devPath:'https://dev-xxx.xxx.com'
},
複製程式碼這裡就不多說了，這樣做的目的也很明確，方便引用，方便修改，一目瞭然，改一蓋全....
三、使用者授權、登入。
#授權 通常就是包含兩個方面的許可權
- 使用者資訊獲取授權 getUserInfo
- 服務API呼叫授權 wx.authoriz
通常我們說的授權大多是首次進入某小程式是彈出的使用者資訊獲取授權
- 用小程式openid && session_key 作為使用者標識來儲存，並判斷是否為該小程式業務的使用者登入
- 自有登入註冊體系login && register，自有的登入標識 (多以手機號為主)
但其實不管哪一種你都需要一個登入介面來儲存對應資訊，然後通過服務端返回值或者微信本地check來判斷使用者登入是否過期，那麼理清思路，我們就擼程式碼了
onLaunch: function () { //首次啟動時觸發，全域性只觸發一次
const that = this
// 登入
wx.checkSession({
success() {
// 登入未過期
},
fail() {
wx.setStorageSync('logFlage',0); //改變本地登入狀態
wx.navigateTo({ // 跳轉至登入頁 重新登入
url: '../logs/logs',
})
}
})
},
userLogin: function () { //使用者登入
wx.login({ //小程式登入獲取code碼
success: res => {
// 傳送 res.code 到後臺換取 openId, sessionKey, unionId
var data = {
code: res.code
}
this.httpPost('/user/login', data, 'POST').then(res => { //code
if (res.data.status == 1){
wx.setStorageSync('token', res.data.result.token) //本地儲存token取用
wx.setStorageSync('logFlage', 1); //本地儲存登入狀態
// 獲取使用者資訊
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 傳送給後臺解碼出 unionId
this.globalData.userInfo = res.userInfo;
wx.setStorageSync('userinfo', res.userInfo); //本地儲存微信使用者資訊
wx.switchTab({
url: '../index/index', //成功後跳轉至小程式首頁開始體驗
})
// 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
} else {
// 未經授權，彈框確認後呼叫 getUserInfo
}
}
})
}else{
wx.showToast({ //提示錯誤資訊
title: res.data.message,
icon:'none'
})
}
}).catch((errMsg) => {
wx.showToast({ //提示錯誤資訊
title: errMsg.data.message,
icon:'none'
})
});
}
})
},
複製程式碼其實到這裡app.js裡的操作就基本完成了，還需要做的就是在app.json pages裡配置login頁為預設首頁， 吶就這樣放在放第一位
然後在logs頁面設計個高大上體的宣傳照，再加一個登入按鈕就行了
- 判斷本地登入態，是 則跳轉首頁index 否 則無需操作，等使用者點選按鈕
- 點選登入按鈕，呼叫app.userLogin()方法去走授權登入流程
歡迎各路大神交流，指導，糾錯，互相學習進步
