- 云开发实时数据推送讲解
云开发数据库支持实时推送变更数据的能力,给定查询条件,每当数据库更新而导致查询条件对应的查询结果发生变更时,在小程序端就可收到一个更新事件,通过更新时间返回的对象就可获取更新内容和更新后的查询结果快照。 12.4.1 应用场景与注意事项1、实时数据推送的应用场景当用户在小程序端停留时间比较长,需要关注其他用户的行为而导致的一些数据的实时变化时,就可以使用实时数据推送,只要数据发生变动,都能实时的在前端呈现出来。实时数据推送有着广泛的应用场景: 聊天/即时通信:小游戏内聊天、大厅广播、区服广播等;企业内部小程序中的即时通信能力等;直播实时弹幕:在开视频直播时,用户点赞量、发送的礼物、评论等都可以实时在直播间滚动播放;多人小游戏:使用状态同步的小游戏,如棋牌类等回合制游戏等协作工具:如在线协作文档、团队任务管理等,用户的编辑信息会实时同步到参与方;实时应用状态同步:可以实时获取最新文章、以及最新评论、点赞、通知等内容,让交互更顺畅自然;比如看体育直播,和网友实时互动;在线商城:比如抢购时的库存量在不刷新界面的情况下实时更新;价格会实时变化的拼购;股票基金报价:股票的价格总是瞬息万变的,当你打开小程序查看股票价格时,你希望是实时的,而不是当你刷新页面时,数据才会同步;基于位置的应用,比如你和你的好友开启了位置共享;或者你在景区内不断移动,景区会实时根据你的位置推送相关的景区介绍; 2、实时数据推送注意事项01实时数据推送只支持小程序端(Web 端) 实时数据推送的 watch 请求只支持在小程序端(Web 端)等前端调用,不支持云函数端。 02不要滥用实时数据推送 只有在小程序端需要快速同步数据变动响应时,才需要使用实时数据推送,一般情况用页面刷新即可;也只有在用户在页面停留时间比较长的情况下才可以使用实时数据推送, 03注意集合的权限设置 集合的权限需要设置为所有人可读,仅创建者可读写。集合的读权限设置在实时数据推送里同样生效,如果权限是设置为仅可读用户自己的数据,则监听的时候无法监听到非用户自己创建的数据。 04查询不支持 field 监听集合中符合查询条件的数据的更新事件。使用 watch 时,支持 where, orderBy, limit,不支持 field。在监听中,orderBy 最多可以指定 5 个排序字段,limit 最大值为 200。limit 默认不存在即取所有数据。 05只监听必要的数据 监听时应明确查询条件,只监听必须用到的数据,避免监听不必要的数据,以此提高初次加载数据的性能以及接收数据变更的性能。 06监听返回的数据不受默认 20 条限制 监听返回的数据可能超过 20 条,不受小程序端默认 20 条上限限制。一次监听的记录数上限为 5000,若超出上限会抛错并停止监听。监听过大量的数据时初始化会较慢,对监听效率也有影响,如果预期监听发起时少于 5000,但后续有可能超过 5000,请注意在即将超过时重新监听并保证不超过 5000。 12.4.2 实时数据推送案例数据库的实时监听既可以监听集合中符合查询条件的文档的变化,也可以监听单个 doc,下面以监听单个 doc 为例。使用开发者工具新建一个页面,比如 snapshot,然后在 snapshot.wxml 里输入一个可以修改数据的 button,比如点击一下就会增加点赞次数: 点赞{{stars}}button> 然后在数据库里新建一个集合比如 livevideo(注意要修改集合的权限可以用安全规则修改为所有人可读可写,或者将点赞采用调用云函数的方式),添加一个简单的记录比如: "_id":"room2020032101", "star":0 再在 snapshot.js 的 data 属性里声明 stars,以及添加事件处理函数 addStar,还有就是在页面的 onLoad 生命周期函数里监听数据的变化,并将数据的变化渲染到页面。 data:{ stars:0 }, onLoad: function() { const that =this const watcher = db.collection('livevideo').doc('room2020032101') .watch({ onChange: function(snapshot) { that.setData({ stars:snapshot.docs[0].star }) console.log('文档数据发生变化', snapshot) }, onError: function(err) { console.error('监听因错误停止', err) } }) } addStar(){ db.collection('livevideo').doc('room2020032101').update({ data: { star: _.inc(1) }, success: console.log, fail: console.error }) } watch 有两个属性,onError 是失败回调,onChange 是成功回调,成功回调传入的参数 snapshot 是变更快照。onChange 和 onError 是必传参数。onChange 用于接收变更快照,onError 用于处理监听错误。如果监听发起失败或监听过程中出现不可恢复的错误,则会终止监听并通过 onError 抛出异常。onChange 会在第一次监听初始化及后续数据变更时收到推送事件。第一次初始化时会收到的查询条件对应的查询结果,后续变更事件会包含变更内容和变更后的查询结果快照。 如果想要预览实时数据推送的效果,可以使用开发者工具的多账号调试,在开发者工具栏-工具-多账号调试即可。当 A 用户点击点赞的 button,点赞的数量就会实时同步给所有在线用户的小程序端。在多账号的控制台里也能实时看到打印的信息。我们可以留意打印的 snapshot 对象,这个对象包含的信息非常多,主要有 type:快照类型,仅在第一次初始化数据时有值为 init,也就是当我们加载 snapshot 页面,在有用户点击 button 之前,type 为 init,一旦数据变化,type 为 undefined;id 为变更事件 id,记录了事件变更的次数;docChanges:表示更新事件数组,前端操作docs:数据快照,表示此更新事件发生后查询语句对应的查询结果docChanges 对象里的 queueType 和 dataType 字段,前者表示更新事件对监听列表的影响,后者表示记录的具体更新类型。注意这两者的不同,比如上面的案例我们只是更新了字段的值,所以它为 update;如果监听的记录出现增加,或者减少,queueType 的值就会有所不同,而 removedFields 也会有删除的字段;而 dataType 字段的值则与数据库请求的方法相对应,而所有更新的字段及字段更新后的值都会在 updatedFields 对象里。
2021-09-10 - 预约小程序开发笔记一:背景与技术方案的选型
一 业务背景介绍 很多企业的业务都需要通过服务预约来完成,比如酒店、美容、家政等等。 但很多商家因缺少合适的服务预订工具,而不知道如何让客户尽快预约。 这种情况下,制作一个自己的预约小程序,客户只需要扫码或者在微信里搜索你的小程序名字,就能通过小程序来快速预约服务。 二 前端技术方案选型[图片] 原生:对性能特别苛刻 or 追求稳定 or 要用最新功能,请记住任何时刻原生都是最稳定性能最好的选择!!!! KBone:kbone 是一个致力于微信小程序和 Web 端同构的解决方案,微信小程序的底层模型和 Web 端不同,我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题,它实现了一个适配器,在适配层里模拟出了浏览器环境,让 Web 端的代码可以不做什么改动便可运行在小程序里。MPVue:是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。WePY:腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征,比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发,还有很多高级的特征支持:Mixin混合、拦截器等;Taro:京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React 一致的开发体验。,同时因为使用了react的原因所以除了能编译h5, 小程序外还可以编译为ReactNative;Uni-app:使用 Vue.js 开发小程序、H5、App的统一前端框架。开发者使用 Vue 语法编写代码,uni-app 框架将其编译到 小程序(微信/支付宝/百度/字节跳动/QQ/钉钉)、App(iOS/Android)、H5等多个平台,保证其正确运行并达到优秀体验。Chameleon:滴滴跨端解决方案。不是很了解,欢迎大家补充[图片] 选择结论:预约小程序功能点不多(前台大概20个左右功能点,后台大概50个功能点),没有复杂的业务关系,且没有跨端的需求,要求是简单高效,这里的简单高效既是开发的简单高效,也是管理发布的简单高效,所以选择了原生框架作为前端方案,当然,小程序在非常快速的更新迭代,就算是原生框架也还是有一些坑的。 三 前端UI技术方案选型原生:基于WXML,WXSS,组件,模板构建,基本也就是写view的弹性布局啦!!!WeUI:腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验,感觉比较死板,中庸,没有视觉冲击力ColorUI:一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!其组件在美观性方面比较突出。iView WeApp: TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本ZanUI WeApp:是有赞移动 Web UI 规范 [代码]ZanUI[代码] 的小程序实现版本,结合了微信的视觉规范,为用户提供更加统一的使用感受MinUI :蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具。选择结论:WeUI过于平庸,和微信原生组件差不多,而iView,ZanUI, MinUI学习曲线较高,所以选择了原生+ColorUI作为UI框架 四 后端框架技术方案选型ThinkPHP(PHP):国人最引以为自豪的PHP框架,大概从200X年就开始流行,繁衍了N个版本,因为其自身包含了底层架构、兼容处理、基类库、数据库访问层、模板引擎、缓存机制、插件机制、角色认证、表单处理等常用的组件,并且对于跨版本、跨平台和跨数据库移植都比较方便。Laravel(PHP): 号称宇宙中最简洁、最优雅的PHP Web开发框架。它可以让你从面条一样杂乱的代码中解脱出来;它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁、富于表达力。 .NET Core WebAPI:微软为了通吃Linux/Win平台的得意之作,长期以来C#+SQLServer组合只活跃于企业级应用,或者古董应用中,无法飞入寻常百姓家(程序员家),为此推出了了.NET Core, 目标是跨平台Java SpringBoot:设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置小程序云开发:云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。选择结论:小程序云开发可以提供前后端的免鉴权用户身份获取,同时可以直接提供云函数调用,也提供了IO存储空间,Json数据库,同时还可以和公众号数据互通,且避免繁琐的认证授权,所以Selected IT五 数据库方案选型MySQL:移动互联网创业大军的首选,免费,高效,适中PostgreSQL:是一种特性非常齐全的自由软件的对象-关系型数据库管理系统(ORDBMS),是以加州大学计算机系开发的POSTGRES,4.2版本为基础的对象关系型数据库管理系统。小程序Json数据库:与小程序云开发紧密结合,而且基础版是免费的,当然选择她啊!!!六 综合结论小程序原生+ColorUI+云函数+云开发+Json数据库 不管选用那种框架,对微信小程序的基础知识,基础概念还是要花时间去学习的(看官方文档或者微信小程序全面实战,架构设计 && 躲坑攻略),因为很多问题,采用原生的去解决更好,组件也是。
2022-02-08