### 项目初览
> 轻客洗衣系统<br>
## 小程序设计过程
小程序是一个易上手的东西, 对于新手来说,多看官方文档,可以初步做出比较完整的小程序,正是因为简单上手,功能实现简单,小程序是越来越火,商业价值也越来越大。
#### 1.项目工具和文档
1. 微信web开发者工具:[微信小程序官网](https://mp.weixin.qq.com/debug/wxadoc/dev/) 这是个比较好用的编辑器,对于小程序编辑很方便。
2. 开发文档:[微信小程序宝典秘籍](https://www.w3cschool.cn/weixinapp/9wou1q8j.html) 通过这个查找微信小程序的API,组件,框架等等。
3. 图标库: [Iconfont-阿里巴巴矢量图标库](http://www.iconfont.cn/) 这个可以找到自己想要的几乎所有的小图标,十分方便。
4. Easy Mork: [easy-mock](www.easy-mock.com) 用于后台的模拟,得到JSON数据;
5. weui框架引入, 例如个人信息界面,用weui可以很快很方便的做
#### 2.项目开发
微信小程序开发和传统的H5开发还是有些不同的, 容易踩坑。
小程序是基于MVVM的的框架,合理利用数据绑定实现界面的更新是很关键的
开发时不要一股脑的写写写,多看看文档,你会发现你不小心原生写了个组件。。
#### 3.项目发布
进入开发平台,注册项目信息->在编辑器中上传版本->在开发版本中选择提交审核->审核通过->项目上线
### 1.首页轮播图
轮播有几种形式, 比如常见的横向海报图片展示, 还有横纵向商品列表展示,头条信息框轮换
siwper组件很好的实现了横向海报图片展示,比如
```
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
```
然而横向滑动需要注意些别的细节
首先要给swiper组件加上scroll-x-="true"
然后给轮播的子元素父容器设置display: inline-block; white-space: nowrap;
头条信息框转换采用上下轮换, 使用scroll-view嵌套swiper完成
```
<scroll-view scroll-y-="true" >
<swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
<block wx:for="{{something}}" wx:key="index">
//内容
</block>
</swiper>
</scroll-view>
```
## 总结
1. 微信小程序的组件,API很强大,需要不断的探索,不断的学习,多看文档
2. 善于利用有效资源, 比如iconfont esay-moc weui等
3. 切页面要细心,善于利用弹性布局等布局方法,小程序的rpx确实很好用
4. 不要一股脑的写代码, 当函数具有复用性,应该抽象出来,封装好,这样代码才易于维护,易读
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
小程序设计过程 小程序是一个易上手的东西, 对于新手来说,多看官方文档,可以初步做出比较完整的小程序,正是因为简单上手,功能实现简单,小程序是越来越火,商业价值也越来越大。 项目工具和文档 1. 微信web开发者工具:[微信小程序官网](https://mp.weixin.qq.com/debug/wxadoc/dev/) 这是个比较好用的编辑器,对于小程序编辑很方便。 2. 开发文档:[微信小程序宝典秘籍](https://www.w3cschool.cn/weixinapp/9wou1q8j.html) 通过这个查找微信小程序的API,组件,框架等等。 3. 图标库: [Iconfont-阿里巴巴矢量图标库](http://www.iconfont.cn/) 这个可以找到自己想要的几乎所有的小图标,十分方便。 4. Easy Mork: 用于后台的模拟,得到JSON数据; 5. weui框架引入, 例如个人信息界面,用weui可以很快很方便的做 项目开发与项目发布 进入开发平台,注册项目信息->在编辑器中上传版本->在开发版本中选择提交审核->审核通过->项目上线
资源推荐
资源详情
资源评论
收起资源包目录
emulation_laundry_system.rar (77个子文件)
emulation_laundry
截图
2.jpg 17KB
1.jpg 10KB
1(1).jpg 10KB
2(1).jpg 17KB
3(1).jpg 24KB
3.jpg 24KB
4.jpg 13KB
4(1).jpg 13KB
pages
toFriend
toFriend.wxml 151B
toFriend.js 867B
toFriend.wxss 77B
toFriend.json 2B
user
user.wxml 2KB
user.js 1KB
user.wxss 2KB
user.json 50B
machine
machine.wxml 648B
machine.js 865B
machine.wxss 1KB
machine.json 53B
common
nav.wxml 353B
list.wxml 1KB
iconInformation
iconInformation.js 1KB
iconInformation.wxss 4KB
iconInformation.json 552B
iconInformation.wxml 3KB
wallet
wallet.json 50B
wallet.js 3KB
wallet.wxml 1KB
wallet.wxss 1KB
logo
logo.wxss 80B
logo.json 2B
logo.wxml 153B
logo.js 1KB
setting
setting.js 865B
setting.wxml 1KB
setting.wxss 1KB
setting.json 44B
coupons
coupons.wxss 1KB
coupons.js 2KB
coupons.json 47B
coupons.wxml 252B
sms
sms.wxss 338B
sms.json 50B
sms.wxml 127B
sms.js 857B
myoption
myoption.json 2B
myoption.wxml 344B
myoption.js 6KB
myoption.wxss 245B
app.json 508B
app.js 698B
utils
av-weapp-min.js 144KB
util.js 481B
app.wxss 210B
images
use.png 18KB
wash.png 5KB
toFriend.png 5KB
markers.png 6KB
my-machine.png 7KB
click.png 7KB
warn.png 3KB
setting.png 5KB
wallet.png 6KB
avatar.png 10KB
user.png 8KB
location.png 3KB
washing.png 5KB
logo.jpg 38KB
btn.png 2KB
marker.png 3KB
wallet-sms.png 8KB
coupons.png 5KB
page-top.jpg 211KB
wallet-right.png 4KB
sms.png 5KB
README.md 3KB
共 77 条
- 1
资源评论
大雄是个程序员
- 粉丝: 3562
- 资源: 571
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于React17+React Hooks+TS4开发的仿Jira项目+源码+开发文档(毕业设计&课程设计&项目开发)
- C代码实现的Jacobi、QR方法求解特征值、特征向量
- c++线程池源文件 实例
- c++线程池main文件 实例
- c++线程池cpp文件 实例
- c++线程池头文件 实例
- 基于C++及Qt5开发的图片自动矢量化软件+高分辨率图像去噪+自动矢量化为svg/shp矢量图+不限定颜色种类和数量(高分项目)
- 美国手语字母表图像分类数据集ASL Alphabet共8.7w张29类别完整版.7z
- chap5-example-17.py
- 基于python开发的生产从shp到pbf格式的矢量地图切片+源码(期末大作业)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功