微信小程序前后端开发快速入门(完结篇) |
您所在的位置:网站首页 › 开发微信小程序教程视频 › 微信小程序前后端开发快速入门(完结篇) |
前言
累计现在已经有 10 篇教程,用备忘录项目从小程序前端开发到后端开发都有分享。 微信小程序前端开发快速入门(5篇+视频) 微信小程序云开发快速入门(1/4) 微信小程序云开发快速入门(2/4) 微信小程序云开发快速入门(3/4) 微信小程序云开发快速入门(4/4)这篇是微信小程序前后端快速入门完结篇了,今天利用之前学习过的所有知识做一个新的项目「群登记助手v1.0」小程序。 群登记助手小程序是我在2020年开发的,当时还被小程序云开发邀请分享过这个项目《从想法到上线千万访问量的产品,1个开发就搞定,如何做到?》整体技术架构:小程序原生前端+小程序云开发。 经历了前面教程的学习,大家有了一定的基础,所以本次分享重心主要是带着大家理清楚逻辑相关的云开发处理方案和之前未讲解过的重要组件,之前已经讲解过的重复知识就不会重新再讲解,需要大家利用之前已经学习过的知识来组合今天学习的新知识对接龙小程序进行整体的完善。 业务分析 流程分析接龙小程序使用者角色上会有两种,分别是发起者和参与者。这个接龙是由发起者来让参与者接龙,所以他们两之间的使用逻辑是:
界面如下:
首先数据库设计来看,我们需要三张表: 用户表(users),用于用户体系的基础搭建难点部分会进行分析讲解,简单部分需自行实现(之前教过的知识点) 创建活动 -> 获取用户信息 -> 用户表插入用户数据 -> 活动表插入活动信息 转发活动 -> 通过联合查询出活动列表 -> 将接龙活动转发到群里 查询信息 -> 通过分享的活动ID查询详情 -> 跳转到填写信息 填写信息 -> 获取用户信息(同上)-> 信息表插入接龙信息 -> 更新活动参与人数 -> 发送订阅消息 回到详情 -> 刷新接龙信息列表(使用聚合查询) 其他功能 -> 导出表格 复杂查询由于接龙信息和用户信息分别在两张表中实现,所以这里需要用到联表查询。这个时候就需用到小程序的聚合查询能力。 联表查询如我们现在已经有一条活动数据了,那么现在数据库的数据结构应该是这样的:
用户表 users:
结合以上使用方式,我们使用下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是两套不同的体系,聚合更偏向于数据的复杂查询。聚合查询和普通数据查询都能对数据库进行查询,两个的很多方法都特别类似,我们可以通过对之前普通查询的理解来理解聚合查询的部分功能,具体查看以下表格对比。
聚合阶段是聚合管理流水线作业的组成单元,是一个个功能节点,有的可以联表lookup、有的可以组合group、有的可以拆分unwind等等。每个聚合阶段可以使用表达式、操作符对输入文档进行计算综合、均值、拼接、分割、转换格式等操作,操作完成之后会输出给下一个阶段,直到end返回结果。
在这里告诉大家一个小技巧,其实写查询的时候可以在数据库的高级操作区间先写好测试然后再放到函数中去使用,这样可以提高效率。 在这里不需要获取数据库对象,直接通过db就能使用,数据也不需要打印出来,只要使用了结束函数就可以了。 订阅消息当发起者转发到群里之后,参与者就可以填写接龙信息,当接龙信息填写完成之后,可以在这里给到参与者发送一个订阅消息,告知参与者接龙成功。 这样设计有两个好处: 便于再次激活用户,多一个入口就多一些用户打开的概率。 更快捷的打开方式(提升1倍的效率) 正常打开路径: 下拉聊天界面进入小程序列表 点击接龙小程序 找到参与的接龙活动 找到具体接龙点击查看详情 订阅模版 进入服务通知列表 找到具体模版点击查看详情那么如何给用户发送订阅消息呢?请接着往下看: 申请消息模版第一步,先登录到后台,找到订阅消息菜单->申请订阅消息模版
第六步,找到小程序需要让用户授权的触发方法。如:需求是当用户填写完成接龙资料,让用户授权报名成功提醒,然后发一条报名成功的订阅消息,那么这个时候就需要找到填写信息的方法。如果只是单独先对这个功能进行学习,那么就可以在一个页面写个按钮,然后按钮绑定一个点击事件触发即可。 写在任意测试页面wxml 测试订阅消息当前测试页面对应的js wx.requestSubscribeMessage({ tmplIds: ['模版ID'], success(res) { console.log(res) } })第七步,用真机调试,模拟器不支持。点击之后界面会出现授权页面。
第七步,发送模版消息,新建一个发送模版消息的云函数 sendMessage ,然后打开 subscribeMessage. send 文档,可以看到这个方法支持云调用,也就是说官方已经帮开发者封装好了方法使用起来非常简单。 云调用是云开发提供的基于云函数使用小程序开放接口的能力
然后在js中编写调用发送模版消息的方法,方法参数如下:
注意 data 这个参数需要回到小程序管理后台的消息订阅列表查看订阅模版的详情
第八步,调用模版消息。 onMsg() { wx.requestSubscribeMessage({ tmplIds: ['模版ID'], success(res) { if (res.XXXXID == 'accept') { wx.cloud.callFunction({ name: 'sendMessage' }).then(res => { console.log(res) }) } } }) }调用成功后会在微信聊天页面的服务通知中收到模版消息提醒,点击即可进入小程序,效果如下:
使用云函数使用Node.js的node-xlsx模块 安装模块 新建云函数 excel 右键云函数选择在外部终端窗口开打当获取到文件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) { } }) } }) } }) } }) }, 最后这篇教程相比之前的备忘录教程更像是一道填空题,需要大家利用之前教程学习到的知识进行融合才能实现这个小程序,独立完成这个项目才是检验学习效果的最佳方式。 在实现的过程中有遇到问题,可以留言讨论。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |