微信小程序开发流程
分析需求
模块化设计需求,方便开发和维护
确定UI图
统一用iphone6的尺寸出图
前端页面编写
主要涉及wxml和wcss文件
wxml文件
负责规划UI层级树状图
wcss文件
负责管理wxml文件中view的布局和样式
布局属性
- 尺寸大小(width/height:auto/100%/xx rpx)
- 外边距maigin:top right bottom left
- 内边距padding:top right bottom left
- 边框boder
- 浮动(float)
- 定位(pisition:absolute/ralative)
- 溢出(overflow)
- 滚动条(scrollerbar)
- 弹性盒子(display:flex/inline/block)
- 多列(multi-column)
弹性盒子属性:
- display主要使用属性有flex。用来控制一个UI块的布局
- flex_direction 控制布局方向,默认布局方向是横向。可以通过row/column来设置横向/纵向分布。
- flex_wrap 控制是否自动换行,默认否
- justify_content 横轴的对齐方式,默认支持横轴多个item,当横轴只有一个item时,采用justify-item属性,左对齐flex_start,右对齐flex_end,主轴(横向,纵向失效)居中center,文字基准线对齐baseline,均匀分布space-around,两端对齐在,中间均匀分布space-between。
- align-item 纵轴的对齐方式,默认支持纵轴有一行时的情况,多行时,使用align-content。
盒子内item的属性
- order 整数序号,盒子内会从小到大排序,支持负数。
- flexgrow 放大比例 ,如果无法占满一个方向的空间,根据占比来调整每个item的空间大小,来占满空间。
- flex-shrink 缩小比例
- aligin-self 自定义的纵轴对齐方式,会覆盖盒子的align属性。
资料来源 Flex 布局教程:语法篇
后台编写
前后台联调
测试
上线
一个可以滑动并且响应上拉下拉时间的Scroll-view
1.本页面json配置中禁止滑动
"disableScroll": true
2.设置高度和事件
//wxml配置
<scroll-view class ="scroll-bar" scroll-y="true" bindscrolltolower="lower" bindscrolltoupper="upper" style="height:100px">
</scroll-view>
js文件
lower:function(){
console.log("lower____________________")
},
upper:function(){
console.log("upper____________________")
},
3.根据不同设备高度/选项多少,动态设置scroll-view高度
todo
(1) 相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。
(2) 不同点:他们的不同点主要是bindtap是冒泡的,catchtap是非冒泡的。
在wxml和xcss文件中的运算符两边都要加空格
例如wcss数学中的自动计算calc(100% - 40rpx)
例如wxml中的属性<view class="{{data.isinited ? true : false"/>
设置公共css
可以在app.wcss中设置公共样式
纵向盒子布局,横向盒子布局
字体样式(标题加粗,标题,正文)
图片(头像固定大小/圆形,小图标-固定大小,缩略图和正常图片)
公共控件(swiper,button等等)