用小程式·雲開發打造功能全面的部落格小程式丨實戰
用小程式·雲開發將部落格小程式常用功能“一網打盡”
本文介紹mini部落格小程式的詳情頁的功能按鈕如何實現,具體包括評論、點贊、收藏和海報功能,這裡記錄下整個實現過程和實際編碼中的一些坑。
評論、點贊、收藏功能
實現思路
實現文章的一些操作功能,最主要的還是評論,這是作者和讀者之間溝通的橋樑,評論功能的衍生無非是細化作者和讀者之間的互動,或者增加文章的傳播,所以在動手開發時需要思考下你期望實現哪些功能,並對應功能進行細化。
我一般的經驗是,先在腦子裡過一遍需要的功能和大致流程,然後在筆記稍微畫下「最最基礎的原型,相當於產品的角色」。
然後就開始直接開始搭建頁面和簡單的互動「使用假資料,優先完成頁面」,在構造頁面的時候其實也能夠補充最初想法上一些流程上的缺陷,這樣在設計後端和資料庫結構的時候可以補上,整體下來也基本比較完善了。
回頭看我的小程式的需求,首先肯定是操作,在文章底部需要有個操作欄,用於傳送點評和其他一些操作,在參考了一些同類型的小程式之後,逐步實現自己的一套風格,樣式截圖如下:
在有了功能之後,點評的資料需要有地方展示「通常是文章底部」,然後就有了文章底部的評論列表,樣式如下:
既然有點贊
和收藏
的功能按鈕,是否使用者需要看下我點贊和收藏的文章列表呢,所以在「我的」中就有相應的列表,樣式如下:
到這裡,最最基礎的功能基本差不多,接下來就要看後端是否能支援這些頁面了「主要就是資料的儲存和展示了」
對於評論來說,肯定需要一個集合用於儲存使用者的評論,而對於使用者的喜歡和收藏也需要一個集合來進行儲存。
所以根據頁面我們就可以設計mini_comments
和mini_posts_related
兩個集合。前者用於儲存評論資料,後者使用者儲存使用者操作與文章之間的關聯。
剩下的工作就是變現了,無非就是頁面互動和資料的增刪改查了。
細節點解析
關於評論數量
目前在文章的集合中有個totalComments
這個屬性,當這篇文章每新增一個評論時,需要加1。
最初在寫這個的時候,每次都是先查再更新,兩段式,原始碼如下:
let count=post.totalComments+1; let result =await db.collection('mini_posts').doc(event.commentContent.postId).update({ data: { totalComments: count } });
後來看文件發現,可以使用db.command.inc
這個指令,無需再查一遍,直接可對原欄位加1,還能保證原子性。程式碼如下:
const _ = db.command
let result = db.collection('mini_posts').doc(event.commentContent.postId).update({
data: {
totalComments: _.inc(1)
}
});
關於新增子評論
需要實現在某個評論下進行回覆。
在互動上,點選評論者的暱稱或頭像時,觸發相應的點選事件,在事件中去記錄相應的評論ID及必要資料,同時去設定焦點到評論框內:
/**
* 點選評論內容回覆
*/
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: "回覆" + name + ":",
focus: true,
toName: name,
toOpenId: openId
});
},
利用雲開發新增子評論時可以使用db.command.push
來進行操作「更新指令,對一個值為陣列的欄位,往陣列尾部新增一個或多個值」,往子評論集合中新增:
/**
* 新增子評論
* @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;
}
關於判斷是否已收藏
在文章第一次載入時,我們需要判斷下該使用者是否有對該文章有相關操作,如果有相應的收藏和點贊操作,在初始化時需要更新相應的功能圖示,核心程式碼如下:
/**
* 獲取收藏和喜歡的狀態
*/
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;
}
}
},
至於其他一些互動細節和程式碼細節,可以自行閱讀原始碼去體會,如果有任何疑問或者有更好的實現方式,也可以與我溝通。
海報功能
交代些背景
其實在最早之前的小程式中已經實現了一次,具體可以參考利用雲開發優化部落格小程式(三)——生成海報功能,主要還是使用原生的cavans
進行組裝,原本想程式碼copy過來改改就行了,但總覺得原來的程式碼寫的不是特別好。
於是想看看是否有現成的輪子可以利用,果然發現了wxa-plugin-canvas
這款元件,通過非常簡單的配置就可以生成精美的海報。
小程式使用npm
在總結生成海報功能之前還是有必要記錄下小程式npm的使用,避免一些不必要的坑。
考慮到小程式本身的大小限制,使用npm的方式是最佳的。
原因是根據官方文件介紹,小程式 npm 包裡只有構建檔案生成目錄會被算入小程式包的佔用空間,上傳小程式程式碼時也只會上傳該目錄的程式碼。這樣大大減少了上傳的程式碼體積。
下面簡單介紹下小程式端如何使用npm的「其實根據官方文件按照步驟就可以了」。
以我目前小程式的路徑為例,在/miniprogram
新增資料夾node_modules
,在命令列指向到/miniprogram
目錄下:
通過命令進行安裝:
npm install wxa-plugin-canvas --production
安裝成功後,即可在小程式開發工具中進行構建,構建前需要勾選使用 npm 模組
然後點選開發者工具中的選單欄:工具 --> 構建 npm即可:
構建完成後會生成miniprogram_npm目錄,到這裡,專案端基本就調通了。
wxa-plugin-canvas
在構建完之後,就可以正常使用wxa-plugin-canvas這個自定義元件,使用方式還是比較簡單的。
首先在你需要的頁面引入該元件:
{
"usingComponents": {"poster": "wxa-plugin-canvas/poster"}
}
然後就可以在wsml
中使用了:
<poster id="poster" hide-loading="{{false}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
由於我們在生成海報前,需要非同步獲取一些用於海報的資料,所以我們採用非同步生成的海報方式。
需要引入該元件的poster/poster.js
檔案,然後在程式碼中呼叫即可:
import Poster from '../../utils/poster';
Page({
/**
* 非同步生成海報
*/
onCreatePoster() {
// setData配置資料
this.setData({ posterConfig: {...} }, () => {
Poster.create();
});
}
})
核心程式碼解析
海報需要的資料
先來看看分享海報的整體結構:
首先需要確認海報的構成需要哪些資料,在呼叫元件前先獲取好相應的資料。
在我設計的海報中主要包含三塊內容,使用者的資訊(頭像和暱稱),文章資訊(首圖,標題,簡介)和最重要的文章的小程式碼。
使用者資訊和文章資訊其實比較簡單,在小程式的詳情頁兩者資料都有,但這裡有兩個問題點需要注意下。
第一個是域名問題,在畫布中使用到的圖片都需要配置域名,頭像的域名和公眾號文章首圖的域名
https://mmbiz.qpic.cn
https://wx.qlogo.cn
第二個是公眾號首圖的問題,公眾號素材列表返回的圖片url其實是http
的,但小程式規定繫結的域名必須是https
的,當時比較無奈,後來嘗試改用https訪問首圖的url也可以,不幸中的萬幸,所以在使用首圖地址時進行替換下:
imageUrl = imageUrl.replace('http://', 'https://')
最後就是文章的小程式碼了,需要利用小程式的getUnlimited
的api,具體可以參考官方文件,目前已經提供了雲呼叫的方式「無需獲取access_token」,呼叫起來還是比較簡單的。
原本打算在文章同步的時候「adminService」直接生成對應文章的小程式碼,程式碼寫完後本地除錯可以,但上傳至雲端後測試發現一直報錯,逛了輪胎才知道原來不支援,同時觸發器也不支援雲呼叫,所以這個計劃泡湯了,我在程式碼中打了TODO。
既然這樣,那就在生成海報的時候進行生成,同時生成後直接上傳至雲端儲存,將對應的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
引數最大長度是32,而文章id的長度已經是32了,無法根據文章id進行拼接跳轉頁面的路徑了,所以這裡暫時用了mini_posts
集合中timestamp欄位「理論上也是唯一的」。
所以在詳情頁中也需要相容timestamp這個欄位。
海報圖片展示
海報圖片展示就比較簡單了,使用個彈窗,將生成好的海報圖片進行展示即可:
/**
* 生成海報成功-回撥
* @param {} e
*/
onPosterSuccess(e) {
const { detail } = e;
this.setData({
posterImageUrl: detail,
isShowPosterModal: true
})
console.info(detail)
},
儲存海報圖片
儲存圖片使用wx.saveImageToPhotosAlbum呼叫使用者相簿,這裡主要需要相容使用者拒絕相簿授權的一些列操作,具體程式碼如下:
/**
* 儲存海報圖片
*/
savePosterImage: function () {
let that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.posterImageUrl,
success(result) {
console.log(result)
wx.showModal({
title: '提示',
content: '二維碼海報已存入手機相簿,趕快分享到朋友圈吧',
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("再次發起授權");
wx.showModal({
title: '使用者未授權',
content: '如需儲存海報圖片到相簿,需獲取授權.是否在授權管理中選中“儲存到相簿”?',
showCancel: true,
success: function (res) {
if (res.confirm) {
console.log('使用者點選確定')
wx.openSetting({
success: function success(res) {
console.log('開啟設定', res.authSetting);
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('獲取儲存到相簿許可權成功');
} else {
console.log('獲取儲存到相簿許可權失敗');
}
}
})
}
});
}
}
})
}
}
});
},
體驗總結
有好的開源元件可以充分利用,避免重複造輪子,有機會也可以學習下別人的實現方式。
多看看文件,其實小程式的文件真的挺詳細的。
這裡主要想分享實現一個功能實現的過程,有想法的時候如何一步步去成功實現。
小程式本身不難,相應的文件也很詳細,但是組裝的過程和邏輯的實現需要自身去思考和體會。多看看文件,其實小程式的文件真的挺詳細的。
如果你的想法和流程都非常清晰,但還是沒辦法實現你的預期功能,那我建議你先放放,先把
html
,css
,javascript
熟悉下,再看幾遍小程式的文件,也許你當時面臨的問題就不再是問題了。
原始碼連結
https://github.com/TencentCloudBase/Good-practice-tutorial-recommended
如果你有關於使用雲開發CloudBase相關的技術故事/技術實戰經驗想要跟大家分享,歡迎留言聯絡我們哦~比心!
相關推薦
用小程式183;雲開發打造功能全面的部落格小程式丨實戰
用小程式·雲開發將部落格小程式常用功能“一網打盡” 本文介紹mini部落格小程式的詳情頁的功能按鈕如何實現,具體包括評論、點贊、收藏和海報功能,這裡記錄下整個實現過程和實際編碼中的一些坑。 評論、點贊、收藏功能 實現思路 實現文章的一些操作功能,最主要的還是評論,這是作者和讀者之間溝通的橋樑,評論功能的衍
用小程式183;雲開發輕鬆構建二手書商城小程式丨實戰
“拱手讓書,智慧相傳。本文將帶大家使用雲開發快速開發完整的校園二手書商城“ 導語 很多大學有個普遍現象,畢業或者搬校區的時候,成堆成堆的書都被隨便處理掉,作為過來人,每每想到都十分痛心可惜,而導致這種情況發生的原因,我認為主要還是歸結學校原因,一方面沒有提供靠譜便利的平臺,另一方面,宣傳不到位,基於此開發了
小程序開發探秘:『 小程序183;雲開發 』新功能“雲調用”上手體驗
配置服務 ces 希望 data 消息 觸發 從數據 所有 tom 近期微信『 小程序·雲開發 』悄悄的上線了一個叫做“雲調用”的新功能。 從文檔上看,雲調用是基於雲函數使用小程序開放接口的能力,在雲函數中使用雲調用來調用服務端
用小程式183;雲開發兩天搭建mini論壇丨實戰
筆者最近涉獵了小程式相關的知識,於是利用週末時間開發了一款類似於同事的小程式,深度體驗了小程式雲開發模式提供的雲函式、資料庫、儲存三大能力。關於雲開發,可參考文件:小程式·雲開發。 個人感覺雲開發帶來的最大好處是鑑權流程的簡化和對後端的弱化,所以像筆者這種從未接觸過小程式開發的人也能夠在週末兩天時間內開發出一
小程式183;雲開發實戰 - 迷你微博
0. 前言 本文將手把手教你如何寫出迷你版微博的一行行程式碼,迷你版微博包含以下功能: Feed 流:關注動態、所有動態 傳送圖文動態 搜尋使用者 關注系統 點贊動態 個人主頁 使用到的雲開發能力: 雲資料庫 雲端儲存 雲函式 雲呼叫 沒錯,幾乎是所有的雲開發能力。也就是說,讀完這篇實戰,你就相當於完
小程式183;雲開發實戰 - 體重記錄小程式
前一段看到朋友圈裡總是有人用txt記錄體重,就特別想寫一個記錄體重的小程式, 現在小程式的雲開發有云函式、資料庫,真的挺好用,很適合個人開發者,伺服器域名什麼都不用管,雲開發讓你完全不用操心這些東西。 先看看頁面效果圖吧: 記錄的幾個點: 1.全域性變數 globalData 2.
小程式183;雲開發實戰 - 校園約拍小程式
創意來源於生活,之所以開發這個校園約拍小程式,是因為在攝影選修課上常聽老師抱怨外出寫生老找不到模特,許多大學生都想擁有一套專屬自己記憶的攝影作品,記錄下不會磨滅的美好回憶,可如何找到讓自己滿意的攝影師是他們的難題。悅拍屋是一個校園攝影o2o的約拍平臺,提供全方位的約拍服務,同時提供一個自我展示,學習交流,互動
基於小程式183;雲開發構建高考查分小程式丨實戰
2019高考報名人數達到了 1031 萬的新高,作為一名三年前參考高考的準程式猿,趕在高考前,加班加點從零開始做了一款高考查分小程式,算是一名老學長送給學弟學妹們的高考禮。上線僅 1 個月,使用者數就突破了 1k,關於小程式的介紹就不多說了,可以去搜【歷年高考分數線查詢】體驗,今天主要談談技術原理和實現細節。
小程式183;雲開發地表最強CI利器來了
## 小程式CI 與 CloudBase-FrameWork 從2017年開始,微信小程式的能力也隨著前端的大發展的趨勢越來越多,包體積限制越來越寬鬆,大型微信小程式的開發團隊越來越多,為了適應形式,微信小程式官方團隊在2020年1月推出了官方CI工具,可以進行程式碼上傳、預覽、拉取關鍵資訊等操作,甚至還能
微信小程式:雲開發·初探二
I’ll never finish falling in love with you. 自己編寫雲服務(後臺) 在目錄cloudfunctions上右鍵,新建node.js雲函式
Slog68_微信雲開發開啟全棧時代!(微信小程式之雲開發-全棧時代1)
ArthurSlog SLog-68 Year·1 Guangzhou·China Sep 11th 2018 常道無名 唯德以顯之 至德無本 順道而成之 禍福無門 惟人自召 善惡之報 如影隨形 開發環境MacOS(High Sierra 10.13.5)
Slog69_實現一個帶引數的雲函式GET!(微信小程式之雲開發-全棧時代2)
ArthurSlog SLog-69 Year·1 Guangzhou·China Sep 11th 2018 禍兮福之所倚 福兮禍之所伏 開發環境MacOS(High Sierra 10.13.5) 需要的資訊和資訊源: 前言 騰訊推出“雲開發”概
微信小程式:雲開發·初探
Good days give you happiness and bad days give you experience. 順境帶來快樂,逆境帶來成長。 雲開發 quickstart 這是雲開發的快速啟動指引,其中演示瞭如何上手使用雲開發的三大基
人人商城小程式二次開發 --介面功能過期
背景:剛剛才上傳好小程式,然後在購買的時候,生成訂單出問題。然後我看報錯,一步一步從封面的看報錯到產品詳細頁再到生成訂單頁。然後在提交的時候發現有些介面過期,所以現在就是先從頭開始解決問題。 這是我提交版本前的提示,然後點進去的
微信小程式:雲開發·初探四(資料庫操作)
The course of true love never did run smooth. 真愛無坦途。 新建集合 1.開啟雲開發控制檯,資料庫 2.新增集合users 新增程式碼
微信小程式_雲開發
開發者可以使用雲開發開發微信小程式、小遊戲,無需搭建伺服器,即可使用雲端能力。 1 ##初建專案時,在開發者工具中沒有找到 “雲開發 QuickStart 專案”, 解決方法: 更新了微信開發者工具即可, 進入開發者工具 在左側頭部工具欄有 “雲開發”。
微信小程式之雲開發——模擬後臺增刪改查
小程式雲開發出來之後,小程式開發人員也要慢慢的接觸後端對資料的增刪改查了。下面就給大家提供一個案例吧。 這裡我把新增和修改放在了一個頁面 顯示頁面index.wxml <view wx:if="{{books}}" class='container
Slog71_選取、上傳和顯示本地圖片GET !(微信小程式之雲開發-全棧時代3)
ArthurSlog SLog-71 Year·1 Guangzhou·China Sep 12th 2018 道常無為而無不為 開發環境MacOS(High Sierra 10.13.5) 需要的資訊和資訊源: 前言 ”雲開發
微信小程式:雲開發·初探三(檔案操作)
We are the champion. We’ll keep on fighting till the end. 雲開發·檔案上傳 上傳檔案 在小程式端可呼叫 wx.cloud.uploadFile 方法進行上傳: wx.cloud.upl
微信小程式--使用雲開發完成支付閉環
#### 微信小程式--使用雲開發完成支付閉環 #### 1.流程介紹 ![](https://img2020.cnblogs.com/blog/1141382/202102/1141382-20210201004552059-1922933214.png) ![](https://img2020.