微信小程序云开发：目标管理

实现功能

1. 目标列表;
2. 添加目标;
3. 删除目标;
4. 置顶目标;
5. 目标模板；
6. 设置主题;

创建项目

开通云环境

创建数据库

项目结构

初始化云环境

//app.js
App({
  onLaunch: function () {
    var me = this;
    
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        traceUser: true,
      })
    }

    me.globalData = { }
  }
})
复制代码

获取openid

//pages/index/index.js
onLoad: function (options) {
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        app.globalData.openid = res.result.openid
      },
      fail: err => {
      }
    })
  }
复制代码

获取目标列表

//pages/goallist/goallist.js
getGoals: function(){
    const me = this;
    const db = wx.cloud.database();
    wx.showLoading({
      title: '努力加载中...',
      mask: true
    })
    db.collection('goals').orderBy('toptime','desc').orderBy('date','desc').where({
      _openid: app.globalData.openid
    }).get({
      success: res => {
        var goals = res.data.map(function(item,index){
          item.date = util.formatTime(item.date)
          return item;
        })

        var isShowAdd = res.data.length < me.data.max;   //最多添加15条目标
        this.setData({
          goals: goals,
          isShowAdd: isShowAdd,
          isLoaded: true
        })
      },
      fail: err => {
      },
      complete: res => { 
        wx.hideLoading()
      }
    })
  },
复制代码

添加目标

//pages/goaladd/goaladd.js
doFormSubmit: function(e){
    var goal = e.detail.value.goal;
    const db = wx.cloud.database()
    db.collection('goals').add({
      data: {
        openid: app.globalData.openid,
        goal: goal,
        date: new Date(),
        status: 1
      },
      success: res => {
        // 在返回结果中会包含新创建的记录的 _id
        wx.showToast({
          title: '创建成功',
          success: function(){
            wx.navigateTo({
              url: '/pages/goallist/goallist'
            })
          }
        });
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '创建失败'
        })
      }
    })
  },
复制代码

删除目标

//pages/goallist/goalist.js
doGoalDelete: function(e){
  var me = this;
  var id = e.currentTarget.dataset.id;
  const db = wx.cloud.database()
  db.collection('goals').doc(id).remove({
    success: res => {
      wx.showToast({
        title: '删除成功',
        success: function(){
          setTimeout(function(){
            me.getGoals();
          },500)
        }
      })
    },
    fail: err => {
      wx.showToast({
        icon: 'none',
        title: '删除失败',
      })
    }
  })
},
复制代码

置顶目标

doGoalTop: function(e){
    var me = this;
    var id = e.currentTarget.dataset.id;
    const db = wx.cloud.database()
    db.collection('goals').doc(id).update({
      data:{
        istop: true,
        toptime: new Date()
      },
      success: res => {
        wx.showToast({
          title: '置顶成功',
          success: function(){
            setTimeout(function(){
              me.getGoals();
            },500)
          }
        })
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '置顶失败',
        })
      }
    })
  },
复制代码

设置主题

//pages/goallist/goallist.js
  onThemeChange: function(e){
    const theme = e.detail.value;
    try {
      wx.setStorageSync('theme', theme)
      this.updateTheme(theme)
    } catch (e) { }
  },

  getTheme: function(){
    try {
      const theme = wx.getStorageSync('theme') || '#c8e6c9'
      this.updateTheme(theme)
    } catch (e) { }
  },

  updateTheme: function(theme){
    var themes = this.data.themes;
    themes.map(function(item,index){
      if(item.value === theme){
        item.checked = true;
      }else{
        item.checked = false;
      }
      return item;
    })

    this.setData({
      theme: theme,
      themes: themes,
      isShowSettings: false
    })
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: theme,
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  },
复制代码

项目源码

源码

转载于:https://juejin.im/post/5c124a90518825778a56cea0