小程序·云开发实战宝典（附源码）：打造个性化体重记录小程序，健康管理新体验！

本文作者：愚坤

刚刚提交的小程序审核通过了，把笔记发出来。前一段看到朋友圈里总是有人用txt记录体重，就特别想写一个记录体重的小程序， 现在小程序的云开发有云函数、数据库，真的挺好用，很适合个人开发者，服务器域名什么都不用管，云开发让你完全不用操心这些东西。

先看看页面效果图吧：

[图0.jpg|]

[图1.jpg|]

本文分享的几点内容：

全局变量 globalData

npm 的使用

云函数

数据库操作

async 的使用

分享的配置

antV使用

tabBar地址跳转

切换页面刷新

首次进入后，要存储openId给其他页面使用，使用globalData共享。

[图2.jpg|]

进入小程序源码 miniprogram 目录，创建 package.json 文件（使用 npm init 一路回车）

npm i --save 我们要安装的 npm 包

设置微信开发者工具 构建 npm

package.json 增加 " miniprogram " : " dist "打包目录字段，如果不设置的话上传和预览不成功，提示文件包过大。

[图3.jpg|]

设置微信开发者工具：

[图4.jpg|]

构建 npm ：

[图5.jpg|]

最后，务必添加 miniprogram 字段

[图6.jpg|]

官方解释云函数即在云端（服务器端）运行的函数，服务端是node.js，都是JavaScript。官方有数据库的操作，但是更新的操作强制要求使用云函数, 另外，如果云函数中使用了npm包，记得在所在云函数文件夹右键上传并部署，不然运行失败。

[图7.jpg|]

上一个例子，更新体重的云函数：

[图8.jpg|]

小程序端调用：

[图9.jpg|]

其实是接入的MongoDB，封装了一部分api出来，详细的可参考小程序（如下图），有区分服务端和小程序段。

[图10.jpg|]

[图11.jpg|]

[图12.jpg|]

官方文档提示不支持async，需要引入regeneratorRuntime这个包，先npm i regenerator。然后把node_modules文件夹下的regenerator-runtime的runtime-module.js和runtime.js两个文件拷贝到lib目录下，在页面上引入即可。

[图13.jpg|]

分享很简单，有区分右上角的直接分享和点击按钮分享。

[图14.jpg|]

分享后，他人点击页面，跳转到对应pages地址，从onLoad的options中拿入参请求数即可。

[图15.jpg|]

上边第二小节有提到antV的安装，就不再赘述，直接说一下再页面中引用。

说下使用，需要设置一个全局变量储存图表的实例，然后在钩子函数内容使用changeData方法修改数据。

index.json中引入包名：

图136379-1：

[图17.jpg|]

[图18.jpg|]

[图19.jpg|]

如果要跳转的地址不在app.json的tabBar内可以使用wx.navigateTo，如果还跳不过去，要使用wx.switchTab方法跳转。

[图20.jpg|]

切换几个tabBar的时候，需要刷新数据。在onShow方法中再调用一下onLoad方法就可以了。

[图21.jpg|]

很适合个人开发者，想开发一个小程序，除了时间，完全没有其他费用。

报错提示不友好，有时候不执行不报错，只能一行一行debug。

审核超快，几个小时就审核通过了。

lodash不支持，据说要修改点东西，就没鼓捣。

git也配置上了，真的是方便，再感叹一下，不过语法部分还需完善。

本文及更多云开发实战案例可以点击文末左下角【了解更多】获取源码。

侵权告知删除：yangzy187@126.com

转载请注明：网创网 www.netcyw.cn/b136379.html