网博士智能建站,wordpress布局模板,优化英语,wordpress博客jin1、页面导航
1. 什么是页面导航
页面导航指的是页面之间的相互跳转。例如#xff1a;浏览器中实现页面导航的方式有如下两种#xff1a;
a链接location.href
2. 小程序中实现页面导航的两种方式#xff1a; 声明式导航#xff1a; 在页面上声明一个navigat…1、页面导航
1. 什么是页面导航
页面导航指的是页面之间的相互跳转。例如浏览器中实现页面导航的方式有如下两种
a链接location.href
2. 小程序中实现页面导航的两种方式 声明式导航 在页面上声明一个navigator导航组件通过点击该组件实现页面跳转。 声明式导航到tabBar页面在使用navigator组件跳转到指定的tabBar页面时需要指定url属性和open-type属性其中url属性表示要跳转的页面的地址必须以 / 开头open-type表示跳转的方式必须为switchTab。例如navigator url/pages/home/home open-typeswitchTab导航到home页面/navigator导航到非tabBar页面没有被配置为tabBar的页面在使用navigator组件跳转到指定的非tabBar页面时需要指定url属性和open-type属性其中url属性表示要跳转的页面的地址必须以 / 开头open-type表示跳转的方式必须为navigate。导航到非tabBar页面时open-type属性可以省略不写。例如navigator url/pages/info/info open-typenavigate导航到info页面/navigator后退导航如果要后退到上一页面或多级页面需要指定open-type属性和delta属性。open-type的值必须是navigateBack表示要进行后退导航delta的值必须是数字表示要后退的层级。例如navigator open-typenavigateBack delta1返回上一页/navigator 编程式导航 调用小程序的导航API实现页面的跳转 导航到tabBar页面调用wx.switchTab(object)方法其中object参数对象的属性列表如下 属性类型是否必选说明urlstring是需要跳转的tabBar页面的路径路径后不能带参数successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数调用成功、失败都会执行button bindtapgotoMessage跳转到消息页面/buttongotoMessage() {wx.switchTab({url: /pages/message/ message,})
},跳转到非tabBar页面调用wx.navigateTo(object)方法object参数对象的属性列表和上表一致。 button bindtapgotoInfo跳转到info页面/button
gotoInfo() {wx.navigateTo({url: /pages/info/info,})
},后退导航调用wx.navigateBack(object)方法其中object参数对象的属性列表如下 属性类型是否必选说明deltanumber否为默认值1时可以不写返回页面的页数如果delta值大于现有页面数则返回首页successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数调用成功、失败都会执行button bindtapgotoBack退回到上一个页面/button
gotoBack() {wx.navigateBack();
},3. 导航传参
声明式导航传参 navigator组件的url属性用来指定将要跳转的页面的路径路径的后面可以携带参数
参数和路径之间使用分隔参数键与参数值用连接不同参数用分隔 navigator url/pages/info/info?namezsage20 open-typenavigate跳转到info页面/navigator
编程式导航传参 调用wx.navigateTo(object)方法跳转页面时也可以携带参数。示例如下
button bindtapgoInfo跳转到info页面/button
goInfo() {wx.navigateTo({url: /pages/info/info?namelsage18,})
},在onLoad中接收导航参数 通过声明式导航传参或编程式导航传参所携带的参数可以直接在onLoad事件中直接获取到。示例如下
onLoad: function(options) {console.log(options); // options 就是导航传递过来的参数对象
}2、页面事件
1. 下拉刷新
启用下拉刷新有两种方式
全局开启下拉刷新在app.json的window节点中将enablePullDownRefresh设置为true局部开启下拉刷新在页面的.json配置文件中将enablePullDownRefresh设置为true 在实际开发中推荐使用第2种方式为需要的页面单独开启下拉刷新的效果。
配置下拉刷新窗口的样式
backgroundColor用来配置下拉刷新窗口的背景颜色仅支持16进制的颜色值backgroundTextStyle用来配置下拉刷新loading的样式仅支持dark和light
监听页面的下拉刷新事件 在页面的.js文件中通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。停止页面下拉刷新的效果 当处理完下拉刷新后下拉刷新的loading效果会一直显示不会主动消失需要手动停止调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。
2. 上拉触底
监听页面的上拉触底事件 在页面的.js文件中通过onReachBottom()函数即可监听当前页面的上拉触底事件。配置上拉触底距离 上拉触底距离就是触发上拉触底事件时滚动条距离页面底部的距离。 可以在全局或页面的.json配置文件中通过onReachBottomDistance属性来配置上拉触底的距离。 默认是50px实际开发中可以根据需求修改这个值。对上拉触底进行节流处理
在data中定义isLoading节流阀true 正在进行数据请求false 当前没有进行任何数据请求在getColor()方法中修改isLoading节流阀的值刚调用 设置为 true在网络请求的complete中 重置为 false在onReachBottom中判断节流阀的值从而对数据请求进行节流控制true 阻止当前请求false 可以发起数据请求
3、生命周期
1. 生命周期的分类
应用生命周期小程序从启动 - 运行 - 销毁的过程范围比较大页面生命周期小程序中每个页面的加载 - 渲染 - 销毁的过程范围较小
2. 生命周期函数
自动按次序执行。 生命周期函数的作用允许程序员在特定的时间点执行某些特定的操作。 生命周期强调的是时间段生命周期函数强调的是时间点。分类应用的生命周期函数、页面的生命周期函数
3. 应用的生命周期函数
应用生命周期函数需要在app.js中进行声明: onLaunch 小程序初始化完成时 执行此函数 全局只触发一次 可以做一些初始化的工作, onShow 小程序启动或从后台进入前台显示时触发, onHide 小程序从前台进入后台时触发页面生命周期函数在页面的.js文件中进行声明 onLoad 监听页面加载 一个页面只调用一次, onShow 监听页面显示, onReady 监听页面初次渲染完成 可以修改页面的样式 一个页面只调用一次, onHide 监听页面隐藏, onUnload 监听页面卸载 一个页面只调用一次
4. WXS脚本
1. 什么是WXS
WXS是小程序独有的一套脚本语言结合WXML可以构建出页面的结构。 WXML中无法调用在页面的.js中定义的函数但是可以调用WXS中定义的函数。因此小程序WXS的典型应用场景就是过滤器。
2. WXS和JavaScript的关系
WXS有自己的数据类型number 数值类型、string 字符串类型、 Boolean 布尔类型、 object 对象类型、 function 函数类型、 array 数组类型、date 日期类型、 regexp 正则WXS不支持类似于ES6以及以上的语法形式
不支持letconst解构赋值展开运算符箭头函数对象属性简写支持var定义变量普通function函数类似于ES5的语法
WXS遵循CommonJS规范module对象require函数module.exports对象
3. 基础语法
内嵌WXS脚本 WXS代码可以编写在WXML文件中的wxs标签内就像JavaScript可以写在HTML中的script标签内一样。 WXML文件中的每个wxs/wxs标签必须提供module属性来指定当前WXS的模块名称方便在WXML中访问模块中的成员
view{{m1.toUpper(username)}}/viewwxs modulem1// 将文本转为大写形式 zs - ZSmodule.exports.toUpper function(str) {return str.toUpperCase()}
/wxs定义外联的WXS脚本 可以写在以.wxs为后缀名的文件内。
// tools.wxs 文件
function toLower(str) {return str.toLowerCase();
}module.exports {toLower: toLower
}使用外联的WXS脚本 在WXML中引入外联的WXS脚本时必须为wxs标签添加module和src属性。
module用来指定模块的名称src用来指定要引入的脚本的路径必须是相对路径
view{{m2.toLower(country)}}/view
wxs src../../utils/tools.wxs modulem2/wxs4. WXS的特点
与JavaScript不同不能作为组件的事件回调 WXS典型的应用场景就是过滤器配合{{}}使用例如 view{{m2.toLower(country)}}/view 在WXS中定义的函数不能作为组件的事件回调函数。比如button bindtapm2.toLower/button的用法是错误的。隔离性WXS的运行环境和其他JavaScript代码是隔离的。
WXS不能调用js定义的函数。WXS不能调用小程序提供的API。
性能好
在iOS设备上小程序内的WXS比JavaScript代码快2-20倍在Android设备二者的运行效率无差异
