上班實習的第一天伦吠，接到任務，要求開發(fā)一個微信小程序魂拦。小程序名為【翼簽到】毛仪，用作公司內部發(fā)布大會消息和報名簽到。
接到設計稿芯勘，估摸了一下箱靴，發(fā)現頁面比較多，還好導師給我安排一個小伙伴進行協作開發(fā)荷愕。他主要負責發(fā)布流程而我主要負責著陸流程衡怀、審批流程和后臺接口的開發(fā)棍矛。
微信小程序
開發(fā)微信小程序是一件很有意思的事情。原因有二：
- 簡潔易懂的中文文檔
- 所見即所得的開發(fā)快感
入門開發(fā)小程序的成本是相當低的狈癞，但是想要寫好來茄靠，也是一件不簡單的事情，也踩過了一些坑蝶桶，在這里和大家分享一下慨绳。
1.setData()
調用setData()改變data中的數據，并不是實時的真竖。頻繁的（毫秒級）調用setData()會嚴重影響頁面性能脐雪。至于原理，微信小程序的文檔說得很清楚了恢共。
https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html?search-key=%E6%80%A7%E8%83%BD
2.生命周期函數onShow
官方文檔給這個聲明周期函數給出的介紹是：onShow: 頁面顯示战秋，每次打開頁面都會調用一次。當我們調用微信小程序API路由跳轉至一個頁面的時候讨韭，該頁面掛載的onShow函數脂信，往往都會執(zhí)行一次。
3.在視圖容器swiper中使用map組件
<swiper>
<swiper-item>大會介紹</swiper-item>
<swiper-item>大會議程</swiper-item>
<swiper-item>出席嘉賓</swiper-item>
<swiper-item>地圖定位
<map> </map>
</swiper-item>
</swiper>
官方文檔明確指出<map>組件不能嵌套在<swiper>組件當中使用透硝。上面的代碼違反了這條規(guī)定狰闪。出現的結果就是：在微信開發(fā)者工具中的模擬器測試，四個<swiper-item>能夠流暢切換濒生，表現正常埋泵。但是，當在手機上進行測試的時候罪治，便出現了<map>組件停留在原地丽声，不會隨著父元素的<swiper-item>滑動的問題。
對于這樣的問題觉义，目前的解決方案是：使用<image>組件替換<map>組件雁社，也就是展示一張靜態(tài)的假地圖。當用戶需要操作地圖的時候晒骇，<image>組件隱藏歧胁，將真正需要展示<map>組件顯示出來即可。
4.微信小程序啟動機制
微信小程序只有冷啟動和熱啟動之分厉碟。當用戶打開過某個小程序喊巍，然后在一定時間內（目前為5分鐘）再次打開，只需將后臺態(tài)的小程序切換到前臺箍鼓，這是熱啟動崭参。冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況，此時小程序需要重新加載啟動款咖。
微信小程序被銷毀的情況有兩種：
1.當小程序進入后臺何暮，客戶端會維持一段時間的運行狀態(tài)奄喂，超過一定時間后（目前是5分鐘）會被微信主動銷毀
2.當短時間內（5s）連續(xù)收到兩次以上收到系統內存告警，會進行小程序的銷毀
5.密切關注微信小程序API的變動
作為一個系統的開發(fā)者和維護者海洼，要關注官方文檔中API的變動跨新，因為某些API的變動可能會影響到使用該API的模塊功能，因此需要做出及時的調整坏逢。例如域帐，在今年4月份的時候，微信小程序變動了獲取用戶信息的接口(wx.getUserInfo)是整，具體見下圖：
簡單來說肖揣，此次更新，是微信小程序獲取用戶信息這一操作更加傾向于用戶主動提交個人信息浮入。如果程序開發(fā)者不及時更新維護的話龙优，那么原先調用wx.getUserInfo這一接口，將會報錯事秀。
在這種情況下彤断，拿【有贊服務指南小程序】舉例，該小程序在獲取用戶頭像的時候（用戶信息的一部分），明顯的修改為“點擊獲取頭像”，指引用戶主動點擊提交個人信息以獲取個人頭像信息。就算用戶出于安全考慮不點擊，那么小程序也不會調用wx.getUserInfo接口旬昭，因此，也不會產生錯誤钻注。
后臺技術棧
依照公司內部的技術棧體系片仿，后臺技術棧選用了Node+Express4.0+MySQL。作為一個已經有Koa框架開發(fā)經驗的我來說陆淀，使用Express開發(fā)后臺接口的難度并不高考余。整個開發(fā)周期，花費在前端開發(fā)的時間遠比開發(fā)后臺接口所花的時間多得多轧苫。
其它
和我搭檔的小伙伴楚堤，在發(fā)布流程開發(fā)至一半的時候，離職返校答辯去了含懊，留下我孤零零的攬下整個小程序的開發(fā)身冬。于是，在他編寫的代碼基礎上岔乔，我繼續(xù)對發(fā)布流程進行開發(fā)酥筝，讓我有了不小的收獲。
1.一個函數只做一件事情
下面代碼的封裝了一個getConferenceList()方法雏门，由其函數名可以知道這個函數的大概作用——獲取大會列表嘿歌。但是實際上掸掏，這個函數中做了太多的事情，除了獲取大會列表之外宙帝，調用了showLoading()展示loading動畫丧凤，調用了stopPullDownRefresh()取消下載刷新，調用了showModal()彈出模態(tài)框步脓，最后還調用了setData()修改了數據層...
如此雜亂的函數愿待，復用率和自由度都大打折扣！
getConferenceList: function (data, sessionId, that) {
wx.showLoading({ title: '加載中', mask: true });
api.conferenceList(data, sessionId).then((res) => {
if (res.data && res.data.code === 1) {
let conferenceList = res.data.conferenceList;
that.setData({ conferenceList }, function () {
wx.stopPullDownRefresh();
wx.hideLoading();
});
} else {
wx.hideLoading();
wx.showModal({ title: '服務器開小差啦', content: '請聯系管理員或稍后重試' })
}
}, err => {
wx.hideLoading();
wx.showModal({ title: '與服務器通訊錯誤', content: '請聯系管理員或稍后重試' })
});
}
下拉刷新沪编，調用getConferenceList()方法的時候呼盆，弊病就暴露出來了：
1.不能夠的控制調用setData()和stopPullDownRefresh()的時機，因為getConferenceList()內部已經調用了蚁廓。
2.下拉刷新自帶loading動畫访圃，不需要調用showLoading()方法，getConferenceList()內部調用showLoading()方法很多余相嵌。
onPullDownRefresh: function () {
let that = this;
that.setData({ page: 1, conferenceList: [], finish: false }, function () {
that.getConferenceList({ page: that.data.page, size: that.data.size }, that.data.sessionId, that);
});
}
正因為如此腿时，所以才明白了“一個函數只做一件事情”的重要性了。
嘗試對getConferenceList()方法進行改造饭宾，去掉多余的操作批糟，讓其只作為獲取大會列表信息的一個封裝 。改造后的代碼如下看铆。
getConferenceList: function (data, sessionId) {
return api.conferenceList(data, sessionId).then((res) => {
if (res.data && res.data.code === 1) {
let conferenceList = res.data.conferenceList;
return conferenceList;
} else {
wx.showToast({ title: '服務端異常', mask: true, icon: 'none', duration: 500 });
}
}, err => {
wx.showToast({ title: '服務器連接失敗', mask: true, icon: 'none', duration: 500 });
});
}
改造后的getConferenceList()方法內部返回一個promise對象徽鼎，將獲取大會信息列表之后的控制權交至消費者的手中，而本身只做一件事弹惦，獲取大會消息列表否淤。
這樣一來，便可以控制調用setData()和stopPullDownRefresh()的時機棠隐，靈活度更高石抡。
onPullDownRefresh: function () {
let that = this;
that.getConferenceList({ page: 1, size: that.data.size }, that.data.sessionId).then((value) => {
that.setData({ page: 1, conferenceList: value }, function () {
wx.stopPullDownRefresh()
});
});
}
2.合理控制數據流
一個合格的前端開發(fā)工程師一定是善于控制數據流的，合理的控制數據流首先需要明確每個數據的生命周期助泽，是伴隨整個小程序的生命周期還是執(zhí)行完某個函數就銷毀了啰扛。確定了生命周期再選擇存儲數據的方式，是存儲在localStorage嗡贺、sessionStorage還是掛載到全局對象又或者僅僅需要路由傳值隐解，這些都需要根據數據的生命周期去考量。
喜歡這篇文章的朋友們诫睬，請點個贊再走哦～
