基于云开发的答题小程序v2.0-结合具体场景谈路由参数和组件思维

项目技术栈微信原生小程序+云开发。这里我主要使用云开发能力中的小程序端SDK。说白了就是用javascript直接操作数据库即可。本文前言基于云答题小程序v2.0的源地址，以及教大家搭建答题小程序v1.0的系列文章目录。在11月的最后一天及时完成]本文底部。本文主要结合实际场景，比如如何在答题小程序中使用路由传递参数，提高页面或组件的复用性。场景展示一图胜千言。结合答题小程序的应用场景，让我们率先了解一下整个演进过程。实现过程(1)答题页在答题页上。答题完成后提交并生成答题记录，后台会返回记录的id。这时可以执行跳转到答题结果页，获取数据后显示分数。.test.jsactivityRecord.add({data:{...examResult,createDate:db.serverDate()}}).then(res=>{//跳转到答题页面查看结果wx.reLaunch({url:'../result/result?id='+res._id});})(2)答题结果页进入答题结果页，页面加载时触发onLoad。可以在onLoad参数参数中获取打开当前页面的路径。然后发送请求，入参为id，即可获取到数据。result.js//生命周期函数——监控页面加载onLoad(options){//查看答题结果this.getExamResult(options.id);},getExamResult(id){activityRecord.doc(id).get().then(res=>{letexamResult=res.data;})}(3)答题记录页面在答题记录页面，当你需要查看历史成绩时，当你点击列表中的一条记录时，该记录会携带id作为参数值，跳转到答题结果页面，获取数据后显示分数。history.wxmlhistory.jsgoToResult(event){const{id}=event.currentTarget.dataset;//跳转到答题结果页查看结果wx.navigateTo({url:'../result/result?id='+id})}[Extend]事件的使用方法：给组件绑定一个事件处理器.在对应的Page定义中编写对应的事件处理函数，参数为event。dataset是当前组件上以data-开头的自定义属性的集合。在这个总结中，我将答案结果页面设计为一个可重用的组件。只要传递参数，就可以得到答案结果。无论是来自答题页还是答题记录页，查询到的答题结果都可以在本页展示，无需另建页面。将整个问答小程序分割成几个紧密相关的高内聚低耦合的页面和组件，明确职责、交互和边界。划分的基本原则是“识别、分离和组合关注点”。可见，组件化是灵活组合和定制的前提，是构建软件应用的核心思想。