▌導語
一直對小程序開發很感興趣，以前就準備作一款屬於本身的小程序，無奈還須要購買雲服務器和部署後臺，有點麻煩，自從知道有了雲開發這個免去服務器搭建和運維的一站式後端雲服務「神器」，就一氣呵成花了幾個週末的時間作了一款本身的博客小程序，若是你也想打造一款本身的博客，那你閱讀這篇文章就夠啦。前端
▌博客小程序介紹
效果展現：
<< 滑動查看下一張圖片 >>git
▌數據庫設計
▌評論功能設計
2.1 如何新增一條評論
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
/** * 發佈評論 */submit(){var comment =this.data.inputDataif(comment ==''){ wx.showToast({ title:'請填寫評論', icon:'none'})}else{ console.log("個人評論："+this.data.inputData)var type =this.data.type;if(type ==1){// 1是評論別人的評論》二級評論this.replyComment(1)}elseif(type ==2){this.replyComment(2)// 2是回覆別人的評論》三級評論}elseif(type ==3){// 3是評論文章》一級評論this.addComment();}}},/** * 新增評論 */ addComment(){var _this =this;var openid = wx.getStorageSync("openid") wx.showLoading({ title:'正在加載...',})var create_date = util.formatTime(newDate()); console.log("當前時間爲："+ create_date);var timestamp =Date.parse(newDate()); timestamp = timestamp /1000; console.log("當前時間戳爲："+ timestamp);// 調用雲函數 wx.cloud.callFunction({ name:'addComment', data:{//_id: timestamp + _this.data.otherUserInfo._id, id: _this.data.articleDetail._id, _openid: openid, avatarUrl: _this.data.userInfo.avatarUrl, nickName: _this.data.userInfo.nickName, comment: _this.data.inputData, create_date: create_date, flag:0, article_id: _this.data.articleDetail.article_id, timestamp: timestamp, childComment:[],}, success: res =>{// res.data 包含該記錄的數據 console.log("新增評論成功---") wx.showToast({ title:'評論提交成功',}) wx.navigateBack({ delta:1})}, fail: err =>{ console.error('[雲函數]調用失敗', err)}, complete: res =>{ wx.hideLoading()}})},/** * 回覆評論 */ replyComment(commentType){var _this =this; wx.showLoading({ title:'正在加載...',})var create_date = util.formatTime(newDate()); console.log("當前時間爲："+ create_date);var timestamp =Date.parse(newDate()); timestamp = timestamp /1000; wx.cloud.callFunction({ name:'replyComment', data:{ id: _this.data.articleDetail._id, _id: _this.data.otherUserInfo._id, avatarUrl: _this.data.userInfo.avatarUrl, nickName: _this.data.userInfo.nickName, openId: _this.data.openid, comment: _this.data.inputData, createDate: create_date, flag: commentType, opposite_avatarUrl: _this.data.otherUserInfo.avatarUrl, opposite_nickName: _this.data.otherUserInfo.nickName, opposite_openId: _this.data.otherUserInfo._openid, timestamp: timestamp,}, success: res =>{// res.data 包含該記錄的數據 console.log("回覆評論成功---") wx.showToast({ title:'回覆提交成功',}) wx.navigateBack({ delta:1})}, fail: err =>{ console.error('[雲函數]調用失敗', err)}, complete: res =>{ wx.hideLoading()}})},
下面是新增評論和回覆評論的兩個雲函數，主要用到了async和await這兩個函數,讓新增和回覆函數執行完後咱們再更新一下article文章表的評論字段，讓其加1，async和await的好處就是可讓函數有序的進行，這裏就不贅述。github
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
// 新增評論雲函數const cloud =require('wx-server-sdk')var env ='hsf-blog-product-xxxxx';// 正式環境// var env = 'xxxxxxxxxxxxx'; // 測試環境cloud.init({ env: env})const db = cloud.database()const _ = db.commandexports.main = async(event, context)=>{try{let res = await db.collection('comment').add({ data:{ _openid:event._openid, avatarUrl:event.avatarUrl, nickName:event.nickName, comment:event.comment, create_date:event.create_date, flag:event.flag, article_id:event.article_id, timestamp:event.timestamp, childComment:[],}}).then(res =>{return res;}) await db.collection('article').doc(event.id).update({ data:{ comment_count: _.inc(1)}})return res;}catch(e){ console.error(e)}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
// 回覆評論雲函數const cloud =require('wx-server-sdk')var env ='hsf-blog-product-xxxxx';// 正式環境// var env = 'xxxxxxxxxxxxxx'; // 測試環境cloud.init({ env: env})const db = cloud.database()const _ = db.commandexports.main = async(event, context)=>{try{let res = await db.collection('comment').doc(event._id).update({ data:{ childComment: _.push({ avatarUrl:event.avatarUrl, nickName:event.nickName, openId:event.openId, comment:event.comment, createDate:event.createDate, flag:event.flag, opposite_avatarUrl:event.opposite_avatarUrl, opposite_nickName:event.opposite_nickName, opposite_openId:event.opposite_openId, timestamp:event.timestamp,})}}).then(res =>{return res;}) await db.collection('article').doc(event.id).update({ data:{ comment_count: _.inc(1)}})return res;}catch(e){ console.error(e)}}
2.2 如何顯示每一條評論
從數據庫取出評論的數據，循環遍歷每一條父評論，若是有子回覆也一併循環。這裏每一條評論的惟一標識是用戶的openId,那麼咱們能夠用這個作一些事情，如：能夠判斷若是是本身的評論是不能回覆的。數據庫
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
<viewclass="comment"wx:if="{{commentList.length>0}}"><viewclass="comment-line"><textclass="comment-text">評論交流</text><viewclass="bottom-line"></view></view><blockwx:for='{{commentList}}'wx:key='*this'wx:for-item="itemfather"><viewclass='commentList'><viewclass="top-info"><viewclass='img-name'><imagesrc="{{itemfather.avatarUrl}}"></image><label>{{itemfather.nickName}}</label></view></view><viewclass="father-content"><textclass="text">{{itemfather.comment}}</text><viewclass="father-reply-time"><textclass="create-time">{{itemfather.create_date}}</text><textclass="reply"data-item="{{itemfather}}"bindtap='clickFatherConter'wx:if="{{openid != itemfather._openid}}">回覆</text></view></view><viewclass="children-content"><blockwx:for='{{itemfather.childComment}}'wx:key='*this'><viewclass='childComment'><viewclass="child-img-name"><viewclass="avatar-name"><imagesrc="{{item.avatarUrl}}"></image><textclass='nickName'>{{item.nickName}}</text></view></view><viewclass="child-comment"wx:if="{{item.flag==2 }}"><textclass='huifu'>回覆</text><textclass='opposite-nickName'>{{item.opposite_nickName}}</text><textclass='comment-text'>{{item.comment}}</text></view><viewclass="child-comment"wx:if="{{item.flag==1}}"><textclass='comment-text'>{{item.comment}}</text></view><viewclass="child-reply-time"><textclass="child-create-time">{{item.createDate}}</text><textclass="reply"data-item="{{item}}"data-id="{{itemfather._id}}"bindtap='clickChildrenConter'wx:if="{{openid != item.openId}}">回覆</text></view></view></block></view></view></block></view>
▌項目運行
1. 下載源碼
2. 環境準備
（2）註冊appid；
（3）使用小程序開發工具導入下載的代碼，填入本身註冊的AppID。
4. 修改環境IDnpm
5. 雲函數部署小程序
（1）勾選使用npm模塊。後端
7. 執行編譯
▌發佈注意事項
小程序如今審覈也是愈來愈嚴謹了，爲了避免讓你們在審覈道路上走彎路，我把個人一些經驗分享給你們。安全
1. 在微信公衆平臺上爲小程序選擇正確恰當的服務類目，例如博客類的小程序就能夠選擇教育信息服務。
2. 若是你的小程序須要帳號密碼登陸，提交審覈時須要提交一個帳號和密碼，並且這個帳號不能是測試帳號，不能出現測試數據。
3. 提交審覈的版本首頁須要有數據展現，例如：博客小程序你須要發佈一篇或者多篇文章。
4. 文章內容不能存在敏感內容。
5. 評論功能審覈比較嚴格了，一旦評論中存在敏感詞彙，確定審覈不經過，官方建議調用小程序內容安全API，或使用其餘技術、人工審覈手段，過濾色情、違法等有害信息，保障發佈內容的安全。
▌獲取源碼
公衆號後臺回覆「小程序」。服務器
本文分享自微信公衆號 - 前端迷（love_frontend）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。微信