前言：這是筆者第一次開發小程式，此前一直有打算自己做一個，並且能夠上線使用，但一直找不到靈感，加上還需要伺服器端、資料庫等技能，所有一直沒能實現。後來偶然看到微信小程式雲開發(有點驚豔了，確實挺簡便)，再加上一點點想法，於是就開始了小程式雲開發之旅。
第一步，要做什麼東西？
鑑於自己的技術水平(捂臉)，還有看到年末很多人都在分享年目標，於是便決定好做一個年目標備忘錄，簡單方便，且有一些意義。
第二步，思考小程式的結構
實際開發中，往往需要產品相關的思維導圖、原型圖等來指導開發，即使做一個小專案，我認為也需要一個良好的構思，以下是小程式的思維導圖：
第三步，開發階段
以下列舉主要頁面
首頁
首頁實現的功能：
- 通過雲函式獲取當前使用者的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地址：我的年目標
參考文件/文章：