1. 页面导航
导航方式
-
声明式导航 :使用
<navigator>
组件实现页面跳转。javascript<!-- 导航到tabBar页面 --> <navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator> <!-- 导航到非tabBar页面 --> <navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator> <!-- 后退导航 --> <navigator open-type='navigateBack' delta='1'>返回上一页</navigator>
- 跳转到
tabBar
页面:需指定url
属性(以/
开头)和open-type="switchTab"
。 - 跳转到非
tabBar
页面:指定url
属性(以/
开头),open-type="navigate"
(可省略)。 - 后退导航:指定
open-type="navigateBack"
和delta
属性(后退层级,可省略)。
- 跳转到
-
编程式导航:调用小程序的导航 API 实现页面跳转。
javascript// 导航到tabBar页面 Page({ gotoMessage() { wx.switchTab({ url: '/pages/message/message' }) } }) // 导航到非tabBar页面 Page({ gotoInfo() { wx.navigateTo({ url: '/pages/info/info' }) } }) // 后退导航 Page({ gotoBack() { wx.navigateBack() } })
- 跳转到
tabBar
页面:调用wx.switchTab
方法,传入包含url
等属性的对象。 - 跳转到非
tabBar
页面:调用wx.navigateTo
方法,传入包含url
等属性的对象。 - 后退导航:调用
wx.navigateBack
方法,可传入delta
属性。
- 跳转到
导航传参
-
声明式导航传参:
navigator
组件的url
属性后面携带参数,格式为?参数键=参数值&参数键=参数值
。javascript<!-- 声明式导航传参 --> <navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
-
编程式导航传参:调用
wx.navigateTo
方法跳转页面时,url
属性中携带参数。javascript// 编程式导航传参 Page({ gotoInfo2() { wx.navigateTo({ url: '/pages/info/info?name=ls&gender=男' }) } })
-
在
onLoad
中接收导航参数:通过options
对象获取传递过来的参数。javascript// 在onLoad中接收导航参数 Page({ onLoad: function (options) { console.log(options) } })
2. 页面事件
下拉刷新事件
javascript
// 全局开启下拉刷新(app.json示例)
{
"window": {
"enablePullDownRefresh": true
}
}
// 局部开启下拉刷新(页面.json示例)
{
"enablePullDownRefresh": true
}
// 配置下拉刷新窗口的样式(页面.json示例)
{
"backgroundColor": "#ffffff",
"backgroundTextStyle": "dark"
}
// 监听页面的下拉刷新事件
Page({
data: {
count: 0
},
onPullDownRefresh: function () {
this.setData({
count: 0
})
wx.stopPullDownRefresh()
},
countAdd() {
this.setData({
count: this.data.count + 1
})
}
})
-
启用下拉刷新
- 全局开启:在
app.json
的window
节点中,将enablePullDownRefresh
设置为true
。 - 局部开启:在页面的
.json
配置文件中,将enablePullDownRefresh
设置为true
(推荐)。
- 全局开启:在
-
配置下拉刷新窗口的样式 :通过
backgroundColor
(16 进制颜色值)和backgroundTextStyle
(dark
或light
)配置。 -
监听页面的下拉刷新事件 :在页面的
.js
文件中,通过onPullDownRefresh
函数监听,可重置数据并手动停止下拉刷新(wx.stopPullDownRefresh
)。
上拉触底事件
javascript
// 监听页面的上拉触底事件
Page({
onReachBottom: function () {
console.log("触发了上拉触底的事件")
}
})
// 配置上拉触底距离(页面.json示例)
{
"onReachBottomDistance": 80
}
-
监听页面的上拉触底事件 :在页面的
.js
文件中,通过onReachBottom
函数监听。 -
配置上拉触底距离 :在全局或页面的
.json
配置文件中,通过onReachBottomDistance
属性配置,默认50px
。 -
上拉触底案例
javascript// 上拉触底案例 Page({ data: { colorList: [] }, onLoad: function (options) { this.getColors() }, onReachBottom: function () { this.getColors() }, getColors() { wx.showLoading({ title: "数据加载中..." }) wx.request({ url: 'https://www.escook.cn/api/color', method: 'GET', success: ({ data: res }) => { this.setData({ colorList: [...this.data.colorList,...res.data] }) }, complete: () => { wx.hideLoading() } }) } })
- 案例效果展示:加载随机颜色数据,上拉触底加载更多。
- 实现步骤:定义获取随机颜色方法、页面加载时获取初始数据、渲染 UI 结构、上拉触底时调用方法、添加
loading
提示效果、对上拉触底进行节流处理。
3. 生命周期
- 生命周期概念:指一个对象从创建到运行再到销毁的整个阶段。小程序的生命周期包括应用生命周期(启动到关闭)和页面生命周期(加载到卸载)。
- 生命周期函数 :由小程序框架提供的内置函数,伴随生命周期自动按次序执行。
-
应用的生命周期函数 :在
app.js
中声明,包括onLaunch
(初始化完成时触发)、onShow
(启动或从后台进入前台显示时触发)、onHide
(从前台进入后台时触发)。javascriptApp({ onLaunch: function (options) { // 小程序初始化完成时,可做一些初始化工作 }, onShow: function (options) { // 小程序启动,或从后台进入前台显示时触发 }, onHide: function () { // 小程序从前台进入后台时触发 } })
-
页面的生命周期函数 :在页面的
.js
文件中声明,包括onLoad
(监听页面加载,只调用 1 次)、onShow
(监听页面显示)、onReady
(监听页面初次渲染完成,只调用 1 次)、onHide
(监听页面隐藏)、onUnload
(监听页面卸载,只调用 1 次)。javascriptPage({ onLoad: function (options) { // 监听页面加载,一个页面只调用1次 }, onShow: function () { // 监听页面显示 }, onReady: function () { // 监听页面初次渲染完成,一个页面只调用1次 }, onHide: function () { // 监听页面隐藏 }, onUnload: function () { // 监听页面卸载,一个页面只调用1次 } })
-
4. WXS 脚本
概述
- 定义 :小程序独有的一套脚本语言,结合
WXML
构建页面结构。 - 应用场景 :典型应用场景是 "过滤器",因为
wxml
中无法调用页面.js
中定义的函数,但可调用wxs
中定义的函数。 - 与 JavaScript 的关系
- 有自己的数据类型。
- 不支持类似于
ES6
及以上的语法形式,支持类似于ES5
的语法。 - 遵循
CommonJS
规范。
基础语法
-
内嵌 wxs 脚本 :编写在
wxml
文件中的<wxs>
标签内,需提供module
属性。javascript<view>{m1.toUpper(username)}</view> <wxs module="m1"> // 将文本转为大写形式zs->ZS module.exports.toUpper = function(str) { return str.toUpperCase() } </wxs>
-
定义外联的 wxs 脚本 :编写在以
.wxs
为后缀名的文件内。javascript// tools.wxs文件 function toLower(str) { return str.toLowerCase() } module.exports = { toLower: toLower }
-
使用外联的 wxs 脚本 :在
wxml
中引入时,需为<wxs>
标签添加module
和src
属性。javascript<view>{m2.toLower(country)}</view> <wxs src="../../utils/tools.wxs" module="m2"></wxs>
WXS 的特点
- 与
JavaScript
不同:语法相似但本质不同。 - 不能作为组件的事件回调。
- 隔离性:运行环境与其他
JavaScript
代码隔离。 - 性能好:在
iOS
设备上比JavaScript
代码快。
5. 自定义组件
组件的创建与引用
-
创建组件 :在项目根目录创建
components
文件夹,在其中创建组件文件夹,右键点击 "新建 Component" 并输入组件名称,会自动生成.js
、.json
、.wxml
和.wxss
四个文件。 -
test.js
javascriptComponent({ // 组件逻辑代码 })
-
test.json
javascript{ "component": true }
-
test.wxml
javascript<view>这是一个自定义组件</view>
-
test.wxss
javascriptview { color: red; }
-
引用组件
-
局部引用 :在页面的
.json
配置文件中引用,如{"usingComponents": {"my-test1": "/components/test1/test1"}}
,在页面的.wxml
文件中使用<my-test1></my-test1>
。javascript{ "usingComponents": { "my-test": "/components/test1/test1" } }
javascript<my-test></my-test>
-
全局引用 :在
app.json
全局配置文件中引用,如{"usingComponents": {"my-test2": "/components/test2/test2"}}
,在页面的.wxml
文件中使用<my-test2></my-test2>
。javascript{ "usingComponents": { "my-global-test": "/components/global-test/global-test" }, "pages": [/* 页面列表 */] }
javascript<my-global-test></my-global-test>
-
选择引用方式:若组件在多个页面常用,建议全局引用;只在特定页面使用,建议局部引用。
-
-
组件和页面的区别 :组件和页面都由四个文件组成,但组件的
.json
文件需声明"component": true
属性,.js
文件调用Component()
函数,事件处理函数定义在methods
节点中。
组件样式
-
组件样式隔离 :默认情况下,自定义组件样式只对自身生效,
app.wxss
中的全局样式对组件无效,只有class
选择器有样式隔离效果。javascript.red-text { color: red; }
javascript<view class="blue-text">页面文本</view> <my-test></my-test>
-
修改组件的样式隔离选项 :可通过
styleIsolation
修改,在组件的.js
文件中Component({options: {styleIsolation: 'isolated'}})
javascriptComponent({ options: { styleIsolation: 'apply-shared' } })
或在
.json
文件中{"styleIsolation": "isolated"}
设置,可选值有isolated
(启用样式隔离)、apply-shared
(页面样式影响组件,组件样式不影响页面)、shared
(页面和组件样式相互影响)。javascript{ "styleIsolation": "apply-shared" }
组件数据、方法和属性
-
data 数据 :用于组件模板渲染的私有数据,定义在
data
节点中javascriptComponent({ data: { count: 0 } })
-
methods 方法 :事件处理函数和自定义方法定义在
methods
节点中javascriptComponent({ methods: { increment() { this.setData({ count: this.data.count + 1 }); } } })
-
properties 属性 :组件的对外属性,用来接收外界传递的数据,可完整定义
properties: {max: {type: Number, value: 10}}
javascriptComponent({ properties: { maxValue: { type: Number, value: 10 } } })
或简化定义
max: Number
javascriptComponent({ properties: { maxValue: Number } })
在组件中使用
<my-test1 max="10"></my-test1>
javascript<my-test maxValue="5"></my-test>
-
data 和 properties 的区别 :用法相同,都是可读可写,
data
倾向于存储私有数据,properties
倾向于存储外界传递的数据。 -
使用 setData 修改 properties 的值 :可用于页面渲染或使用
setData
重新赋值,如在组件的.wxml
文件中<view>max属性的值为:{``{max}}</view>
,在.js
文件中Component({properties: {max: Number}, methods: {addCount() {this.setData({max: this.properties.max + 1});}}})
。
数据监听器
-
定义 :用于监听和响应属性和数据字段的变化,类似于
vue
中的watch
侦听器,基本语法格式为Component({observers: {'字段A,字段B': function(字段A的新值,字段B的新值) { // do something }}})
。 -
基本用法 :
javascriptComponent({ data: { num1: 0, num2: 0, sum: 0 }, methods: { incrementNum1() { this.setData({ num1: this.data.num1 + 1 }); }, incrementNum2() { this.setData({ num2: this.data.num2 + 1 }); } }, observers: { 'num1,num2': function (num1, num2) { this.setData({ sum: num1 + num2 }); } } })
-
监听对象属性的变化 :支持监听对象中单个或多个属性的变化,如
Component({observers: {"对象.属性A,对象.属性B': function(属性A的新值,属性B的新值) { // do something }}})
。
纯数据字段
javascript
Component({
options: {
pureDataPattern: /^_/
},
data: {
_privateData: 10,
publicData: 20
}
})
- 定义 :不用于界面渲染的
data
字段。 - 使用规则 :在
Component
构造器的options
节点中,指定pureDataPattern
为正则表达式,符合的字段为纯数据字段,如Component({options: {pureDataPattern: /^_/}, data: {a: true, _b: true}})
。
组件的生命周期
javascript
Component({
lifetimes: {
created: function () {
// 在这里可以给组件的this添加一些自定义的属性字段
this.myProperty = 'created';
}
}
})
javascript
Component({
lifetimes: {
attached: function () {
// 在这里可以进行一些初始化操作,如获取数据
this.setData({
dataFromServer: '初始化数据'
});
}
}
})
javascript
Component({
lifetimes: {
detached: function () {
// 在这里可以进行一些清理操作,如清除定时器
clearTimeout(this.timer);
}
}
})
- 全部生命周期函数 :包括
created
(组件实例创建时执行)、attached
(进入页面节点树时执行)、ready
(视图层布局完成后执行)、moved
(被移动到节点树另一个位置时执行)、detached
(从页面节点树移除时执行)、error
(组件方法抛出错误时执行)。 - 主要生命周期函数 :
created
(此时不能调用setData
,可添加自定义属性字段)、attached
(this.data
已初始化完毕,可进行初始化工作)、detached
(适合做清理工作),生命周期函数可在lifetimes
节点内声明。
组件所在页面的生命周期
javascript
Component({
pageLifetimes: {
show: function () {
// 在这里可以根据页面展示重新生成一些数据
this.setData({
pageData: '页面展示时更新的数据'
});
},
hide: function () {
// 在这里可以进行一些与页面隐藏相关的操作
this.cleanUp();
},
resize: function (size) {
// 这里可以根据页面尺寸变化进行相关操作
console.log('页面尺寸变化:', size);
}
}
})
- 定义 :自定义组件行为依赖页面状态变化时用到,包括
show
(页面被展示时执行)、hide
(页面被隐藏时执行)、resize
(页面尺寸变化时执行),这些函数需定义在pageLifetimes
节点中。
插槽
-
定义 :在自定义组件的
wxml
结构中,<slot>
节点用于承载组件使用者提供的wxml
结构。 -
单个插槽 :默认每个自定义组件只允许一个
<slot>
, -
组件封装者:
javascript<view class="wrapper"> <view>组件内部文本</view> <slot></slot> </view>
-
组件使用者:
javascript<my-component> <view>插槽内容</view> </my-component>
-
启用多个插槽 :在组件的
.js
文件中通过options: {multipleSlots: true}
启用。javascriptComponent({ options: { multipleSlots: true } })
-
定义多个插槽 :在组件的
.wxml
中使用多个<slot>
标签,以不同的name
区分,javascript<view class="wrapper"> <slot name="header"></slot> <view>中间文本</view> <slot name="footer"></slot> </view>
-
使用多个插槽 :在使用组件时,用
slot
属性将节点插入到不同的<slot>
中javascript<my-component> <view slot="header">头部插槽内容</view> <view slot="footer">底部插槽内容</view> </my-component>
父子组件之间的通信
- 通信方式
-
属性绑定 :父组件向子组件指定属性设置数据,父组件如
javascript<parent-component> <child-component value="{{parentValue}}"></child-component> </parent-component>
,子组件在
properties
节点声明对应属性。javascriptComponent({ properties: { value: String } })
-
事件绑定 :子组件向父组件传递数据,步骤包括父组件定义函数,在
wxml
中传递函数引用给子组件,子组件通过this.triggerEvent('自定义事件名称', { /* 参数对象 */ })
发送数据,父组件通过e.detail
获取数据。 -
父组件(在
js
文件中定义函数):javascriptPage({ methods: { handleChildData(data) { console.log('收到子组件数据:', data); } } })
-
父组件(在
wxml
文件中传递函数引用给子组件):javascript<parent-component> <child-component bind:event="handleChildData"></child-component> </parent-component>
-
子组件(在
js
文件中发送数据):javascriptComponent({ methods: { sendDataToParent() { this.triggerEvent('event', { data: '子组件数据' }); } } })
-
获取组件实例 :父组件通过
this.selectComponent("id或class选择器")
获取子组件实例对象,访问其数据和方法。 -
父组件:
javascript<parent-component> <child-component id="child-component-id"></child-component> </parent-component>
-
父组件(在
js
文件中获取子组件实例并操作):javascriptPage({ methods: { getChildComponent() { const child = this.selectComponent('#child-component-id'); child.setData({ value: '新值' }); child.doSomeMethod(); } } })
-
behaviors
-
定义 :用于实现组件间代码共享,类似于
Vue.js
中的 "mixins
"。 -
工作方式 :每个
behavior
包含属性、数据、生命周期函数和方法,组件引用时会合并这些内容,组件可引用多个behavior
,behavior
也可引用其他behavior
。 -
创建 behavior :调用
Behavior(Object object)
方法创建javascriptconst myBehavior = Behavior({ properties: {}, data: { behaviorData: 'behavior数据' }, methods: { behaviorMethod() { console.log('behavior方法'); } } }); module.exports = myBehavior;
-
导入并使用 behavior :使用
require()
方法导入,挂载到behaviors
数组节点中javascriptconst myBehavior = require('./my-behavior'); Component({ behaviors: [myBehavior], methods: { useBehaviorMethod() { this.behaviorMethod(); } } })
其他内容
- 使用 npm 包:文档中未详细介绍相关内容,需进一步查阅相关资料了解具体使用方法。
- 全局数据共享:文档中未详细介绍相关内容,需进一步查阅相关资料了解具体实现方式。
- 分包:文档中未详细介绍相关内容,需进一步查阅相关资料了解具体操作和作用。
- 案例 - 自定义 tabBar:文档中未详细介绍相关内容,需进一步查阅相关资料了解具体案例实现过程和效果。