藉助雲開發搭建專屬技術部落格小程式丨實戰
- 2019 年 12 月 26 日
- 筆記
▌導語
一直對小程式開發很感興趣，之前就準備做一款屬於自己的小程式，無奈還需要購買雲伺服器和部署後台，有點麻煩，自從知道有了雲開發這個免去伺服器搭建和運維的一站式後端雲服務「神器」，就一鼓作氣花了幾個周末的時間做了一款自己的部落格小程式，如果你也想打造一款自己的部落格，那你閱讀這篇文章就夠啦。
▌部落格小程式介紹
主要功能：
包括文章的發布及瀏覽、評論、點贊、瀏覽歷史、分類、排行榜、分享、生成海報圖等。
效果展示：
▌資料庫設計
資料庫主要就7張表，分別為：用戶表，分類表，文章表，文章內容表，評論表，點贊表，歷史瀏覽表。
▌評論功能設計
以文章評論功能為例，我們來看看程式碼以及小程式雲開發的整個流程。
1. 實現思路
一開始的實現思路是準備搞兩張表，一張評論主表，一張回複評論的子表，後來想著不用這麼複雜，其實就用一張表也能實現評論及回復的功能。
2. 程式碼實現
發表評論有三種情況，第一種是評論文章，為一級評論，第二種是評論別人的評論，為二級評論，第三種是回復別人的評論，為三級評論。
2.1 如何新增一條評論
結合上面圖片，我們再來看看程式碼，就很清晰了。
/** * 發布評論 */ submit() { var comment = this.data.inputData if (comment == '') { wx.showToast({ title: '請填寫評論', icon: 'none' }) } else { console.log("我的評論：" + this.data.inputData) var type = this.data.type; if (type == 1) { // 1是評論別人的評論》二級評論 this.replyComment(1) } else if (type == 2) { this.replyComment(2) // 2是回復別人的評論》三級評論 } else if (type == 3) { // 3是評論文章》一級評論 this.addComment(); } } }, /** * 新增評論 */ addComment() { var _this = this; var openid = wx.getStorageSync("openid") wx.showLoading({ title: '正在載入...', }) var create_date = util.formatTime(new Date()); console.log("當前時間為：" + create_date); var timestamp = Date.parse(new Date()); 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(new Date()); console.log("當前時間為：" + create_date); var timestamp = Date.parse(new Date()); 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的好處就是可以讓函數有序的進行，這裡就不贅述。
// 新增評論雲函數 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.command exports.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.command exports.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,那麼我們可以用這個做一些事情，如：可以判斷如果是自己的評論是不能回復的。
<view class="comment" wx:if="{{commentList.length>0}}"> <view class="comment-line"> <text class="comment-text">評論交流</text> <view class="bottom-line"></view> </view> <block wx:for='{{commentList}}' wx:key='*this' wx:for-item="itemfather"> <view class='commentList'> <view class="top-info"> <view class='img-name'> <image src="{{itemfather.avatarUrl}}"></image> <label>{{itemfather.nickName}}</label> </view> </view> <view class="father-content"> <text class="text">{{itemfather.comment}}</text> <view class="father-reply-time"> <text class="create-time">{{itemfather.create_date}}</text> <text class="reply" data-item="{{itemfather}}" bindtap='clickFatherConter' wx:if="{{openid != itemfather._openid}}">回復</text> </view> </view> <view class="children-content"> <block wx:for='{{itemfather.childComment}}' wx:key='*this'> <view class='childComment'> <view class="child-img-name"> <view class="avatar-name"> <image src="{{item.avatarUrl}}"></image> <text class='nickName'>{{item.nickName}}</text> </view> </view> <view class="child-comment" wx:if="{{item.flag==2 }}"> <text class='huifu'>回復</text> <text class='opposite-nickName'>{{item.opposite_nickName}}</text> <text class='comment-text'>{{item.comment}}</text> </view> <view class="child-comment" wx:if="{{item.flag==1}}"> <text class='comment-text'>{{item.comment}}</text> </view> <view class="child-reply-time"> <text class="child-create-time">{{item.createDate}}</text> <text class="reply" data-item="{{item}}" data-id="{{itemfather._id}}" bindtap='clickChildrenConter' wx:if="{{openid != item.openId}}">回復</text> </view> </view> </block> </view> </view> </block> </view>
▌項目運行
1. 下載源碼
在github上將程式碼下載到本地：
https://github.com/husanfeng/hsf_blog.git
2. 環境準備
（1）下載小程式開發工具；
（2）註冊appid；
（3）使用小程式開發工具導入下載的程式碼，填入自己註冊的AppID。
3. 雲開發準備
（1）開通雲開發功能。
（2）創建測試環境和生產環境。
4. 修改環境ID
（1）修改app.js中的環境ID為自己的環境ID。
（2）修改所有雲函數中的環境ID為自己的環境ID。
5. 雲函數部署
（1）右鍵雲函數目錄，點擊在終端中打開，執行npm install。
（2）右鍵執行上傳並部署：所有文件。
6. 構建npm
（1）勾選使用npm模組。
（2）點擊頂部功能欄，執行構建npm。
7. 執行編譯
▌發布注意事項
小程式現在審核也是越來越嚴謹了，為了不讓大家在審核道路上走彎路，我把我的一些經驗分享給大家。
- 在微信公眾平台上為小程式選擇正確恰當的服務類目，例如部落格類的小程式就可以選擇教育資訊服務。
- 如果你的小程式需要帳號密碼登錄，提交審核時需要提交一個帳號和密碼，而且這個帳號不能是測試帳號，不能出現測試數據。
- 提交審核的版本首頁需要有數據展示，例如：部落格小程式你需要發布一篇或者多篇文章。
- 文章內容不能存在敏感內容。
- 評論功能審核比較嚴格了，一旦評論中存在敏感辭彙，肯定審核不通過，官方建議調用小程式內容安全API，或使用其他技術、人工審核手段，過濾色情、違法等有害資訊，保障發布內容的安全。源碼地址https://github.com/TencentCloudBase/Good-practice-tutorial-recommended
如果你想要了解更多關於雲開發CloudBase相關的技術故事/技術實戰經驗，請掃碼關注【騰訊云云開發】公眾號～
