實現功能

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'
      }
    })
  },
複製程式碼

專案原始碼

原始碼