這幾天陸陸續(xù)續(xù)抽了點(diǎn)時(shí)間迭代了一版我的小程序版博客，一來(lái)是因?yàn)樵崎_(kāi)發(fā)的出現(xiàn)，讓很多功能成為了可能，二來(lái)正好也正好深度熟悉下云開(kāi)發(fā)。

這次迭代主要是完善了評(píng)論功能「不知道審核能不能過(guò)」，一開(kāi)始覺(jué)得很快能搞定，然而真正開(kāi)發(fā)的時(shí)候還是碰到很多問(wèn)題，這篇文章既是回顧總結(jié)，也是記錄下自己在開(kāi)發(fā)過(guò)程中遇到的一些坑，僅供參考。

開(kāi)發(fā)回顧

具體思路還是比較簡(jiǎn)單的，利用云開(kāi)發(fā)中的數(shù)據(jù)庫(kù)來(lái)保存評(píng)論數(shù)據(jù)，在文章詳情頁(yè)的底部呈現(xiàn)具體的評(píng)論數(shù)據(jù)。

在上一篇云發(fā)開(kāi)初體驗(yàn)中，我已經(jīng)創(chuàng)建了 posts_statistics 集合，用來(lái)存儲(chǔ)文章的 訪問(wèn)數(shù) ， 喜歡數(shù) 和 評(píng)論數(shù) ,這次新建了 posts_comments 集合用于存儲(chǔ)具體的評(píng)論數(shù)據(jù)，結(jié)構(gòu)如下：

"_id": "集合id"
"_openid": "評(píng)論人openid"
"cAvatarUrl": "頭像url"
"cNickName": "昵稱(chēng)"
"comment": "評(píng)論內(nèi)容"
"createDate": "創(chuàng)建日期"
"flag": 0
"postId": "文章id"
"timestamp": "時(shí)間戳"
"childComment":
    [{"cAvatarUrl": "評(píng)論人url"
    "cNickName": "評(píng)論人昵稱(chēng)"
    "cOpenId": "評(píng)論人openid"
    "comment": "評(píng)論內(nèi)容"
    "createDate": 2018-09-29
    "flag": "數(shù)據(jù)標(biāo)識(shí)"
    "tNickName": "對(duì)方昵稱(chēng)"
    "tOpenId": "對(duì)方openid"
    "timestamp": "時(shí)間戳"}]

在創(chuàng)建完集合之后，需要編寫(xiě)對(duì)應(yīng)的查詢(xún)，新增，和新增子評(píng)論的方法。

主要說(shuō)下查詢(xún)和新增子評(píng)論。查詢(xún)的話肯定需要分頁(yè)加載，控制一次性數(shù)據(jù)的加載量，會(huì)用到 skip 和 limit ,大致寫(xiě)法如下：

return db.collection('posts_comments')
    .where({postId: postId})
    .orderBy('timestamp', 'desc')
    .skip((page - 1) * 10)
    .limit(10)
    .get()

然后是新增子評(píng)論，相當(dāng)于在主評(píng)論下回復(fù)別人，主要在集合中 childComment 下新增評(píng)論，這里使用 db.command.push 更新指令，往數(shù)組尾部添加一個(gè)或多個(gè)值。大致寫(xiě)法如下：

const _ = db.command
return db.collection('posts_comments').doc(id).update({
    data: {
      childComment: _.push(data)
    }

在文章詳情底部功能欄的樣式上，還是比較糾結(jié)的，參考了一些UI，最終還是使用這種折疊的方式，具體的樣式代碼就不貼了。

其中有幾個(gè)交互可以嘮叨下。

首先是點(diǎn) 加號(hào) 會(huì)上拉底部的功能按鈕，這個(gè)沒(méi)什么問(wèn)題，但細(xì)節(jié)需要注意，通常情況下點(diǎn)空白處時(shí)會(huì)自動(dòng)縮回去，但這個(gè)實(shí)現(xiàn)有點(diǎn)凌亂，于是我在功能菜單以外的視圖外層套了層view:

<view catchtap="hiddenMenubox">
...文章主題部分...
</view>

/**
 * 非評(píng)論區(qū)隱藏菜單
*/

hiddenMenubox: function() {
	this.setData({
	  isShow: false,
	  menuBackgroup: false
	})
},

然后是評(píng)論輸入框中的提示，默認(rèn)是 評(píng)論... ，當(dāng)點(diǎn)擊回復(fù)具體某個(gè)人的評(píng)論時(shí)，默認(rèn)修改成 回復(fù)*** 。

然后是喜歡和收藏兩個(gè)按鈕，喜歡和收藏之后圖標(biāo)自動(dòng)點(diǎn)亮。

還有就是提交完評(píng)論之后默認(rèn)重新刷新評(píng)論列表，最后一條評(píng)論之后停止刷新，沒(méi)有評(píng)論友好提示等?？傊恍┬〉慕换c(diǎn)還是挺多的。

這里就不一一說(shuō)明了，有興趣的可以瀏覽下我的小程序，并看看源碼。

問(wèn)題點(diǎn)整理

主要還是說(shuō)說(shuō)開(kāi)發(fā)過(guò)程中的問(wèn)題點(diǎn)和如何解決的。

1.獲取用戶(hù)的openid

首先是獲取用戶(hù)的openid問(wèn)題，在沒(méi)有云函數(shù)之前，獲取用戶(hù)的openid還是比較麻煩的，需要通過(guò)wx.login獲取code，然后通過(guò)code和小程序的appid和secret請(qǐng)求接口從而獲取到openid。

而有云函數(shù)之后，可以簡(jiǎn)單調(diào)用下云函數(shù)，經(jīng)過(guò)微信鑒權(quán)之后可直接獲取到用戶(hù)的openid：

exports.main = (event, context) => {
  return {
    openid: event.userInfo.openId,
  }
}

2. 數(shù)據(jù)庫(kù)操作權(quán)限問(wèn)題

因?yàn)槊吭略坪瘮?shù)有調(diào)用次數(shù)的限制，所以想直接在客戶(hù)端調(diào)用數(shù)據(jù)庫(kù)。一開(kāi)始挺順利的，但當(dāng)更新子評(píng)論的時(shí)候出現(xiàn)問(wèn)題了，由于客戶(hù)端對(duì)于數(shù)據(jù)庫(kù)最大權(quán)限是 所有用戶(hù)可讀，僅創(chuàng)建者及管理員可寫(xiě) ,所以導(dǎo)致子評(píng)論無(wú)法更新進(jìn)去「創(chuàng)建者和子評(píng)論者是兩個(gè)用戶(hù)」。

所以沒(méi)辦法，只能包一層云函數(shù)，云函數(shù)中調(diào)用數(shù)據(jù)庫(kù)，因?yàn)榉?wù)端調(diào)用數(shù)據(jù)庫(kù)沒(méi)有這個(gè)權(quán)限的限制。

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  return await db.collection('posts_comments').doc(event.id).update({
    data: {
      childComment: _.push(event.comments)
    }
  })
}

其實(shí)個(gè)人感覺(jué)數(shù)據(jù)庫(kù)操作最好都放在服務(wù)端比較好，由云函數(shù)統(tǒng)一收口，設(shè)計(jì)好的話，云函數(shù)還能當(dāng)作路由的作用。

3.catchtap與bindtap

一開(kāi)始沒(méi)有仔細(xì)看文檔，所以猜了坑，稍微關(guān)注下就可以避免了，同為點(diǎn)擊事件， bindtap 事件綁定不會(huì)阻止冒泡事件向上冒泡,而 catchtap 事件綁定可以阻止冒泡事件向上冒泡。

所以在由多層嵌套的時(shí)候一定要注意下，是否需要冒泡。

4.promise

上一版本中的方法基本都采用的回調(diào)方式，之前功能簡(jiǎn)單感覺(jué)閱讀起來(lái)還好。但這次改動(dòng)之后發(fā)現(xiàn)代碼就坑了，回調(diào)方法太多感覺(jué)有點(diǎn)眼花了。

原本打算使用ES7的特性 async/await ，但發(fā)現(xiàn)目前微信web開(kāi)發(fā)者工具還不支持，相信以后應(yīng)該會(huì)支持吧，不太愿意引用其他插件了，所以還是使用了 promise ,使用下來(lái)代碼可閱讀性提高了很多，可以一直 then 下去。

但畢竟不是專(zhuān)業(yè)前端，總感覺(jué)代碼寫(xiě)的還是比較糟糕，后期打算再迭代優(yōu)化下代碼。

5. 樣式

在樣式上遇到的問(wèn)題其實(shí)挺多的，主要還是自己的基本功不扎實(shí)，所以踩了很多的布局的坑，這里就不一一說(shuō)了，也說(shuō)不清楚，自己親自搭建之后還是會(huì)有很深印象的。

其他優(yōu)化點(diǎn)

在開(kāi)發(fā)評(píng)論功能的同時(shí)，也優(yōu)化了一些問(wèn)題點(diǎn)，這里也說(shuō)明下：

引流公眾號(hào)組件

也是最近更新的功能，所以將此功能加上去了，比較簡(jiǎn)單，在公眾平臺(tái)中啟用關(guān)注組件并綁定公眾號(hào)，然后代碼中引用下即可：

<official-account></official-account>

效果可以看下，還是挺有意思的：

2. 授權(quán)

原本的授權(quán)是跳轉(zhuǎn)到單獨(dú)的頁(yè)面的，訪問(wèn)過(guò)我的小程序的知道，那個(gè)頁(yè)面有個(gè)可愛(ài)的gif的萌妹子

但發(fā)現(xiàn)體驗(yàn)不是很好，首先這個(gè)gif萌妹子體積比較大，影響首次加載。其次是跳轉(zhuǎn)時(shí)效果也不是很理想。

所以改成彈窗的方式，并首次使用了模板頁(yè)：

3. 修復(fù)wxParse的問(wèn)題

有網(wǎng)友反饋部分安卓機(jī)文章詳情頁(yè)加載不出來(lái)，后來(lái)發(fā)現(xiàn)是因?yàn)?nbsp;wxParse 中 console.dir 的問(wèn)題，部分安卓機(jī)不支持，注釋掉即可。

總結(jié)

2.0的代碼提交審核了，不懂能不能通過(guò)，希望在國(guó)慶節(jié)可以和大家見(jiàn)面吧。

其實(shí)要優(yōu)化的點(diǎn)和開(kāi)發(fā)的功能還是有很多，比如生成海報(bào)還沒(méi)有開(kāi)發(fā)，發(fā)送的文本框不能換行，體驗(yàn)不太好等等。

后期慢慢迭代吧，也歡迎大家使用體驗(yàn)，并多提寶貴意見(jiàn)。