前言：這是筆者第一次開發小程序，此前一直有打算自己做一個，並且能夠上線使用，但一直找不到靈感，加上還需要服務器端、數據庫等技能，所有一直沒能實現。後來偶然看到微信小程序雲開發(有點驚豔了，確實挺簡便)，再加上一點點想法，於是就開始了小程序雲開發之旅。
第一步，要做什麼東西？
鑑於自己的技術水平(捂臉)，還有看到年末很多人都在分享年目標，於是便決定好做一個年目標備忘錄，簡單方便，且有一些意義。
第二步，思考小程序的結構
實際開發中，往往需要產品相關的思維導圖、原型圖等來指導開發，即使做一個小項目，我認爲也需要一個良好的構思，以下是小程序的思維導圖：
第三步，開發階段
以下列舉主要頁面
首頁
首頁實現的功能：
- 通過雲函數獲取當前用戶的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: '修改失敗',
})
}
})
第四步，最終結果
小程序從開發到發佈成功，只花了一週時間，不得不讚揚雲開發給開發者帶來的便利，並且還是免費的，爲了表達出開發的順暢，我特意百度了一張圖來體現
希望沒有想歪哈，這是一張純粹的過山車圖(>▽<)
因時間、技術或者環境限制，一些還沒有解決的問題：
- 分享到朋友圈功能還沒有實現，後續將實現保存當前頁爲圖片，讓用戶手動分享;
- 使用了textarea標籤給用戶添加數據，有些簡陋，希望小程序儘快出富文本編輯器;
- 雖然工作中經常接觸設計圖，但對ui設計還是有些無感，以後儘量彌補設計上的不足;
- 小程序雲開發數據響應有一些緩慢，據稱雲開發目前只部署在上海，期待後續優化;
最後附上小程序碼，微信掃碼即可體驗(或搜索我的年目標)。另外，祝願大家都能開發出自己的小程序，並且在新的一年實現自己的人生目標^_^
該小程序的github地址：我的年目標
參考文檔/文章：