诗和远方:旅行小账本云开发实战
最近沉迷小程序开发,发现了一款功能、界面、体验俱佳的小程序“旅行小账本”。该小程序由腾讯旅游操刀制作,简约大气,功能性强。借着最近云开发的热潮,着手做了个简约版——"旅行小账本"。效果比较满意,毕竟前后台一人单干。 Talk is cheap! show~ IDE
小程序开发必然少不了微信开发者工具,再加上其对云开发的全面支持,再好不过的开发利器。但熟悉微信开发者工具的朋友们应该知道,它不支持Emmet缩写语法,并且wxml的属性值默认用单引号表示(强迫症表示很难受)。 而VSCode很好的补足了微信开发者工具的不足之处,并且支持多元化插件开发,轻量好用。 所以这里推荐采用微信开发者工具+VSCode配合开发。微信开发者工具负责调试、模拟小程序运行情况,VSCode负责代码编辑工作。二者各司其职,会使开发更加的高效、便捷。 总体架构该项目基于小程序云开发,使用的模板是云开发快速启动模板 由于是个全栈项目,前端使用小程序所支持的wxml + wxss + js开发模式,命名采用BEM命名规范。后台则是借助云数据库+云储存进行数据管理。 项目总体结构 |-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
复制代码
逆向工程在做该小程序之前,有必要进行项目的逆向工程,进一步解构每一个页面,从而深入了解这款小程序的交互细节。那么现在我假设自己为腾讯旅游的产品设计师,在绘制完界面原型后,撰写了相应的交互文档。当然解构过程中可能有些细节处理并没有那么仔细到位... 以下是我绘制的界面原型 接下来对每个页面的细节进行解构,并完成简单的wxml结构 <!--switchList使用定位布局-->
<view bindtap="switchList" class="list"></view>
<!--newAccount使用flex布局-->
<view class="newAccount" bindtap="createNewAccount">
<"desc">旅行中的每一笔开支都有独特的意义!</view>
<image src="{{}}"></image>
<"title">创建一个新账本</view>
</view>
复制代码
账本页收支因为收入与支出页面基本类似,所以使用自定义组件封装,可以复用。 // 封装spendDetail组件
// 注册组件
properties: {
detail: {
type: Object
},accountKey: {
type: Number
},isSpend: {
type: Boolean
}
}
// 引用组件
<}" 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) { selectIndex } = this.data
selectIndex = index
this.setData({
selectIndex
})
}
// wxml
// 消费类型
<"expense">
<block wx:for=}" wx:key="index">
<"expense__type" bindtap="selectSpend" data-index={{index}}">
<block wx:if={{selectPicIndex == item.pic_index}}">
<"expense__type-icon" style="background-color: #e64343">
<{{item.pic_url_act}view>
</block>
<block wx:else>
<"expense__type-icon">
<{{item.pic_url}"expense__type-name">{{item.type}}</view>
</block>
</view>
// 消费子类型
<"detail">
<{{detail[selectPicIndex].detail}"detail__type" bindtap="selectSpendDetail" data-index="detail__type-icon" src={{item.detail_url}image>
<{{selectIndex == item.detail_index}"detail__type-name" style="color: #f86319; border-bottom: 1rpx solid #f86319;">
{{item.detail_type}}
</"border-bottom: 1rpx solid #e4e2e2;">
block>
</view>
复制代码
账本页明细因为收支明细中需要显示每一天的消费信息,所以需要将数据表中的数据通过时间来分类,分成若干个数组,页面从而使用wx:for来遍历这些数组。在显示之前,首先需要判断有无收支信息。 以上是小程序中比较复杂的逻辑实现。 |