微信小程序开发知识点

主页面跳转子页面的方式
- 方式一:子页面会被unload，资源被回收，每次重新加载
```
 itemClick:function(){
    wx.navigateTo({url:"../logs/logs"})
 }
```
- 方式二:主页面会被unload，此页面无”返回”按钮
```
itemClick:function(){
wx.redirectTo({url:"../logs/logs"})
}
```

页面的传参
- wx.navigateTo({url:”../logs/logs?id=1”}),此时的id会被传到log.js的onLoad方法中
- <navigator url=”../logs/logs?id=1”/> 或者 <navigator url=”../logs/logs?id=1&title=’标题’” redirect/>

flex布局(display:flex)
- flex容器属性的详解（用在container中）
  - flex-direction：决定元素的排列方向
    
    flex-direction: row | row-reverse | column | column-reverse;
  - flex-wrap：决定元素如何换行
    
    flex-wrap: nowrap | wrap | wrap-reverse;
  - flex-flow：flex-direction 和 flex-wrap 的简写
    
    flex-flow: \ || \;
  - justify-content：元素在主轴的对齐方式
    
    justify-content: flex-start | flex-end | center | space-between | space-around;
  - align-items：元素在交叉轴的对齐方式
    
    align-items: flex-start | flex-end | center | baseline | stretch;
  - align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
    
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- flex元素属性的详解
  - flex-grow：当有多余空间时，元素的放大比例
    
    flex-grow: <number>; /* default 0 */
  - flex-shrink：当有多余空间时，元素的缩小比例
    
    flex-shrink: <number>;/* default 1 */
  - flex-basis:元素在主轴上占据的空间
    
    flex-basis: <length>; | auto; /* default auto */
  - flex 是grow、shrink、basis的简写
    
    flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
  - order 定义元素的排列顺序
    
    order: <integer>;
  - align-self 定义元素自身的对齐方式
    
    align-self: auto | flex-start | flex-end | center | baseline | stretch;

相对定位和绝对定位的区别(原则：子绝父相)
- ”相对定位的元素是相对自身进行定位，参照物是自己。”
- “绝对定位的元素是相对离它最近的一个一定为的父级元素进行定位”

微信小程序开发知识点

猜你喜欢