赞
踩
今天正式要做一个体育场地预约系统,用微信小程序云开发,想用博客来做一个完整的项目进展记录,记录每天的成果与收获。可能这个过程有点困难,因为记录可能会不完整,或者不知道该怎么记录,我就尽力而为吧,每天晚上用半个小时总结自己这一天的成果,希望自己能坚持下去。
下面分享一下我今天的成果:
先是做了需求分析,画了ER图,顶层数据流图,0层数据流图
备注:这是自己第一次做需求分析图,可能画的有问题,或者不正确,有错误的大家可以给我指正。
大概做完这些后,就开始进行小程序开发了
(1).先在微信开发者平台注册,申请的是个人,得需要在开发者平台的<开发>的里面里面查找AppID(小程序ID),一会再微信开发者工具里创建项目时用到。
(2)然后就是微信开发者工具里创建项目,还有申请云开发
(3)根据微信小程序开发文档https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
学习,文档很详细,也建议初学者多看看开发文档,今天大概学习了微信小程序的整体架构,还有目录结构,还学习了project.config.json和app.json的配置
下面来一点app.json里的tabBar组件的代码(是下面的导航栏)
"tabBar": { "list": [{ "pagePath": "pages/home/home", "text": "首页", "iconPath": "images/home.png", "selectedIconPath":"images/home-active.png" }, { "pagePath": "pages/book/book", "text": "预约", "iconPath": "images/book.png", "selectedIconPath": "images/book-active.png" },{ "pagePath": "pages/order/order", "text": "订单", "iconPath": "images/order.png", "selectedIconPath": "images/order-active.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "images/mine.png", "selectedIconPath": "images/mine-active.png" }] }
还有轮播图:
<view class="home-top">
<view class="home-swiper">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{activecolor}}">
<block wx:for="{{imgUrls}}" wx:key="*this" >
<swiper-item>
<image src="{{item}}" style="width:100%;height:200px" class="slide-image" mode="widthFix" />
</swiper-item>
</block>
</swiper>
</view>
</view>
(4)看一下今天的效果图
总结:今天差不多就是这些了,明天继续完善,明天可能会把四个页面的大体框架做完
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。