【微信小程序前端开发】入门Day03 —— 页面导航、事件、生命周期、WXS 脚本及自定义组件

1. 页面导航

• 导航方式

  • 声明式导航：使用<navigator>组件实现页面跳转。

    <!-- 导航到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 实现页面跳转。

    // 导航到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属性后面携带参数，格式为?参数键=参数值&参数键=参数值。

    <!-- 声明式导航传参 -->
    <navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

  • 编程式导航传参：调用wx.navigateTo方法跳转页面时，url属性中携带参数。

    // 编程式导航传参
    Page({gotoInfo2() {wx.navigateTo({url: '/pages/info/info?name=ls&gender=男'})}
    })

  • 在onLoad中接收导航参数：通过options对象获取传递过来的参数。

    // 在onLoad中接收导航参数
    Page({onLoad: function (options) {console.log(options)}
    })

2. 页面事件

• 下拉刷新事件

  // 全局开启下拉刷新（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）。

• 上拉触底事件

  // 监听页面的上拉触底事件
  Page({onReachBottom: function () {console.log("触发了上拉触底的事件")}
  })// 配置上拉触底距离（页面.json示例）
  {"onReachBottomDistance": 80
  }

  • 监听页面的上拉触底事件：在页面的.js文件中，通过onReachBottom函数监听。
  • 配置上拉触底距离：在全局或页面的.json配置文件中，通过onReachBottomDistance属性配置，默认50px。
  • 上拉触底案例

    // 上拉触底案例
    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（从前台进入后台时触发）。

    App({onLaunch: function (options) {// 小程序初始化完成时，可做一些初始化工作},onShow: function (options) {// 小程序启动，或从后台进入前台显示时触发},onHide: function () {// 小程序从前台进入后台时触发}
    })

  • 页面的生命周期函数：在页面的.js文件中声明，包括onLoad（监听页面加载，只调用 1 次）、onShow（监听页面显示）、onReady（监听页面初次渲染完成，只调用 1 次）、onHide（监听页面隐藏）、onUnload（监听页面卸载，只调用 1 次）。

    Page({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属性。

    <view>{m1.toUpper(username)}</view>
    <wxs module="m1">// 将文本转为大写形式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>标签添加module和src属性。

    <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

  Component({// 组件逻辑代码
  })

• test.json

  {"component": true
  }

• test.wxml

  <view>这是一个自定义组件</view>

• test.wxss

  view {color: red;
  }

• 引用组件
  • 局部引用：在页面的.json配置文件中引用，如{"usingComponents": {"my-test1": "/components/test1/test1"}}，在页面的.wxml文件中使用<my-test1></my-test1>。

    {"usingComponents": {"my-test": "/components/test1/test1"}
    }

    <my-test></my-test>

  • 全局引用：在app.json全局配置文件中引用，如{"usingComponents": {"my-test2": "/components/test2/test2"}}，在页面的.wxml文件中使用<my-test2></my-test2>。

    {"usingComponents": {"my-global-test": "/components/global-test/global-test"},"pages": [/* 页面列表 */]
    }

    <my-global-test></my-global-test>

  • 选择引用方式：若组件在多个页面常用，建议全局引用；只在特定页面使用，建议局部引用。
• 组件和页面的区别：组件和页面都由四个文件组成，但组件的.json文件需声明"component": true属性，.js文件调用Component()函数，事件处理函数定义在methods节点中。

组件样式

• 组件样式隔离：默认情况下，自定义组件样式只对自身生效，app.wxss中的全局样式对组件无效，只有class选择器有样式隔离效果。

  .red-text {color: red;
  }

  <view class="blue-text">页面文本</view>
  <my-test></my-test>

• 修改组件的样式隔离选项：可通过styleIsolation修改，在组件的.js文件中Component({options: {styleIsolation: 'isolated'}})

  Component({options: {styleIsolation: 'apply-shared'}
  })

  或在.json文件中{"styleIsolation": "isolated"}设置，可选值有isolated（启用样式隔离）、apply-shared（页面样式影响组件，组件样式不影响页面）、shared（页面和组件样式相互影响）。

  {"styleIsolation": "apply-shared"
  }

组件数据、方法和属性

• data 数据：用于组件模板渲染的私有数据，定义在data节点中

  Component({data: {count: 0}
  })

• methods 方法：事件处理函数和自定义方法定义在methods节点中

  Component({methods: {increment() {this.setData({count: this.data.count + 1});}}
  })

• properties 属性：组件的对外属性，用来接收外界传递的数据，可完整定义properties: {max: {type: Number, value: 10}}

  Component({properties: {maxValue: {type: Number,value: 10}}
  })

  或简化定义max: Number

  Component({properties: {maxValue: Number}
  })

  在组件中使用<my-test1 max="10"></my-test1>

  <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 }}})。
• 基本用法：

  Component({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 }}})。

纯数据字段

Component({options: {pureDataPattern: /^_/},data: {_privateData: 10,publicData: 20}
})

• 定义：不用于界面渲染的data字段。
• 使用规则：在Component构造器的options节点中，指定pureDataPattern为正则表达式，符合的字段为纯数据字段，如Component({options: {pureDataPattern: /^_/}, data: {a: true, _b: true}})。

组件的生命周期

Component({lifetimes: {created: function () {// 在这里可以给组件的this添加一些自定义的属性字段this.myProperty = 'created';}}
})

Component({lifetimes: {attached: function () {// 在这里可以进行一些初始化操作，如获取数据this.setData({dataFromServer: '初始化数据'});}}
})

Component({lifetimes: {detached: function () {// 在这里可以进行一些清理操作，如清除定时器clearTimeout(this.timer);}}
})

• 全部生命周期函数：包括created（组件实例创建时执行）、attached（进入页面节点树时执行）、ready（视图层布局完成后执行）、moved（被移动到节点树另一个位置时执行）、detached（从页面节点树移除时执行）、error（组件方法抛出错误时执行）。
• 主要生命周期函数：created（此时不能调用setData，可添加自定义属性字段）、attached（this.data已初始化完毕，可进行初始化工作）、detached（适合做清理工作），生命周期函数可在lifetimes节点内声明。

组件所在页面的生命周期

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>，
•  组件封装者：

  <view class="wrapper"><view>组件内部文本</view><slot></slot>
  </view>

• 组件使用者：

  <my-component><view>插槽内容</view>
  </my-component>

• 启用多个插槽：在组件的.js文件中通过options: {multipleSlots: true}启用。

  Component({options: {multipleSlots: true}
  })

• 定义多个插槽：在组件的.wxml中使用多个<slot>标签，以不同的name区分，

  <view class="wrapper"><slot name="header"></slot><view>中间文本</view><slot name="footer"></slot>
  </view>

• 使用多个插槽：在使用组件时，用slot属性将节点插入到不同的<slot>中

  <my-component><view slot="header">头部插槽内容</view><view slot="footer">底部插槽内容</view>
  </my-component>

父子组件之间的通信

• 通信方式
  • 属性绑定：父组件向子组件指定属性设置数据，父组件如

    <parent-component><child-component value="{{parentValue}}"></child-component>
    </parent-component>

    ，子组件在properties节点声明对应属性。

    Component({properties: {value: String}
    })

  • 事件绑定：子组件向父组件传递数据，步骤包括父组件定义函数，在wxml中传递函数引用给子组件，子组件通过this.triggerEvent('自定义事件名称', { /* 参数对象 */ })发送数据，父组件通过e.detail获取数据。
  • 父组件（在js文件中定义函数）：

    Page({methods: {handleChildData(data) {console.log('收到子组件数据:', data);}}
    })

  • 父组件（在wxml文件中传递函数引用给子组件）：

    <parent-component><child-component bind:event="handleChildData"></child-component>
    </parent-component>

  • 子组件（在js文件中发送数据）：

    Component({methods: {sendDataToParent() {this.triggerEvent('event', {data: '子组件数据'});}}
    })

  • 获取组件实例：父组件通过this.selectComponent("id或class选择器")获取子组件实例对象，访问其数据和方法。
  • 父组件：

    <parent-component><child-component id="child-component-id"></child-component>
    </parent-component>

  • 父组件（在js文件中获取子组件实例并操作）：

    Page({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)方法创建

  const myBehavior = Behavior({properties: {},data: {behaviorData: 'behavior数据'},methods: {behaviorMethod() {console.log('behavior方法');}}
  });
  module.exports = myBehavior;

• 导入并使用 behavior：使用require()方法导入，挂载到behaviors数组节点中

  const myBehavior = require('./my-behavior');
  Component({behaviors: [myBehavior],methods: {useBehaviorMethod() {this.behaviorMethod();}}
  })

其他内容

• 使用 npm 包：文档中未详细介绍相关内容，需进一步查阅相关资料了解具体使用方法。
• 全局数据共享：文档中未详细介绍相关内容，需进一步查阅相关资料了解具体实现方式。
• 分包：文档中未详细介绍相关内容，需进一步查阅相关资料了解具体操作和作用。
• 案例 - 自定义 tabBar：文档中未详细介绍相关内容，需进一步查阅相关资料了解具体案例实现过程和效果。