摘要：用小程序云開發(fā)將博客小程序常用功能一網(wǎng)打盡本文介紹博客小程序的詳情頁的功能按鈕如何實(shí)現(xiàn)，具體包括評論點(diǎn)贊收藏和海報(bào)功能，這里記錄下整個實(shí)現(xiàn)過程和實(shí)際編碼中的一些坑。考慮到小程序本身的大小限制，使用的方式是最佳的。

用小程序·云開發(fā)將博客小程序常用功能“一網(wǎng)打盡”

本文介紹mini博客小程序的詳情頁的功能按鈕如何實(shí)現(xiàn)，具體包括評論、點(diǎn)贊、收藏和海報(bào)功能，這里記錄下整個實(shí)現(xiàn)過程和實(shí)際編碼中的一些坑。

實(shí)現(xiàn)文章的一些操作功能，最主要的還是評論，這是作者和讀者之間溝通的橋梁，評論功能的衍生無非是細(xì)化作者和讀者之間的互動，或者增加文章的傳播，所以在動手開發(fā)時需要思考下你期望實(shí)現(xiàn)哪些功能，并對應(yīng)功能進(jìn)行細(xì)化。

我一般的經(jīng)驗(yàn)是，先在腦子里過一遍需要的功能和大致流程，然后在筆記稍微畫下「最最基礎(chǔ)的原型，相當(dāng)于產(chǎn)品的角色」。

然后就開始直接開始搭建頁面和簡單的交互「使用假數(shù)據(jù)，優(yōu)先完成頁面」，在構(gòu)造頁面的時候其實(shí)也能夠補(bǔ)充最初想法上一些流程上的缺陷，這樣在設(shè)計(jì)后端和數(shù)據(jù)庫結(jié)構(gòu)的時候可以補(bǔ)上，整體下來也基本比較完善了。

回頭看我的小程序的需求，首先肯定是操作，在文章底部需要有個操作欄，用于發(fā)送點(diǎn)評和其他一些操作，在參考了一些同類型的小程序之后，逐步實(shí)現(xiàn)自己的一套風(fēng)格，樣式截圖如下：

在有了功能之后，點(diǎn)評的數(shù)據(jù)需要有地方展示「通常是文章底部」，然后就有了文章底部的評論列表，樣式如下：

既然有點(diǎn)贊和收藏的功能按鈕，是否用戶需要看下我點(diǎn)贊和收藏的文章列表呢，所以在「我的」中就有相應(yīng)的列表，樣式如下：

到這里，最最基礎(chǔ)的功能基本差不多，接下來就要看后端是否能支持這些頁面了「主要就是數(shù)據(jù)的保存和展示了」

對于評論來說，肯定需要一個集合用于保存用戶的評論，而對于用戶的喜歡和收藏也需要一個集合來進(jìn)行保存。

所以根據(jù)頁面我們就可以設(shè)計(jì)mini_comments和mini_posts_related兩個集合。前者用于保存評論數(shù)據(jù)，后者用戶保存用戶操作與文章之間的關(guān)聯(lián)。

剩下的工作就是變現(xiàn)了，無非就是頁面交互和數(shù)據(jù)的增刪改查了。

目前在文章的集合中有個totalComments這個屬性，當(dāng)這篇文章每新增一個評論時，需要加1。

最初在寫這個的時候，每次都是先查再更新，兩段式，原代碼如下：

let count=post.totalComments+1;

let result =await db.collection("mini_posts").doc(event.commentContent.postId).update({

?    data: {

?      totalComments: count

?    }

  });

后來看文檔發(fā)現(xiàn)，可以使用db.command.inc這個指令，無需再查一遍，直接可對原字段加1，還能保證原子性。代碼如下：

const _ = db.command

let result = db.collection("mini_posts").doc(event.commentContent.postId).update({

?    data: {

?      totalComments: _.inc(1)

?    }

  });

需要實(shí)現(xiàn)在某個評論下進(jìn)行回復(fù)。

在交互上，點(diǎn)擊評論者的昵稱或頭像時，觸發(fā)相應(yīng)的點(diǎn)擊事件，在事件中去記錄相應(yīng)的評論ID及必要數(shù)據(jù)，同時去設(shè)置焦點(diǎn)到評論框內(nèi)：

 /**

  * 點(diǎn)擊評論內(nèi)容回復(fù)

  */

  focusComment: function (e) {

?    let that = this;

?    let name = e.currentTarget.dataset.name;

?    let commentId = e.currentTarget.dataset.id;

?    let openId = e.currentTarget.dataset.openid;



?    that.setData({

?      commentId: commentId,

?      placeholder: "回復(fù)" + name + ":",

?      focus: true,

?      toName: name,

?      toOpenId: openId

?    });

  },

利用云開發(fā)新增子評論時可以使用db.command.push來進(jìn)行操作「更新指令，對一個值為數(shù)組的字段，往數(shù)組尾部添加一個或多個值」，往子評論集合中新增：

/**

 * 新增子評論

 * @param {} event 

 */

async function addPostChildComment(event) {



  let task = db.collection("mini_posts").doc(event.postId).update({

?    data: {

?      totalComments: _.inc(1)

?    }

  });

  await db.collection("mini_comments").doc(event.id).update({

?    data: {

?      childComment: _.push(event.comments)

?    }

  })

  await task;

}

在文章第一次加載時，我們需要判斷下該用戶是否有對該文章有相關(guān)操作，如果有相應(yīng)的收藏和點(diǎn)贊操作，在初始化時需要更新相應(yīng)的功能圖標(biāo),核心代碼如下：

  /**

   * 獲取收藏和喜歡的狀態(tài)

   */

  getPostRelated: async function (blogId) {

?    let where = {

?      postId: blogId,

?      openId: app.globalData.openid

?    }

?    let postRelated = await api.getPostRelated(where, 1);

?    let that = this;

?    for (var item of postRelated.data) {

?      if (config.postRelatedType.COLLECTION === item.type) {

?        that.setData({

?          collection: { status: true, text: "已收藏", icon: "favorfill" }

?        })

?        continue;

?      }

?      if (config.postRelatedType.ZAN === item.type) {

?        that.setData({

?          zan: { status: true, text: "已贊", icon: "appreciatefill" }

?        })

?        continue;

?      }

?    }

  },

至于其他一些交互細(xì)節(jié)和代碼細(xì)節(jié)，可以自行閱讀源碼去體會，如果有任何疑問或者有更好的實(shí)現(xiàn)方式，也可以與我溝通。

其實(shí)在最早之前的小程序中已經(jīng)實(shí)現(xiàn)了一次，具體可以參考利用云開發(fā)優(yōu)化博客小程序（三）——生成海報(bào)功能,主要還是使用原生的cavans進(jìn)行組裝，原本想代碼copy過來改改就行了，但總覺得原來的代碼寫的不是特別好。

于是想看看是否有現(xiàn)成的輪子可以利用，果然發(fā)現(xiàn)了wxa-plugin-canvas這款組件，通過非常簡單的配置就可以生成精美的海報(bào)。

在總結(jié)生成海報(bào)功能之前還是有必要記錄下小程序npm的使用，避免一些不必要的坑。

考慮到小程序本身的大小限制，使用npm的方式是最佳的。

原因是根據(jù)官方文檔介紹，小程序 npm 包里只有構(gòu)建文件生成目錄會被算入小程序包的占用空間，上傳小程序代碼時也只會上傳該目錄的代碼。這樣大大減少了上傳的代碼體積。

下面簡單介紹下小程序端如何使用npm的「其實(shí)根據(jù)官方文檔按照步驟就可以了」。

以我目前小程序的路徑為例，在/miniprogram新增文件夾node_modules,在命令行指向到/miniprogram目錄下：

通過命令進(jìn)行安裝：

npm install wxa-plugin-canvas --production  

安裝成功后，即可在小程序開發(fā)工具中進(jìn)行構(gòu)建，構(gòu)建前需要勾選使用 npm 模塊

然后點(diǎn)擊開發(fā)者工具中的菜單欄：工具 --> 構(gòu)建 npm即可：

構(gòu)建完成后會生成miniprogram_npm目錄，到這里，項(xiàng)目端基本就調(diào)通了。

在構(gòu)建完之后，就可以正常使用wxa-plugin-canvas這個自定義組件，使用方式還是比較簡單的。

首先在你需要的頁面引入該組件：

{

  "usingComponents": {"poster": "wxa-plugin-canvas/poster"}

}

然后就可以在wsml中使用了：

由于我們在生成海報(bào)前，需要異步獲取一些用于海報(bào)的數(shù)據(jù)，所以我們采用異步生成的海報(bào)方式。

需要引入該組件的poster/poster.js文件，然后在代碼中調(diào)用即可：

import Poster from "../../utils/poster";

Page({

?    /**

?     * 異步生成海報(bào)

?     */

?    onCreatePoster() {

?        // setData配置數(shù)據(jù)

?        this.setData({ posterConfig: {...} }, () => {

?            Poster.create(); 

?        });

?    }

})

先來看看分享海報(bào)的整體結(jié)構(gòu)：

首先需要確認(rèn)海報(bào)的構(gòu)成需要哪些數(shù)據(jù)，在調(diào)用組件前先獲取好相應(yīng)的數(shù)據(jù)。

在我設(shè)計(jì)的海報(bào)中主要包含三塊內(nèi)容，用戶的信息(頭像和昵稱)，文章信息(首圖,標(biāo)題,簡介)和最重要的文章的小程序碼。

用戶信息和文章信息其實(shí)比較簡單，在小程序的詳情頁兩者數(shù)據(jù)都有，但這里有兩個問題點(diǎn)需要注意下。

第一個是域名問題，在畫布中使用到的圖片都需要配置域名，頭像的域名和公眾號文章首圖的域名

https://mmbiz.qpic.cn

https://wx.qlogo.cn

第二個是公眾號首圖的問題，公眾號素材列表返回的圖片url其實(shí)是http的，但小程序規(guī)定綁定的域名必須是https的，當(dāng)時比較無奈，后來嘗試改用https訪問首圖的url也可以，不幸中的萬幸，所以在使用首圖地址時進(jìn)行替換下：

imageUrl = imageUrl.replace("http://", "https://")

最后就是文章的小程序碼了，需要利用小程序的getUnlimited的api，具體可以參考官方文檔，目前已經(jīng)提供了云調(diào)用的方式「無需獲取access_token」,調(diào)用起來還是比較簡單的。

原本打算在文章同步的時候「adminService」直接生成對應(yīng)文章的小程序碼，代碼寫完后本地調(diào)試可以，但上傳至云端后測試發(fā)現(xiàn)一直報(bào)錯，逛了輪胎才知道原來不支持，同時觸發(fā)器也不支持云調(diào)用，所以這個計(jì)劃泡湯了，我在代碼中打了TODO。

既然這樣，那就在生成海報(bào)的時候進(jìn)行生成，同時生成后直接上傳至云存儲，將對應(yīng)的FileID保存至文章集合中，這樣只用生成一次就可以一直使用了，具體代碼如下：

/**

 * 新增文章二維碼

 * @param {} event 

 */

async function addPostQrCode(event)

{

  let scene = "timestamp=" + event.timestamp;

  let result = await cloud.openapi.wxacode.getUnlimited({

?    scene: scene,

?    page: "pages/detail/detail"

  })



  if (result.errCode === 0) {

?    let upload = await cloud.uploadFile({

?      cloudPath: event.postId + ".png",

?      fileContent: result.buffer,

?    })



?    await db.collection("mini_posts").doc(event.postId).update({

?      data: {

?        qrCode: upload.fileID

?      }

?    });



?    let fileList = [upload.fileID]

?    let resultUrl = await cloud.getTempFileURL({

?      fileList,

?    })

?    return resultUrl.fileList

  }



  return []



}

但這里有個尷尬的地方是，生成小程序碼的api中的scene參數(shù)最大長度是32，而文章id的長度已經(jīng)是32了，無法根據(jù)文章id進(jìn)行拼接跳轉(zhuǎn)頁面的路徑了，所以這里暫時用了mini_posts集合中timestamp字段「理論上也是唯一的」。

所以在詳情頁中也需要兼容timestamp這個字段。

海報(bào)圖片展示就比較簡單了，使用個彈窗，將生成好的海報(bào)圖片進(jìn)行展示即可：

  /**

   * 生成海報(bào)成功-回調(diào)

   * @param {} e 

   */

  onPosterSuccess(e) {

?    const { detail } = e;

?    this.setData({

?      posterImageUrl: detail,

?      isShowPosterModal: true

?    })

?    console.info(detail)

  },

保存圖片使用wx.saveImageToPhotosAlbum調(diào)用用戶相冊，這里主要需要兼容用戶拒絕相冊授權(quán)的一些列操作，具體代碼如下：

  /**

  * 保存海報(bào)圖片

  */

  savePosterImage: function () {

?    let that = this

?    wx.saveImageToPhotosAlbum({

?      filePath: that.data.posterImageUrl,

?      success(result) {

?        console.log(result)

?        wx.showModal({

?          title: "提示",

?          content: "二維碼海報(bào)已存入手機(jī)相冊，趕快分享到朋友圈吧",

?          showCancel: false,

?          success: function (res) {

?            that.setData({

?              isShowPosterModal: false,

?              isShow: false

?            })

?          }

?        })

?      },

?      fail: function (err) {

?        console.log(err);

?        if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {

?          console.log("再次發(fā)起授權(quán)");

?          wx.showModal({

?            title: "用戶未授權(quán)",

?            content: "如需保存海報(bào)圖片到相冊，需獲取授權(quán).是否在授權(quán)管理中選中“保存到相冊”?",

?            showCancel: true,

?            success: function (res) {

?              if (res.confirm) {

?                console.log("用戶點(diǎn)擊確定")

?                wx.openSetting({

?                  success: function success(res) {

?                    console.log("打開設(shè)置", res.authSetting);

?                    wx.openSetting({

?                      success(settingdata) {

?                        console.log(settingdata)

?                        if (settingdata.authSetting["scope.writePhotosAlbum"]) {

?                          console.log("獲取保存到相冊權(quán)限成功");

?                        } else {

?                          console.log("獲取保存到相冊權(quán)限失敗");

?                        }

?                      }

?                    })



?                  }

?                });

?              }

?            }

?          })

?        }

?      }

?    });

  },

有好的開源組件可以充分利用，避免重復(fù)造輪子，有機(jī)會也可以學(xué)習(xí)下別人的實(shí)現(xiàn)方式。

多看看文檔，其實(shí)小程序的文檔真的挺詳細(xì)的。

這里主要想分享實(shí)現(xiàn)一個功能實(shí)現(xiàn)的過程，有想法的時候如何一步步去成功實(shí)現(xiàn)。

小程序本身不難，相應(yīng)的文檔也很詳細(xì)，但是組裝的過程和邏輯的實(shí)現(xiàn)需要自身去思考和體會。多看看文檔，其實(shí)小程序的文檔真的挺詳細(xì)的。

如果你的想法和流程都非常清晰，但還是沒辦法實(shí)現(xiàn)你的預(yù)期功能，那我建議你先放放，先把html,css,javascript熟悉下，再看幾遍小程序的文檔，也許你當(dāng)時面臨的問題就不再是問題了。

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

如果你有關(guān)于使用云開發(fā)CloudBase相關(guān)的技術(shù)故事/技術(shù)實(shí)戰(zhàn)經(jīng)驗(yàn)想要跟大家分享，歡迎留言聯(lián)系我們哦~比心！