四、小程序的生命周期
1.app的生命周期
在项目的app.js文件中的app()中，它的生命周期包含以下几个函数：
onLaunch函数：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow函数：当小程序启动，或从后台进入前台显示，会触发 onShow
onHide函数：当小程序从前台进入后台，会触发 onHide
onError函数 ：当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
globalData
2.app对象的使用
五、小程序页面的生命周期和参数传递
1.页面的生命周期
页面的生命周期包含以下几个函数：
data:页面用到的数据
onLoad：页面初始化 options为页面跳转所带来的参数
onReady：页面渲染完成
onShow：页面显示
onHide：页面隐藏
onUnload：页面隐藏/卸载
页面的跳转方法有：
a.使用微信的navigateTo组件，示例如下：
itemClick : function (){
wx.navigateTo({url:"../logs/logs?id=1"})
}
b.使用navigator标签，示例如下：
<navigator url="../logs/logs" >
<view >
<text class="user-motto">文章1</text>
</view>
</navigator>
c.使用微信的redirectTo组件，示例如下：
itemClick : function (){
wx.redirectTo({url:"../logs/logs?id=1"})
}
d.navigateTo和redirectTo的区别是，前者是跳转到指定页面，原页面隐藏。
后者是用指定页面替换原页面，原页面卸载。
2.页面跳转的数据传递
页面的数据传递都是写在url里面，示例如下：
url:"../logs/logs?id=1&title=chen"
六、小程序用户登录功能
1.用户登录案例的步骤如下：
a.在app.js中的appData中定义一个userinfo，代码如下：
appData : {
userinfo : null,
}
b.在用户页面user.js中的onLoad函数中增加判断当前是否已登录，代码如下：
onLoad:function(options){
if(app.appData.userinfo == null ){ //判断当前用户信息是否为空
wx.redirectTo({url:"../login/login"}) //为空则跳转到登录页面进行登录
}else{
this.setData({username:app.appData.userinfo.username}) //当前有用户信息则将用户名显示在页面上
}
},
c.接着在登录页面login.js中获取用户输入的信息，代码如下：
1.login.wxml的代码如下：
<view><input bindinput="usernameInput" /></view> //给输入框绑定一个函数获取用户输入的内容
2.login.js的代码如下：
usernameInput : function (event){
this.setData({username:event.detail.value}) //将输入框的内容赋给username变量
},
d.绑定登录按钮点击事件，代码如下：
1.login.wxml的代码如下：
<button class="login-btn" bindtap="loginBtnClick">登录</button>
2.login.js的代码如下：
loginBtnClick:function (){
// 用户名和密码验证的过程
app.appData.userinfo = {username:this.data.username,password:this.data.password}
wx.redirectTo({url:"../user/user"})
},
七、小程序UI
1.布局和样式基础
a.flex布局基础
1.flex的容器和元素
px和rpx的区别：px是传统的像素值，
rpx是微信小程序独有的，会根据不同手机的分辨率不同，调整相应的值
2.flex容器属性详解
a.flex-direction决定元素的排列方向
参数：row表示横向排列（默认），column表示纵向排列
b.flex-wrap决定元素如何换行（排列不下时）
参数：nowrap表示不换行（默认），wrap表示换行，wrap-reverse反转换行
c.flex-flow flex-direction和flex-wrap的简写
参数：上面两个的结合，比如：row wrap
d.justify-content元素在主轴上的对齐方式
参数：center居中对齐，flex-start居左对齐（默认），flex-end居右对齐
space-around平均分布，space-between两端对齐，中间平均分布
e.align-items元素在交叉轴的对齐方式
参数：flex-start（默认），flex-end，stretch，baseline
3.flex元素属性详解
a.flex-grow当有多余空间时，元素的放大比例
b.flex-shrink当空间不足时，元素的缩小比例
c.flex-basis元素在主轴上占据的空间
d.flex是grow、shrink、basis的简写
e.order 定义元素的排列顺序
f.align-self 定义元素自身的对齐方式
b.相对定位和绝对定位
a.相对定位的元素是相对自身进行定位，参照物是自己
使用举例：position：relative
b.绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位
使用举例：position：absolute
c.样式基础
1.样式的使用
在页面的wxml文件中调用样式，比如：
<view class="userinfo">
</view>
然后在页面的wxss文件中定义样式，比如：
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
2.样式的属性
a.尺寸
b.背景
c.边框
d.边距
e.文本
f.其他（列表，内容，表格）
3.样式选择器
a.概念：选择器的含义就是选择让哪个控件发生选择器里设置的变化。
b.基本选择器
1.类选择器（.name{}）
2.ID选择器（#name{}）
3.元素选择器（name{}）
4.通配符选择器（*{}）
5.包含选择器（p c{}）
6.子元素选择器（p>c{}）
7.邻近兄弟元素选择器（c+c{}）
8.通用兄弟元素选择器（c~c{}）
c.属性选择器
1.E[attr]
2.E[attr="value"]
3.E[attr~="value"]
4.E[attr|="value"]
5.E[attr^="value"]
6.E[attr$="value"]
7.E[attr*="value"]
d.伪类选择器
1.动态伪类选择器（:link，:visited，:hover，:active，:focus）
2.状态伪类选择器（:enable，:disable，:checked）
3.选择伪类选择器（:first-child，:last-child，:nth-child()，:nth-last-child()，:nth-of-type()，:nth-last-of-type()，
:first-of-type，:last-of-type，:only-child，:only-of-type）
4.空内容伪类选择器（:empty）
5.否定伪类选择器（:not）
6.伪元素（::first-line，::first-letter，::before，::after，::selection）
2.组件使用
1.视图容器组件
a.view：基础容器组件，类似html的div
b.scroll-view：可滚动的视图区域
c.swiper：滑块视图容器（幻灯片）
2.基础内容组件
a.icon：图标
b.text：文本
c.progress：进度条
3.表单组件
a.button：按钮
b.checkbox：复选框，要包裹在checkbox-group中
c.input：输入框
d.label：用来绑定表单组件，提高可用性
e.picker：滚动选择器，根据mode区分地区选择器，时间选择器，日期选择器
f.radio：单选框，要包裹在radio-group中
g.slider：滑块
h.switch
i.form：表单，将上述表单组件的信息提交
4.操作反馈小工具
a.action-sheet：从屏幕下方出现的菜单表
b.modal
c.toast
d.loading
5.导航
a.navigator
6.多媒体
a.image：图片，属性有两个，其中src为图片地址，mode为图片裁剪格式
b.audio：音频，属性有action控制音频的播放，src音频地址，loop是否循环
c.video：视频，属性有src视频地址
7.地图与LBS
a.地图map的基本使用
b.地图标记
c.地图覆盖物
8.画布与游戏
a.canvas的使用：属性为canvas-id唯一标识符
b.绘图API的使用：context
3.项目实战
评测小程序首页的实现：
a.根据页面布局，将页面分为3个模块，分别为导航模块，推荐模块，评测模块。
b.导航模块利用swiper组件，代码如下：
<swiper indicator-dots="true" //显示导航点
autoplay="true" interval="3000" duration="1000"> //自动播放，播放间隔3秒，播放速度1秒
<block wx:for="{{imgUrls}}"> //在js文件中定义图片地址集合
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
c.推荐模块包含文字栏和4张图片，效果图如下：
代码如下：
<view class="header"> //头部模块，在wxss文件中定义精品推荐文字的样式
<text>精品推荐</text>
<text class="text-all">全部精品</text> //在wxss文件中定义全部精品文字的样式
</view>
<view class="content"> //内容模块
<view class="content-item" wx:for="{{contentItems}}"> //循环显示图片，设置图片样式
<image src="../../images/img1.png" />
<view class="content-item-text"> //设置标题样式
<text>这里是标题</text>
</view>
</view>
</view>
wxss中的样式代码如下：
.header{
border-left-width: 2px;
border-left-style: solid;
border-left-color: limegreen;
display: flex;
justify-content: space-between;
align-items: center;
height: 60rpx;
padding-left: 10rpx;
padding-right: 10rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.text-all{
color: green;
font-size: 10px;
}
.content{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.content-item{
height: 250rpx;
width: 45%;
background-color: goldenrod;
margin: 5px;
position: relative;
}
.content-item image{
width: 100%;
height: 100%;
}
.content-item-text{
position: absolute;
bottom: 0px;
color: white;
font-size: 10px;
background: -webkit-linear-gradient(bottom,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0));
height: 125rpx;
width: 98%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 1%;
}
d.评测模块包括评测栏，图片，标题和内容，效果图如下：
代码如下：
<view class="header"> //头部模块与上面的一样
<text>热门评测</text>
<text class="text-all">全部评测</text>
</view>
<view class="list-item" wx:for="{{listItems}}"> //循环创建评测模块
<view class="list-item-images"> //设置图片样式
<image src="../../images/img2.png" class="list-item-images-img" /> //评测图片样式
<image src="../../images/avatar.png" class="avatar" /> //头像样式
</view>
<view class="list-item-text"> //标题和内容样式
<view class="list-item-text-title">
<text>标题标题标题</text>
</view>
<view class="list-item-text-content">
<text>这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,</text>
</view>
</view>
</view>
wxss样式代码如下：
.list-item{
height: 500rpx;
width: 100%;
}
.list-item-images{
height: 300rpx;
width: 100%;
position: relative;
}
.list-item-images-img{
height: 100%;
width: 100%;
}
.avatar{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
position: absolute;
bottom: -50rpx;
right: 50rpx;
}
.list-item-text{
height: 200rpx;
width: 96%;
margin-top: 20rpx;
padding-left: 2%;
padding-right: 2%;
}
.list-item-text-content{
font-size: 10px;
color: #999;
margin-top: 20rpx;
}