前言 只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递，下面我总结了 4 种页面方法。 路径传递 通过在url后面拼接参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’。 案例：A页面带参数跳转到B页面 A页面跳转代码 [代码]goB(){ wx.navigateTo({ url: '/pages/B/index?id=value', }) }, [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', options.id) } [代码] 上面的案例是字符串参数，但是很多情况下需要传递对象，如下方代码。 [代码]Page({ data: { userInfo:{ name:'cym', age:16 } }, goB(){ wx.navigateTo({ url: '/pages/B/index?id='+this.data.userInfo, }) }, }) [代码] 如果使用上面同样的方式结构，输出的结果是：[object Object] 这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递，再到接收页面通过JSON.parse解析使用。 A页面跳转代码 [代码] goB(){ let userStr = JSON.stringify(this.data.userInfo) wx.navigateTo({ url: '/pages/B/index?id='+userStr, }) } [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', JSON.parse(options.id)) } [代码] 全局变量 通过App全局对象存放全局变量。 app.js代码 [代码]App({ // 存放对象的全局变量 globalData:{}, }) [代码] A页面跳转代码 [代码]// 获取App对象 const app = getApp() Page({ /** * 页面的初始数据 */ data: { userInfo: { name: 'cym', age: 16 } }, goB() { app.globalData.userInfo = this.data.userInfo wx.navigateTo({ url: '/pages/B/index', }) }, }) [代码] B页面接收代码 [代码]// 获取全局对象 const app = getApp() Page({ onLoad: function (options) { console.log(app.globalData.userInfo) } }) [代码] 存放在 App 全局变量里面，可以被多个页面使用，直接从 App 对象获取即可。这个数据是保持在内测中，每次小程序销毁就没有了。 数据缓存 通过存储到数据缓存中。 A页面跳转代码 [代码] goB() { wx.setStorageSync('userInfo', this.data.userInfo) wx.navigateTo({ url: '/pages/B/index', }) } [代码] B页面接收代码 [代码] onLoad: function (options) { let userInfo = wx.getStorageSync('userInfo', this.data.userInfo) console.log(userInfo) } [代码] 存放在数据缓存里面，可以被多个页面使用，直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中，除非清楚数据缓存或者删除小程序否则一直存在。 事件通信 通过事件通信通道。 A页面跳转代码 [代码]goB() { wx.navigateTo({ url: '/pages/B/index', success:(res)=>{ // 发送一个事件 res.eventChannel.emit('toB',{ userInfo: this.data.userInfo }) } }) } [代码] B页面接收代码 [代码]onLoad: function (options) { // 获取所有打开的EventChannel事件 const eventChannel = this.getOpenerEventChannel(); // 监听 index页面定义的 toB 事件 eventChannel.on('toB', (res) => { console.log(res.userInfo) }) } [代码] 总结 大家可以针对具体业务场景来进行选择合适自己的传参方式。

1. 小程序说明 1.1 应用场景 本小程序针对课堂教学环境中的签到问题提供解决方案。现阶段很多高校课堂签到环节还没有实现信息化，教师大都是通过人工点名的方式实现考勤，这种方式一方面占用了教师宝贵的教学时间，另一方面无法避免学生代签。 1.2 解决的问题 本小程序针对这两个问题入手，借助微信平台提供的服务，解决人工点名方式的弊端。一方面，小程序一分钟内即可完成签到，大量节省了教师的时间。另一方面，小程序内用户ID唯一，不可能通过修改个人信息来实现代签。 1.3 产品定位 小程序主要面向在校老师和学生，教师创建签到，学生进行签到，无时间和地点限制。且界面简洁明了，方便操作。 2. 设计方案 2.1 整体结构 [图片] 2.2 设计思路 2.2.1 功能流程 首页需要选择身份。第一次使用时需要完善个人信息。对于教师，会进入课程管理界面，可以添加和删除课程，选择课程后进入该课程对应的班级界面，可以添加和删除班级，选择班级后便是教师签到主界面，可以开启、关闭签到以及查看签到、请假信息。对于学生，直接进入签到主界面，进行签到和请假。 2.2.2 功能设计 本微信小程序采用的是定位签到。至于扫码签到，使用起来对于教师不方便，且对签到位置没有要求，容易出现代签。 签到设计： 教师端将教师的经纬度、班级信息、签到码和签到标志位上传到数据库，学生端通过输入签到码从数据库找到本次课堂签到，从而确定班级、课程信息。找到签到后，首先需要确定签到是否开启(通过判断签到标志位)，之后将自己的经纬度与老师的经纬度进行对比，只有在规定范围内才可签到成功。 防代签： 签到成功时，学生的用户ID会一并上传，如果一次签到中出现两个相同ID，则说明有人代签，从而禁止此次操作。(这里无法避免更换微信号的代签，我们查找过小程序API，没有发现类似于MAC地址的能唯一标识一台设备的东西。) 签到精度： 小程序用的是微信提供的定位API，所以签到的精度也就取决于微信定位的精度，误差大概在200米左右。 请假功能： 为方便学生，基于人性化管理的理念，本微信小程序增加了请假模块，学生可以在线提交请假条图片。 邮箱接受请假纪录： 为方便老师，小程序借助云函数，实现了签到结束后自动发送签到记录给老师的邮箱，格式为excel。 2.3 详细设计 本小程序的后端数据服务现阶段由bmob云提供。 2.3.1 首页 进入首页时，小程序会调用bmob的api实现一键登录。之后选择身份，首次使用时需要完善信息，点击提交后调用bmob的api存入数据库。 2.3.2 课程管理页(教师) 页面加载时根据用户ID从数据库获取课程信息并显示出来。通过调用bmob API实现增删操作。 2.3.3 班级管理页(教师) 页面加载时根据课程ID从数据库获取班级信息并显示出来。通过调用bmob API实现增删操作。 2.3.4 签到管理(教师) 班级选择完毕之后进入签到主页，以实现签到开启与关闭的功能。小程序页面加载时会获取当前位置的经纬度，然后使用腾讯的qqmap实现经纬度到地理位置的转换，之后随机生成一个不超过6位的签到码。当教师开启签到时，将经纬度，课程、班级，签到码信息存入数据库，并将签到标志为设为true(表示签到已开启)。当教师关闭签到时，调用后台的云函数，借助nodejs的nodemailer自动发送学生签到名单到教师邮箱。 页面底端提供查看当前班级已签到学生列表与请假列表的功能。签到列表用于显示当前班级已经发布的所有签到，按时间逆序排列。请假列表用于显示当前班级已经接收到的所有请假。包含请假学生学号姓名和请假条图片。 2.3.5 学生签到页 此页面包含学生信息显示、签到以及请假功能。页面加载时从数据库获取姓名学号，调用API获取经纬度，然后将经纬度转换为位置描述。签到时，用输入的签到码匹配教师签到表；如果匹配不到，说明签到码错误；如果匹配到了，则需要查看签到标志为sign和计算学生经纬度与老师经纬度的差值，如果在签到范围内(我们这里根据微信定位的精度设置为300米)，就可以签到成功。请假功能需要选择学校、教师、课程班级，之后上传请假条。 2.4 实际使用流程 2.4.1 教师流程 [图片] 进入小程序后选择教师，会弹出对话框，填写个人信息后跳转到选择课程界面。点击右下角添加课程后会弹出对话框，填写课程名后界面会刷新，点击刚添加的课程后，页面跳转到选择班级界面。点击右下角添加班级后会弹出对话框，填写班级名后界面会刷新，点击刚添加的班级后，页面跳转到签到管理界面。签到页面上班部分显示的是课程、班级、位置信息，中间部分是签到码和签到开关，点击开关可以开启签到，页面底部可以查看签到列表和请假列表。点击签到列表会跳转到新页面，显示的是已经发布的签到的列表，按最新时间排序。继续点击会跳到对应签到的学生签到名单界面。点击请假列表会跳转到请假列表页面，点击该页面右侧的请假条，会显示请假条图片。相关图片如下： [图片][图片] [图片][图片] [图片][图片] [图片][图片] [图片][图片] 2.3.1 学生流程 [图片] 进入小程序后选择学生，会弹出对话框，填写姓名学号后跳转到签到界面。页面上半部分显示的是姓名、学号和位置信息。中间部分是签到码输入区域和签到按钮。页面下部显示的是签到记录。底部是请假按钮，点击之后跳转到请假界面。选择学校、教师、班级后上传请假条，点击提交后老师便可查看请假信息。相关图片如下： [图片][图片] [图片][图片] 3. 运营 小程序于3月初上线，目前已经运营近4个月，主要使用人群为合肥工业大学计算机专业的学生和老师。小程序名称为 signapp 。 3.1 微信公众平台数据 截止6月 12号，小程序的累计使用人次为441人 [图片] [图片] [图片] 3.2 bmob云数据库数据 [图片] [图片] 从bmob数据来看，注册人数为465，总签到记录为3018条，签到时间集中于3.25 - 4.29.签到的经纬度集中于合肥工业大学。 4. 总结 从2018年12月提交申请开始，我们小组历经设计、开发、测试、上线、运维等过程，如今也算告一段落了。从运营数据来看，小程序表现良好，同时也获得了老师同学们的好评，换句话说，付出没有白费。 这次开发经历带给我很多收获。一方面我经历了完整的开发流程，有益于以后的发展。另一方面也让我认识到软件开发是一个迭代的过程，需要不断根据反馈进行更新，比如在小程序上线后，有老师反映签到名单不方便统计，我们便添加了邮件发送功能，自动将签到名单发送至老师邮箱。 最后感谢微信平台给我们这次实践机会。