### 项目初览
> 平安保险微信小程序,开发工具导入项目即可查看源码
## 小程序设计过程
小程序是一个易上手的东西, 对于新手来说,多看官方文档,可以初步做出比较完整的小程序,正是因为简单上手,功能实现简单,小程序是越来越火,商业价值也越来越大。
#### 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: [easy-mock](www.easy-mock.com) 用于后台的模拟,得到JSON数据; 5. weui框架引入, 例如个人信息界面,用weui可以很快很方便的做
资源推荐
资源详情
资源评论
收起资源包目录
平安保险微信小程序管理系统项目源码 (102个子文件)
1.gif 1.42MB
icon.jpg 66KB
index.js 4KB
index.js 2KB
app.js 1KB
show.js 1KB
util.js 472B
app.json 783B
project.config.json 475B
index.json 45B
show.json 40B
index.json 2B
README.md 3KB
tab_05_08.png 48KB
tab_08.png 48KB
tab_05_09.png 30KB
tab_09.png 30KB
tab_05_10.png 26KB
tab_10.png 25KB
tab_05_03.png 12KB
tab_03.png 12KB
tab_05_07.png 11KB
tab_07.png 11KB
tab_05_14.png 9KB
tab_05_12.png 9KB
tab_12.png 9KB
car.png 5KB
um.png 4KB
safe_active.png 4KB
safe.png 4KB
health.png 4KB
my_active.png 3KB
my.png 3KB
tab_05_05.png 3KB
tab_05.png 3KB
house.png 3KB
tab_05_04.png 2KB
tab_05_06.png 2KB
tab_04.png 2KB
tab_05_01.png 2KB
tab_06.png 2KB
tab_01.png 2KB
tab_05_02.png 2KB
tab_02.png 2KB
tab_05_15.png 1KB
tab_15.png 1KB
tab_05_13.png 1KB
tab_13.png 1KB
tab_05_11.png 1KB
tab_11.png 1KB
icon.psd 4.49MB
未标题-1.psd 3.53MB
show.wxml 3KB
index.wxml 1KB
index.wxml 835B
ionic.app.wxss 201KB
weui.wxss 22KB
weui-loading.wxss 4KB
weui-form.wxss 4KB
extend.wxss 3KB
weui-form-preview.wxss 2KB
weui-uploader.wxss 2KB
weui-animate.wxss 2KB
weui-media-box.wxss 2KB
show.wxss 2KB
weui-cell.wxss 2KB
weui-searchbar.wxss 1KB
weui-tab.wxss 1KB
app.wxss 1016B
weui-navbar.wxss 923B
weui-form_common.wxss 781B
weui-select.wxss 774B
weui-panel.wxss 769B
weui-loadmore.wxss 737B
weui-footer.wxss 692B
weui-access.wxss 689B
weui-msg.wxss 663B
weui-grid.wxss 628B
weui-agree.wxss 524B
weui-vcode.wxss 442B
weui-article.wxss 405B
weui-check.wxss 394B
weui-progress.wxss 322B
weui-badge.wxss 292B
weui-flex.wxss 163B
index.wxss 153B
index.wxss 150B
weui-button.wxss 131B
reset.wxss 129B
weui-switch.wxss 65B
weui-msg.wxss 0B
weui-dialog.wxss 0B
weui-cell.wxss 0B
weui-grid.wxss 0B
global.wxss 0B
weui-progress.wxss 0B
color.wxss 0B
weui-button.wxss 0B
setArrow.wxss 0B
setOnepx.wxss 0B
共 102 条
- 1
- 2
资源评论
静香是个程序媛
- 粉丝: 3159
- 资源: 563
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功