原文鏈接：https://devework.com/wordpress-weapp-3.html 唆涝，原文發(fā)表于2017/07/02 靡挥，轉(zhuǎn)載請(qǐng)用明鏈注明來源坟奥，謝謝！
本文是“WordPress 開發(fā)微信小程序”系列的第三篇婴栽，本文記錄的是開發(fā)“DeveWork+”小程序1.2 版本的過程满粗。建議先看完第一篇、第二篇再來閱讀本文愚争。
如果你沒有看過本小程序映皆，可以通過下面的小程序碼進(jìn)入體驗(yàn)挤聘。注意看文章的此時(shí)你掃碼進(jìn)入的版本可能不是1.2 版本了。
“DeveWork+”小程序v1.2 的更新內(nèi)容主要集中在提升用戶體驗(yàn)的優(yōu)化點(diǎn)以及修復(fù)遺留bug捅彻。如同上一篇组去，本文除最后一章節(jié)，每個(gè)章節(jié)即為一個(gè)改動(dòng)點(diǎn)步淹，并參考微信小程序的開發(fā)者工具更新歷史采用 A(Add)从隆、F(Fix)、U(Update) 作為小標(biāo)題開頭缭裆。
A：新增“關(guān)于與反饋”頁面
“DeveWork+”小程序v1.2 的新增內(nèi)容基本上就只有這個(gè)“關(guān)于與反饋”頁面了键闺。目前能通過文章內(nèi)容頁腳、閱讀記錄頁面頁腳兩個(gè)入口進(jìn)入澈驼。頁面內(nèi)容主要是介紹小程序辛燥、提供反饋入口與聯(lián)系方式。反饋入口本想采用小程序的“客服會(huì)話”組件缝其，但默認(rèn)樣式實(shí)在是太難看了挎塌，最后是采用button 組件通過設(shè)置 open-type="contact" 的方式進(jìn)入客服對(duì)話。有興趣歡迎通過客服會(huì)話勾搭氏淑，但一般我不會(huì)去看的哈哈勃蜘，建議還是采用郵件這類聯(lián)系方式。
A：復(fù)制文章URL 功能假残，引導(dǎo)外部瀏覽器閱讀
一些讀者可能會(huì)疑惑“DeveWork+”小程序里面的文章內(nèi)容，涉及到的外鏈均不可點(diǎn)炉擅。這個(gè)鍋可就得由小程序來背了——微信小程序是天然的封閉體系辉懒。也因?yàn)閭€(gè)人小程序的規(guī)定約束，評(píng)論內(nèi)容是不會(huì)展示出來的谍失。在這個(gè)版本中增加了一個(gè)復(fù)制文章URL 的功能來引導(dǎo)用戶前往外部瀏覽器閱讀原文及其評(píng)論眶俩。
使用到的是wx.getClipboardData這個(gè)接口，代碼因?yàn)闆]啥技術(shù)含量就不展示了快鱼。
A：在一些頁面啟用PullDownRefresh
PullDownRefresh即上拉重加載颠印。這個(gè)版本在一些頁面啟用了PullDownRefresh，有如下兩個(gè)坑：
1）如果下拉后的背景是白色的抹竹，需要將app.json 中window 對(duì)象的backgroundTextStyle設(shè)為dark, 否則無法顯示loading 動(dòng)畫线罕。
2）小程序中scroll-view 組件與onPullDownRefresh 不能同時(shí)使用。
F：修復(fù)wxParse 的若干bug
這個(gè)版本修復(fù)wxParse 的bug 主要集中在樣式層面的窃判，有部分內(nèi)容已經(jīng)向wxParse 的開發(fā)者提交PR钞楼。
1）一些內(nèi)聯(lián)元素沒有相應(yīng)的內(nèi)聯(lián)樣式。如del 標(biāo)簽袄琳。
-
pre標(biāo)簽的優(yōu)化询件。本站的文章內(nèi)容大多有大段代碼燃乍，之前在小程序版上顯示一直不是很好看。原因是wxParse 默認(rèn)將代碼中的換行符刪掉了宛琅。
3）li 標(biāo)簽圓圈樣式刻蟹，行高樣式統(tǒng)一。
U：提升用戶體驗(yàn)的若干優(yōu)化點(diǎn)
這個(gè)版本主要是為了提升用戶體驗(yàn)嘿辟，所以在如下點(diǎn)進(jìn)行了優(yōu)化：
1）下拉加載文章的Loading 樣式進(jìn)行了修改座咆。拋棄了默認(rèn)loading 組件，而采用跟網(wǎng)站一樣的loading 效果仓洼，直接用CSS3 寫介陶。
2）增加數(shù)據(jù)加載失敗的彈窗提示。wx.request()這類網(wǎng)絡(luò)請(qǐng)求事件有可能遇到加載失敗的情況色建，這時(shí)候予以用戶提示是有必要的哺呜。Jeff 的處理方式增加一個(gè)彈窗，然后在fail 事件進(jìn)行調(diào)用箕戳。
// https://devework.com/wordpress-weapp-3.html
// 網(wǎng)絡(luò)加載失敗提示
function netWorkErrorAlert(){
wx.showModal({
title: '文章加載失敗',
content: '請(qǐng)求失敗某残，可能是網(wǎng)絡(luò)故障，請(qǐng)稍后再試陵吸。',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('netWorkErrorAlert 用戶點(diǎn)擊確定')
}
}
})
}
// 實(shí)際過程本人是用promise 的catch 狀態(tài)玻墅，這里僅演示原生語法
wx.request({
url: 'test.php', //僅為示例，并非真實(shí)的接口地址
success: function(res) {
console.log(res.data)
}
fail: function(res) {
// netWorkErrorAlert 函數(shù)我是放到了util 里面
util.netWorkErrorAlert();
}
})
3）“無過多文章”場(chǎng)景的優(yōu)化∽吵妫現(xiàn)在能做到在“無過多文章”場(chǎng)景下不發(fā)送請(qǐng)求了澳厢。
4）閱讀記錄頁面為空時(shí)候的展示。增加了一個(gè)圖標(biāo)狀態(tài)囚似。
F：scroll-view 組件bindscrolltolower 事件多次執(zhí)行
這個(gè)也是微信小程序的一個(gè)坑點(diǎn)剩拢。小程序首頁的scroll-view 組件bindscrolltolower 綁定了loadMore()函數(shù)。在開發(fā)工具上每次下拉加載正常饶唤，但在真機(jī)上卻發(fā)現(xiàn)每下拉一次徐伐，loadMore()函數(shù)會(huì)被重復(fù)多執(zhí)行兩三次。如此本來是一次加載6篇文章募狂，實(shí)際居然加載了24篇办素！
Jeff 的解決方案是采用了個(gè)計(jì)時(shí)器，在loadMore()函數(shù)函數(shù)中祸穷，如果發(fā)現(xiàn)上次運(yùn)行loadMore()函數(shù)的時(shí)間與本次時(shí)間差在300ms 內(nèi)性穿，證明是小程序的bug 導(dǎo)致的被重復(fù)執(zhí)行，此時(shí)退出這次運(yùn)行函數(shù)粱哼。
// https://devework.com/wordpress-weapp-3.html
// 需要在page 的data 對(duì)象中設(shè)置默認(rèn)值
data: {
lastLoadTime: 0 //上一次load的時(shí)間
},
// 下拉加載綁定的函數(shù)
loadMore: function (e) {
// 300ms 內(nèi)多次下拉的話僅算一次
//獲取點(diǎn)擊當(dāng)前時(shí)間
var curTime = e.timeStamp;
//上一次加載的時(shí)間
var lastTime = this.data.lastLoadTime;
console.log(lastTime, curTime, curTime - lastTime);
if (curTime - lastTime < 300) {
console.log("不正常的加載間隔時(shí)間");
return;
}
... //其他代碼略
this.setData({
lastLoadTime: curTime
});
... //其他代碼略
}
通過如上的方式就可以做到scroll-view 組件bindscrolltolower 事件每次均只執(zhí)行一次季二。
另外一提的是，scroll-view 組件發(fā)現(xiàn)有時(shí)候下拉加載的時(shí)候頁面有時(shí)候會(huì)有瞬時(shí)抖動(dòng)的情況。對(duì)于這個(gè)暫時(shí)還找不到解決方法胯舷。
U：專題文章頁啟用了新的布局樣式
為了與首頁的文章列表樣式相區(qū)別刻蚯，在專題文章頁啟用了新的布局樣式：左圖片右標(biāo)題+發(fā)布時(shí)間等信息集合。采用flex 布局三兩下就搞定桑嘶，不過反而遇到個(gè)CSS 上的問題——text-align:justify; 與webkit-line-clamp 共用導(dǎo)致的問題炊汹。如下圖：
自己在平常的開發(fā)中基于兼容性考慮從來都不會(huì)用text-align:justify;（小程序本身支持justify），當(dāng)這個(gè)屬性與多行截字的webkit-line-clamp共用就會(huì)導(dǎo)致上面的問題逃顶。解決方法是改成text-align:left;讨便。
文末結(jié)題
以上就是1.2 版本的主要更新內(nèi)容。1.2 版本的審核算快以政，第二天晚上就告知通過了霸褒。
在這里也順便說兩件事情：
1）這陣子有不少人通過本人的聯(lián)系方式來索求源代碼。統(tǒng)一說明下盈蛮，現(xiàn)階段不打算開源代碼废菱。Jeff 最討厭就是各種伸手黨，特別是那些直接發(fā)一封正文為空抖誉，標(biāo)題為類似“發(fā)份代碼過來”郵件的人——這種郵件我是立馬右鍵刪除殊轴。開誠(chéng)布公：關(guān)于小程序代碼，有能力者請(qǐng)參考本系列文章或其它資料自己寫袒炉；沒能力者可考慮有償合作旁理，就醬。
2）最近發(fā)現(xiàn)本系列第一篇《WordPress 網(wǎng)站基于REST API 開發(fā)“微信小程序”實(shí)戰(zhàn)
》 被人我磁。孽文。怎么說呢，說抄襲么又不能這么蓋棺定論十性，但文章標(biāo)題乃至全文思路都是大段大段參考叛溢，句子稍微換了下表達(dá)方式。對(duì)于這種“抄xi”方式劲适，自我開始寫博客以來也不少見，暫且送上兩個(gè)字：呵呵厢蒜。如果看官有幸看到那篇文章霞势，請(qǐng)不要認(rèn)為我那篇是抄襲人家的哦~
本系列文章：
《WordPress 網(wǎng)站基于REST API 開發(fā)“微信小程序”實(shí)戰(zhàn)》
《WordPress 網(wǎng)站開發(fā)“微信小程序“實(shí)戰(zhàn)(二)》
《WordPress 網(wǎng)站開發(fā)“微信小程序“實(shí)戰(zhàn)(三)》
本站“微信小程序”系列文章：https://devework.com/tag/weapp
