首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  推广

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

  •  
  •   CloudBase · 48 天前 · 417 次点击
    这是一个创建于 48 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前一段看到朋友圈里总是有人用 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"
      },
      "devDependencies": {}
    }
    

    3.云函数

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

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

    // 云函数
    const cloud = require('wx-server-sdk')
    const moment = require('moment')
    
    cloud.init(
      { traceUser: true }
    )
    
    const db = cloud.database()
    const wxContext = cloud.getWXContext()
    
    exports.main = async (event, context) => {
      // event 入参参数
      delete event.userInfo
      try {
        return await db.collection('list').where({
          _openid:wxContext.OPENID,
          date:moment().format('YYYY-MM-DD')
        })
        .update({
          data: {
          	...event
          },
        })
      } catch(e) {
        console.error(e)
      }
    }
    

    小程序端调用

    wx.cloud.callFunction({
         name: 'add',
         data: {
          ...Param
         },
         success: res => {
            wx.showToast({
              title: '新增记录成功',
            })
         },
         fail: err => { 
            wx.showToast({
              icon: 'none',
              title: '新增记录失败'
            })
         }
       })
    

    4.数据库操作

    其实是接入的 MongoDB ,封装了一部分 api 出来,详细的就看官方文档吧,有区分服务端和小程序段。

    const db = wx.cloud.database()
    
    // 查询数据
    db.collection('list').where({
        _openid: app.globalData.openid,
        date: moment().subtract(1, 'days').format('YYYY-MM-DD'),
    }).get({
        success: function (res) {
            // do someThing
        }
    })
    

    5.async 的使用

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

    <!--事例-->
    const regeneratorRuntime = require('../../lib/runtime.js')
    onLoad: async function (options) {
    
        // 获取当天数据
        await this.step1()
    
        // 时间类型设置
        let nowHour = moment().hour(),timeType
        nowHour > 12 ? timeType = 'evening' : timeType = 'morning'
        this.setData({timeType})
      }
    

    6.分享的配置

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

    onShareAppMessage: function (res) {
            
          // 右上角分享
          let ShareOption = {
            title: '21 天体重减肥记录',
            path: '/pages/index/index',
          } 
          
          // 按钮分享
          if(res.from == "button"){
            ShareOption = {
                title: '来呀 看看我的减肥记录呀',
                path: '/pages/detail/detail?item=' + app.globalData.openid,
              } 
          }
          
          return ShareOption
      }
    

    分享后,他人点击页面,跳转到对应 pages 地址,从 onLoadoptions中拿入参请求数即可

    onLoad: function (options) {
        const db = wx.cloud.database()
        let This = this
        let resault = {}
        db.collection('list').where({
          _openid: options.item
        }).get({
          success: function (res) {
            resault = res.data
            This.setData({
              resault:resault
            })
    
          }
        })
      },
    

    7.antV 使用

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

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

    index.json 中引入包名

    {
      "usingComponents": {
      	"ff-canvas": "@antv/f2-canvas"
      }
    }
    
    // 引入 F2
    import F2 from '@antv/wx-f2';
    
    // 设置实例全局变量(务必)
    let chart = null;
    function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表
      let data = [
        // { timestamp: '1951 年', step: 38 },
      ];
    
      chart = new F2.Chart({
        el: canvas,
        width,
        height
      });
    
      chart.source(data, {
        step: {
          tickCount: 5
        },
        timestamp: {
          tickCount: 8
        },
    
      });
    
    
      chart.axis('timestamp', {
        label(text, index, total) {
          const textCfg = {};
          if (index === 0) {
            textCfg.textAlign = 'left';
          }
          if (index === total - 1) {
            textCfg.textAlign = 'right';
          }
          return textCfg;
        }
      });
    
      chart.axis('step', {
        label(text) {
          return {
            text: text / 1000 + 'k 步'
          };
        }
      });
    
      chart.tooltip({
        showItemMarker: false,
        onShow(ev) {
          const { items } = ev;
          items[0].name = null;
          items[0].name = items[0].title;
          items[0].value = items[0].value + '步';
        }
      });
      chart.area().position('timestamp*step').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
      chart.line().position('timestamp*step').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
      chart.render();
      return chart;
    }
    
    // 生命周期函数
    onLoad(){
        // 使用 changeData 赋值
        chart.changeData(stepInfoList)
    }
    

    8.tabBar 地址跳转

    如果要跳转的地址不在 app.jsontabBar 内可以使用 wx.navigateTo ,如果在死活跳不过去,要使用wx.switchTab 方法跳转。

    wx.switchTab({
      url: '/pages/add/add',
      fail: function(e) {}
    })
    
    wx.navigateTo({
      url: '../deployFunctions/deployFunctions',
    })
    

    9.切换页面刷新

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

    onShow: function () {
        this.onLoad()
    }
    

    源码链接

    https://github.com/TencentCloudBase/Good-practice-tutorial-recommended


    如果你有关于使用云开发 CloudBase 相关的技术故事 /技术实战经验想要跟大家分享,欢迎留言联系我们哦~比心!

    目前尚无回复
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3872 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 24ms · UTC 06:59 · PVG 14:59 · LAX 23:59 · JFK 02:59
    ♥ Do have faith in what you're doing.