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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/79427.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【C++】位图和布隆过滤器

【C++】位图和布隆过滤器

位图和布隆过滤器 前言正式开始位图位图讲解模拟实现位图几道关于位图的题目 布隆过滤器概念实例布隆过滤器模拟实现误判率测试几道题 前言 本来本篇是和前面的两篇连着的&#xff0c;但是没写到一块&#xff0c;位图和布隆过滤器都是基于哈希的思想的&#xff0c;如果对于哈希…
阅读更多...
2023年即将推出的CSS特性对你影响大不大？

2023年即将推出的CSS特性对你影响大不大？

Google开发者大会每年都会提出有关于 Web UI 和 CSS 方面的新特性&#xff0c;今年又上新了许多新功能&#xff0c;今天就从中找出了影响最大的几个功能给大家介绍一下 :has :has() 可以通过检查父元素是否包含特定子元素或这些子元素是否处于特定状态来改变样式&#xff0c;也…
阅读更多...
【JavaEE进阶】MyBatis的创建及使用

【JavaEE进阶】MyBatis的创建及使用

文章目录 一. MyBatis简介二. MyBatis 使用1. 数据库和数据表的创建2. 创建Mybatis项目2.1 添加MyBatis框架支持2.2 设置MyBatis配置信息 3. MyBatis开发流程4. MyBatis查询数据库测试 三. MyBatis 流程1. MyBatis 查询数据库流程2. MyBatis 框架交互流程图 一. MyBatis简介 M…
阅读更多...
Springboot 实践（8）springboot集成Oauth2.0授权包，对接spring security接口

Springboot 实践（8）springboot集成Oauth2.0授权包，对接spring security接口

此文之前&#xff0c;项目已经添加了数据库DAO服务接口、资源访问目录、以及数据访问的html页面&#xff0c;同时项目集成了spring security&#xff0c;并替换了登录授权页面&#xff1b;但是&#xff0c;系统用户存储代码之中&#xff0c;而且只注册了admin和user两个用户。在…
阅读更多...
Tomcat 部署优化

Tomcat 部署优化

Tomcat Tomcat 开放源代码web应用服务器&#xff0c;是由java代码开发的 tomcat就是处理动态请求和基于java代码的页面开发 可以在html当中写入java代码&#xff0c;tomcat可以解析html页面当中的iava&#xff0c;执行动态请求 动态页面机制有问题&#xff1a;不对tomcat进行优…
阅读更多...
仿牛客论坛项目day7｜Kafka

仿牛客论坛项目day7｜Kafka

一、阻塞队列 创建了一个生产者线程和一个消费者线程。生产者线程向队列中放入元素&#xff0c;消费者线程从队列中取出元素。我们可以看到&#xff0c;当队列为空时&#xff0c;消费者线程会被阻塞&#xff0c;直到生产者线程向队列中放入新的元素。 二、Kafka入门 发布、订阅…
阅读更多...
mysql数据库迁移

mysql数据库迁移

目录 背景迁移数据库 背景 公司有个项目&#xff0c;刚开始数据量不是大的时候&#xff0c;数据库和服务上的所有应用数据都放在一个旧小盘中&#xff0c;随着项目数据的增长&#xff0c;旧的磁盘被占满了&#xff0c;导致系统无法写入数据&#xff0c;我和同事排查了很长时间…
阅读更多...
阿里云云主机_ECS云服务器_轻量_GPU_虚拟主机详解

阿里云云主机_ECS云服务器_轻量_GPU_虚拟主机详解

阿里云云主机分为云虚拟主机、云服务器ECS、轻量应用服务器、GPU云服务器、弹性裸金属服务器、专有宿主机、FPGA云服务器、高性能计算E-HPC、无影云电脑等&#xff0c;阿里云百科来详细说下阿里云云主机详解&#xff1a; 目录 阿里云云主机 云服务器ECS 轻量应用服务器 云…
阅读更多...
C++ 面向对象三大特性——多态

C++ 面向对象三大特性——多态

✅<1>主页&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;C 继承 ☂️<3>开发环境&#xff1a;Visual Studio 2022 &#x1f4ac;<4>前言&#xff1a;面向对象三大特性的&#xff0c;封装&#xff0c;继承&#xff0c;多态&#xff…
阅读更多...
红帽8.2版本CSA题库：第十一题查找文件

红帽8.2版本CSA题库：第十一题查找文件

红帽8.2版本CSA题库&#xff1a;第十一题查找文件 touch /tmp/{gamelan,jacques,libWedgeit.so.1.2.3} chown jacques:jacques /tmp/{gamelan,jacques,libWedgeit.so.1.2.3}mkdir /root/findfiles #创建文件夹 find / -user jacques -exec cp -a {} /root/findfiles \; …
阅读更多...
Centos7安装Docker及配置加速器地址

Centos7安装Docker及配置加速器地址

一、安装docker #1.yum 包更新到最新 yum update #2.安装需要的软件包&#xff0c;yum-util 提供yum-config-manager功能&#xff0c;另外两个是devicemapper驱动依赖的 yum install -y yum-utils device-mapper-persistent-data lvm2 #3.设置yum源 yum-config-manager --add…
阅读更多...
Leetcode每日一题：1444. 切披萨的方案数（2023.8.17 C++）

Leetcode每日一题：1444. 切披萨的方案数（2023.8.17 C++）

目录 1444. 切披萨的方案数 题目描述&#xff1a; 实现代码与解析&#xff1a; 二维后缀和 动态规划 原理思路&#xff1a; 1444. 切披萨的方案数 题目描述&#xff1a; 给你一个 rows x cols 大小的矩形披萨和一个整数 k &#xff0c;矩形包含两种字符&#xff1a; A …
阅读更多...
BC136 KiKi去重整数并排序

BC136 KiKi去重整数并排序

给定一个整数序列&#xff0c;KiKi想把其中的重复的整数去掉&#xff0c;并将去重后的序列从小到大排序输出。 输入描述 第一行&#xff0c;输入一个整数n&#xff0c;表示序列有n个整数。 第二行输入n个整数&#xff08;每个整数大于等于1&#xff0c;小于等于1000&#xf…
阅读更多...
【日常积累】Linux之init系统学习

【日常积累】Linux之init系统学习

init系统简介: Linux 操作系统的启动首先从 BIOS 开始&#xff0c;接下来进入 boot loader&#xff0c;由 bootloader 载入内核&#xff0c;进行内核初始化。内核初始化的最后一步就是启动 pid 为 1 的 init 进程&#xff0c;这个进程是系统的第一个进程&#xff0c;它负责产生…
阅读更多...
企望制造ERP系统 RCE漏洞复现

企望制造ERP系统 RCE漏洞复现

0x01 产品简介 企望制造纸箱业erp系统由深知纸箱行业特点和业务流程的多位IT专家打造&#xff0c;具有国际先进的管理方式&#xff0c;将现代化的管理方式融入erp软件中&#xff0c;让企业分分钟就拥有科学的管理经验。 erp的功能包括成本核算、报价定价、订单下达、生产下单、…
阅读更多...
编程语言学习笔记-架构师和工程师的区别，PHP架构师之路

编程语言学习笔记-架构师和工程师的区别，PHP架构师之路

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…
阅读更多...
Unity游戏源码分享-中国象棋Unity5.6版本

Unity游戏源码分享-中国象棋Unity5.6版本

Unity游戏源码分享-中国象棋Unity5.6版本 项目地址&#xff1a; https://download.csdn.net/download/Highning0007/88215699
阅读更多...
TCP拥塞控制简单理解

TCP拥塞控制简单理解

1.TCP的控制机制 序号 TCP通过序号可以实现一下几个功能&#xff1a; 1.确认应答处理。发送端收到接收端的确认应答&#xff0c;可以得知某些数据包被接收端接收了 2.顺序控制。接收端可以利用序号对接收到的报文进行排序 3.重发控制。如果发送端没有收到确认应答&#xff0c…
阅读更多...
vue项目引入antDesignUI组件

vue项目引入antDesignUI组件

快速安装ant-design-vue并配置&#xff0c;vue2.0 antDesign1.7.8 第一步&#xff1a;安装ant-deisgn-vue 1.7.8 npm install ant-design-vue1.7.8 --save第二步&#xff1a;配置package.json文件&#xff0c;将依赖写入后&#xff0c;npm install 安装依赖 "dependenc…
阅读更多...
智慧建筑工地平台，通过信息化技术、物联网、人工智能技术，实现对施工全过程的实时监控、数据分析、智能管理和优化调控

智慧建筑工地平台，通过信息化技术、物联网、人工智能技术，实现对施工全过程的实时监控、数据分析、智能管理和优化调控

智慧工地是指通过信息化技术、物联网、人工智能技术等手段&#xff0c;对建筑工地进行数字化、智能化、网络化升级&#xff0c;实现对施工全过程的实时监控、数据分析、智能管理和优化调控。智慧工地的建设可以提高工地的安全性、效率性和质量&#xff0c;降低施工成本&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023