企业网站系统详细设计,html手机版下载,wordpress如何修改php,长沙市网站建设一、目标
A. 能够知道如何实现页面之间的导航跳转 B. 能够知道如何实现下拉刷新效果 C. 能够知道如何实现上拉加载更多效果 D. 能够知道小程序中常用的生命周期
二、目录
A. 页面导航 B. 页面事件 C. 生命周期 D. WXS脚本 E. 案例-本地生活#xff08;列表页面#xff09;…一、目标
A. 能够知道如何实现页面之间的导航跳转 B. 能够知道如何实现下拉刷新效果 C. 能够知道如何实现上拉加载更多效果 D. 能够知道小程序中常用的生命周期
二、目录
A. 页面导航 B. 页面事件 C. 生命周期 D. WXS脚本 E. 案例-本地生活列表页面
三、页面导航
3.1 什么是页面导航
页面导航指的是页面之间的相互跳转。例如浏览器中实现页面导航的方式有如下两种 A. 链接 B. location.href
3.2 小程序中实现页面导航的两种方式
A. 声明式导航 在页面上声明一个导航组件通过点击组件实现页面跳转
B. 编程式导航 调用小程序的导航API实现页面的跳转
3.3 页面导航-声明式导航
3.3.1 导航到tabBar页面
tabBar页面指的是被配置为tabBar的页面在使用组件跳转到指定的tabBar页面时需要指定url属性和open-type属性其中
A. url表示要跳转的页面的地址必须以 / 开头 B. open-type表示跳转的方式必须为switchTab 示例代码如下
navigator url/pages/3link/3link open-typeswitchTab跳转到[联系我们]
/navigator3.3.2 导航到非tabbar界面
非tabBar页面指的是没有被配置为tabBar的页面。 在使用组件跳转到普通的非tabBar页面时则需要指定url属性和open-type属性其中 A. url表示要跳转的页面的地址必须以/开头 B. open-type表示跳转的方式必须为navigate 示例代码
navigator url/pages/4info/4info open-typenavigate跳转到[消息界面]
/navigator3.3.3 后退导航
如果要后退到上一页面或多级页面则需要指定open-type属性和delta属性其中
A. open-type的值必须是navigateBack,表示要进行后退导航 B. delta的值必须是数字表示要后退的层级
示例代码如下
navigator open-typenavigateBack delta1后退【上一级】/navigator注意为了方便如果只是后退到上一页面则可以省略delta属性因为其默认值就是1
3.4 页面导航-编程式导航
3.4.1 导航到tabbar页面
调用wx.switchTab(Object object)方法可以跳转到tabBar页面。其中Object参数对象的属性列表如下
button typeprimary bind:tapgoto导航到【联系我们2】/buttongoto(){wx.switchTab({url: /pages/3link/3link})
},3.4.2 导航到非tabbar页面
调用wx.navigateTo(Object object)方法可以跳转到非tabBar的页面。其中Object参数对象的属性列表
属性 button typewarn bind:tapgoto2导航到【消息列表】/buttongoto2(){wx.navigateTo({url: /pages/4info/4info,})
},3.4.3 后退导航
调用wx.navigateBack(Object object)方法可以返回上一页面或多级页面。其中Object参数对象可选的属性列表如下 button bind:tapgoback2返回【上一级】/buttongoback2(){wx.navigateBack()
},3.5 页面导航-导航传参
3.5.1 声明式导航传参
navigator组件的url属性用来指定将要跳转到的页面的路径。同时路径的后面还可以携带参数
A. 参数与路径之间使用分隔 B. 参数键与参数值用相连 C. 不同参数用分隔
代码示例如下
navigator open-typenavigate url/pages/4info/4info?namezsage18声明式传参
/navigator3.5.2 编程式导航传参
调用wx.navigateTo(Object object)方法跳转页面时也可以携带参数代码示例如下
button bind:tapgoto3编程式传参/buttongoto3(){wx.navigateTo({url: /pages/4info/4info?namelsage20,})
},3.5.3 在onLoad中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数可以直接在onLoad事件中直接获取到示例代码如下
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {//options就是导航传参过来的参数对象返回的是一个对象console.log(options);//要把返回过来的数据放在data里面this.setData({user: options});
},要把数据放在data里面其它的方法可能被访问
四、页面事件-下拉刷新事件
4.1 什么是下拉刷新
下拉刷新是移动端的专有名词指的是通过手指在屏幕上的下拉滑动操作从而重新加载页面数据的行为。
4.2 启用下拉刷新
启用下拉刷新有两种方式
A. 全局开启下拉刷新 在app.json的window节点中将enablePullDownRefresh设置为true B. 局部开启下拉刷新(推荐) 在页面的.json配置文件中将enablePullDownRefresh设置为true 在实际开发中推荐使用第二种方式为需要的页面单独开启下拉刷新的效果
4.3 配置下拉刷新窗口的样式
在全局或页面的.json配置文件中通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式其中
A. backgroundColor用来配置下拉刷新窗口的背景颜色仅支持16进制的颜色值 B. backgroundTextStyle用来配置下拉刷新loading的样式仅支持dark和light 4.4 监听页面的下拉刷新事件
在页面的.js文件中通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。例如在页面的wxml中有如下的UI结构点击按钮可以让count值自增1;
页面结构
viewcount:{{count}}/view
button typeprimary bind:tapcountAdd1/buttonjs
data: {count:0
},
countAdd(){this.setData({count:this.data.count1});
},在触发页面的下拉刷新事件的时候如果要把count的值重置为0示例代码如下 .json js
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {this.setData({count: 0})
},4.5 停止下拉刷新
当处理完下拉刷新后下拉刷新的loading效果会一直显示不会主动消失所以需要手动隐藏loading效果。此时调用wx.stopPulldownRefresh()可以停止当前页面的下拉刷新。示例如下
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {this.setData({count: 0})//当数据重置成功之后调用此函数关闭下拉刷新效果wx.stopPullDownRefresh()
},五、上拉触底
5.1 什么是上拉触底
上拉触底是移动端的专有名词通过手指在屏幕上的上拉滑动操作从而加载更多数据的行为。
5.2 监听页面的上拉触底事件
在页面的.js文件中通过onReachBottom()函数即可监听当前页面的上拉触底事件。示例代码如下
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {console.log(已经触底了.......);
},5.3 配置上拉触底距离
上拉触底距离指的是触发上拉触底事件时滚动条距离页面底部的距离可以在全局或局部的.json配置文件中通过onReachBottomDistance属性来配置上拉触底的距离。 小程序默认的触底距离是50px,在实际开发中可以根据自己的需求修改这个默认值。
六、生命周期
6.1 什么是生命周期
生命周期Life Cycle是指一个对象从创建-运行-销毁的整个阶段强调的是一个时间段。例如 A. 张三出生表示这个人生命周期的开始 B. 张三离世表示这个人生命周期的结束 C. 中间张三的一生就是张三的生命周期
我们可以把每个小程序运行的过程也概括为生命周期 A. 小程序的启动表示生命周期的开始 B. 小程序的关闭表示生命周期的结束 C. 中间小程序运行的过程就是小程序的生命周期
6.2 生命周期的分类
在小程序中生命周期分为两类分别是
A .应用生命周期 特指小程序从启动-运行-销毁的过程 B .页面生命周期 特指小程序中每个页面的加载-渲染-销毁的过程 其中页面的生命周期范围较小应用程序的生命周期范围较大如图所示 6.3 什么是生命周期函数
生命周期函数是由小程序框架提供的内置函数会伴随着生命周期自动按次序执行。 生命周期函数的作用允许程序员在特定的时间点执行某些特定的操作。例如页面刚加载的时候可以在onLoad生命周期函数中初始化页面的数据 注意 生命周期强调的是时间段生命周期函数强调的是时间点
6.4 生命周期函数的分类
小程序中的生命周期函数分为两类分别是
A. 应用的生命周期函数 特指小程序从启动-运行-销毁期间依次调用的那些函数 B. 页面的生命周期函数 特指小程序中每个页面从加载-渲染-销毁期间依次调用的那些函数
6.5 应用的生命周期函数
小程序的应用生命周期函数需要在app.js中进行申明示例代码如下
6.6 页面的生命周期函数
小程序的页面生命周期函数需要在页面的.js文件中进行生命示例代码如下
Page({onLoad:function (options){}, //监听页面加载一个页面只调用一次onShow:function (){}, //监听页面显示onReady:function (){}, //监听页面初次渲染完成一个页面只调用一次onHide:function (){}, //监听页面隐藏onUnload:function (){} //监听页面卸载一个页面只调用一次
})七、wxs脚本-概述
7.1 什么是wxs
WXS(WeiXin Script)是小程序独有的一套脚本语言结合WXML可以构建出页面的结构。
7.2 wxs的应用场景
wxml中无法调用在页面的.js中定义的函数但是,wxml中可以调用wxs中定义的函数。因此小程序中wxs的典型应用场景就是“过滤器”。
7.3 wxs和js的关系
虽然wxs的语法类似于JS,但是wxs和js是完全不同的两种语言
A. wxs有自己的数据类型 number数值类型、string字符串类型、boolean布尔类型、object对象类型、function函数类型、array数组类型、date日期类型、 regexp正则
B.wxs不支持类似于ES6及以上的语法形式 不支持let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc 支持var 定义变量、普通function函数等类似于ES5的语法
C. wxs遵循CommonJS规范 module对象 require()函数 Module.exports对象
7.4 wxs脚本-基础语法
7.4.1 内嵌wxs脚本
WXS代码可以编写在wxml文件中的标签内就像JS代码可以编写在html文件中的标签内一样。wxml文件中的每个标签必须提供module属性用来指定当前wxs的模块名称方便在wxml中访问模块中的成员
view~~~~~~~~~~~wxs~~~~~~~~~~~/view
view信息{{m1.message}}/view
view转化为大写{{m1.toUpper(zhangsan)}}/view
wxs modulem1//静态展示文本var msg hello world!!!!!!!!module.exports.messagemsg;//函数module.exports.toUpperfunction (str){return str.toUpperCase();}
/wxs7.4.2 定义外联的wxs脚本
wxs代码还可以缩写在以.wxs为后缀名的文件内就像JS代码可以编写在以.js为后缀名的文件中一样。
示例代码如下
7.4.3 使用外联的wxs脚本
在wxml中引入外联的wxs脚本时必须为标签添加module和src属性其中
A. module用来指定模块的名称 B. src用来指定要引入的脚本的路径且必须是相对路径
示例代码如下
view外部的wxs:{{m2.toUpper2(lisi)}}/view
wxs src./tool.wxs modulem2/wxs7.5 wxs脚本-wxs的特点
7.5.1 与js不同
为了降低wxs(WeiXin Script)的学习成本wxs语言在设计时借大量鉴了JS的语法。但是本质上wxs和JS是完全不同的两种语言
7.5.2 不能作为组件的事件回调
wxs典型的应用场景就是“过滤器”经常配合Mustache语法进行使用例如
view转化为大写{{m1.toUpper(zhangsan)}}/view但是在wxs中定义的函数不能作为组件的事件回调函数。例如下面的用法是错误的
button bind:tapm1.toUpper按钮/button7.5.3 隔离性
隔离性指的是wxs的运行环境和JS代码是隔离的。体现如下两方面 A . wxs不能调用js中定义的函数 B .wxs不能调用小程序提供的API
7.5.4 性能好
A. 在IOS设备上小程序内的WXS会比JS代码快2-30倍 B. 在android设备上二者的运行效率无差异
八、案例
