微信小程序前后端开发快速入门（完结篇）

这篇是微信小程序前后端快速入门完结篇了，今天利用之前学习过的所有知识做一个新的项目「群登记助手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.hqwc.cn/news/70732.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【日常积累】HTTP和HTTPS的区别

【日常积累】HTTP和HTTPS的区别

背景 在运维面试中&#xff0c;经常会遇到面试官提问http和https的区别&#xff0c;今天咱们先来简单了解一下。 超文本传输协议HTTP被用于在Web浏览器和网站服务器之间传递信息&#xff0c;HTTP协议以明文方式发送内容&#xff0c;不提供任何方式的数据加密&#xff0c;如果…
阅读更多...
《QT+PCL》点云的点选与框选

《QT+PCL》点云的点选与框选

《QT+PCL》点云的点选与框选 效果展示关键代码对应Qt6与pcl1.13对应Qt6与pcl1.12对应Qt5与pcl1.12对应Qt5与pcl1.11资源效果展示 关键代码 对应Qt6与pcl1.13 点选 //点选--------------回调函数 void MainWindow::pp_callback_PointsSelect(const
阅读更多...
⛳ Java 反射

⛳ Java 反射

目录 ⛳ Java 反射&#x1f3a8; 一、反射概述**&#x1f383; 使用反射的前提条件: **&#x1f3b2; 类正常加载过程如下图&#xff1a;反射优缺点&#xff1a;&#x1f9f8; Java反射机制提供的功能: **&#x1f945; 反射主要API** &#x1f3ed; 二、反射的使用&#x1f3a…
阅读更多...
AUTOSAR NvM Block的三种类型

AUTOSAR NvM Block的三种类型

Native NVRAM block Native block是最基础的NvM Block&#xff0c;可以用来存储一个数据&#xff0c;可以配置长度、CRC等。 Redundant NVRAM block Redundant block就是在Native block的基础上再加一个冗余块&#xff0c;当Native block失效&#xff08;读取失败或CRC校验失…
阅读更多...
快速实现SAP的移动化和流程优化

快速实现SAP的移动化和流程优化

热门议题&#xff1a; 1、企业如何快速解决人员移动办公的需求&#xff0c;比如在苹果安卓手机&#xff0c;平板电脑&#xff0c;MAC登录SAP。2、企业如何解决用户经常抱怨的流程复杂&#xff0c;操作繁琐&#xff0c;难以使用等问题 公司介绍&#xff1a; Synactive,Inc. 是…
阅读更多...
leetcode 1171.从链表中删去总和值为零的连续节点

leetcode 1171.从链表中删去总和值为零的连续节点

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;从链表中删去总和值为零的连续节点 思路&#xff1a; 在链表的 head 前新增加一个哨兵卫的头结点&#xff0c;方便计算前缀和。遍历链表&#xff0c;依次把每个节点的 val 相加到 sum 中去&#xff0c;再判断 sum 0 依…
阅读更多...
C++笔记之unique_ptr转移堆内空间的所有权

C++笔记之unique_ptr转移堆内空间的所有权

C笔记之unique_ptr转移堆内空间的所有权 code review! 文章目录 C笔记之unique_ptr转移堆内空间的所有权一.C笔记之unique_ptr转移堆内空间的所有权方法1.使用std::move函数方法2.使用std::unique_ptr的reset方法方法3.返回unique_ptr方法4.std::unique_ptr的swap方法 二.uniq…
阅读更多...
华为云MetaStudio多模态数字人进展及挑战介绍

华为云MetaStudio多模态数字人进展及挑战介绍

// 编者按&#xff1a;数字人作为AI能力集大成者&#xff0c;涉及计算机视觉、计算机图形学、语音处理、自然语言处理等技术&#xff0c;正在金融、政务、传媒、电商等领域应用越来越广。LiveVideoStackCon 2023 上海站邀请到华为云的李明磊为我们介绍华为云在数字人领域当前…
阅读更多...
每天一道leetcode：1192. 查找集群内的关键连接（图论困难tarjan算法）

每天一道leetcode：1192. 查找集群内的关键连接（图论困难tarjan算法）

今日份题目&#xff1a; 力扣数据中心有 n 台服务器&#xff0c;分别按从 0 到 n-1 的方式进行了编号。它们之间以 服务器到服务器 的形式相互连接组成了一个内部集群&#xff0c;连接是无向的。用 connections 表示集群网络&#xff0c;connections[i] [a, b] 表示服务器 a …
阅读更多...
你知道什么是Curriculum Training模型吗

你知道什么是Curriculum Training模型吗

随着深度学习技术的飞速发展&#xff0c;研究人员在不断探索新的训练方法和策略&#xff0c;以提高模型的性能和泛化能力。其中&#xff0c;Curriculum Training&#xff08;课程学习&#xff09;模型作为一种前沿的训练方法&#xff0c;引起了广泛的关注和研究。本文将深入探讨…
阅读更多...
【PubMed】生物医学文献数据库检索指南

【PubMed】生物医学文献数据库检索指南

【文献检索一般步骤】 搜索关键词&#xff0c;筛选结果&#xff0c;阅读摘要&#xff0c;获取全文。 第一步&#xff1a;访问PubMed 打开浏览器并进入PubMed网站&#xff08;https://pubmed.ncbi.nlm.nih.gov/&#xff09;。 第二步&#xff1a;构建查询 在PubMed首页的搜…
阅读更多...
Stable Diffusion AI绘图教学

Stable Diffusion AI绘图教学

课程介绍下载 这门课程将教授学生使用Stable Diffusion AI绘图工具进行数据可视化和图形设计。学生将学习基本的绘图原理、数据分析技巧&#xff0c;以及如何使用Stable Diffusion AI创建高质量的图表和可视化作品。通过实践项目和案例研究&#xff0c;学生将提升绘图技能&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023