1、小程序–视图与逻辑
1.1 页面导航
-
页面导航指页面之间的相互跳转
-
小程序实现页面导航的两种方式：
-
声明式导航
- 在页面上声明一个< navigator>导航组件；通过点击< navigator>组件实现页面跳转
- 导航到tabBar页面
//页面地址必须以/开头 //必须指定跳转方式，为switchTab <navigator url="/pages/message/message" open-type="switchTab">导航消息页面</navigator>- 导航到非tabBar页面
//页面地址必须以/开头 //指定跳转方式，为navigate，可省略 <navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>- 后退导航
//open-type的值必须是navigateBack，表示要进行后退导航 //delta的值必须是数字，表示要后退的层级,可省略，默认值为1 <navigator open-type="navigateBack" delta="1">后退</navigator> -
编程式导航
- 调用小程序的导航API，实现页面的跳转
属性 类型 是否必选 说明 url string 是 需要跳转的页面的路径，路径后不能带参数 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） - 导航到tabBar页面
//wxml <button bindtap="gotoMessage">跳转到消息页面</button> //js gotoMessage(){ wx.switchTab({ url:'/pages/message/message' }) }- 导航到非tabBar页面
//wxml <button bindtap="gotoInfo">跳转到信息页面</button> //js gotoInfo(){ wx.navigateTo({ url: '/pages/info/info' }) },- 后退导航
属性 类型 默认值 是否必选 说明 delta number 1 否 返回的页面数，如果 delta 大于现有页面数，则返回到首页 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） //wxml <button bindtap="gotoBack">后退</button> //js gotoBack(){ wx.navigateBack({ }) }
-
-
导航传参
-
声明式导航传参
- 路径后面携带参数：
- 参数与路径之间使用**？**
- 分隔参数键与参数值用**=**相连
- 不同参数用**&**分隔
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator> - 路径后面携带参数：
-
编程式导航传参
//wxml <button bindtap=gotoInfo2">跳转到info页面</button> //js gotoInfo2(){ wx.navigateTo({ ur1: " /pages/infolinfo?name=ls&gender=男" }) } -
在onLoad中接收导航参数
onLoad:function(options){ //options即导航传递过来的参数对象 console.log(options) } -
1.2 页面事件
下拉刷新事件
-
通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为
-
启用下拉刷新的方式：
- 全局开启下拉刷新(app.json的windows结点设置)
- 局部开启下拉刷新(页面的.json中配置)
- 实际开发中为需要的页面单独开启下拉刷新的效果
-
监听页面的下拉刷新事件
- 在页面的.js文件中，通过 **onPullDownRefresh()**函数即可监听当前页面的下拉刷新事件
onPullDownRefresh() { console.log('触发下拉刷新事件') wx.stopPullDownRefresh() }, -
停止下拉刷新的效果
- 调用**wx.stopPullDownRefresh()**可以停止当前页面的下拉刷新
上拉触底事件
- 通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为
- 监听页面的上拉触底事件
- 在页面的.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件(节流 – 在data 中定义isloading节流阀；在方法中修改isloading节流阀的值；在onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制)
- 配置上拉触底距离
- 触发上拉触底事件时，滚动条距离页面底部的距离，在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离
1.3 生命周期
-
在小程序中，生命周期分为两类,分别是:
-
生命周期函数:是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行，允许程序员在特定时间点执行某些特定的操作
-
生命周期强调的是时间段，生命周期函数强调的是时间点
-
应用生命周期函数
//app.js 文件
App({
//小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作
onLaunch: function(options) { },
//小程序启动，或从后台进入前台显示时触发。
onShow : function(options) { },
//小程序从前台进入后台时触发。
onHide : function() { }
})
- 页面生命周期函数
//页面的.js 文件
Page({
onLoad : function(options) { },//监听页面加载，一个页面只调1次
onshow : function() { },//监听页面显示
onReady : function() { }，//监听页面初次渲染完成，一个页面只调用1次
onHide: function() { },//监听页面隐藏
onUnload: function(){ } //监听页面卸载，一个页面只调用1次
})
1.4 WXS脚本
概述
-
WXS (WeiXin Script)是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构
-
WXML中无法调用在页面的.js中定义的函数，但是，WXML中可以调用WXS中定义的函数
-
WXS与JavaScript的关系
-
wxs有自己的数据类型
- number数值类型、string字符串类型、boolean布尔类型、object对象类型、function函数类型、array数组类型、date日期类型、regexp 正则
-
wxs不支持类似于ES6及以上的语法形式
- 不支持: let. const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
- 支持: var定义变量、普通function函数等类似于ES5的语法
-
wxs遵循CommonJS规范
- module对象、require()函数、module.exports对象
-
基础语法
- 内嵌wxs脚本
- 外联wxs脚本
wxs的特点
- 大量借鉴JavaScript的语法(但是是两种不同的语言)
- 不能作为组件的事件回调(配合Mustache语法使用)
- 隔离性(不能调用js定义的函数及小程序提供的API)
- 性能好(iOS上比js快2-20倍）
