- 小程序纯前端将数据导出为excel表格
网上有许多文章是讲述小程序将数据导出为excel表格的,但大多需要经过请求服务端,再加上云存储。那一套逻辑之前做后端的时候就玩过了。很多时候,我们浏览页面时数据已经从服务端获取到本地了,直接将之导出即可,再走服务端,实为多此一举。为了减轻服务端压力,于是便有了这篇文章。本文章介绍如何在小程序使用纯前端技术将以获取到的数据导出为excel表格。文末有代码片段 xlsx插件文档 sheetjs插件文档 [代码]const XLSX = require('../utils/excel.js') Page({ data: { }, onLoad() { }, exportData() { // 数据源 const data = [{ code: 1, name: 'A', }, { code: 2, name: 'B', }, { code: 3, name: 'C', }, { code: 4, name: 'D', }] // 构建一个表的数据 let sheet = [] let title = ['序号', '姓名'] sheet.push(title) data.forEach(item => { let rowcontent = [] rowcontent.push(item.code) rowcontent.push(item.name) sheet.push(rowcontent) }) // XLSX插件使用 var ws = XLSX.utils.aoa_to_sheet(sheet); var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "用户表"); var fileData = XLSX.write(wb, { bookType: "xlsx", type: 'base64' }); let filePath = `${wx.env.USER_DATA_PATH}/用户表.xlsx` // 写文件 const fs = wx.getFileSystemManager() fs.writeFile({ filePath: filePath, data: fileData, encoding: 'base64', bookSST: true, success(res) { console.log(res) const sysInfo = wx.getSystemInfoSync() // 导出 if (sysInfo.platform.toLowerCase().indexOf('windows') >= 0) { // 电脑PC端导出 wx.saveFileToDisk({ filePath: filePath, success(res) { console.log(res) }, fail(res) { console.error(res) util.tips("导出失败") } }) } else { // 手机端导出 // 打开文档 wx.openDocument({ filePath: filePath, showMenu: true, success: function (res) { console.log('打开文档成功') }, fail: console.error }) } }, fail(res) { console.error(res) if (res.errMsg.indexOf('locked')) { wx.showModal({ title: '提示', content: '文档已打开,请先关闭', }) } } }) } }) [代码] 导出效果如下,如需高级设置请参照xlsx插件文档 sheetjs插件文档 [图片] 代码片段 -完-
2023-08-11 - 优秀开源小程序推荐系列6
优秀开源小程序推荐锡类6 ~ [图片]~ ~' [图片]~ ~ [图片] ~ [图片] ~ [图片] ~ 仓库地址 https://github.com/jasongao97/natianyue README.md 哪天约 - 微信小程序 在这里,快速简单的发现群里的共同空闲时间,解决哪天约的千古难题,让群约更简单。 intro 哪天约是一个帮助群约计划时间的微信小程序,用户可以指定范围建立群约并分享,参与者各自选择自己合适的时间,最终选出最好的时间点。本小程序首个版本上线于 2017 年,经过 3 年时间迭代更新,已积累 8 万用户。2020 年 8 月,团队围绕「小程序云开发挑战赛」进行重大功能迭代,其中后端完全迁移至小程序云开发,具体项目特性说明如下。 特性 原生微信小程序开发 + 云开发 transition 与 animation 实现自然的 加载/警告/转场 动画 云开发数据库实现报名结果实时推送 云存储持久化用户头像、小程序码、Excel 表格 微信开放接口实现文字安全检测、订阅消息推送 仓库结构 /couldfunctions 云函数 (13个) archivePlan - 归档群约 closePlan - 结束报名 createPlan - 新建群约 editParticipation - 编辑报名 editPlan - 编辑群约 editPlanLock - 编辑锁定选项 getPlanCode - 获取群约小程序码 getPlanXLSX - 获取群约导出 Excel 表格 login - 登录 register - 注册 reopenPlan - 重新开启报名 subscribePlan - 订阅群约通知 updateUser - 更新用户信息 /miniprogram 小程序 /components 组件 avatar - 头像 btn - 按钮 calendar-picker - 日期选择器 container - 容器 drag-list - 拖拽列表 footer - 页脚 half-modal - 半屏模态弹框 navigation-bar - 导航栏 plan-list - 群约列表 (支持滑动删除) section - 段落 /icons 图标 /images 图片/插画 /pages 页面 createPlan - 创建群约 editParticipation - 编辑报名 editPlan - 编辑群约 index - 首页 plan - 群约详情 qrShare - 群约分享码 setting - 设置 setting/about - 关于 setting/deletedPlan - 已删除的群约 setting/segmentSetting - 选项模板管理 setting/segmentSetting/publicSetting - 公共模板库 /style 公共样式 /util 工具函数 date - 日期处理 option - 选项处理 tools.wxs - wxs 工具模块 数据库集合设计 users - 用户 _id: string _openid: string - OPENID _registeredAt: date - 注册时间 info: object - 用户信息 savedPlans: array - 保存的群约 deletedPlans: array - 删除的群约 segmentSettings: array - 时间选项模板 plans - 群约 _id: string _createAt: date - 创建时间 _creator: string - 发起人 _updatedAt: date - 更新时间 code: string - 分享码ID option: object - 选项配置 participation: array - 参与者ID及报名信息 remark: string - 备注 subscribers: array - 订阅者ID title: string - 标题 segment_settings - 公共时间选项模板 _id: string draft: boolean - 是否为草稿 name: string - 标题 segments: array - 时间选项 部署 克隆或下载本仓库并导入微信开发者工具 注册小程序并修改 project.config.json 中的 appid 使用云开发控制台建立 3 个数据库集合: users, plans, segment_settings(数据权限均为: 所有用户可读, 仅创建者可读写) 上传并部署 /cloudfunctions 中全部 13 个 云函数 预览/上传 后即可使用 (可选)打开订阅消息功能 进入微信公众平台小程序管理,选择功能-订阅消息-添加模板(标题: 报名结果提醒, 关键词: 活动名称、报名结果、活动人数) 修改 /cloudfunctions/closePlan/config.js 和 /miniprogram/config.js 中的 templateId 为上一步中建立的模板ID (可选)编辑 /miniprogram/config.js 中的 env 修改运行环境 Languages JavaScript 100.0% © 2021 GitHub, Inc. Terms Priva
2021-11-16 - 关于小程序文件下载并保存到本地的功能?
目前小程序要做保存excel、pdf等文件的功能, 我调用了wx.downFile,然后再调用saveFile,直接是走进了saveFile的success函数,但是保存的文件去哪里打开呢,还是说这个保存并不是保存到手机上? 还是说,现在的小程序并不支持保存文件到手机上(不是临时保存,是可以在退出小程序后再次在手机中找到并且打开) wx.downloadFile({ url: item.url, // filePath: wx.env.USER_DATA_PATH + '/' + item.fullName, success (res) { if (res.statusCode === 200) { wx.hideLoading() // let tempFilePath = res.filePath // 如果设置了filePath参数,则不会有tempFilePath let tempFilePath = res.tempFilePath wx.saveFile({ tempFilePath, success (res) { // 可以进行到这里 console.log(res); const savedFilePath = res.savedFilePath wx.showToast({ title: '下载成功', icon: 'none', mask: true }) }, fail (err) { console.log(err); wx.showToast({ title: '下载失败,请重新尝试', icon: 'none', mask: true }) } }) } } })
2020-04-01 - 在线答题小程序批量导入模板文件详解
在线答题小程序题库批量导入之前需要根据模板文件整理题库,那么目前小程序支持哪几种题型,本文主要讲述具体模板文件格式 该模板文件支持导入的题型有:单选、多选、判断、填空、简答五种题型 该模板文件于2020-05-20更新 [图片] 1、第一列的单选、多选、判断不要带"题"这个字,也就是说不能是单选题、多选题、判断题, 2、判断题的答案一列必须是A或者B,不能是对、错 3、解析一列如果不需要,可以没有 4、单选、多选题的选项一、二、三、四里面不要再包含A、B、C、D,会自动处理 5、前面题型不能省略,每一行都要有 6、单选、多选的选项可以是四个,系统支持任意选项,比如三个,比如七八个,都是可以支持的 7、题库文件的第一行一定是表头,这个不能缺少 8、第一列题型里面没有选择,只有单选和多选 9、填空题支持多个空,多个空时,答案中间用分割线分隔开来,比如答案是123|456 (2020-06-05支持) 具体文档,点击下面链接,选择其一就好,不同平台,存放的都是一份模板文件 腾讯文档 【腾讯文档】b55bcee1908fc19a https://docs.qq.com/sheet/DZk9WbFJpdlFCcHJ5?c=A14A0A0 语雀文档 https://www.yuque.com/docs/share/01f3cf96-931a-4f79-b412-c61f320cfa48?#77ab 金山文档 https://kdocs.cn/l/sCklbpGBn?f=130 [文档] b55bcee1908fc19a.xlsx 文件模板 模板文件一: 支持单选、多选、判断,选项为四个的模板,选项依次为A、B、C、D https://www.xiaomutong.com.cn/tpl20200501.xlsx 模板文件二: 支持单选、多选、判断,选项为七个的 模板,选项依次为A、B、C、D、E、F、G https://www.xiaomutong.com.cn/tpl20200505.xlsx 大家根据自己的题库选项酌情选择 海量题库管理多种方式支持导入题目、支持判断、单选、多选、填空、简答,可分类清晰管理和搜索。 [图片] 通过excel生成的题目,最后再界面上呈现如下 [图片] 2020-06-05 新增对填空题存在多个空的支持 比如某填空题有两个空位,答案分别为xiao和fei,那么在整理题库时,答案这里应该输入xiao|fei,中间用英文的分割线隔开。
2020-06-05 - 怎么在线编辑文档,如word、excel等?
怎么在线编辑文档,如word、excel等 现在只能打开吗? 像腾讯文档这种编辑文档的是用的什么?
2019-12-10 - 在线考试小程序操作手册
前言 本文以考前练习册小程序为示例,具体讲述在线考试小程序如何使用,如何新建题库,如何批量导入题库,具体体验可以微信搜索 考前练习册 即可。 产品介绍 考前练习册小程序是一款可以提供在线考试、模拟练习的微信小程序,目前支持以下七项核心功能 在线考试 顺序练习 随机练习 我的收藏 我的错题 考试排名 我的成绩 具体介绍请移步下面文档 在线答题小程序使用帮助文档? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000c22e3f24fc8909189e48b151413 题库信息 所谓题库信息,也可以叫试题分类,就是将试题按照某种维度进行分类,比如目前考前练习册有两个题库,分别为 001 微信期末考 002 垃圾分类测评 其中001、002为题库编号,微信期末考、垃圾分类测评为题库名称。 由于考前练习册是一级题库结构,即题库名字下面就是试题 比如我们按照一级科目如下排列 语文 数学 英语 那么这下面就是具体的试题信息 试题类型存放在集合category里面,大家可以先打开小程序云开发控制台,切换到数据库面板,找到category集合进行查看 关于如何打开小程序云开发控制台请移步下面文章 如何打开云开发控制台? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000c2ab4a08d605a255915bca56013 建议在新增试题题库名字的时候,先将category集合导出为json文件,然后只保留一条记录,将其他记录都删掉,给这一条记录修改编号,修改名字,然后再导入 考试试题题库编号建议按照以下规则进行编码 001 002 003 试题信息 在有了题库信息之后,我们就要上传试题信息了,具体试题按照以下模板整理成excel文件 在线答题小程序批量导入模板文件详解? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000866b4a28e58a1172aa6b0451413 文件整理完成之后,使用下面的转换工具,将excel转成json文件 https://www.xiaomutong.com.cn/index20200301.html 在上面工具中,已支持以下几种试题类型 单选 多选 判断 填空 简答 其中对于单选、多选目前提供的工具支持四个选项、五个选项、七个选项的模板导入,其中七个选项的模板可以支持六个选项的情况 小程序云开发如何更优雅导入数据? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/0000aa9f810b38f09b5acb40151013 云开发小程序数据导入示例? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000062f31b09804dbeca174355c813 试题集合为question,大家导入后可以按照题库名字进行核对,试题集合question是通过该集合里面的category字段进行关联某个题库名字的。 其他 未完待续 有其他疑问可以评论区留言,我会及时补充
2020-08-14 - 我把excel文件设置为只读,上传到云存储,再下载下来,文件是可读可写的?
XLSX.writeFile(wb, filePath); fs.chmodSync(filePath, 444) let fileStream = fs.createReadStream(filePath) let upload_res = await cloud.uploadFile({ cloudPath: 'excel/xxx.xlsx', fileContent: fileStream, })按道理下载下来应该也是可读的啊;
2019-11-11 - 小程序服务商必须教会商户哪些操作?(支付篇)
作为一个职称的小程序服务商,必须给商户普及微信支付商家版的7个操作。 一、开通支付 1、进入管理后台的“申请支付”菜单,按向导完成账号注册。 2、完成商户号、密钥和证书配置。 3、手机端微信支付后台登录。 一般在开通微信支付商家版的过程,手机端微信支付后台都已经绑定。进入方法:微信搜索“微信支付商家助手”,进入公众号右下角菜单 我的账号 > 我是商家 。 [图片] 手机端商家版微信支付,除了能收到顾客的收款通知外,还有收款记录、经营分析、员工管理。尤其是经营分析里的用户画像功能,值得重点研究一下。 二、退款 1、退款功能开通 点击管理后台的“申请退款”菜单。 通知工作人员后,会在1个工作日内完成审核并指引完成操作。 商户登录自己的微信支付后台接受退款功能开通邀请。 2、退款操作 [图片] 当退款事件产生后,可以到酒店管理后台 订房订单>小程序订单 点 退款 按钮。输入退款金额点确定即可。金额返回时间根据支付方式而定,微信零钱支付的是即时返回。 3、退款查询 [图片] 商家版微信支付后台的交易中心 > 退款查询。 三、员工账号管理 1、账号权限。 [图片] 默认情况下,有基本账户、财务、管理员、客服、技术操作员5个角色。也可以自定义新的角色。新角色可以自行配置权限!操作权限可以详细到菜单下某个功能。 2、如何开通员工账号。 [图片] 进入商家微信支付后台,账户中心>员工账号管理 > 员工列表 > 新增账号。 四、交易订单查询 [图片] 商家微信支付后台,交易中心 > 交易订单。可以根据时间查询、订单号查询。高级查询还可以根据场景查询,支付方式查询、金额范围查询、交易状态查询等。 五、提现说明 提现分为自动提现和手动提现,默认情况下为自动提现。也就是在每天早上9:00会把前一天的资金自动提现到绑定的对公账号。 这是最快捷的提现方案,但有个场景需要注意。就是提现完成后没有足够金额的情况下,有退款发生,就会产生退款失败。 提供两种解决方案: 1、关闭自动提现功能。 [图片] 关闭方法:产品中心 > 我的产品 > 资金解决方案 > 自动提现。 2、自动提现的情况下,设置预留退款金额。 根据商家自己的实际经营情况,预估一天最多的退款金额。在设置自动提现时设置预留金额。预留金额仍然不够的情况下,还可以通过充值解决。充值方面微信支付还很贴心地做了一个指定微信充值。设置完成后在第二天零点生效。 [图片] 提现的官方详细说明: https://kf.qq.com/faq/161223NJBr2u161223Mfeqei.html 六、收款通知 [图片] 顾客支付成功后,除了总管理员能收到收款通知。授权的店员也会收到微信收款商业版的通知。 七、财务对账 在商家微信支付后台里的交易中心,有交易、退款、充值、提现等数据汇总报表。并提供excel格式下载和强大的类目选择功能。 [图片]
2019-09-26 - 【U计划】课堂签到小程序
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月提交申请开始,我们小组历经设计、开发、测试、上线、运维等过程,如今也算告一段落了。从运营数据来看,小程序表现良好,同时也获得了老师同学们的好评,换句话说,付出没有白费。 这次开发经历带给我很多收获。一方面我经历了完整的开发流程,有益于以后的发展。另一方面也让我认识到软件开发是一个迭代的过程,需要不断根据反馈进行更新,比如在小程序上线后,有老师反映签到名单不方便统计,我们便添加了邮件发送功能,自动将签到名单发送至老师邮箱。 最后感谢微信平台给我们这次实践机会。
2019-07-20 - 永远对微信小程序保持尊重——小程序心得体会和开发经验
开篇 我第一次接触小程序时,还清楚的记得是在2017年的春节期间。当我升级最新版的微信后,开始摸索着新的功能变化。在发现页有一个叫小程序的入口,点进去有一列的“应用”。当我打开一个叫“亲戚关系计算器”的小程序后,简单的使用,然后退出,再去寻找其他的小程序,猫眼电影,自选股,滴滴出行…… 当我尝试着去探索更多小程序的过程中,我突然发现,微信正在发展为一个超级的应用流量入口。而微信中的小程序也可以轻松的坐拥10亿的可用用户人群。 那时候过年,我做的唯一一件事情就是细细的读了小程序的开发文档,心想他可以具有多大的活力与动力,能够引发多大的改变。而我能不能适应他,去随着他的发展,带动自己的腾飞。 很遗憾,当时的小程序并不对个人开发者开放,没有办法注册一个小程序,只能在开发者工具上写一些小的应用,去熟悉小程序的开发。 3月27日,小程序重要更新,其中之一就是支持个人开发者注册小程序。那时候的我,在学校上大一,用一个运营公众号的微信号注册了第一个小程序,并做了一些实验性的开发,并上线。 从这个过程中,我开始细细的体会小程序的优势以及不足,小程序适用于那些领域,小程序适合怎么推广。小程序适合那些行业领域的应用。现在看来,其实从小程序提供的能力,就可以依稀端详出小程序所致力的场景与应用领域。 2018年1月,在我历经半年多的思考和衡量下,做出第一款真正属于自己的小程序——GS比赛计分。去尝试探索线上小程序和线下场景的交融,在这过程中有顾虑,有大胆创新,但都为我更深层次理解小程序有很大的帮助。 目前,自己已经做过10余款小程序,除了GS比赛计分开发时间很长,其他的小程序都是一个月左右的时间完工。比如2019年2月的高校课程助手;2019年3月的数据查询助手;2019年4月的数据汇总助手。 我接下来会从小程序的需求分析与应用设计,小程序的开发,小程序的运营3篇来讲述我对于微信小程序的独自见解与经验。希望能为更多的学生开发者有所启发和借鉴。 需求分析与应用设计 要清楚的认识到小程序对自己需求的最大赋能,需要从最初去理解小程序的定位,微信团队对于小程序的定义是这样的: 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 通过对小程序提供能力的分析,不难看出。小程序相对于APP来说,在降低开发门槛的同时能够满足最普遍的应用需求,适合生活服务类线下商铺以及非刚需低频应用领域。使得微信通过小程序作为生态的建立者和维护者,赋能商家和应用者。以一种生态触角的状态来迅速的捕捉最大化生态红利。 当清楚的理解小程序的定位后,那么就需要合理的筛选需求并进行应用的功能设计。我将会使用【GS比赛计分】作为例子进行分析说明。 1.用实质的问题引出明确需求,并确定解决问题的功能边界 首先思考的是,自己需要做的功能都有哪些,使用人群是谁?使用场景是什么?需要数据的实时性吗? 一开始设计【GS比赛计分】的时候,目的是为了解决现在的中小型比赛使用人工计分的失效性差,出错率高,人工和时间成本昂贵的问题。程序的目的是将比赛计分的相关人员用互联网工具联系起来,以提升计分效率。 [图片] 当明晰了产品目标后,开始考虑使用人群。一般来看,大多数的比赛计分都是由两种角色构成的,一个是评委(分数确定者),另一个是工作人员(分数汇总者)。 传统的计分过程是通过现场工作人员将评委的分数以纸质的形式送达计分人员。在这一过程中就有大量的成本浪费了(一个是人力成本,另一个是时间成本)。另外,计分人员以Excel或计算器和笔记的形式进行比分汇总,在这一过程中又存在大量的成本浪费(人力成本和时间成本甚至还有错误风险)。 [图片] 所以横观所有的主观评分的线下比赛,无一例外都存在比赛结束后有长时间的节目或视频热场环节,其实这都是在为人工计分的缓慢争取时间。 所以,【GS比赛计分】的使用人群和使用场景就确定下来了,与传统人工计分的过程类似,只不过需要互联网赋能,解决时间和人力成本。需要数据的实时交互。 【GS比赛计分】作为解决现象问题的工具,首先需要做的就是不要违背现象中事件的发生次序。所以功能完全参照比赛计分过程来设计。具体功能如下,提交成绩,撤回成绩,弃权处理,实时的选手分数,实时的选手名次,清楚评委数据,解绑评委,重启比赛,结束比赛,比赛内置会话。 2.对程序平台进行横向比对,明确小程序的优势和劣势 当程序的功能确定好后,不要着急着手界面设计,功能模块的组合,交互设计这些过程。当你在进行这些过程之前,需要认真的去考虑你的应用是不是适合在小程序上开发。 小程序的火爆,注定有许多人盲目的进入这一领域,但不是所有的应用都适合小程序的推广模式,也不是所有应用都能吃得起小程序的运行效率的。所以在确定开发小程序之前,正确的认识的合适与不合适,避免让自己的成本白白的付出。 如何确定适不适合用小程序来做呢?我们可以让小程序作为一个互联网平台,把应用带入到互联网的每一个平台中去,进行横向的对比,去找出各自的优点与不足,当做出客观的判断后,应用在小程序上相比于其他平台有没有优势就很明显了。 还是以【GS比赛计分】举例。我所横向对比平台包括PC、原生APP、Web平台、轻应用、小程序。首先从满足功能来说,比赛计分需要很稳定的实时性,所以我将Web平台排除(因为复杂的比赛环境,不同的设备浏览器难免会有问题)。 然后将剩下的平台做分析。PC平台使用可能性太小(原因:比赛现场成本太高昂,租借笔记本可能都不是现实的);原生APP不适合(原因:评委评分前需要下载APP,比赛结束后没什么用了,需要把这个APP卸载。而且IOS和安卓两大平台增加了研发成本);轻应用有阻碍(原因:百度轻应用由于装机量小,覆盖人群不多。支付宝小程序没有社交关系链,无法有效的推送给需要的人。产业联盟轻应用,苹果用户怎么考虑?) [图片] 经过一系列的对比,很明显。对于【GS比赛计分】来讲,微信小程序是最好的应用平台。同时微信小程序仍然可以和不同的平台进行联系,所以可扩展性,功能延展性都是最佳的。 3.应用设计要满足即用即走的理念 当确定小程序是最理想的应用平台时,我们需要对小程序进行便利化的设计。这就需要抛弃一部分原生应用开发或Web开发的一些设计理念。追求“极致、简约”的风格设计。 在【GS比赛计分】的详细设计时,我考虑到,以个人账户的形式去下发比赛的流程是行不通的,既然服务于比赛,那么就以比赛为最基本的账户组成单元,明确一个比赛ID。而同一个比赛的不同角色,以不同的IK进行区别,而角色的设置包含在比赛设计中,由比赛创建者在创建比赛时自行创建。 那么小程序的使用场景就出来了。以比赛现场的告知或者微信聊天的分享,告知比赛参与角色其ID和IK,就可以让角色快速的进入绑定角色并使用程序。免去注册的一系列烦恼。 同时在微信用户面前,这个账户体系是平权的,任何用户在得知ID和IK的情况下都可以进入(账户绑定情况下不可以进入),一定程度上免除密码和忘记密码,注销账户这一系列的麻烦。 当完成比赛后,程序已经完成了自己所有的任务时,使用者可以直接退出程序,不需要注销比赛等操作。真正做到即走。 在使用过程中,要清楚的考虑用户的使用过程,从而做一些保险机制。微信小程序运行在微信上,微信是社交工具,就免不了用户会退出小程序甚至微信去做一些其他的事情。所以【GS比赛计分】在设计时要保证用户回来要用到自己想要的,在程序设计中有中间状态界面能够保证用户可以迅速进入使用状态。 4.对于很大的系统,要把最适合小程序部分拿出来,而不是全部 现在的【GS比赛计分】其实是一个大的生态系统,结合有线下的网络接口,展示接口,线上小程序,web平台。每一个部分都承载着自己独特的应用价值。 比如Web平台就承载比赛管理的任务,创建比赛,上传比赛文件,选手图片,设置选手(名称、介绍、手机号、图片、出场顺序),设置评分项(名称、权值、预置分数),设置评委(名称、权值,IK)。从实际的分析来看,比赛管理最适合在PC端进行,不管是文件还是图片,公认都是PC上传比较容易。 在最初设计的时候,我错误的把系统分成了多个小程序进行系统搭建,在实际使用过程中造成了重大的缺陷和用户流失。最大的表现是,我开发了【GS比赛创建】小程序,作为比赛的入口程序。从而造成比赛数量增速缓慢,大的使用场景无法突破,老用户意见上升等一系列问题。不得不注销了【GS比赛创建】小程序,并进行很大的架构调整。【GS比赛计分】暂停使用,造成大量的用户流失。 [图片] 所以,当设计多场景,前后联动性很强的应用时,需要将功能进行使用划分,每一个划分需要找最适合的平台。最适合小程序的部分,就做好与其他平台的无缝结合。 5.小程序的应用场景和机会 目前来看,小程序的应用场景主要包括支付场景,比如扫码支付、快消餐饮、移动购物、交通出行等等,工具类小程序能更碎片化、垂直化地满足细分的应用场景需求。 根据微信的最近更新变化来看,公众号和小程序的协同作用将越发明显,公众号的作用也将进一步放大,因此未来发展的机会可能在这几方面。 内容营销,小程序能通过更完善更精准的服务进而提高用户黏性。具体来看包括各大知识付费的小程序以及在教育风口上的小程序。当然,这些小程序也可同时开发APP(按微信对小程序的开发步骤来看)从而实现用户沉淀。 具有支付场景的各类商家。包括传统的已有一定客户群的商家提供更方便的服务或者实现线上线下联动以及新零售。 工具类小程序。包括共享经济领域,这类小程序即用即走,轻量化,便捷化。 天生具有社交属性的小程序。比如抽奖、互赠礼品、拼团减价、社交性的小游戏以及帮拿快递等。 小程序的开发经验 1. 微信小程序开发文档是最好的学习文档 很多同学喜欢看视频教程,或者买一本小程序开发书来学习。觉得这么学会加深理解更加容易上手,而官方文档干巴巴不好学。现在的微信小程序能力更新速度很快,当一个教程或书出来的时候,其实已经过时了。建议同学去微信公开课中学习微信小程序的入门教程,开发入门后,根据自己的开发需要,自行阅读官方文档来学习。 [图片] 2. 必须了解小程序的运行原理 微信小程序是运行在微信中的,所以运行速度并不能和原生媲美。但是在开发小程序的过程中,可以用良好的编程思路来追求程序的高效运行水平。但前提是,你需要对小程序的运行环境有所理解,需要知道在开发环境和真实环境(IOS和Android)下的运行差别。大部分的开发坑都是因为不同运行环境造成的。 官方的声明:微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具;在 iOS 上,小程序的 javascript代码是运行在JavaScriptCore中;在Android上,小程序的javascript代码是通过 X5 内核来解析;在开发工具上,小程序的javascript代码是运行在nwjs(chrome内核)中。 微信小程序的运行环境类似 ReactNative ,而不是纯 Html5。两者最大的不同在于,ReactNative 的界面是由原生控件渲染出来的,而 Html5 的界面是由浏览器内核渲染出来的。两者在性能上有较大的差异,从而表现出来微信小程序要比h5页面好很多。 3.安利小程序云开发 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库 存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理 云开发使得小程序开发门槛进一步降低,甚至偏前端的开发人员也可以独立开发小程序了。另外,云开发中云函数支持去请求第三方服务接口。所以云开发最大程度上提供了小程序所需基本API的构建,另外可以通过第三方服务请求能力扩展API能力。 [图片] 而且云开发的数据库和存储完全可以与云函数构建一个小型的后端平台。并发能力中等,适合大部分的小程序业务API的构建。 4. 养成良好的小程序代码习惯 微信小程序的代码文件分为4种,WXML、WXSS、JS、JSON。 JSON文件是小程序的配置文件,APP.JSON是小程序全局配置,另外每个页面也会有配置文件。建议页面中的JSON文件只填写页面需要配置的(比如页面标题),而不变化的不要写到里面(比如标题风格,背景颜色等等)。 JS主要是javascript语法,建议以模块的形式对通用的方法进行封装,尽可能的利用好代码,不要有大量重复的方法语句。如果多个页面需要,可以单独建立js文件,在需要的页面进行引入。 WXSS是样式文件,遵从css的编写规则,尽可能的少些样式表,多多利用已经写过的样式,如果多个页面需要,可以单独建立wxss或者写到app.wxss中 WXML是页面结构文件。如果多个页面中有相同的结构,可以单独封装为模块,而模块中的逻辑方面也尽可能遵从代码最大效益化。 总之,开发代码简洁,会使得编译后的小程序包很小,使加载速度更加快速。 5. 小程序填坑总结: 首先,微信开发者社区是好的小程序开发交流平台,从中可以获得大多数问题的解决方法: https://developers.weixin.qq.com/community/develop/question 另外,许多人常用搜索引擎来直接搜索问题的解决方法,一般大部分的错误或者问题都会在开发文档上写的很清楚,只不过很少有人去注意到,推荐几个小程序填坑的集合文章: https://blog.csdn.net/weixin_42448956/article/details/82414225 https://www.cnblogs.com/shaoting/p/6051261.html https://www.imooc.com/article/36148 https://www.cnblogs.com/wangking/p/6946438.html https://www.jianshu.com/p/4362e52f5c49 小程序的运营 小程序运营属于软件产品运营的一种类别。从产品生命期来看,小程序运营分别为研发期、种子期、成长期、成熟期、衰退期。另外由于小程序在运行模式和定位的不同,表现在推广形式上与平常的软件产品有很大的差别。接下来,我会用【GS比赛计分】【数据查询助手】小程序为例子佐证分享小程序的运营经验。 1. 小程序研发期,搞清楚产品的定位以及目标用户 当你不是运营小程序的产品策划者,你需要首先要搞清楚产品的定位以及目标用户。(这也是多数互联网公司将产品策划和运营作为一个岗位的原因)。在整个产品的研发期,需要跟进产品的每一个细微功能点,要明晰产品的使用用户;还要时刻去观察产品的领域有没有竞品的出现,用户习惯有什么改变;要时刻去衡量产品的竞争优势,为之后的发布运营做好准备。 【数据查询助手】是提供自定义信息查询服务的小程序。任何微信用户均可以上传自定义的数据(报表,成绩单等任何表格数据)建立查询。 [图片] 当在产品研发的一个月,我不断的探索小程序领域,APP领域,Web领域有没有相同的功能产品或服务。甚至将问卷系统(腾讯问卷、问卷星、问卷网)作为潜在的竞争对手。 另外我还制作了web版和原生APP的Demo去体验他们与小程序体验的不同。去确定微信小程序是很好的适应平台。从而为之后的运营做足了准备,提升了自己的信心。 2. 小程序种子期,要充分利用体验版过程 小程序体验版相当于其他应用平台的内测版。体验版可以更高层次的模仿真实的用户环境。在这一阶段更容易发现用户间连接要求高的应用缺陷。同时可以在安全的范围内去聆听用户的真是使用反馈。 【GS比赛计分】开展了长达1个月的体验版。邀请了20个核心用户去体验。由于应用需要与服务端建立实时连接。用户不同的设备,不同网络环境对程序的稳定性做出了很大的考验。在这一阶段修复了不少场景不同导致的错误或者效率低下问题。 另外一开始推出的小程序界面设计只遵从了功能设计,没有很好的考虑真实的使用场景。所以在这一阶段,我最大程度上听取体验用户的建议,对整个界面进行改版,使交互更加的亲近用户。 3. 小程序成长期,明晰获取用户的手段和推广手段,最大化的成长: 当小程序功能稳定后,到了成长阶段,用户使用是最核心的任务。获取用户的时候,必须先让对方了解自己的产品,建立认知,将产品介绍给用户,让用户进入小程序之后,想方设法让产品与用户产生交互,让用户不断体验产品,让活动始终覆盖用户,让用户对产品认可,要完成产品与用户的关系构建。 从现在许多小程序的运营手段来看,基本上都围绕着社交裂变和线下推广的方式来提升小程序的获客表现。而小程序由于较低的开发成本,较快的更新速度,以及较低的试错成本,使得多数很强势的小程序都采用功能矩阵发展模式,快速实现功能及迭代。 小程序获取用户的手段主要由下: 朋友圈分享(包括图片二维码、广告直接进入); 聊天好友推荐转发; 线下二维码(包含商家推广、广告推广); 微信搜索(一般由其他社交平台或者用户需求引起); 线上识别二维码(线上推广,文章推广,或其他社交平台的推广); 其他小程序的跳转(互相推荐) 公众号跳转(公众号运营推广) APP跳转(一般是APP延展的简洁功能推广,或者轻量级触达用户形式的推广) 小程序发掘社交推广的手段主要由下: 社交立减金,实现社交裂变; 社交比拼玩法,引导社交裂变; 互动加入分享按钮,提醒用户转发; 设计同伴环境,鼓励社群传播; 设计任务玩法,领取奖励; 设计福利,鼓励好友助力; 聚焦核心功能,促进口碑传播; 【数据查询助手】从产品定位上就自带社交裂变的元素,当查询创建者创建了一个查询后,他可以根据要分享的人群情况选择多种分享方法。如果是企业微信或者微信工作群,那么可以直接分享小程序到聊天窗口。其他的用户可以直接进入小程序进行查询。如果是线下的查询(推广会,现场发布等),可以通过小程序二维码的方式进入查询界面查询。对于其他社交平台来讲,可以用二维码来做分享,如果是常用用户(添加到我饿小程序或者桌面作为常用工具的用户),可以直接通过复制文字(含查询码)然后进入应用的方式快速开始查询。 同时每一个查询者,都可能是潜在的查询创建者和程序推广者。所以要在这一阶段不断的优化体验流程,尽可能做更多事情覆盖多场景的查询(比如微信搜一搜直接搜索查询码,直接查询),去吸引用户,留住用户。 由于小程序用完即走的理念,导致许多工具类小程序(不含深度融合线下和社交的)用户的留存普遍较低。既然工具类就是服务用户,那么就把小程序慢慢的做成一种用户习惯,从习惯的养成变为行业应用的转化。从转化中寻找切入点,进而挖掘可以创造价值的功能产品。 所以,做小程序不要过分贪图大规模的使用率,大批量的用户。他本身是一种服务理念的触达和养成,你需要在用户心里养成使用习惯,而不要上来糖衣炮弹把用户打蒙,甚至反感。这样小程序的生态就被搞乱了。 4. 小程序成熟期,稳定期最重要的就是小版本的迭代更新: 刚才讲到,小程序有较低的开发成本,较快的更新速度,以及较低的试错成本。所以在小程序成熟期需要根据用户数据不断的去更正调整功能,去保持较高的运营分数。在产品功能中,适时的进行用户付费转化。 付费转化一方面可以拉开用户层次,对小程序的用户是一种活水作用,提升用户的使用粘性,容易过滤最核心的用户,提供更加好的产品服务。如果在成长期很好的进行用户习惯的养成,这个过程会更加自然。反之,应用将会更快的进入衰退期。 付费转化的方式主要由几类: 电商类:主要靠活动、优惠刺激(现实抢购、秒杀、预约、限时满减、显示商品库存和抢购人数); 游戏类:游戏道具(向朋友求助、每日签到、社区活动等方式免费获得,但数量有限,且都是一些级别较低的道具)高价值道具付费、皮肤售卖、游戏币购买; 内容类:付费文章、阅读币购买、付费课程; 5.小程序衰退期:适时舍弃,进行新产品开始推出 小程序开发周期短,很多时候应用分析不够透彻,更多的是一些商业或推广试错。导致许多小程序还没有进入成长期就进入晚期了。这一类小程序直接舍弃就好,不需要什么转化了,这也不算小程序的衰退期(没有盛何来衰)。 对于经历过成熟期的产品主要有几个原因导致进入衰退期: 市场中有新的创新型产品,导致冲击衰退。 自身功能设计有缺陷,导致用户流失。 对用户了解不透彻,付费转化失败,用户迁移到同类产品。 产品质量下降,不能适应用户行为的变化。 由于运营组织的原因,产品运营出现危机。 在这一阶段,运营已经无能为力。那么就进行产品的复盘,积极的去投入到新产品或者新领域的探究上面去。小程序的开发成本较低,所以可以有很多机会去重新塑造一个好的产品。 6.总结,谈谈自己的想法: 现在多种多样的互联网产品不断产生,产品竞争异常激烈。互联网产品的运营手段也是推陈出新,花样繁多。在这里我不给大家分享一些运营花样,因为每个小程序都是独特的,应该有自己独特的运营手段,具体是什么,希望产品者和运营者本身用热爱小程序的心去发现和实践。 永远保持对产品的尊重,对用户的尊敬是每个产品人最重要的事情。如果对应用足够热爱,你会厌恶他被污染,他被别人嫌弃;你会尽自己的可能让他变得更加本真,你会合理的去运营突破,去帮助产品走向更高的位置。 如果你没有爱你的产品,再出色的产品也只是昙花一现而已,并不能给你带来任何长远的意义。 这是最好的小程序运营指南:https://developers.weixin.qq.com/miniprogram/product。 [图片]
2019-06-23 - 小程序读取excel表格数据,并存储到云数据库
最近一直比较忙,答应大家的小程序解析excel一直没有写出来,今天终于忙里偷闲,有机会把这篇文章写出来给大家了。 老规矩先看效果图 [图片] 效果其实很简单,就是把excel里的数据解析出来,然后存到云数据库里。说起来很简单。但是真的做起来的时候,发现其中要用到的东西还是很多的。不信。。。。 那来看下流程图 流程图 [图片] 通过流程图,我看看到我们这里使用了云函数,云存储,云数据库。 流程图主要实现下面几个步骤 1,使用wx.chooseMessageFile选择要解析的excel表格 2,通过wx.cloud.uploadFile上传excel文件到云存储 3,云存储返回一个fileid 给我们 4,定义一个excel云函数 5,把第3步返回的fileid传递给excel云函数 6,在excel云函数里解析excel,并把数据添加到云数据库。 可以看到最神秘,最重要的就是我们的excel云函数。 所以我们先把前5步实现了,后面重点讲解下我们的excel云函数。 一,选择并上传excel表格文件到云存储 这里我们使用到了云开发,使用云开发必须要先注册一个小程序,并给自己的小程序开通云开发功能。这个知识点我讲过很多遍了,还不知道怎么开通并使用云开发的同学,去翻下我前面的文章,或者看下我录的讲解视频《5小时入门小程序云开发》 1,先定义我们的页面 页面很简单,就是一个按钮如下图,点击按钮时调用chooseExcel方法,选择excel [图片] 对应的wxml代码如下 [图片] 2,编写文件选择和文件上传方法 [图片] 上图的chooseExcel就是我们的excel文件选择方法。 uploadExcel就是我们的文件上传方法,上传成功以后会返回一个fildID。我们把fildID传递给我们的jiexi方法,jiexi方法如下 3 把fildID传递给云函数 [图片] 二,解下来就是定义我们的云函数了。 1,首先我们要新建云函数 [图片] 如果你还不知道如何新建云函数,可以翻看下我之前写的文章,也可以看我录的视频《5小时入门小程序云开发》 如下图所示的excel就是我们创建的云函数 [图片] 2,安装node-xlsx依赖库 [图片] 如上图所示,右键excel,然后点击在终端中打开。 打开终端后, 输入 npm install node-xlsx 安装依赖。可以看到下图安装中的进度条 [图片] 这一步需要你电脑上安装过node.js并配置npm命令。 3,安装node-xlsx依赖库完成 [图片] 三,编写云函数 我把完整的代码贴出来给大家 [代码]const cloud = require('wx-server-sdk') cloud.init() var xlsx = require('node-xlsx'); const db = cloud.database() exports.main = async(event, context) => { let { fileID } = event //1,通过fileID下载云存储里的excel文件 const res = await cloud.downloadFile({ fileID: fileID, }) const buffer = res.fileContent const tasks = [] //用来存储所有的添加数据操作 //2,解析excel文件里的数据 var sheets = xlsx.parse(buffer); //获取到所有sheets sheets.forEach(function(sheet) { console.log(sheet['name']); for (var rowId in sheet['data']) { console.log(rowId); var row = sheet['data'][rowId]; //第几行数据 if (rowId > 0 && row) { //第一行是表格标题,所有我们要从第2行开始读 //3,把解析到的数据存到excelList数据表里 const promise = db.collection('users') .add({ data: { name: row[0], //姓名 age: row[1], //年龄 address: row[2], //地址 wechat: row[3] //wechat } }) tasks.push(promise) } } }); // 等待所有数据添加完成 let result = await Promise.all(tasks).then(res => { return res }).catch(function(err) { return err }) return result } [代码] 上面代码里注释的很清楚了,我这里就不在啰嗦了。 有几点注意的给大家说下 1,要先创建数据表 [图片] 2,有时候如果老是解析失败,可能是有的电脑需要在云函数里也要初始化云开发环境 [图片] 四,解析并上传成功 如我的表格里有下面三条数据 [图片] 点击上传按钮,并选择我们的表格文件 [图片] 上传成功的返回如下,可以看出我们添加了3条数据到数据库 [图片] 添加成功效果图如下 [图片] 到这里我们就完整的实现了小程序上传excel数据到数据库的功能了。 再来带大家看下流程图 [图片] 如果你有遇到问题,可以在底部留言,我看到后会及时解答。后面我会写更多小程序云开发实战的文章出来。也会录制本节的视频出来,敬请关注。
2019-11-12