詩和遠方：旅行小帳本雲開發實戰
最近沉迷小程序開發，發現了一款功能、界面、體驗俱佳的小程序「旅行小帳本」。該小程序由騰訊旅遊操刀製做，簡約大氣，功能性強。藉着最近雲開發的熱潮，着手作了個簡約版——"旅行小帳本"。效果比較滿意，畢竟先後臺一人單幹。html
Talk is cheap！
show~ 前端
IDE
小程序開發必然少不了微信開發者工具，再加上其對雲開發的全面支持，再好不過的開發利器。但熟悉微信開發者工具的朋友們應該知道，它不支持Emmet縮寫語法，而且wxml的屬性值默認用單引號表示(強迫症表示很難受)。
而VSCode很好的補足了微信開發者工具的不足之處，而且支持多元化插件開發，輕量好用。
因此這裏推薦採用微信開發者工具+VSCode配合開發。微信開發者工具負責調試、模擬小程序運行狀況，VSCode負責代碼編輯工做。兩者各司其職，會使開發更加的高效、便捷。java
整體架構
該項目基於小程序雲開發，使用的模板是雲開發快速啓動模板
因爲是個全棧項目，前端使用小程序所支持的wxml + wxss + js開發模式，命名採用BEM命名規範。後臺則是藉助雲數據庫+雲儲存進行數據管理。git
項目整體結構github
|-travelbook 項目名
|-cloudfunctions 雲函數模塊
|-deleteItems 級聯刪除--雲函數
|-getTime 獲取時間--雲函數
|-miniprogram 項目模塊
|-components 自定義組件
|-accountCover 帳本封面組件
|-spendDetail 支出細節組件
|-pages 頁面
|-accountBooks 總帳本頁
|-accountCalendar 帳本日曆頁
|-accountDetail 支出細節頁
|-accountList 支出明細頁
|-accountPage 選定帳本頁
|-editAccount 帳本編輯頁
|-index 首頁
|-vant-weapp 有贊vant框架組件庫
|-··· 系列組件...
app.js 全局js
app.json 全局json配置
app.wxss 全局wxss
複製代碼
逆向工程
在作該小程序以前，有必要進行項目的逆向工程，進一步解構每個頁面，從而深刻了解這款小程序的交互細節。那麼如今我假設本身爲騰訊旅遊的產品設計師，在繪製完界面原型後，撰寫了相應的交互文檔。固然解構過程當中可能有些細節處理並無那麼仔細到位...算法
如下是我繪製的界面原型 數據庫
<!--switchList使用定位佈局-->
<view bindtap="switchList" class="list"></view>
<!--newAccount使用flex佈局-->
<view class="newAccount" bindtap="createNewAccount">
<view class="desc">旅行中的每一筆開支都有獨特的意義！</view>
<image src="{{}}"></image>
<view class="title">建立一個新帳本</view>
</view>
複製代碼
<!--總體用flex + 百分比佈局-->
<input type="text" class="accuntName" placeholder="旅行帳本名稱" bindinput="getInput" />
<van-panel title="選擇封面" class="panel">
<van-row class="imageBox">
<!--使用wx:for遍歷數據庫帳本圖片信息-->
<van-col span="8" class="imgCol" bindtap="selectThis">
<image class="select" src="{{}}"></image>
</van-col>
<van-col span="8">
<view class="addBox" bindtap="useMore">更多封面</view>
</van-col>
</van-row>
</van-panel>
<button type="primary" bindtap="save">保存</button>
<button type="warn" bindtap="delete">刪除</button>
複製代碼
<view class="accountDesc" bindtap="viewDetail">
<!--使用wx:for遍歷數據庫帳本信息-->
<view class="accountName">
<view>{{}}</view>
<view class="accountTime">{{}}</view>
</view>
<!--絕對定位-->
<image class="updateImg" catchtap="editAccount" src="{{}}"></image>
</view>
複製代碼
<!--switchList使用定位佈局-->
<view bindtap="switchList" class="list"></view>
<view class="account__list-year">{{}}</view>
<view class="account__list-new account__list-public" bindtap="createNewAccount">
<!--日期小圓點-->
<view class="account__list-point"></view>
<view class="account__list-time">{{}}</view>
<image src="{{}}"></image>
<view class="account__list-title">建立一個新帳本</view>
</view>
<!--使用wx:for遍歷數據庫帳本信息-->
<view class="account__list-item account__list-public" bindtap="viewDetail">
<!--日期小圓點-->
<view class="account__list-point"></view>
<image src="{{}}" mode="aspectFill"></image>
<view class="account__list-name">{{}}</view>
<view class="account__list-time">{{}}</view>
<image class="account__list-update" catchtap="editAccount" src="{{}}"></image>
</view>
複製代碼
<view class="account__spend">
<image bindtap="getCalendar" class="account__spend-calendar" src="{{}}"></image>
<view class="account__spend-text">
<view class="account__spend-total">總花費(元)</view>
<view class="account__spend-num">{{}}</view>
</view>
<image bindtap="accountAnalyze" class="account__spend-detail" src="{{}}"></image>
</view>
<view class="account__show-time">今天</view>
<view class="account__show-detail">
<view class="account__show-income account__show-public">
<view class="account__show-title">收入(元)</view>
<text class="account__show-in">+{{}}</text>
</view>
<view class="account__show-spend account__show-public">
<view class="account__show-title">支出(元)</view>
<text class="account__show-out">-{{}}</text>
</view>
</view>
<!--使用wx:for遍歷數據庫帳本信息-->
<view class="account__show-items-spend">
<view>
<image src="{{}}"></image>
</view>
<text>{{}}</text>
<text class="account__show-items-money">{{}}</text>
</view>
複製代碼
<!--日曆使用極點日曆的插件-->
<!--json中作配置-->
"usingComponents": {
"calendar": "plugin://calendar/calendar"
}
<!--js改變樣式-->
days_style.push({
month: 'current',
day: new Date().getDate(),
color: 'white',
background: '#e0a58e'
})
<!--wxml中引用-->
<calendar weeks-type="cn" cell-size="50" next="{{true}}" prev="{{true}}"
show-more-days="{{true}}" calendar-style="demo6-calendar"
header-style="calendar-header"board-style="calendar-board" active-type="rounded"
lunar="true" header-style="header"calendar-style="calendar"days-color="{{days_style}}">
</calendar>
複製代碼
<!--頂欄日期及收支結構-->
<view class="account__title">
<text class="account__title-time">{{}}</text>
<text class="account__title-spend">支出{{}}元 收入{{}}元</text>
</view>
<!--收支細節結構 使用flex彈性佈局-->
<view class="account__detail">
<image src="{{}}"></image>
<view class="account__detail-name">{{}}</view>
<view class="account__detail-money">{{}}</view>
</view>
複製代碼
<!--使用vant框架的van-tabs組件-->
<!--並封裝自定義組件複用收支頁，自定義組件後面會詳細說明-->
<van-tabs active="{{ active }}" bind:change="onChange">
<van-tab title="支出">
<spendDetail detail="{{detail}}" accountKey="{{accountKey}}"></spendDetail>
</van-tab>
<van-tab title="收入">
<spendDetail detail="{{income}}" accountKey="{{accountKey}}"></spendDetail>
</van-tab>
</van-tabs>
複製代碼
雲開發
在作完逆向工程的解構，頁面基礎結構基本搭建完成。但頁面依舊是靜態的，須要數據來填充。因此第二步就是數據庫的設計。而小程序的雲控制檯剛好提供了數據的操做功能，爲數據驅動提供基石。編程
雲數據庫設計
雲數據庫是一種NoSQL數據庫。每一張表是一個集合。值得注意的是在設計數據庫時，_id 和_openid這兩個字段須要帶上。_id是表的主鍵，而_openid是用戶標識，每一個用戶都有不一樣的_openid，可區分不一樣用戶。json
如下是項目中的數據表設計小程序
cover_photos 帳本封面表 用於存儲建立帳本時須要的封面信息
- _id
- _openid
- cover_index 封面索引
- cover_url 封面url
- isSelected 封面是否選中
複製代碼
accounts 帳本表 用於存儲用戶建立的帳本
- _id
- _openid
- accountKey 帳本惟一標識
- coverUrl 帳本封面
- i 帳本索引
- inputValue 帳本名字
- now 帳本建立時間
- spend 帳本總花費
複製代碼
account_detail 支出類型表 用於存儲消費類型
- _id
- _openid
- detail 類型細節
- pic_index 消費類型索引
- pic_url 未點擊時的圖片
- pic_url_act 點擊後的圖片
- type 消費類型
複製代碼
account_income 收入類型表 用於存儲收入類型
- _id
- _openid
- pic_index 收入類型索引
- pic_url 未點擊時的圖片
- pic_url_act 點擊後的圖片
- type 收入類型
複製代碼
spend_items 消費明細表
- _id
- _openid
- accountKey 帳本惟一標識
- address 消費地點
- desc 消費描述
- fullDate 消費時間
- money 消費金額
- pic_type 消費類型
- pic_url 消費類型圖片
複製代碼
雲儲存管理
這是個很是實用的板塊。相似於百度雲盤，它提供了文件存儲、上傳與下載功能。
雲函數設計
雲函數簡單來講就是在雲後端(Node.js)運行的代碼，本地看不到這些代碼的執行過程，全封閉式只暴露接口供本地調用執行，本地只需等待雲端代碼執行完畢後返回結果。這也是面向接口編程的思想體現。
項目中的雲函數設計
// getTime 獲取當前時間並格式化爲 yyyy-mm-dd
// 雲函數入口文件
const cloud = require('wx-server-sdk')
// 初始化雲函數
cloud.init()
// 雲函數入口函數
exports.main = async (event, context) => {
var date = new Date()
var seperator1 = "-"
var year = date.getFullYear()
var month = date.getMonth() + 1
var strDate = date.getDate()
if (month >= 1 && month <= 9) {
month = "0" + month
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate
}
// 格式化當前時間
var currentdate = year + seperator1 + month + seperator1 + strDate
return currentdate
}
複製代碼
// deleteItems 批量刪除，雲數據庫的批量刪除只容許在雲函數中執行
// 雲函數入口文件
const cloud = require('wx-server-sdk')
// 初始化雲函數
cloud.init()
// 鏈接雲數據庫
const db = cloud.database()
const _ = db.command
// 雲函數入口函數
exports.main = async (event, context) => {
try {
return await db.collection('spend_items')
.where({
accountKey: event.accountKey
})
.remove()
} catch (e) {
console.error(e)
}
}
複製代碼
MVVM
界面有了，數據有了。萬事俱備，只欠東風！因此下一步就是MVVM的設計。小程序本質就是基於MVVM所設計的，在MVVM的世界裏，數據是靈魂，一切都由數據來驅動。
帳本頁顯示
帳本頁有兩種顯示的風格，左上角的按鈕能夠來回切換風格，下拉可刷新頁面，顯示accounts數據表中存儲的帳本信息。顯示時有個小細節，須要根據建立的時間前後來顯示，越晚建立的越先顯示。
// 頁面數據設計, 在wxml中使用{{}}符號引用數據，數據就動態顯示到了頁面上
data: {
isList: false, // 轉換頁面風格的標識 true爲豎向風格 false爲橫向風格
accounts: [], // 存儲查詢的帳本數據
now: null, // 存儲當日時間
year: null // 存儲年份
}
// 轉換顯示風格
switchList() {
// 設置頁面風格樣式
let isList = !this.data.isList
this.setData({
isList
})
wx.setStorage({
key: "isList",
data: isList
})
}
// 獲取頁面風格轉換標識
var isList = wx.getStorageSync('isList')
// 查詢帳本
db.collection('accounts')
.get({
success: res => {
this.setData({
accounts: res.data.reverse(), // 反轉數組，優先顯示建立早的帳本
isList
})
wx.hideLoading()
}
})
// 調用雲函數接口 獲取當前日期
wx.cloud.callFunction({
// 雲函數接口名就是建立的雲函數名字，這裏是'getTime'
name: 'getTime',
success: (res) => {
let year = res.result.split('-')[0]
this.setData({
now: res.result,
year
})
},
fail: console.error
})
複製代碼
帳本頁增刪改
帳本頁經過調用相應的雲數據庫API，可進行一系列的增刪改操做。值得一提的是，修改時須要表單回顯，刪除時須要級聯刪除。由於一個帳本中有許多收支狀況，spend_items表就是進行收支記錄，因此刪除帳本時須要級聯刪除對應的spend_items表中的收支信息。
一些重要的邏輯
- 封面單選邏輯
data: { images: [], // 封面數組 selectImg: null, // 選擇其它封面 isSelected: {}, // 選中的圖片 inputValue: '', // 帳本名字 now: null, // 當前時間 account: {} // 傳入帳本信息 } // 單選邏輯 經過構造{'0': isSelected}來實現 selectThis(e) { let index = e.currentTarget.dataset.index let coverUrl = e.currentTarget.dataset.coverurl let is = this.data.isSelected[index] let obj = { coverUrl } // obj[index] 屬性動態改變 obj[index] = !is obj.i = index this.setData({ isSelected: obj }) } 複製代碼 - 表單回顯邏輯
// 頁面加載時先經過對應的accountKey, 獲得回顯信息 let { i, id, value, url, accountKey } = options photos.get({ success: res => { this.setData({ images: res.data, account: { id, value, url, i, accountKey }, isSelected: obj }) wx.hideLoading() } }) // 修改 save() { let { id } = this.data.account let { i, coverUrl, value } = this.data.isSelected // 若沒修改 則爲以前的value let inputValue = this.data.inputValue || value db.collection('accounts') .doc(id) .update({ data: { inputValue, coverUrl, i } }) } 複製代碼 - 級聯刪除邏輯
db.collection('accounts') .doc(this.data.account.id) .remove() .then(() => { wx.hideLoading() wx.showToast({ title: '刪除成功' }) setTimeout(() => { wx.reLaunch({ url: '../accountBooks/accountBooks' }) }, 400) }) // 調用deleteItems雲函數, 傳入對應accountKey主鍵, 經過雲函數批量刪除 wx.cloud.callFunction({ name: 'deleteItems', data: { accountKey } }) 複製代碼
帳本頁收支
由於收入與支出頁面基本相似，因此使用自定義組件封裝，能夠複用。
// 封裝spendDetail組件
// 註冊組件
properties: {
detail: {
type: Object
},
accountKey: {
type: Number
},
isSpend: {
type: Boolean
}
}
// 引用組件
<van-tab title="支出">
<spendDetail detail="{{detail}}" accountKey="{{accountKey}}" isSpend="{{isSpend}}"></spendDetail>
</van-tab>
<van-tab title="收入">
<spendDetail detail="{{income}}" accountKey="{{accountKey}}" isSpend="{{isSpend}}"></spendDetail>
</van-tab>
複製代碼
收入與支出類型icon選擇使用兩個view來存放，經過選擇不一樣類型，跳轉不一樣的icon
// js
data: {
address: '',
money: 0,
desc: '',
selectPicIndex: 0,
selectIndex: 0
}
// 選擇消費類別
selectSpend(e) {
let { index } = e.currentTarget.dataset
let { selectPicIndex } = this.data
selectPicIndex = index
this.setData({
selectPicIndex
})
},
// 選擇消費類別中的細節
selectSpendDetail(e) {
let { index } = e.currentTarget.dataset
let { selectIndex } = this.data
selectIndex = index
this.setData({
selectIndex
})
}
// wxml
// 消費類型
<view class="expense">
<block wx:for="{{detail}}" wx:key="index">
<view class="expense__type" bindtap="selectSpend" data-index="{{index}}">
<block wx:if="{{selectPicIndex == item.pic_index}}">
<view class="expense__type-icon" style="background-color: #e64343">
<image src="{{item.pic_url_act}}"></image>
</view>
</block>
<block wx:else>
<view class="expense__type-icon">
<image src="{{item.pic_url}}"></image>
</view>
</block>
<view class="expense__type-name">{{item.type}}</view>
</view>
</block>
</view>
// 消費子類型
<view class="detail">
<block wx:for="{{detail[selectPicIndex].detail}}" wx:key="index">
<view class="detail__type" bindtap="selectSpendDetail" data-index="{{index}}">
<image class="detail__type-icon" src="{{item.detail_url}}"></image>
<block wx:if="{{selectIndex == item.detail_index}}">
<view class="detail__type-name" style="color: #f86319; border-bottom: 1rpx solid #f86319;">
{{item.detail_type}}
</view>
</block>
<block wx:else>
<view class="detail__type-name" style="border-bottom: 1rpx solid #e4e2e2;">
{{item.detail_type}}
</view>
</block>
</view>
</block>
</view>
複製代碼
帳本頁明細
由於收支明細中須要顯示每一天的消費信息，因此須要將數據表中的數據經過時間來分類，分紅若干個數組，頁面從而使用wx:for來遍歷這些數組。在顯示以前，首先須要判斷有無收支信息。
// 經過時間分類算法 {} => [ [{時間1}], [{時間2}], [{時間3}] ]
arr.forEach(item => {
if (!_this.isExist(item.fullDate, dateArr)) {
dateArr.push([item])
} else {
dateArr.forEach(res => {
if (res[0].fullDate == item.fullDate) {
res.push(item)
}
})
}
})
// 使用map 方法構造 [{}, {}, {}, ...] 類型數組
dateArr = dateArr.map((item) => {
let spend = 0
let income = 0
item.forEach(res => {
if (res.money > 0) {
spend += res.money
} else {
income += (-res.money)
}
})
return {
item,
spend,
income
}
})
// 判斷自身是否存在數組中
isExist(item, arr) {
for (let i = 0; i < arr.length; i++) {
if (item == arr[i][0].fullDate)
return true
}
return false
}
複製代碼
以上是小程序中比較複雜的邏輯實現。
一點感悟
以前作項目時，只是在github提交時草草寫一句話當作提交日誌。此次作了一個比較正式提交日誌，作這個的初衷實際上是爲了監督本身不要偷懶，堅持天天完成項目一部分，並總結不足之處。學而時習之才能成長的更快！
篇幅有限，奉上項目github 若是你喜歡這篇文章或是這個項目，不妨進去點個Star支持下，有興趣的朋友歡迎Fork，一塊兒探討知識或是旅行~~固然也但願您能留下一些寶貴的建議。感激涕零！
生活不止眼前的苟且，還有詩和遠方。最後要感謝騰訊旅遊的各位大大設計出一個這麼簡潔美觀大方的小程序產品，實屬良心之做！
相關文章
- 1. 詩和遠方 旅行小帳本雲開發實戰
- 2. 雲開發實戰分享|詩和遠方：旅行小帳本雲開發
- 3. 詩和遠方
- 4. android開發實戰-記帳本APP（一）
- 5. 小程序雲開發實戰
- 6. Taro + 小程序雲開發實戰
- 7. 小程序雲開發項目實戰
- 8. 華爲雲EI的詩與遠方
- 9. 實戰：小程序雲開發之雲函數開發
- 10. 生活不只詩和遠方，還有Android開發者的痛苦和很方！
- 更多相關文章...
- • 使用Redis和SSM（Spring+Spring MVC+MyBatis）搭建搶紅包開發環境和超發現象完整實例 - 紅包項目實戰
- • Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
- • PHP開發工具
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 詩和遠方 旅行小帳本雲開發實戰
- 2. 雲開發實戰分享|詩和遠方：旅行小帳本雲開發
- 3. 詩和遠方
- 4. android開發實戰-記帳本APP（一）
- 5. 小程序雲開發實戰
- 6. Taro + 小程序雲開發實戰
- 7. 小程序雲開發項目實戰
- 8. 華爲雲EI的詩與遠方
- 9. 實戰：小程序雲開發之雲函數開發
- 10. 生活不只詩和遠方，還有Android開發者的痛苦和很方！