最近公司項目不是很忙，有時間研究研究微信小程序。參考了目前市場上各類答題類的app、小程序等等，做了一款自己的微信答題小程序，包括前端和后端，后端是用node做的。現在已經上線了，名字叫【你問我猜猜猜】微信小程序開放源碼，大家感興趣的話可以去試玩一下。
會vue、react, 微信小程序，so easy
如果之前用過vue或者react，直接看看文檔上手微信小程序完全沒問題。整體開發思路很相似，包括其中的一些語法，基本上都是一樣的。或者用美團的mpvue框架，那就根本不用學習小程序的語法了，寫起來跟vue一樣。但是我們開發的時候沒有用框架，用的是原生的微信小程序語言，開發起來也很easy。而且微信小程序有很多自己的API，比如圖片上傳、下載、音頻等等，項目中用到的時候再找文檔就來得及。
這次開發的難點，也是微信小程序的難點，應該就是在登錄了。如果把登錄流程弄明白了，在開發其他的功能，基本上就是時間的問題了。
難點：微信小程序登錄
看了好多文檔關于登錄相關的介紹，下圖的介紹是比較詳細的過程，開發過程中也是采用的這個邏輯。只不過我們沒有獲取用戶的敏感信息，所以沒有7、8步驟。直接通過wx.()獲取到用戶名、頭像等信息即可滿足我們的需求。
登錄步驟通過調用wx.login() API，成功后會拿到用戶的code信息將code信息通過接口，傳給自己的后臺（不是微信的后臺），在服務端發起對微信后臺的請求，成功后拿到用戶登錄態信息，包括、等。也就是通常所說的拿code換，這個是用戶的唯一標識。自己的后臺，拿到、等信息后，通過第三方加密，生成自己的信息，返回給前端。前端拿到第三方加密后的后，通過wx.()保存在本地，以后的請求都需要攜帶這個經過第三方加密的信息。之后如果需要用戶重新登錄，先去檢查本地的信息，如果存在，再用wx.()檢查是否在微信的服務器端過期。如果本地不存在或者已過期，則重新從步驟1開始走登錄流程。
登錄的代碼如下：
wx.getStorage({
key: "code",
success: res => {
wx.checkSession({
success: res => {
console.log("Session未過期，登陸狀態未失效");
},
fail: err => {
// 重新登錄
console.log("Session過期，重新登錄");
loginAction();
}
});
},
fail: res => {
console.log("無code信息，調用登錄接口獲取code");
loginAction();
}
});
登錄的流程圖如下：
.png
注意事項1. npm這么容易，個包用用？
微信小程序沒有包管理這一說（但是最新版本的好像支持npm了），所以想要用到別的庫里的組件，只能找到源碼，copy過來。
2. 既然是唯一的，那我為什么不能用作為憑證微信小程序開放源碼，還要麻煩的用個第三方
有可能造成數據越權。比如今天我通過我的手機登錄了微信，打開了小程序。但是明天有個朋友想用我的手機登一下微信。如果用作為登錄憑證，登錄小程序的時候檢測到已經存在，所以不會再走登錄過程，這樣我的數據就讓我的朋友看到了。所以還是要按照官方推薦的步驟來。
3. 本地啟服務，如何通過訪問服務端接口？
微信小程序默認都是https請求，如果本地開發聯調，需要在開發者工具 -> 項目設置里，勾選上【不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書】，這樣就可以愉快的使用訪問服務端了。
4. 組件如何清空
一個常用的使用場景，用戶反饋里，用戶巴拉巴拉吐槽完，點擊確認發送成功后，為了防止用戶再次重復提交，需要將中的數據清空。
用過vue的大家都知道，綁定一個字段，當成功后將這個字段賦值為空就好了。but，微信小程序可不干。
微信小程序文檔中這樣說明：不建議在多行文本上對用戶的輸入進行修改，所以 的 處理函數并不會將返回值反映到 上。
如何解決呢。可以給綁定一個value值。用form表單去提交。成功后將value綁定的值清空就可以了。
具體代碼如下：
bindTextAreaInput: function(e) {
this.setData({
feedbackContent: e.detail.value
});
},
bindSubmit: function(e) {
this.setData({
btnLoading: true
});
addFeedbackRequest({
content: e.detail.value.feedbackContent.trim()
}).then(res => {
if (res.success) {
this.setData({
btnLoading: false,
feedbackContent: ""
});
this.showToast("提交成功，感謝您的反饋");
} else {
console.log("fail");
this.showToast("提交失敗，請稍后再試");
}
});
},
5. 有關圖片的引用問題
給頁面添加背景是，如果通過屬性來添加，抱歉，那你不能引用本地的圖片，只能引用經過轉碼的或者網上的圖片。
小程序的文檔上有說，本地資源是無法通過css獲取的。但是通過image的src屬性引用的圖片，則沒有這個限制。
6. 層級不能超過5級
文檔上說明：為了不讓用戶在使用小程序時造成困擾，我們規定頁面路徑只能是五層，請盡量避免多層級的交互方式。
使用wx.()的時候，規定層級不能超過5級。如果超過5級，頁面就出錯了。但wx.()則無此限制。
注意：
wx.()是保留當前頁面，跳轉到應用內的某個頁面，使用 wx. 可以返回到原頁面
wx.()是關閉當前頁面，跳轉到應用內的某個頁面。
7. 統一封裝請求，在中攜帶信息
wx.()是發送請求的api，如果每個請求都在中重新一份信息，一定很麻煩。所以基本上前端都會封裝一個新的請求函數，包括攜帶信息，處理錯誤接口等功能。具體代碼如下：
const httpRequest = data => {
return new Promise(function(resolve, reject) {
console.log("http request", data.url);
let code = "";
wx.getStorage({
key: "code",
success: res => {
code = res.data;
console.log("http request success", code);
//發起網絡請求
wx.request({
url: data.url,
data: { ...data.data },
method: data.method,
header: {
code: code,
"content-type": "application/x-www-form-urlencoded"
},
success: function(res) {
if (res.data.success) {
resolve(res.data);
} else {
// console.log(JSON.stringify(res));
if (res.data.errorCode == 100) {
goBackIndex();
}
reject(res.data);
}
},
fail: function(res) {
console.log(JSON.stringify(res));
if (res.data.errorCode == 100) {
goBackIndex();
}
reject(res);
}
});
},
fail: res => {
console.log("http request failed", code);
console.log("not found code in storage");
goBackIndex();
}
});
});
};
具體代碼
有關本項目的具體代碼（包含前后端，后端用的think.js框架，數據庫用的mysql）已經放在上，如有需要，歡迎clone，歡迎star。
小程序前端：
小程序后臺：