备案域名大量出售QQ582001116诗和远方：旅行小账本云开发实战

258资源分享 > 建站学院 > 微信开发 > 诗和远方：旅行小账本云开发实战

购买VIP 金币充值

分类

织梦教程帝国教程 discuz教程微信开发 MYSQL教程 MSSQL教程网站运营 ecshop教程前端教程 Phpweb教程 php编程服务器架设 ASP编程脚本编程

诗和远方：旅行小账本云开发实战

发布时间:2020-10-02

最近沉迷小程序开发，发现了一款功能、界面、体验俱佳的小程序“旅行小账本”。该小程序由腾讯旅游操刀制作，简约大气，功能性强。借着最近云开发的热潮，着手做了个简约版——"旅行小账本"。效果比较满意，毕竟前后台一人单干。

Talk is cheap！

show~

IDE

微信开发者工具

VSCode

小程序开发必然少不了微信开发者工具，再加上其对云开发的全面支持，再好不过的开发利器。但熟悉微信开发者工具的朋友们应该知道，它不支持Emmet缩写语法，并且wxml的属性值默认用单引号表示(强迫症表示很难受)。

而VSCode很好的补足了微信开发者工具的不足之处，并且支持多元化插件开发，轻量好用。

所以这里推荐采用微信开发者工具+VSCode配合开发。微信开发者工具负责调试、模拟小程序运行情况，VSCode负责代码编辑工作。二者各司其职，会使开发更加的高效、便捷。

总体架构

该项目基于小程序云开发，使用的模板是云开发快速启动模板

由于是个全栈项目，前端使用小程序所支持的wxml + wxss + js开发模式，命名采用BEM命名规范。后台则是借助云数据库+云储存进行数据管理。

项目总体结构

在做该小程序之前，有必要进行项目的逆向工程，进一步解构每一个页面，从而深入了解这款小程序的交互细节。那么现在我假设自己为腾讯旅游的产品设计师，在绘制完界面原型后，撰写了相应的交互文档。当然解构过程中可能有些细节处理并没有那么仔细到位...

以下是我绘制的界面原型

诗和远方：旅行小账本云开发实战

接下来对每个页面的细节进行解构，并完成简单的wxml结构

诗和远方：旅行小账本云开发实战

<view bindtap="switchList" class="list"></view>  <view class="newAccount" bindtap="createNewAccount"> <view class="desc">旅行中的每一笔开支都有独特的意义！</view> <image src=http://www.yiyongtong.com/archives/"{{}}"></image> <view class="title">创建一个新账本</view> </view> 复制代码

诗和远方：旅行小账本云开发实战

<input type="text" class="accuntName" placeholder="旅行账本名称" bindinput="getInput" /> <van-panel title="选择封面" class="panel"> <van-row class="imageBox">  <van-col span="8" class="imgCol" bindtap="selectThis"> <image class="select" src=http://www.yiyongtong.com/archives/"{{}}"></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">  <view class="accountName"> <view>{{}}</view> <view class="accountTime">{{}}</view> </view>  <image class="updateImg" catchtap="editAccount" src=http://www.yiyongtong.com/archives/"{{}}"></image> </view> 复制代码

本文标签

:备案管家服务帮您把复杂流程变简单，解决您在进行网站备案过程中遇到的效率低下和成功率不高的问题。个人300/2个域名，企业500/5个域名，qq1650004.

开发实战账本远方旅行

258资源分享网

分类

推荐文章

推荐下载

诗和远方：旅行小账本云开发实战

本文标签