小程序·云开发实战 - 体重记录小程序

最新推荐文章于 2025-03-06 16:19:51 发布

原创

最新推荐文章于 2025-03-06 16:19:51 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何使用小程序的云开发功能制作一个体重记录小程序，涵盖全局变量globalData、npm包管理、云函数、数据库操作、async使用、分享配置、antV图表、tabBar跳转和页面刷新等关键步骤。通过云开发，个人开发者可以轻松实现服务器和域名管理。文章提供源码链接供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

先看看页面效果图吧：

记录的几个点：

1.全局变量 globalData

2.npm 的使用

3.云函数

4.数据库操作

5.async 的使用

6.分享的配置

7.antV使用

8.tabBar地址跳转

9.切换页面刷新

1.全局变量 globalData

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

<!--app.js 设置 globalData.openid --> 
App({
   
   
  onLaunch: function () {
   
   

    this.globalData = {
   
   }

    wx.cloud.init({
   
   })

    wx.cloud.callFunction({
   
   
      name: 'login',
      data: {
   
   },
      success: res => {
   
   
        this.globalData.openid = res.result.openid
        wx.switchTab({
   
   
          url: '/pages/add/add',
          fail: function(e) {
   
   }
        })
      }, 
      fail: err => {
   
    
     
      }
    })

  }
})

<!--其他页面引用-->
const app = getApp()  // 获得实例
app.globalData.openid // 直接引用即可

2.npm 的使用

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

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

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

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

cd miniprogram
npm init 
npm i @antv/f2-canvas --save   // 我用到了f2，可以换成其他包

设置微信开发者工具

构建 npm

最后，务必添加 miniprogram 字段

{
   
   
  "name": "21Day",
  "version": "1.1.0",
  "miniprogram": "dist",
  "description": "一个21天体重记录的app",
  "license": "MIT",
  "dependencies": {
   
   
    "@antv/f2-canvas": "~1.0.5",
    "@antv/wx-f2": "~1.1.4"