你的年目標實現了嗎，記一次開發微信小程序

時間 2019-11-30

標籤目標實現一次開發微信程序简体版

原文原文鏈接

前言：這是筆者第一次開發小程序，此前一直有打算本身作一個，而且可以上線使用，但一直找不到靈感，加上還須要服務器端、數據庫等技能，全部一直沒能實現。後來偶然看到微信小程序雲開發(有點驚豔了，確實挺簡便)，再加上一點點想法，因而就開始了小程序雲開發之旅。javascript

第一步，要作什麼東西？

鑑於本身的技術水平(捂臉)，還有看到年底不少人都在分享年目標，因而便決定好作一個年目標備忘錄，簡單方便，且有一些意義。
html

第二步，思考小程序的結構

實際開發中，每每須要產品相關的思惟導圖、原型圖等來指導開發，即便作一個小項目，我認爲也須要一個良好的構思，如下是小程序的思惟導圖： java

第三步，開發階段

如下列舉主要頁面git

首頁

首頁實現的功能：github

經過雲函數獲取當前用戶的openid，並查詢用戶的今年目標；
查詢連接附帶的id，獲取其餘用戶分享後的目標內容；

部分代碼以下：數據庫

// 調用雲函數
 wx.cloud.callFunction({
  name: 'login',
  data: {},
  success: res => {
    console.log('[雲函數] [login] user openid: ', res.result.openid)
    app.globalData.openid = res.result.openid;
    if(!id){
      this.getData();
    }
  },
  fail: err => {
    console.error('[雲函數] [login] 調用失敗', err)
  }
})
 //查詢數據庫
 const db = wx.cloud.database();
 db.collection("targets").where({
  _openid: app.globalData.openid,
  date: new Date().getFullYear()
}).get({
  success: res => {
    let data = res.data[0] || {};

    this.setData({
      id: data._id || '',
      title: data.title || '',
      content: data.content || '',
      flag: false
    })
  }, fail: err => {
    console.log(err)
    this.setData({
      flag: false
    })
  }
})
複製代碼

列表頁

列表實現的功能：小程序

展現全部該用戶添加的目標；
左滑可刪除，而且增長目標詳情、編輯、添加入口；

部分代碼以下：微信小程序

//獲取全部目標
const db = wx.cloud.database();
db.collection("targets").where({
  _openid: app.globalData.openid
}).get({
  success: res => {
    this.setData({
      flag: true,
      targetList: res.data, height: height
    })
    app.globalData.targetList = res.data;
  }, fail: err => {
    wx.showToast({
      icon: "none",
      title: '查詢記錄失敗',
    })
  }
})
//響應刪除
let id = e.currentTarget.id;
const db = wx.cloud.database();

db.collection("targets").doc(id).remove({
  success: res => {
    wx.showToast({
      title: '刪除成功',
    })
  }, fail: err => {
    wx.showToast({
      title: '刪除失敗',
    })
  }
})
複製代碼

添加目標

添加目標實現的功能：服務器

經過picker組件讓用戶選取年份；
可添加/編輯年目標標題、內容；

部分代碼以下：微信

//新增數據
db.collection("targets").add({
  data: data,
  success: res => {
    wx.showToast({
      title: '新增成功',
    })
  }, fail: err => {
    wx.showToast({
      title: '新增失敗',
      icon: 'none'
    })
  }
})
//編輯數據
db.collection("targets").doc(data.id).update({
  data: data,
  success: res => {
    wx.showToast({
      title: '修改爲功',
    })
  }, fail: err => {
    wx.showToast({
      title: '修改失敗',
    })
  }
})
複製代碼