微信小程序前后端開發快速入門（完結篇）

這篇是微信小程序前后端快速入門完結篇了，今天利用之前學習過的所有知識做一個新的項目「群登記助手v1.0」小程序。

整體技術架構：小程序原生前端+小程序云開發。

image.png
經歷了前面教程的學習，大家有了一定的基礎，所以本次分享重心主要是帶著大家理清楚邏輯相關的云開發處理方案和之前未講解過的重要組件，之前已經講解過的重復知識就不會重新再講解，需要大家利用之前已經學習過的知識來組合今天學習的新知識對接龍小程序進行整體的完善。

業務分析

流程分析

接龍小程序使用者角色上會有兩種，分別是發起者和參與者。這個接龍是由發起者來讓參與者接龍，所以他們兩之間的使用邏輯是：

image.png
一共有以下七步，來完成整個接龍行為的閉環。

  1. 發起者 - 創建接龍活動
  2. 發起者 - 進入接龍列表
  3. 發起者 - 轉發到微信群
  4. 參與者 - 點擊程序卡片
  5. 參與者 - 進入活動詳情
  6. 參與者 - 接龍信息填寫
  7. 參與者 - 進入活動詳情

界面如下：

image.png

數據庫設計

首先數據庫設計來看，我們需要三張表：

  1. 用戶表（users），用于用戶體系的基礎搭建

image.png
2. 接龍活動表（solitaire），用于存放發起者接龍活動

image.png
3. 接龍信息表（solitaire_info），用于存放參與者接龍信息

image.png

實現路線圖

難點部分會進行分析講解，簡單部分需自行實現（之前教過的知識點）

  1. 創建活動 -> 獲取用戶信息 -> 用戶表插入用戶數據 -> 活動表插入活動信息
  2. 轉發活動 -> 通過聯合查詢出活動列表 -> 將接龍活動轉發到群里
  3. 查詢信息 -> 通過分享的活動ID查詢詳情 -> 跳轉到填寫信息
  4. 填寫信息 -> 獲取用戶信息（同上）-> 信息表插入接龍信息 -> 更新活動參與人數 -> 發送訂閱消息
  5. 回到詳情 -> 刷新接龍信息列表（使用聚合查詢）
  6. 其他功能 -> 導出表格

復雜查詢

由于接龍信息和用戶信息分別在兩張表中實現，所以這里需要用到聯表查詢。這個時候就需用到小程序的聚合查詢能力。

聯表查詢

如我們現在已經有一條活動數據了，那么現在數據庫的數據結構應該是這樣的：
用戶表 users:

image.png
接龍表 solitaire:

image.png
然后使用 lookup 函數進行關聯起來。
以下為屬性含義

lookup({from: <要連接的集合名>,localField: <輸入記錄的要進行相等匹配的字段>,foreignField: <被連接集合的要進行相等匹配的字段>,as: <輸出的數組字段名>
})

結合以上使用方式，我們使用下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}

最后查詢出來的結果是：

[{"_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"}}]}]

由于在實際復雜業務中，聚合查詢使用的比較多的，所以再次我們帶大家來對聚合查詢進行更深入的了解。

聚合查詢

聚合是非常強大的數據分析工具，主要用于對記錄進行批量處理，可以對記錄進行按條件分組、跨集合聯表等一系列批量而又復雜操作。類似于Excel整列整列跨字段的運算(如加、減、合并、比較等）、對內嵌的字段可以進行整列拆分、類型變換、組合等。

聚合查詢 VS 普通查詢

聚合aggregate和普通數據查詢get是兩套不同的體系，聚合更偏向于數據的復雜查詢。聚合查詢和普通數據查詢都能對數據庫進行查詢，兩個的很多方法都特別類似，我們可以通過對之前普通查詢的理解來理解聚合查詢的部分功能，具體查看以下表格對比。

image.png
在這里需要注意的是使用聚合查詢之前需要先 aggregate() 發起一個聚合操作。以上是普通查詢可以做到的，聚合查詢也可以做到，接下來是普通查詢做不到的。

聚合階段

聚合階段是聚合管理流水線作業的組成單元，是一個個功能節點，有的可以聯表lookup、有的可以組合group、有的可以拆分unwind等等。每個聚合階段可以使用表達式、操作符對輸入文檔進行計算綜合、均值、拼接、分割、轉換格式等操作，操作完成之后會輸出給下一個階段，直到end返回結果。

image.png

小技巧

在這里告訴大家一個小技巧，其實寫查詢的時候可以在數據庫的高級操作區間先寫好測試然后再放到函數中去使用，這樣可以提高效率。

image.png
在這里不需要獲取數據庫對象，直接通過db就能使用，數據也不需要打印出來，只要使用了結束函數就可以了。

訂閱消息

當發起者轉發到群里之后，參與者就可以填寫接龍信息，當接龍信息填寫完成之后，可以在這里給到參與者發送一個訂閱消息，告知參與者接龍成功。

這樣設計有兩個好處：

  1. 便于再次激活用戶，多一個入口就多一些用戶打開的概率。
  2. 更快捷的打開方式（提升1倍的效率）
  3. 正常打開路徑：
  4. 下拉聊天界面進入小程序列表
  5. 點擊接龍小程序
  6. 找到參與的接龍活動
  7. 找到具體接龍點擊查看詳情
  8. 訂閱模版
  9. 進入服務通知列表
  10. 找到具體模版點擊查看詳情

那么如何給用戶發送訂閱消息呢？請接著往下看：

申請消息模版

第一步，先登錄到后臺，找到訂閱消息菜單->申請訂閱消息模版

image.png

第二步，進入訂閱消息列表頁面，點擊選用按鈕

image.png

第三步，進入選用模版庫，通過關鍵詞搜索進行查找，消息模版和小程序的類目有關，以“接龍”為例，小程序類目是「預約/報名，筆記」所以搜索到了這兩個類目下的消息模版。

image.png

第四步，選擇自己需要的模版，點擊「選用」進入詳情頁面。模版有很多關鍵詞，只需要勾選自己需要的關鍵詞即可，然后填寫下場景說明即可點擊提交

image.png

第五步，填寫完成后，會在我的模版看到剛才申請好的消息模版，復制模版ID即可，到時候然后切換到小程序端進行使用

image.png

獲取訂閱授權

第六步，找到小程序需要讓用戶授權的觸發方法。如：需求是當用戶填寫完成接龍資料，讓用戶授權報名成功提醒，然后發一條報名成功的訂閱消息，那么這個時候就需要找到填寫信息的方法。如果只是單獨先對這個功能進行學習，那么就可以在一個頁面寫個按鈕，然后按鈕綁定一個點擊事件觸發即可。

寫在任意測試頁面wxml

<button bindtap="onMsg" >測試訂閱消息</button>

當前測試頁面對應的js

wx.requestSubscribeMessage({tmplIds: ['模版ID'], success(res) {console.log(res)}})

第七步，用真機調試，模擬器不支持。點擊之后界面會出現授權頁面。

image.png

以下為我分別點擊取消和允許的日志輸出。用戶可以支持一次調用最多可訂閱3條消息。

image.png

然后我們再來看下 requestSubscribeMessage 文檔中對返回體的解釋

image.png

對于開發者來說，需要關心的就是是否用戶允許來，所以我們需要通過以下方式獲取結果，當結果是允許的時候我們插入就發送成功通知給到用戶即可。當然我這里指的是用戶添加完后發送添加成功通知的業務路徑，如果不是需要當前動作完成后發送的話，那么就需要存儲一條記錄到數據庫，等需要用到的時候再去做發送消息模版的動作。

onMsg() {wx.requestSubscribeMessage({tmplIds: ['模版ID'],success(res) {if(res.模版ID=='accept'){// 發送消息給到用戶}}})}

發送模版消息

第七步，發送模版消息，新建一個發送模版消息的云函數 sendMessage ，然后打開 subscribeMessage. send 文檔，可以看到這個方法支持云調用，也就是說官方已經幫開發者封裝好了方法使用起來非常簡單。

云調用是云開發提供的基于云函數使用小程序開放接口的能力

image.png

那么我們就用云調用方法來試試，首先在 sendMessage 的config.json文件配置權限

{"permissions": {"openapi": ["subscribeMessage.send"]}
}

然后在js中編寫調用發送模版消息的方法，方法參數如下：

image.png

我把重要的參數用紅色框框標記起來了，看下代碼。

// 云函數入口文件
const cloud = require('wx-server-sdk')cloud.init()// 云函數入口函數
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()const result = await cloud.openapi.subscribeMessage.send({"touser": wxContext.OPENID, // 發給自己直接從 getWXContext 獲取"templateId":'模版ID',"page": '目標頁面路徑',"lang": 'zh_CN',"data": {"thing2": {"value": '報名接龍2021'},"phrase8": {"value": '報名成功'},"thing19": {"value": '詳細點擊查看=>'}},"miniprogramState": 'developer'})return result}

注意 data 這個參數需要回到小程序管理后臺的消息訂閱列表查看訂閱模版的詳情

image.png

這里需要注意每個不同的數據類型都有些限制條件詳細可見文檔，然后data參數需要和上面的模版內容一對一對應上，方法寫完上傳并部署即可。

第八步，調用模版消息。

onMsg() {wx.requestSubscribeMessage({tmplIds: ['模版ID'],success(res) {if (res.XXXXID == 'accept') {wx.cloud.callFunction({name: 'sendMessage'}).then(res => {console.log(res)})}}})}

調用成功后會在微信聊天頁面的服務通知中收到模版消息提醒，點擊即可進入小程序，效果如下：

image.png

導出表格

使用云函數使用Node.js的node-xlsx模塊

安裝模塊

  1. 新建云函數 excel
  2. 右鍵云函數選擇在外部終端窗口開打

image.png

  1. 輸入命令
npm install node-xlsx
  1. 安裝成功

image.png

  1. 文件結構

image.png

使用模塊

  1. 導入模塊
const xlsx = require('node-xlsx')
  1. 準備數據
let row = ['姓名', '電話', '備注']; //表格的屬性let allData = [] //表格內容// 添加表頭allData.push(row)// 假數據，真實數據需要從小程序端傳遞過來或在云函數中云數據庫查詢出來allData.push(['陳宇明', '13148123123', ''])allData.push(['陳X明', '13148123123', '不知道'])
  1. 生成表格
// 生成表格var buffer = await xlsx.build([{name: 'mySheetName',data: allData}]);
  1. 最后生成完成之后還需要用到我們之前學習過的上傳文件 uploadFile 上傳到云存儲中
 let cloudPath = `xlsx/${Math.floor(Math.random()*1000000000)}.xlsx`
//上傳文件返回結果return await cloud.uploadFile({cloudPath: cloudPath,fileContent: buffer, //excel二進制文件})
  1. 調試一下

image.png

  1. 查看文件

image.png

  1. 通過復制下載鏈接，打開查看表格內容

image.png

在線查看文檔

當獲取到文件ID，在使用 getTempFileURL 用云文件 ID 換取真實鏈接，然后 downloadFile 下載文件資源到本地，通過 openDocument 新開頁面打開文檔。

openExcel(){wx.cloud.callFunction({name: "excel",data: {infos: {} //表格數據},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.tempFilePathconsole.log(filePath)wx.openDocument({filePath: filePath,showMenu: true,success: res => {console.log(res)}})}})}})}})},

復制下載鏈接

當獲取到文件ID，在使用 getTempFileURL 用云文件 ID 換取真實鏈接，然后 setClipboardData 設置系統剪貼板的內容。

 getExcelUrl() {wx.cloud.callFunction({name: "excel",data: {infos: {} //表格數據},complete: res => {wx.cloud.getTempFileURL({fileList: [res.result.fileID],success: res => {this.setData({tempFileURL: res.fileList[0].tempFileURL})wx.setClipboardData({ //復制到粘貼板data: this.data.tempFileURL,success(res) {wx.getClipboardData({success(res) {}})}})}})}})},

最后

這篇教程相比之前的備忘錄教程更像是一道填空題，需要大家利用之前教程學習到的知識進行融合才能實現這個小程序，獨立完成這個項目才是檢驗學習效果的最佳方式。

學習更多小程序云開發知識請關注CRMEB開源項目

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/41414.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/41414.shtml
英文地址，請注明出處：http://en.pswp.cn/news/41414.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Ubuntu服務器service版本初始化

Ubuntu服務器service版本初始化

下載 下載路徑 官網&#xff1a;https://cn.ubuntu.com/ 下載路徑&#xff1a;https://cn.ubuntu.com/download 服務器&#xff1a;https://cn.ubuntu.com/download/server/step1 點擊下載&#xff08;22.04.3&#xff09;&#xff1a;https://cn.ubuntu.com/download/server…
閱讀更多...
【Python百日進階-Web開發-Peewee】Day271 - Peewee API文檔 - 字段（二）

【Python百日進階-Web開發-Peewee】Day271 - Peewee API文檔 - 字段（二）

文章目錄 11.3.17 class UUIDField11.3.18 class BinaryUUIDField11.3.19 class DateTimeField11.3.20 class DateField11.3.21 class TimeField11.3.22 class TimestampField11.3.23 class IPField11.3.24 class BooleanField11.3.25 class BareField11.3.26 class ForeignKey…
閱讀更多...
神經網絡基礎-神經網絡補充概念-06-計算圖

神經網絡基礎-神經網絡補充概念-06-計算圖

概念 “計算圖”&#xff08;Computational Graph&#xff09;是一種用于表示數學表達式計算過程的圖結構&#xff0c;廣泛用于深度學習和自動微分等領域。計算圖將復雜的數學表達式分解為一系列簡單的計算節點&#xff0c;這些節點之間通過邊連接&#xff0c;形成了一個有向無…
閱讀更多...
【jwt】JWT原理，JWT是用來解決什么問題的，如何自定義生成JWT數據，并且實現jwt數據的解碼

【jwt】JWT原理，JWT是用來解決什么問題的，如何自定義生成JWT數據，并且實現jwt數據的解碼

JWT&#xff1a; JSON Web Token 1. jwt概述 用戶登錄成功后&#xff0c;服務端 如何知道客戶端的每次請求對應的是哪個用戶呢&#xff1f;怎么做&#xff1a;目前有兩種方式實現. 1.1. 一是通過sessionId的方式&#xff0c;登錄成功后服務端返回sessionId給客戶端&#xff0…
閱讀更多...
【2023年11月第四版教材】《第5章-信息系統工程之數據工程（第三部分）》

【2023年11月第四版教材】《第5章-信息系統工程之數據工程（第三部分）》

《第5章-信息系統工程之數據工程&#xff08;第三部分&#xff09;》 2 數據工程2.1 數據建模2.2 數據標準化2.3 數據運維2.4 數據開發利用2.5 數據庫安全 2 數據工程 2.1 數據建模 1、根據模型應用目的不同&#xff0c;可以將數據模型劃分為三類:概念模型、邏輯模型和物理模…
閱讀更多...
【數據結構】棧與隊列

【數據結構】棧與隊列

1 棧 1.1 棧的概念及結構 棧&#xff1a;一種特殊的線性表&#xff0c;其只允許在固定的一端進行插入和刪除元素操作。進行數據插入和刪除操作的一端稱為棧頂&#xff0c;另一端稱為棧底。棧中的數據元素遵守后進先出 LIFO (Last In First Out) 的原則。 壓棧&#xff1a;棧…
閱讀更多...
力扣75——圖廣度優先搜索

力扣75——圖廣度優先搜索

總結leetcode75中的圖廣度優先搜索算法題解題思路。 上一篇&#xff1a;力扣75——圖深度優先搜索 力扣75——圖廣度優先搜索 1 迷宮中離入口最近的出口2 腐爛的橘子1-2 解題總結 1 迷宮中離入口最近的出口 題目&#xff1a; 給你一個 m x n 的迷宮矩陣 maze &#xff08;下標…
閱讀更多...
Kafka中的 ISR 機制

Kafka中的 ISR 機制

ISR 是什么 ISR 的全稱叫做&#xff1a; In-Sync Replicas &#xff08;同步副本集&#xff09;, 可以理解為和 leader 保持同步的所有副本的集合。ISR 動態維護了一個和 leader 副本保持同步副本集合&#xff0c;ISR 中的副本全部都和 leader 的數據保持同步。 設一個場景&a…
閱讀更多...
JupyterHub實戰應用

JupyterHub實戰應用

一、JupyerHub jupyter notebook 是一個非常有用的工具&#xff0c;我們可以在瀏覽器中任意編輯調試我們的python代碼&#xff0c;并且支持markdown 語法&#xff0c;可以說是科研利器。但是這種情況適合個人使用&#xff0c;也就是jupyter notebook以我們自己的主機作為服務器…
閱讀更多...
PostgreSQL邏輯備份pg_dump使用及其原理解析

PostgreSQL邏輯備份pg_dump使用及其原理解析

一、原理分析 1、循環調用getopt_long解析命令行參數&#xff0c;將參數保存到static DumpOptions dopt;中 2、判斷參數是否相容&#xff0c;不相容則退出&#xff1a; options -s/--schema-only and -a/--data-only cannot be used togetheroptions -c/--clean and -a/--data…
閱讀更多...
uni-app中監聽網絡狀態，并在嵌入webView頁面的組件中添加網絡監測

uni-app中監聽網絡狀態，并在嵌入webView頁面的組件中添加網絡監測

uni-app中監聽網絡狀態&#xff0c;并在嵌入webView頁面的組件中添加網絡監測 uni-app中監聽網絡狀態 下載插件 打開網絡異常組件頁面&#xff0c;點擊"下載插件并導入HBuilderX"按鈕&#xff0c;打開HBuilderX軟件后&#xff0c;選擇需要導入插件的項目&#xff…
閱讀更多...
機器學習與模型識別1：SVM（支持向量機）

機器學習與模型識別1：SVM（支持向量機）

一、簡介 SVM是一種二類分類模型&#xff0c;在特征空間中尋找間隔最大的分離超平面&#xff0c;使得數據得到高效的二分類。 二、SVM損失函數 SVM 的三種損失函數衡量模型的性能。 1. 0-1 損失&#xff1a; 當正例樣本落在 y0 下方則損失為 0&#xff0c;否則損失為…
閱讀更多...
系統架構設計師-信息安全技術（1）

系統架構設計師-信息安全技術（1）

目錄 一、信息安全基礎 1、信息安全五要素 2、網絡安全漏洞 3、網絡安全威脅 4、安全措施的目標 二、信息加解密技術 1、對稱加密 2、非對稱加密 3、加密算法對比 三、密鑰管理技術 1、數字證書 2、PKI公鑰體系 四、訪問控制技術 1、訪問控制基本模型 2、訪問控制的實現技術…
閱讀更多...
【Linux命令詳解 | ssh命令】 ssh命令用于遠程登錄到其他計算機，實現安全的遠程管理

【Linux命令詳解 | ssh命令】 ssh命令用于遠程登錄到其他計算機，實現安全的遠程管理

文章標題 簡介一&#xff0c;參數列表二&#xff0c;使用介紹1. 連接遠程服務器2. 使用SSH密鑰登錄2.1 生成密鑰對2.2 將公鑰復制到遠程服務器 3. 端口轉發3.1 本地端口轉發3.2 遠程端口轉發 4. X11轉發5. 文件傳輸與遠程命令執行5.1 文件傳輸5.1.1 從本地向遠程傳輸文件5.1.2 …
閱讀更多...
TensorFlow 的基本概念和使用場景

TensorFlow 的基本概念和使用場景

簡介 TensorFlow 是一個開源的人工智能框架&#xff0c;由 Google 公司開發&#xff0c;用于構建和訓練機器學習模型。 TensorFlow 的基本概念包括&#xff1a; 1. 張量 (Tensor): TensorFlow 中的基本數據結構&#xff0c;可以理解為多維數組。 2. 計算圖 (Graph): TensorF…
閱讀更多...
深度學習入門-3-計算機視覺-圖像分類

深度學習入門-3-計算機視覺-圖像分類

1.概述 圖像分類是根據圖像的語義信息對不同類別圖像進行區分&#xff0c;是計算機視覺的核心&#xff0c;是物體檢測、圖像分割、物體跟蹤、行為分析、人臉識別等其他高層次視覺任務的基礎。圖像分類在許多領域都有著廣泛的應用&#xff0c;如&#xff1a;安防領域的人臉識別…
閱讀更多...
軟考筆記——9.軟件工程

軟考筆記——9.軟件工程

軟件工程的基本原理&#xff1a;用分階段的生命周期計劃嚴格管理、堅持進行階段評審、實現嚴格的產品控制、采用現代程序設計技術、結果應能清除的審查、開發小組的人員應少而精、承認不斷改進軟件工程事件的必要性。 軟件工程的基本要素&#xff1a;方法、工具、過程 軟件生…
閱讀更多...
babylonjs基于自定義網格生成圍欄動畫

babylonjs基于自定義網格生成圍欄動畫

效果&#xff1a; import { Vector3, Mesh, MeshBuilder, StandardMaterial, Texture, Animation, Color3 } from "babylonjs/core"; import imgUrl from "./image/headerwangge2.png" // 創建模型護欄特效 export default class CreateRail {constructor…
閱讀更多...
cocos creator 設置精靈鏡像翻轉效果

cocos creator 設置精靈鏡像翻轉效果

在 Cocos Creator 中&#xff0c;你可以通過代碼來設置精靈節點的鏡像翻轉效果。具體來說&#xff0c;你可以使用精靈節點的 setScale 方法來實現這一點。以下是在代碼中設置水平鏡像翻轉和垂直鏡像翻轉的示例&#xff1a; // 獲取精靈節點的引用 let spriteNode cc.find(&qu…
閱讀更多...
小程序swiper一個輪播顯示一個半內容且實現無縫滾動

小程序swiper一個輪播顯示一個半內容且實現無縫滾動

效果圖&#xff1a; wxml&#xff08;無縫滾動&#xff1a;circular"true"&#xff09;&#xff1a; <!--components/tool_version/tool_version.wxml--> <view class"tool-version"><swiper class"tool-version-swiper" circul…
閱讀更多...
最新文章

Copyright @ 2022~2023