前言：這是筆者第一次開發小程式，此前一直有打算自己做一個，並且能夠上線使用，但一直找不到靈感，加上還需要伺服器端、資料庫等技能，所有一直沒能實現。後來偶然看到微信小程式雲開發(有點驚豔了，確實挺簡便)，再加上一點點想法，於是就開始了小程式雲開發之旅。

第一步，要做什麼東西？

  鑑於自己的技術水平(捂臉)，還有看到年末很多人都在分享年目標，於是便決定好做一個年目標備忘錄，簡單方便，且有一些意義。

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

  實際開發中，往往需要產品相關的思維導圖、原型圖等來指導開發，即使做一個小專案，我認為也需要一個良好的構思，以下是小程式的思維導圖：

第三步，開發階段

  以下列舉主要頁面

首頁

首頁實現的功能：

1. 通過雲函式獲取當前使用者的openid，並查詢使用者的今年目標；
2. 查詢連結附帶的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
    })
  }
})
複製程式碼

列表頁

列表實現的功能：

1. 展示所有該使用者新增的目標；
2. 左滑可刪除，並且增加目標詳情、編輯、新增入口；

部分程式碼如下：

 //獲取所有目標
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: '刪除失敗',
    })
  }
})
複製程式碼

新增目標

新增目標實現的功能：

1. 通過picker元件讓使用者選取年份；
2. 可新增/編輯年目標標題、內容；

部分程式碼如下：

//新增資料
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: '修改失敗',
    })
  }
})
複製程式碼

第四步，最終結果

  小程式從開發到釋出成功，只花了一週時間，不得不讚揚雲開發給開發者帶來的便利，並且還是免費的，為了表達出開發的順暢，我特意百度了一張圖來體現

因時間、技術或者環境限制，一些還沒有解決的問題：

1. 分享到朋友圈功能還沒有實現，後續將實現儲存當前頁為圖片，讓使用者手動分享;
2. 使用了textarea標籤給使用者新增資料，有些簡陋，希望小程式儘快出富文字編輯器;
3. 雖然工作中經常接觸設計圖，但對ui設計還是有些無感，以後儘量彌補設計上的不足;
4. 小程式雲開發資料響應有一些緩慢，據稱雲開發目前只部署在上海，期待後續優化;

最後附上小程式碼，微信掃碼即可體驗(或搜尋我的年目標)。另外，祝願大家都能開發出自己的小程式，並且在新的一年實現自己的人生目標^_^

該小程式的github地址：我的年目標

參考文件/文章：

• 微信小程式雲開發文件
• 微信小程式開發平臺新功能「雲開發」快速上手體驗
• 微信小程式實現左滑刪除-一切沒有那麼簡單
• 微信小程式之雲開發——模擬後臺增刪改查