藉助雲開發搭建專屬技術部落格小程式丨實戰

騰訊云云開發發表於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，或使用其他技術、人工稽核手段，過濾色情、違法等有害資訊，保障釋出內容的安全。

原始碼地址

github.com/TencentClou…

如果你想要了解更多關於雲開發CloudBase相關的技術故事/技術實戰經驗，請掃碼關注【騰訊云云開發】公眾號～

關於雲開發

雲開發（CloudBase）是一款雲端一體化的產品方案，採用 serverless 架構，免環境搭建等運維事務，支援一雲多端，助力快速構建小程式、Web應用、移動應用。

技術文件：www.cloudbase.net/
微信搜尋：騰訊云云開發，獲取專案最新進展

藉助小程式雲開發實現小程式的登陸註冊功能
2018-10-11
藉助雲開發輕鬆實現後臺資料批量匯出丨實戰
2019-09-10
小程式雲開發專案實戰
2018-11-17
乾貨：如何藉助小程式雲開發實現小程式支付功能（含原始碼）
2019-07-04
原始碼
django專案開發實戰——部落格
2018-08-08
Django
實戰react技術棧+express前後端部落格專案（1）– 整體專案結構搭建
2019-02-27
ReactExpress後端
Taro + 小程式雲開發實戰
2018-10-30
技術人如何搭建自己的技術部落格
2018-09-20
onethink開發個人技術部落格
2019-05-11
微信小程式--簡約風部落格小程式（基於雲開發 - 全開源）
2021-03-29
微信小程式
使用WordPress搭建一個專屬自己的部落格
2020-10-27
技術部落格丨動手實踐系列：CV語義分割！
2022-01-11
基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（三）
2020-06-05
基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（二）
2020-06-03
基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（五）
2020-06-08
基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（一）
2020-06-02
基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（四）
2020-06-06
小程式簡訊驗證碼登入，1分鐘實現小程式發簡訊功能，藉助雲開發10行程式碼
2021-09-09
行程
小程式·雲開發實戰 - 迷你微博
2019-07-24
雲原生微信小程式開發實戰
2021-01-02
微信小程式
onethink搭建的技術部落格--悠悠極客
2019-05-11
實戰·使用taro+雲開發快速開發小程式
2019-02-21
部落格小程式開源了~
2019-11-06
藉助實時資料推送快速製作線上對戰五子棋小遊戲丨實戰
2019-08-30
遊戲
實戰：雲開發·實現奶茶店小程式（一）
2021-09-09
如何藉助小程式容器與前端中介軟體提升開發效率
2023-03-07
前端
湘宜購商城（系統開發）小程式技術搭建
2023-05-04
從 0 開始搭建一個技術部落格，私藏乾貨~
2019-01-25
[應用案例]onethink開發個人技術部落格
2019-05-11
WEB實戰：使用MERN技術棧開發專案
2018-09-05
Web
向量化程式碼實踐與思考：如何藉助向量化技術給程式碼提速
2023-12-27
基於.NetCore開發部落格專案 StarBlog - (5) 開始搭建Web專案
2022-05-16
NetCoreWeb
VuePress 手摸手教你搭建Vue風格的技術文件/部落格
2022-06-08
Vue
代幣合約系統開發搭建丨DAPP代幣模式專案開發技術方案
2023-04-10
APP模式
程式設計師如何從0到1搭建自己的技術部落格
2019-03-29
程式設計師
手把手帶你搭建VuePress的技術部落格
2019-03-22
Vue
「山禾說成長」：手把手教你搭建一個完全屬於自己的技術部落格
2020-07-08
從今天開始，拿起VuePress打造屬於自己的專屬部落格
2019-05-12
Vue

藉助雲開發搭建專屬技術部落格小程式丨實戰

原始碼地址

關於雲開發

相關文章