微信小程序开发记

微信小程序开发流程

分析需求

 模块化设计需求，方便开发和维护

确定UI图

统一用iphone6的尺寸出图

前端页面编写

主要涉及wxml和wcss文件

wxml文件

负责规划UI层级树状图

wcss文件

负责管理wxml文件中view的布局和样式

布局属性

1. 尺寸大小（width/height：auto/100%/xx rpx）
2. 外边距maigin：top right bottom left
3. 内边距padding：top right bottom left
4. 边框boder
5. 浮动（float）
6. 定位（pisition：absolute/ralative）
7. 溢出（overflow）
8. 滚动条（scrollerbar）
9. 弹性盒子（display：flex/inline/block）
10. 多列（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

 

触发事件bindtap和catchtap的区别

(1) 相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。

　　(2) 不同点：他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的。

 

 

在wxml和xcss文件中的运算符两边都要加空格

例如wcss数学中的自动计算calc（100% - 40rpx）

例如wxml中的属性<view class="{{data.isinited ? true : false"/>

设置公共css

可以在app.wcss中设置公共样式

纵向盒子布局,横向盒子布局

字体样式(标题加粗,标题,正文)

图片(头像固定大小/圆形,小图标-固定大小,缩略图和正常图片)

公共控件(swiper,button等等)