微信小程序
2017-02-10 本文已影响0人
Mr_韩
一、目录结构 点击查看
二、视图与渲染
三、配置详解 点击查看
四、微信小程序的生命周期和app对象的使用
1、小程序的生命周期
1.1、onLaunch
1.2、onShow
程序切换到前台时执行
1.3、onHide
程序切换至后台时执行
2、app对象的使用
2.1、可以在app的文件中,定义全局的属性和方法供给page页中使用。
3、页面的生命周期
3.1、onLoad 页面初始化
3.2、onShow 页面显示
3.3、onReady 页面渲染完成
3.4、onHide 页面隐藏
3.5、onUnload 页面关闭
4、页面跳转的参数传递
4.0.1、代码跳转
wx.navigateTo(){
url:”页面地址"
}
4.0.2、组件跳转
<navigater url="界面地址">
<view></view>
</navigater>
4.0.3、redirect
直接替换控制器,卸载前一控制器
4.1、直接在url后面加上?参数,在要跳转的界面unload方法中有一个options的参数用来记录参数,两个以上的参数用&链接
五、UI组件 点击查看
六、布局
一、flex布局
1、flex容器属性
1.1、flex-direction 决定元素的排列方向(默认row)
row -> 横 主轴:从左到右
column -> 竖 主轴:从上到下
1.2、flex-wrap 决定元素如何换行(排列不下时)
wrap -> 换行
nowrap -> 不换行
wrap-reverse -> 反转
1.3、flex-flow flex-direction和flex-wrap的简写
1.4、justify-content 元素在主轴上的对齐方式
center -> 居中
flex-start -> 左对齐
flex-end -> 右对齐
space-around -> 每一个元素两边占据的空间相等
space-between -> 两端对齐
1.5、align-items 元素在交叉轴的对齐方式
center -> 居中
flex-start -> 上对齐
flex-end -> 下对齐
stretch -> 没有设置高度,默认占满
baseline -> 以一行文字对齐
2、flex元素属性
2.1、flex-grow 当有多余空间时,元素的放大比例
2.2、flex-shrink 当空间不足时,元素的缩小比例
2.3、flex-basis 元素在主轴上占据的空间
2.4、flex 是grow、shrink、basis的简写
2.5、order 定义元素的排列顺序
2.6、align-self 定义元素自身的对齐方式
二、相对定位和绝对定位
1、相对定位的元素是相对自身进行定位,参照物是自己
position: relative;
2、绝对定位的元素是相对离它最近的一个已定为的父级元素进行定位
position: absolute;