小程序 完结
小程序视图与逻辑
能够知道如何实现页面之间的导航跳转
能够知道如何实现下拉刷新效果
能够知道如何实现上拉加载更多效果
能够知道小程序中常用的生命周期函数
页面导航
1.什么是页面导航
页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式
1 链接
2 location.href
2.小程序中实现页面导航的两种方式
1 声明式导航
在页面上声明一个
通过点击
2 编程式导航
调用小程序的导航API,实现页面的跳转
页面导航 - 声明式导航
1.导航到tabBar页面
tabBar页面指的是被配置为tabBar的页面
在使用
url表示要跳转的页面的地址,必须是以/开头
open-type表示跳转的方式,必须为switchTab
2.导航到非tabBar页面
非tabBar页面指的是没有被配置为tabBar的页面。
在使用
url表示要跳转的页面的地址,必须是以/开头
open-type表示跳转的方式,必须为navigate
注意:
为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以忽略
3.后退导航
如果要后退到上一页面或多级页面,则需要指定open-type属性和delta属性
open-type的值必须是navigateBack,表示要进行后退导航
delta的值必须是数字,表示要后退的层级
页面导航 - 编程式导航
1.导航到tabBar页面
调用wx.switchTab方法,可以调转到tabBar页面。其中Object参数对象的属性列表
属性 类型 是否必选 说明
url string 是 需要跳转的tabBar页面的路径,路径后不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数
例如
gotoMessage(){
wx.switchTab({
url: '/pages/message/message'
})
},
2.导航到非tabBar页面
调用wx.navigateTab(Object object)方法,可以跳转到非tabBar的页面。
属性 类型 是否必选 说明
url string 是 需要跳转的tabBar页面的路径,路径后不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数
gotoInfo(){
wx.navigageTo({
url: '/pages/info/info'
})
},
3.后退导航
调用wx.navigateBack(Object object)方法,可以返回上一页面或多级页面
其中Object参数对象可选的属性列表如下
属性 类型 是否必选 说明
delta nuber 否 需要跳转的tabBar页面的路径,路径后不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数
gotoBack(){
wx.navigateBack()
}
页面导航 - 导航传参
1.声明式导航传参
navigator组件的url属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数
参数与路径之间使用?分隔
参数键与参数值用=相连
不同参数用&分隔
2.编程式导航传参
调用wx.navigateTo(Object object)方法跳转到页面时,也可以携带参数
gotoInfo2(){
wx.navigateTo({
url:'/pages/info/info?name=ls&gender=男'
})
}
3.在onLoad中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到
onLoad:function(options){
//options就是导航传递过来的参数对象
console.log(options)
}
页面事件 - 下拉刷新事件
1.什么是下拉刷新
下拉刷新是移动端的专有名词,指的是手指在屏幕上的下拉操作,从而重新加载页面数据的行为
2.启用下拉刷新
1 全局开启下拉刷新
在app.json的wiondow节点中,将enablePullDownRefresh设置为true
不推荐
2 局部开启下拉刷新
在页面的.json配置文件中,将enablePullDownRefresh设置为true
在实际开发中,推荐使用第二种,为有需要的页面单独开启下拉刷新的效果
3.配置下拉刷新窗口的样式
在全局或页面页面的.json配置文件种,通过backgrounColor和backgrounTextStyle来配置
其中:
backgrounColor用来配置下拉刷新窗口饿背景颜色 仅支持16进制的颜色
backgrounTextStyle用来配置下拉刷新loading的样式
4.监听页面的下拉刷新事件
在页面的.js文件中,通过onPulldDownRefresh()函数即可监听当前页面的下拉刷新事件
例如,在页面得到wxml中有如下的UI结构,点击按钮可以让count自增+1
页面结构
countAdd(){
this.setData({
count:this.data.count + 1
})
}
4.监听页面的下拉刷新事件
在触发页面的下拉刷新事件的时候,如果要把count的值重置为0
onPullDownRefresh:function(){
this.setData({
count:0
})
}
5.停止下拉刷新的效果
当处理完下拉刷新后,下拉刷新的loading效果会一直显示,不会主动消失
需要手动隐藏loading效果。此时调用.wx.stopPullDownRefresh()可以停止当前页面的下拉刷新
onPullDownRefresh:function(){
this.setData({
count:0
})
wx.stopPullDownRefresh()
}
页面事件 - 上拉触底事件
1.什么是上拉触底
上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为
2.监听页面的上拉触底事件
在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件
onReachBottom:function(){
console.log("触发了上拉触底")
}
新版不需要function
onReachBottom() {
console.log("xxx");
},
3.配置上拉触底距离
上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离
可以在全局或页面的.json配置文件中,通过onReachBottomDistance属性来配置上拉触底的距离
小程序默认的触底距离是50px 在实际开发中 可以根据自己的需求修改这个值
"onReachBottomDistance":50
4.上拉触底进行节流处理
1 在data中定义isloading节流阀
false表示当前没有进行任何数据请求
trueb表示当前正在进行任何数据请求
2 在getColors()方法中修改isloading节流阀的值
在刚调用getColor时将节流阀设置true
在网络请求的complete回调函数中,将节流阀重置为false
3 在onReachBottom中判断节流阀的值,从而对数据请求进行节流控制
如果节流阀的值为true,则阻止当前请求
如果节流阀的值为false,则发起当前请求
扩展
自定义编译模式
生命周期
1.什么是生命周期
生命周期是指一个对象从创建->运行->销毁的整个阶段,强调的是一个时间段。
每个小程序运行的过程,也概况为生命周期
小程序的启动,表示生命周期的开始
小程序的关闭,表示生命周期的结束
中间小程序运行的过程,就是小程序的生命周期
2.生命周期的分类
在小程序中,生命周期分为两类
1 应用生命周期
特指小程序从启动->运行->销毁的过程
2 页面生命周期
特指小程序中,每个页面的加载->渲染->销毁的过程
其中,页面的生命周期范围较小,应用程序的生命周期范围较大
3.什么是生命周期函数
生命周期函数:是由小程序框架提供的内置函数,会伴随生命周期,自动按序执行
生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。
例如,页面加载的时候,可以在onLoad生命周期函数中初始化页面的数据。
注意:生命周期强调的是时间段,生命周期函数强调的是时间点
4.生命周期函数的分类
在小程序中,生命周期分为两类
1 应用生命周期函数
特指小程序从启动->运行->销毁的过程的那些函数
2 页面生命周期函数
特指小程序中,每个页面的加载->渲染->销毁的过程的哪些函数
5.应用的生命周期函数
小程序的应用生命周期函数需要在app.js中进行声明
// app.js
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
6.页面的生命周期函数
小程序的页面生命周期函数需要在页面的.js文件中进行声明
PAge({
onLoad:function(options){}
onShow:function(options){}
onReady:function(options){}
onHide:function(options){}
onUnload:function(options){}
})
WXS脚本 - 概述
1.什么是WXS
WXS是小程序独有的一套脚本语言,结合WXML,可以构建出页面的结构
2.WXS的应用场景
wxml中无法调用在页面的.js中定义的函数,但是,wxml中可以调用WXS中定义的函数
因此,小程序中wxs的典型应用场景就是过滤器
3.wxs和js的关系
虽然wxs的语法类似于js,但是wxs和js是完全不同的两种语言
1 wxs有自己的数据类型
number数据类型 string字符串类型 boolean布尔类型 object类型
function函数类型 aarray数组类型 date日期类型 regexp正则
2 wxs不支持类似于ES6及以上的语法形式
不支持 let const 解构赋值 展开运算符 箭头函数 对象属性简写 etc
支持:var定义变量、普通function函数等类似于ES5的语法
3 wxs遵循CommonJS规范
module对象
require()函数
module.exports对象
WXS脚本 - 基础语法
1.内嵌wxs脚本
wxs代码可以编写在wxml文件中的