前言：這是筆者第一次開(kāi)發(fā)小程序，此前一直有打算自己做一個(gè)，并且能夠上線使用，但一直找不到靈感，加上還需要服務(wù)器端、數(shù)據(jù)庫(kù)等技能，所有一直沒(méi)能實(shí)現(xiàn)。后來(lái)偶然看到微信小程序云開(kāi)發(fā)(有點(diǎn)驚艷了，確實(shí)挺簡(jiǎn)便)，再加上一點(diǎn)點(diǎn)想法，于是就開(kāi)始了小程序云開(kāi)發(fā)之旅。

第一步，要做什么東西？

鑒于自己的技術(shù)水平(捂臉)，還有看到年末很多人都在分享年目標(biāo)，于是便決定好做一個(gè)年目標(biāo)備忘錄，簡(jiǎn)單方便，且有一些意義。

第二步，思考小程序的結(jié)構(gòu)

實(shí)際開(kāi)發(fā)中，往往需要產(chǎn)品相關(guān)的思維導(dǎo)圖、原型圖等來(lái)指導(dǎo)開(kāi)發(fā)，即使做一個(gè)小項(xiàng)目，我認(rèn)為也需要一個(gè)良好的構(gòu)思，以下是小程序的思維導(dǎo)圖：

第三步，開(kāi)發(fā)階段

以下列舉主要頁(yè)面

首頁(yè)

首頁(yè)實(shí)現(xiàn)的功能：

1. 通過(guò)云函數(shù)獲取當(dāng)前用戶的openid，并查詢用戶的今年目標(biāo)；
2. 查詢鏈接附帶的id，獲取其他用戶分享后的目標(biāo)內(nèi)容；

部分代碼如下：

// 調(diào)用云函數(shù)
 wx.cloud.callFunction({
  name: 'login',
  data: {},
  success: res => {
    console.log('[云函數(shù)] [login] user openid: ', res.result.openid)
    app.globalData.openid = res.result.openid;
    if(!id){
      this.getData();
    }
  },
  fail: err => {
    console.error('[云函數(shù)] [login] 調(diào)用失敗', err)
  }
})
 //查詢數(shù)據(jù)庫(kù)
 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
    })
  }
})
復(fù)制代碼

列表頁(yè)

列表實(shí)現(xiàn)的功能：

1. 展示所有該用戶添加的目標(biāo)；
2. 左滑可刪除，并且增加目標(biāo)詳情、編輯、添加入口；

部分代碼如下：

//獲取所有目標(biāo)
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: '查詢記錄失敗',
    })
  }
})
//響應(yīng)刪除
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: '刪除失敗',
    })
  }
})
復(fù)制代碼

添加目標(biāo)

添加目標(biāo)實(shí)現(xiàn)的功能：

1. 通過(guò)picker組件讓用戶選取年份；
2. 可添加/編輯年目標(biāo)標(biāo)題、內(nèi)容；

部分代碼如下：

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

第四步，最終結(jié)果

小程序從開(kāi)發(fā)到發(fā)布成功，只花了一周時(shí)間，不得不贊揚(yáng)云開(kāi)發(fā)給開(kāi)發(fā)者帶來(lái)的便利，并且還是免費(fèi)的，為了表達(dá)出開(kāi)發(fā)的順暢，我特意百度了一張圖來(lái)體現(xiàn)

希望沒(méi)有想歪哈，這是一張純粹的過(guò)山車(chē)圖(>▽<)

因時(shí)間、技術(shù)或者環(huán)境限制，一些還沒(méi)有解決的問(wèn)題：

1. 分享到朋友圈功能還沒(méi)有實(shí)現(xiàn)，后續(xù)將實(shí)現(xiàn)保存當(dāng)前頁(yè)為圖片，讓用戶手動(dòng)分享;
2. 使用了textarea標(biāo)簽給用戶添加數(shù)據(jù)，有些簡(jiǎn)陋，希望小程序盡快出富文本編輯器;
3. 雖然工作中經(jīng)常接觸設(shè)計(jì)圖，但對(duì)ui設(shè)計(jì)還是有些無(wú)感，以后盡量彌補(bǔ)設(shè)計(jì)上的不足;
4. 小程序云開(kāi)發(fā)數(shù)據(jù)響應(yīng)有一些緩慢，據(jù)稱(chēng)云開(kāi)發(fā)目前只部署在上海，期待后續(xù)優(yōu)化;