
小程序·云开发实战(附源码):体重记录小程序
前言愚坤
刚刚提交的小程序审核通过了,把笔记发出来。前一段看到朋友圈里总是有人用txt记录体重,就特别想写一个记录体重的小程序, 现在小程序的云开发有云函数、数据库,真的挺好用,很适合个人开发者,服务器域名什么都不用管,云开发让你完全不用操心这些东西。
先看看页面效果图吧:
本文分享的几点内容:
- 全局变量 globalData
- npm 的使用
- 云函数
- 数据库操作
- async 的使用
- 分享的配置
- antV使用
- tabBar地址跳转
- 切换页面刷新
首次进入后,要存储openId给其他页面使用,使用globalData共享。
2. npm 的使用- 进入小程序源码 miniprogram 目录,创建 package.json 文件(使用 npm init 一路回车)
- npm i --save 我们要安装的 npm 包
- 设置微信开发者工具 构建 npm
- package.json 增加 " miniprogram " : " dist "打包目录字段,如果不设置的话上传和预览不成功,提示文件包过大。
设置微信开发者工具:
构建 npm :
最后,务必添加 miniprogram 字段
3. 云函数官方解释云函数即在云端(服务器端)运行的函数,服务端是node.js,都是JavaScript。官方有数据库的操作,但是更新的操作强制要求使用云函数, 另外,如果云函数中使用了npm包,记得在所在云函数文件夹右键上传并部署,不然运行失败。
上一个例子,更新体重的云函数:
小程序端调用:
4. 数据库操作其实是接入的MongoDB,封装了一部分api出来,详细的可参考小程序(如下图),有区分服务端和小程序段。
5. async 的使用官方文档提示不支持async,需要引入regeneratorRuntime这个包,先npm i regenerator。然后把node_modules文件夹下的regenerator-runtime的runtime-module.js和runtime.js两个文件拷贝到lib目录下,在页面上引入即可。
6. 分享的配置分享很简单,有区分右上角的直接分享和点击按钮分享。
分享后,他人点击页面,跳转到对应pages地址,从onLoad的options中拿入参请求数即可。
7. antV使用上边第二小节有提到antV的安装,就不再赘述,直接说一下再页面中引用。
说下使用,需要设置一个全局变量储存图表的实例,然后在钩子函数内容使用changeData方法修改数据。
index.json中引入包名:
8. tabBar地址跳转如果要跳转的地址不在app.json的tabBar内可以使用wx.navigateTo,如果还跳不过去,要使用wx.switchTab方法跳转。
9. 切换页面刷新切换几个tabBar的时候,需要刷新数据。在onShow方法中再调用一下onLoad方法就可以了。
感受
- 很适合个人开发者,想开发一个小程序,除了时间,完全没有其他费用。
- 报错提示不友好,有时候不执行不报错,只能一行一行debug。
- 审核超快,几个小时就审核通过了。
- lodash不支持,据说要修改点东西,就没鼓捣。
- git也配置上了,真的是方便,再感叹一下,不过语法部分还需完善。
本文及更多云开发实战案例可以点击文末左下角【】获取源码。


