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

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

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

相关文章

气象监测站：用科技感知气象变化

气象监测站：用科技感知气象变化

气象监测站是利用科学技术感知当地小气候变化情况的气象观测仪器&#xff0c;可用于农业、林业、养殖业、畜牧业、环境保护、工业等多个领域&#xff0c;提高对环境数据的利用率&#xff0c;促进产业效能不断提升。 气象监测站主要由气象传感器、数据传输系统、电源系统、支架…
阅读更多...
CKZF-D60170、CKZF-D70190、CKZF-D80210单向离合器

CKZF-D60170、CKZF-D70190、CKZF-D80210单向离合器

CKZF-C30100、CKZF-C35110、CKZF-C40125、CKZF-C45130、CKZF-C50150、CKZF-C55160、CKZF-C60170、CKZF-C70190、CKZF-C80210、CKZF-C90230、CKZF-C100270、CKZF-C130310、CKZF-B30100、CKZF-B35110、CKZF-B40125、CKZF-B45130、CKZF-B50150、CKZF-B55160、CKZF-B60170、CKZF-B7…
阅读更多...
深入学习前端开发，掌握HTML、CSS、JavaScript等技术

深入学习前端开发，掌握HTML、CSS、JavaScript等技术

课程链接&#xff1a; 链接: https://pan.baidu.com/s/1WECwJ4T8UQfs2FyjUMbxig?pwdi654 提取码: i654 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 --来自百度网盘超级会员v4的分享 课程介绍&#xff1a; 第1周&#xff1a;HTML5基础语法与标签 &#x1f…
阅读更多...
【数据结构】二叉树

【数据结构】二叉树

完全二叉树 是指所有结点度数小于等于2的树 所以这种情况也是&#xff1a; 几条性质 一个具有n个结点的完全二叉树的深度为&#xff1a; log ⁡ 2 ( n 1 ) 的结果向上取整。 \\\log_{2}(n1) \ \ 的结果向上取整。 log2​(n1) 的结果向上取整。设度为0的结点个数是n0&#…
阅读更多...
【数据结构】实现顺序表

【数据结构】实现顺序表

目录 一.介绍顺序表二.实现顺序表1.创建多文件2.顺序表的存储方式3.函数的声明4.初始化顺序表5.清理顺序表6.打印顺序表7.扩容8.尾插8.尾删9.头插10.头删11.查找12.修改13.在pos位置插入13.在pos位置删除 三.全部代码1.SeqList.h2.SeqList.c3.Test.c 一.介绍顺序表 顺序表是用…
阅读更多...
【机器学习】sklearn数据集的使用，数据集的获取和划分

【机器学习】sklearn数据集的使用，数据集的获取和划分

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 sklearn数据集 二、安装sklearn二、获取数据集三、…
阅读更多...
RFID如何在汽车混流生产中进行车辆跟踪？

RFID如何在汽车混流生产中进行车辆跟踪？

在汽车混流生产中&#xff0c;RFID技术可以对每个车辆进行唯一标识&#xff0c;从而实现车辆生产全程跟踪。实时确定车辆的位置、状态和生产过程&#xff0c;生产管理系统就能够对生产流程进行实时监控和管理&#xff0c;及时发现和解决问题&#xff0c;提高生产效率和质量。 焊…
阅读更多...
gulimall-缓存-缓存使用

gulimall-缓存-缓存使用

文章目录 前言一、本地缓存与分布式缓存1.1 使用缓存1.2 本地缓存1.3 本地模式在分布式下的问题1.4 分布式缓存 二、整合redis测试2.1 引入依赖2.2 配置信息2.3 测试 三、改造三级分类业务3.1 代码改造 四、高并发下缓存失效问题4.1 缓存穿透4.2 缓存雪崩4.3 缓存击穿 五、分布…
阅读更多...
ZooKeeper的应用场景(命名服务、分布式协调通知)

ZooKeeper的应用场景(命名服务、分布式协调通知)

3 命名服务 命名服务(NameService)也是分布式系统中比较常见的一类场景&#xff0c;在《Java网络高级编程》一书中提到&#xff0c;命名服务是分布式系统最基本的公共服务之一。在分布式系统中&#xff0c;被命名的实体通常可以是集群中的机器、提供的服务地址或远程对象等一这…
阅读更多...
基于LVQ神经网络的人脸朝向识别

基于LVQ神经网络的人脸朝向识别

1案例背景 1.1人脸识别概述 人脸识别作为一个复杂的模式识别问题,近年来受到了广泛的关注,识别领域的各种方法在这个问题上各显所长,而且发展出了许多新方法,大大丰富和拓宽了模式识别的方向。人脸识别、检测,跟踪、特征定位等技术近年来一直是研究的热点。人脸识别是人脸应用…
阅读更多...
W5500-EVB-PICO 做UDP Server进行数据回环测试（七）

W5500-EVB-PICO 做UDP Server进行数据回环测试（七）

前言 前面我们用W5500-EVB-PICO 开发板在TCP Client和TCP Server模式下&#xff0c;分别进行数据回环测试&#xff0c;本章我们将用开发板在UDP Server模式下进行数据回环测试。 UDP是什么&#xff1f;什么是UDP Server&#xff1f;能干什么&#xff1f; UDP (User Dataqram P…
阅读更多...
Python 3 使用HBase 总结

Python 3 使用HBase 总结

HBase 简介和安装 请参考文章&#xff1a;HBase 一文读懂 Python3 HBase API HBase 前期准备 1 安装happybase库操作hbase 安装该库 pip install happybase2 确保 Hadoop 和 Zookeeper 可用并开启 确保Hadoop 正常运行 确保Zookeeper 正常运行3 开启HBase thrift服务 使用命…
阅读更多...
ChatGPT爆火，会给教育带来什么样的影响或者冲击？

ChatGPT爆火，会给教育带来什么样的影响或者冲击？

近来&#xff0c;人工智能聊天机器人ChatGPT连上热搜&#xff0c;火爆全网。ChatGPT拥有强大的信息整合能力、自然语言处理能力&#xff0c;可谓是“上知天文&#xff0c;下知地理”&#xff0c;而且还能根据要求进行聊天、撰写文章等。 ChatGPT一经推出&#xff0c;便迅速在社…
阅读更多...
生活随笔，记录我的日常点点滴滴.

生活随笔，记录我的日常点点滴滴.

前言 &#x1f618;个人主页&#xff1a;曲终酣兴晚^R的小书屋&#x1f971; &#x1f615;作者介绍&#xff1a;一个莽莽撞撞的&#x1f43b; &#x1f496;专栏介绍&#xff1a;日常生活&往事回忆 &#x1f636;‍&#x1f32b;️每日金句&#xff1a;被人暖一下就高热&…
阅读更多...
SpringBoot的配置文件(properties与yml)

SpringBoot的配置文件(properties与yml)

文章目录 1. 配置文件的作用2. 配置文件格式3. 配置文件的使用方法3.1. properties配置文件3.1.1. 基本语法和使用3.1.2. properties优缺点分析 3.2. yml配置文件3.2.1. 基本语法与使用3.2.2. yml中单双引号问题3.2.3. yml配置不同类型的数据类型及null3.2.4. 配置对象3.2.5. 配…
阅读更多...
CS5263替代停产IT6561连接DP转HDMI音视频转换器ASL 集睿致远CS5263设计电路原理图

CS5263替代停产IT6561连接DP转HDMI音视频转换器ASL 集睿致远CS5263设计电路原理图

ASL集睿致远CS5263是一款DP1.4到HDMI2.0b转换器芯片&#xff0c;设计用于将DP1.4源连接到HDMI2.0b接收器。 CS5263功能特性&#xff1a; DP接口包括4条主通道、辅助通道和HPD信号。接收器支持每通道5.4Gbps&#xff08;HBR2&#xff09;数据速率。DP接收机结合了HDCP1.4和HDCP…
阅读更多...
接口测试工具——Postman测试工具 Swagger接口测试+SpringBoot整合 JMeter高并发测试工具

接口测试工具——Postman测试工具 Swagger接口测试+SpringBoot整合 JMeter高并发测试工具

目录 Postman测试工具接口测试工具swaggerKnife4j1.引入依赖2.配置3.常用注解4.接口测试 JMeter什么是JMeter?JMeter安装配置1.官网下载2.下载后解压3.汉语设置 JMeter的使用方法1.新建线程组2.设置参数3.添加取样器4.设置参数&#xff1a;协议&#xff0c;ip&#xff0c;端口…
阅读更多...
使用Nginx解决跨域问题

使用Nginx解决跨域问题

前言&#xff1a; 项目是公司的老项目&#xff0c;只有部署在服务器上的时候&#xff0c;项目才可以正常运行&#xff08;接口是通的&#xff09;&#xff1b;现在需求&#xff1a;在现有的项目代码上进行修改&#xff0c;请求接口是第三方给的。接口是正常的&#xff0c;通过A…
阅读更多...
stm32f407 ADC学习记录

stm32f407 ADC学习记录

主要特性&#xff1a; ● 可配置 12 位、10 位、8 位或 6 位分辨率 ● 在转换结束、注入转换结束以及发生模拟看门狗或溢出事件时产生中断 ● 单次和连续转换模式 ● 用于自动将通道 0 转换为通道“ n ”的扫描模式 ● 数据对齐以保持内置数据一致性&#xff08;16位的数据…
阅读更多...
Python pycparser(c文件解析)模块使用教程

Python pycparser(c文件解析)模块使用教程

文章目录 安装 pycparser 模块模块开发者网址获取抽象语法树1. 需要导入的模块2. 获取 不关注预处理相关 c语言文件的抽象语法树ast3. 获取 预处理后的c语言文件的抽象语法树ast 语法树组成1. 数据类型定义 Typedef2. 类型声明 TypeDecl3. 标识符类型 IdentifierType4. 变量声明…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023