這篇是微信小程序前后端快速入門完結(jié)篇了，今天利用之前學(xué)習(xí)過的所有知識做一個新的項(xiàng)目「群登記助手v1.0」小程序。
整體技術(shù)架構(gòu)：小程序原生前端+小程序云開發(fā)。
經(jīng)歷了前面教程的學(xué)習(xí)，大家有了一定的基礎(chǔ)，所以本次分享重心主要是帶著大家理清楚邏輯相關(guān)的云開發(fā)處理方案和之前未講解過的重要組件，之前已經(jīng)講解過的重復(fù)知識就不會重新再講解，需要大家利用之前已經(jīng)學(xué)習(xí)過的知識來組合今天學(xué)習(xí)的新知識對接龍小程序進(jìn)行整體的完善。
業(yè)務(wù)分析
流程分析
接龍小程序使用者角色上會有兩種，分別是發(fā)起者和參與者。這個接龍是由發(fā)起者來讓參與者接龍，所以他們兩之間的使用邏輯是：
一共有以下七步，來完成整個接龍行為的閉環(huán)。
- 發(fā)起者 - 創(chuàng)建接龍活動
- 發(fā)起者 - 進(jìn)入接龍列表
- 發(fā)起者 - 轉(zhuǎn)發(fā)到微信群
- 參與者 - 點(diǎn)擊程序卡片
- 參與者 - 進(jìn)入活動詳情
- 參與者 - 接龍信息填寫
- 參與者 - 進(jìn)入活動詳情
界面如下：
數(shù)據(jù)庫設(shè)計(jì)
首先數(shù)據(jù)庫設(shè)計(jì)來看，我們需要三張表：
- 用戶表（users），用于用戶體系的基礎(chǔ)搭建
2. 接龍活動表（solitaire），用于存放發(fā)起者接龍活動
3. 接龍信息表（solitaire_info），用于存放參與者接龍信息
實(shí)現(xiàn)路線圖
難點(diǎn)部分會進(jìn)行分析講解，簡單部分需自行實(shí)現(xiàn)（之前教過的知識點(diǎn)）
- 創(chuàng)建活動 -> 獲取用戶信息 -> 用戶表插入用戶數(shù)據(jù) -> 活動表插入活動信息
- 轉(zhuǎn)發(fā)活動 -> 通過聯(lián)合查詢出活動列表 -> 將接龍活動轉(zhuǎn)發(fā)到群里
- 查詢信息 -> 通過分享的活動ID查詢詳情 -> 跳轉(zhuǎn)到填寫信息
- 填寫信息 -> 獲取用戶信息（同上）-> 信息表插入接龍信息 -> 更新活動參與人數(shù) -> 發(fā)送訂閱消息
- 回到詳情 -> 刷新接龍信息列表（使用聚合查詢）
- 其他功能 -> 導(dǎo)出表格
復(fù)雜查詢
由于接龍信息和用戶信息分別在兩張表中實(shí)現(xiàn)，所以這里需要用到聯(lián)表查詢。這個時候就需用到小程序的聚合查詢能力。
聯(lián)表查詢
如我們現(xiàn)在已經(jīng)有一條活動數(shù)據(jù)了，那么現(xiàn)在數(shù)據(jù)庫的數(shù)據(jù)結(jié)構(gòu)應(yīng)該是這樣的：
用戶表 users:
接龍表 solitaire:
然后使用 lookup 函數(shù)進(jìn)行關(guān)聯(lián)起來。
以下為屬性含義
lookup({
from: <要連接的集合名>,
localField: <輸入記錄的要進(jìn)行相等匹配的字段>,
foreignField: <被連接集合的要進(jìn)行相等匹配的字段>,
as: <輸出的數(shù)組字段名>
})
結(jié)合以上使用方式，我們使用下lookup連接查詢
async queryLookupList(context, params) {
let res = await db.collection('solitaire').aggregate()
.match({
openid: context.OPENID
})
.lookup({
from: 'users',
localField: 'openid',
foreignField: '_openid',
as: 'users',
})
.sort({
date: -1
})
.end()
return res
}
最后查詢出來的結(jié)果是：
[
{
"_id": "cd045e756110ed09047443683dd70ecf",
"content": "312312",
"date": "2021-08-09 16:53",
"title": "12312",
"type": 1,
"openid": "oyfiv5Z90bqbQ6BJ6A273eP68j-w",
"number": 0,
"users": [
{
"_id": "8937eaa96110ea39039e900278a1529e",
"_openid": "oyfiv5Z90bqbQ6BJ6A273eP68j-w",
"date": "2021-08-09T08:41:29.878Z",
"userInfo": {
"avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ9VBHPzRxk4M7bc4xxwXOaw6DpciahEjzeZ4GP0UoSmiaqBMFQznROZlVG5ukvpv8dSXNzl34oaP7g/132",
"city": "Changsha",
"country": "China",
"gender": 1,
"language": "zh_CN",
"nickName": "111陳宇明",
"province": "Hunan"
}
}
]
}
]
由于在實(shí)際復(fù)雜業(yè)務(wù)中，聚合查詢使用的比較多的，所以再次我們帶大家來對聚合查詢進(jìn)行更深入的了解。
聚合查詢
聚合是非常強(qiáng)大的數(shù)據(jù)分析工具，主要用于對記錄進(jìn)行批量處理，可以對記錄進(jìn)行按條件分組、跨集合聯(lián)表等一系列批量而又復(fù)雜操作。類似于Excel整列整列跨字段的運(yùn)算(如加、減、合并、比較等）、對內(nèi)嵌的字段可以進(jìn)行整列拆分、類型變換、組合等。
聚合查詢 VS 普通查詢
聚合aggregate和普通數(shù)據(jù)查詢get是兩套不同的體系，聚合更偏向于數(shù)據(jù)的復(fù)雜查詢。聚合查詢和普通數(shù)據(jù)查詢都能對數(shù)據(jù)庫進(jìn)行查詢，兩個的很多方法都特別類似，我們可以通過對之前普通查詢的理解來理解聚合查詢的部分功能，具體查看以下表格對比。
在這里需要注意的是使用聚合查詢之前需要先 aggregate() 發(fā)起一個聚合操作。以上是普通查詢可以做到的，聚合查詢也可以做到，接下來是普通查詢做不到的。
聚合階段
聚合階段是聚合管理流水線作業(yè)的組成單元，是一個個功能節(jié)點(diǎn)，有的可以聯(lián)表lookup、有的可以組合group、有的可以拆分unwind等等。每個聚合階段可以使用表達(dá)式、操作符對輸入文檔進(jìn)行計(jì)算綜合、均值、拼接、分割、轉(zhuǎn)換格式等操作，操作完成之后會輸出給下一個階段，直到end返回結(jié)果。
小技巧
在這里告訴大家一個小技巧，其實(shí)寫查詢的時候可以在數(shù)據(jù)庫的高級操作區(qū)間先寫好測試然后再放到函數(shù)中去使用，這樣可以提高效率。
在這里不需要獲取數(shù)據(jù)庫對象，直接通過db就能使用，數(shù)據(jù)也不需要打印出來，只要使用了結(jié)束函數(shù)就可以了。
訂閱消息
當(dāng)發(fā)起者轉(zhuǎn)發(fā)到群里之后，參與者就可以填寫接龍信息，當(dāng)接龍信息填寫完成之后，可以在這里給到參與者發(fā)送一個訂閱消息，告知參與者接龍成功。
這樣設(shè)計(jì)有兩個好處：
- 便于再次激活用戶，多一個入口就多一些用戶打開的概率。
- 更快捷的打開方式（提升1倍的效率）
- 正常打開路徑：
- 下拉聊天界面進(jìn)入小程序列表
- 點(diǎn)擊接龍小程序
- 找到參與的接龍活動
- 找到具體接龍點(diǎn)擊查看詳情
- 訂閱模版
- 進(jìn)入服務(wù)通知列表
- 找到具體模版點(diǎn)擊查看詳情
那么如何給用戶發(fā)送訂閱消息呢？請接著往下看：
申請消息模版
第一步，先登錄到后臺，找到訂閱消息菜單->申請訂閱消息模版
第二步，進(jìn)入訂閱消息列表頁面，點(diǎn)擊選用按鈕
第三步，進(jìn)入選用模版庫，通過關(guān)鍵詞搜索進(jìn)行查找，消息模版和小程序的類目有關(guān)，以“接龍”為例，小程序類目是「預(yù)約/報(bào)名，筆記」所以搜索到了這兩個類目下的消息模版。
第四步，選擇自己需要的模版，點(diǎn)擊「選用」進(jìn)入詳情頁面。模版有很多關(guān)鍵詞，只需要勾選自己需要的關(guān)鍵詞即可，然后填寫下場景說明即可點(diǎn)擊提交
第五步，填寫完成后，會在我的模版看到剛才申請好的消息模版，復(fù)制模版ID即可，到時候然后切換到小程序端進(jìn)行使用
獲取訂閱授權(quán)
第六步，找到小程序需要讓用戶授權(quán)的觸發(fā)方法。如：需求是當(dāng)用戶填寫完成接龍資料，讓用戶授權(quán)報(bào)名成功提醒，然后發(fā)一條報(bào)名成功的訂閱消息，那么這個時候就需要找到填寫信息的方法。如果只是單獨(dú)先對這個功能進(jìn)行學(xué)習(xí)，那么就可以在一個頁面寫個按鈕，然后按鈕綁定一個點(diǎn)擊事件觸發(fā)即可。
寫在任意測試頁面wxml
<button bindtap="onMsg" >測試訂閱消息</button>
當(dāng)前測試頁面對應(yīng)的js
wx.requestSubscribeMessage({
tmplIds: ['模版ID'],
success(res) {
console.log(res)
}
})
第七步，用真機(jī)調(diào)試，模擬器不支持。點(diǎn)擊之后界面會出現(xiàn)授權(quán)頁面。
以下為我分別點(diǎn)擊取消和允許的日志輸出。用戶可以支持一次調(diào)用最多可訂閱3條消息。
然后我們再來看下 requestSubscribeMessage 文檔中對返回體的解釋
對于開發(fā)者來說，需要關(guān)心的就是是否用戶允許來，所以我們需要通過以下方式獲取結(jié)果，當(dāng)結(jié)果是允許的時候我們插入就發(fā)送成功通知給到用戶即可。當(dāng)然我這里指的是用戶添加完后發(fā)送添加成功通知的業(yè)務(wù)路徑，如果不是需要當(dāng)前動作完成后發(fā)送的話，那么就需要存儲一條記錄到數(shù)據(jù)庫，等需要用到的時候再去做發(fā)送消息模版的動作。
onMsg() {
wx.requestSubscribeMessage({
tmplIds: ['模版ID'],
success(res) {
if(res.模版ID=='accept'){
// 發(fā)送消息給到用戶
}
}
})
}
發(fā)送模版消息
第七步，發(fā)送模版消息，新建一個發(fā)送模版消息的云函數(shù) sendMessage ，然后打開 subscribeMessage. send 文檔，可以看到這個方法支持云調(diào)用，也就是說官方已經(jīng)幫開發(fā)者封裝好了方法使用起來非常簡單。
云調(diào)用是云開發(fā)提供的基于云函數(shù)使用小程序開放接口的能力
那么我們就用云調(diào)用方法來試試，首先在 sendMessage 的config.json文件配置權(quán)限
{
"permissions": {
"openapi": [
"subscribeMessage.send"
]
}
}
然后在js中編寫調(diào)用發(fā)送模版消息的方法，方法參數(shù)如下：
我把重要的參數(shù)用紅色框框標(biāo)記起來了，看下代碼。
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
const result = await cloud.openapi.subscribeMessage.send({
"touser": wxContext.OPENID, // 發(fā)給自己直接從 getWXContext 獲取
"templateId":'模版ID',
"page": '目標(biāo)頁面路徑',
"lang": 'zh_CN',
"data": {
"thing2": {
"value": '報(bào)名接龍2021'
},
"phrase8": {
"value": '報(bào)名成功'
},
"thing19": {
"value": '詳細(xì)點(diǎn)擊查看=>'
}
},
"miniprogramState": 'developer'
})
return result
}
注意 data 這個參數(shù)需要回到小程序管理后臺的消息訂閱列表查看訂閱模版的詳情
這里需要注意每個不同的數(shù)據(jù)類型都有些限制條件詳細(xì)可見文檔，然后data參數(shù)需要和上面的模版內(nèi)容一對一對應(yīng)上，方法寫完上傳并部署即可。
第八步，調(diào)用模版消息。
onMsg() {
wx.requestSubscribeMessage({
tmplIds: ['模版ID'],
success(res) {
if (res.XXXXID == 'accept') {
wx.cloud.callFunction({
name: 'sendMessage'
}).then(res => {
console.log(res)
})
}
}
})
}
調(diào)用成功后會在微信聊天頁面的服務(wù)通知中收到模版消息提醒，點(diǎn)擊即可進(jìn)入小程序，效果如下：
導(dǎo)出表格
使用云函數(shù)使用Node.js的node-xlsx模塊
安裝模塊
- 新建云函數(shù) excel
- 右鍵云函數(shù)選擇在外部終端窗口開打
- 輸入命令
npm install node-xlsx
- 安裝成功
- 文件結(jié)構(gòu)
使用模塊
- 導(dǎo)入模塊
const xlsx = require('node-xlsx')
- 準(zhǔn)備數(shù)據(jù)
let row = ['姓名', '電話', '備注']; //表格的屬性
let allData = [] //表格內(nèi)容
// 添加表頭
allData.push(row)
// 假數(shù)據(jù)，真實(shí)數(shù)據(jù)需要從小程序端傳遞過來或在云函數(shù)中云數(shù)據(jù)庫查詢出來
allData.push(['陳宇明', '13148123123', ''])
allData.push(['陳X明', '13148123123', '不知道'])
- 生成表格
// 生成表格
var buffer = await xlsx.build([{
name: 'mySheetName',
data: allData
}]);
- 最后生成完成之后還需要用到我們之前學(xué)習(xí)過的上傳文件 uploadFile 上傳到云存儲中
let cloudPath = `xlsx/${Math.floor(Math.random()*1000000000)}.xlsx`
//上傳文件返回結(jié)果
return await cloud.uploadFile({
cloudPath: cloudPath,
fileContent: buffer, //excel二進(jìn)制文件
})
- 調(diào)試一下
- 查看文件
- 通過復(fù)制下載鏈接，打開查看表格內(nèi)容
在線查看文檔
當(dāng)獲取到文件ID，在使用 getTempFileURL 用云文件 ID 換取真實(shí)鏈接，然后 downloadFile 下載文件資源到本地，通過 openDocument 新開頁面打開文檔。
openExcel(){
wx.cloud.callFunction({
name: "excel",
data: {
infos: {} //表格數(shù)據(jù)
},
complete: res => {
wx.cloud.getTempFileURL({
fileList: [res.result.fileID],
success: res => {
this.setData({
tempFileURL: res.fileList[0].tempFileURL
})
console.log(this.data.tempFileURL)
wx.downloadFile({
url: this.data.tempFileURL,
success: (res) => {
const filePath = res.tempFilePath
console.log(filePath)
wx.openDocument({
filePath: filePath,
showMenu: true,
success: res => {
console.log(res)
}
})
}
})
}
})
}
})
},
復(fù)制下載鏈接
當(dāng)獲取到文件ID，在使用 getTempFileURL 用云文件 ID 換取真實(shí)鏈接，然后 setClipboardData 設(shè)置系統(tǒng)剪貼板的內(nèi)容。
getExcelUrl() {
wx.cloud.callFunction({
name: "excel",
data: {
infos: {} //表格數(shù)據(jù)
},
complete: res => {
wx.cloud.getTempFileURL({
fileList: [res.result.fileID],
success: res => {
this.setData({
tempFileURL: res.fileList[0].tempFileURL
})
wx.setClipboardData({ //復(fù)制到粘貼板
data: this.data.tempFileURL,
success(res) {
wx.getClipboardData({
success(res) {
}
})
}
})
}
})
}
})
},
最后
這篇教程相比之前的備忘錄教程更像是一道填空題，需要大家利用之前教程學(xué)習(xí)到的知識進(jìn)行融合才能實(shí)現(xiàn)這個小程序，獨(dú)立完成這個項(xiàng)目才是檢驗(yàn)學(xué)習(xí)效果的最佳方式。文章來源：http://www.zghlxwxcb.cn/news/detail-655278.html
學(xué)習(xí)更多小程序云開發(fā)知識請關(guān)注CRMEB開源項(xiàng)目文章來源地址http://www.zghlxwxcb.cn/news/detail-655278.html
到了這里，關(guān)于微信小程序前后端開發(fā)快速入門（完結(jié)篇）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
