一、app生命周期
App({
onLaunch: function () {
//App Launch ,生命周期函数--监听小程序初始化
// 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
},
onShow: function () {
// onShow,生命周期函数--监听小程序显示
// 当小程序启动，或从后台进入前台显示，会触发 onShow
},
onHide: function () {
// onHide,生命周期函数--监听小程序隐藏
// 当小程序从前台进入后台，会触发 onHide
}
})
二、page生命周期
Page({
data:{
//页面的初始数据
},
onLoad:function(options){
// 生命周期函数--监听页面加载
// 页面初始化 options为页面跳转所带来的参数
// 一个页面只会调用一次。
},
onReady:function(){
// 生命周期函数--监听页面初次渲染完成
// 页面渲染完成
},
onShow:function(){
// 生命周期函数--监听页面显示
// 页面显示,每次打开页面都会调用一次。
},
onHide:function(){
// 生命周期函数--监听页面隐藏
// 页面隐藏,当navigateTo或底部tab切换时调用。
},
onUnload:function(){
// 生命周期函数--监听页面卸载
// 页面关闭,当redirectTo或navigateBack的时候调用。
}
})
三、页面跳转
1.wx.navigateTo ，压栈式跳转，跳转后首页隐藏 onHide，自带返回
2.wx.redirectTo , 跳转后 首页关闭 onUnload， 不带返回
3.tabBar跳转，页面相互切换 onShow 与 onHide
4.页面传值：跳转链接url后添加参数 url: '../logs/logs?id=1'表示传 id=1 的参数
补充： 跳转方法可以通过 bindtap=“click"绑定点击事件来触发，
也可以直接写在wxml中
<navigator url="../logs/logs?id=23&title=标题>
也可以添加 redirect执行 redirect 跳转
<navigator url="../logs/logs?id=23&title=标题" redirect>
-
flex容器属性
flex-direction： 决定元素的排列方向,同时决定主轴与交叉轴的方向
`row`：横向排列，`column`：纵向排列
flex-wrap： 决定元素如何换行 (排列不下时)
`nowrap`：不换行，`warp`：自动换行，`reverse`：反转换行
flex-flow： flex-direction和flex-wrap的简写
例如： `flex-flow:row wrap;`
justify-content： 元素在主轴上的对齐方式
` center`: 在主轴上居中对齐，
`flex-start(flex-end)`：从左(右)开始对齐
`space-around`：每个元素的padding相同
`space-between`：每个元素间隔相同
align-items： 元素在交叉轴的对齐方式
`flex-start(flex-end)`：从上(下)开始对齐
`baseline`：根据元素内文本对齐
-
flex元素属性
`flex-grow`：当有多余空间时，元素的放大比例
`flex-shrink`： 当空间不足时，元素的缩小比例
`flex-basis`： 元素在主轴上占据的空间
`flex`： 是 grow、shrink、basis的简写
例如：`flex: 0 1 50px;`
`order`定义元素的排列顺序,默认为0
`align-self` 定义元素自身的对齐方式
-
相对定位和绝对定位
相对定位的元素是相对自身进行定位，参照物是自己。
例如：
position: relative; // 相对定位
left: 150rpx; // 与原位置的左端距离150
top: 50rpx; // 与原位置的上端距离50
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位。
例如：
position: absolute; // 绝对定位
left: 50rpx; // 与已定位的父级元素左端距离50
top: 50rpx; // 与已定位的父级元素上端端距离50
五、样式基础
1. 尺寸
width: 228rpx; // 宽度
height: 228rpx; // 高度
min-width: //最小宽度
max-width: //最大宽度
min-height: //最小高度
max-height: //最大高度
...
2. 背景
background-color: darkcyan; //背景颜色
...
3. 边框
border-radius: 20%; //边框圆角
border-width: 5px; //边框宽度
border-color: #ddd; //边框颜色
border-style: solid; //边框样式
...
4. 边距
margin: 20rpx; //外边距，边框距离父级元素的距离
margin: 10rpx 20rpx 30rpx 40rpx; // 上右下左
padding: 20rpx; //内边距，边框距离元素的距离
padding: 10rpx 20rpx 30rpx 40rpx; // 上右下左
5. 文本
font-size: 30px; //字体大小
6. 其它(列表、内容、表格...)
PS：样式选择器 与CSS选择器相同，部分不可用
