微信小程序 - 视图与逻辑 介绍

视图与逻辑

一、页面导航

1. 什么是页面导航

在小程序开发中，页面导航是指在不同页面之间进行切换的过程。通过页面导航，用户可以在小程序中流畅地浏览不同的内容和功能模块。

2. 小程序中实现页面导航的两种方式

在小程序中，实现页面导航有两种主要方式：声明式导航和编程式导航。

1、页面导航 - 声明式导航

声明式导航是通过在页面的配置中声明导航信息来实现的，开发者只需在页面的配置文件中定义导航相关的信息，小程序框架会自动处理导航逻辑。

1.1 导航到tabBar页面

在声明式导航中，可以通过使用 <navigator> 组件来实现导航到tabBar页面，使用 open-type='switchTab' 来切换到底部导航栏的页面。

<!-- pageA.wxml -->
<navigator url='/pages/tab1/index' open-type='switchTab'>导航到Tab 1页面</navigator>

1.2 导航到非tabBar页面

同样，在声明式导航中，可以使用 <navigator> 组件来导航到非tabBar页面。

<!-- pageB.wxml -->
<navigator url='/pages/otherPage/index'>导航到其他页面</navigator>

1.3 后退导航

声明式导航也支持后退导航，用户可以通过系统的返回按钮或手势返回上一页面。

<!-- pageC.wxml -->
<navigator open-type='navigateBack'>后退导航</navigator>

2、页面导航 - 编程式导航

编程式导航是通过调用小程序框架提供的API来实现页面导航，开发者可以在代码中灵活控制导航逻辑。

2.1 导航到tabBar页面

与声明式导航类似，编程式导航也允许开发者通过调用API导航到tabBar页面。

// pageA.js
wx.switchTab({
  url: '/pages/tab1/index'
});

2.2 导航到非tabBar页面

编程式导航同样支持导航到非tabBar页面，开发者可以在代码中指定跳转的页面路径。

// pageB.js
wx.navigateTo({
  url: '/pages/otherPage/index'
});

2.3 后退导航

通过编程式导航，开发者可以实现更精细的后退导航控制，例如在特定条件下执行后退操作。

// pageC.js
wx.navigateBack({
  delta: 1
});

3、页面导航 - 导航传参

在开发过程中，有时候需要在不同页面之间传递参数。页面导航支持导航传参，分为声明式导航和编程式导航两种方式。

3.1 声明式导航传参

通过在页面路径中配置参数，实现声明式导航时可以传递参数给目标页面。

<!-- pageD.wxml -->
<navigator url='/pages/paramPage/index?param1=value1&param2=value2'>带参数导航</navigator>

3.2 编程式导航传参

在编程式导航中，开发者可以通过API调用传递参数给目标页面。

// pageE.js
wx.navigateTo({
  url: '/pages/paramPage/index?param1=value1&param2=value2'
});

3.3 在 onLoad 中接收导航参数

在目标页面的 onLoad 生命周期中，可以通过获取参数对象来获取传递过来的导航参数。

// paramPage.js
Page({
  onLoad: function(options) {
    console.log(options.param1); // 输出: value1
    console.log(options.param2); // 输出: value2
  }
});

以上是关于小程序中页面导航的基本介绍，下一节将深入讨论页面事件的处理方式。

二、页面事件

1、页面事件 - 下拉刷新事件

1.1 什么是下拉刷新

下拉刷新是一种用户在页面顶部向下滑动时触发的事件，通常用于实现页面的数据更新或重新加载。

1.2 启用下拉刷新

要启用下拉刷新功能，需要在页面配置文件中设置 enablePullDownRefresh 为 true。

// pageA.json
{
  "navigationBarTitleText": "Page A",
  "enablePullDownRefresh": true
}

除了在页面配置中开启全局下拉刷新，还可以在页面中使用 <scroll-view> 组件实现局部的下拉刷新。在 <scroll-view> 组件中设置 bindscrolltoupper 事件监听滚动到顶部时触发的下拉刷新。

<!-- pageB.wxml -->
<scroll-view bindscrolltoupper="onPullDownRefresh" style="height: 100vh;">
  <!-- 页面内容 -->
</scroll-view>

1.3 配置下拉刷新窗口的样式

可以通过在页面配置中设置 backgroundTextStyle 和 backgroundColor 来配置下拉刷新窗口的样式。

// pageA.json
{
  "navigationBarTitleText": "Page A",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "backgroundColor": "#f8f8f8"
}

1.4 监听页面的下拉刷新事件

在页面的逻辑文件中，通过监听页面的 onPullDownRefresh 事件来监听下拉刷新的操作。

// pageA.js
Page({
  onPullDownRefresh: function() {
    // 执行下拉刷新的逻辑
    console.log("下拉刷新事件触发");
  }
});

1.5 停止下拉刷新的效果

在下拉刷新的逻辑执行完毕后，需要调用 wx.stopPullDownRefresh() 来停止下拉刷新的效果。

// pageA.js
Page({
  onPullDownRefresh: function() {
    // 执行下拉刷新的逻辑
    console.log("下拉刷新事件触发");

    // 停止下拉刷新的效果
    wx.stopPullDownRefresh();
  }
});

2、页面事件 - 上拉触底事件

2.1 什么是上拉触底

上拉触底是一种用户在页面底部向上滑动时触发的事件，通常用于实现分页加载更多数据。

2.2 监听页面的上拉触底事件

在页面的逻辑文件中，通过监听页面的 onReachBottom 事件来监听上拉触底的操作。

// pageA.js
Page({
  onReachBottom: function() {
    // 执行上拉触底的逻辑
    console.log("上拉触底事件触发");
  }
});

2.3 配置上拉触底距离

可以通过在页面配置中设置 onReachBottomDistance 来配置上拉触底的距离，即当距离底部指定距离时触发上拉触底事件。

// pageA.json
{
  "navigationBarTitleText": "Page A",
  "onReachBottomDistance": 50
}

以上是关于小程序中页面事件的详细介绍，全局和局部下拉刷新的使用方式，以及上拉触底事件的监听和配置。下一节将讨论页面的生命周期。

三、生命周期

1、什么是生命周期

生命周期是指一个小程序从被创建到被销毁的整个过程。在这个过程中，小程序会经历不同的阶段和事件，开发者可以通过生命周期函数来执行相应的逻辑操作。

2、生命周期的分类

小程序的生命周期可以分为两类：应用生命周期和页面生命周期。

• 应用生命周期： 小程序整体的生命周期，包括小程序的启动、前台运行、后台运行和销毁。

• 页面生命周期： 单个页面的生命周期，包括页面的加载、显示、初次渲染、再次渲染、隐藏和卸载。

3、什么是生命周期函数

生命周期函数是在特定时机会被自动触发的函数，开发者可以在这些函数中编写相应的逻辑代码。在小程序中，生命周期函数包括应用生命周期函数和页面生命周期函数。

4、生命周期函数的分类

4.1 应用生命周期函数

• onLaunch(options): 当小程序启动时触发，全局只触发一次。

• onShow(options): 当小程序进入前台显示状态时触发。

• onHide(): 当小程序进入后台状态时触发。

4.2 页面生命周期函数

• onLoad(options): 当页面加载时触发，一次生命周期中只会触发一次。

• onShow(): 当页面显示时触发。

• onReady(): 当页面初次渲染完成时触发。

• onHide(): 当页面隐藏时触发。

• onUnload(): 当页面卸载时触发。

5、应用的生命周期函数

应用的生命周期函数是指在整个小程序运行过程中会被触发的函数，可以在 app.js 文件中定义。

// app.js
App({
  onLaunch: function(options) {
    // 小程序启动时触发
  },
  onShow: function(options) {
    // 小程序进入前台时触发
  },
  onHide: function() {
    // 小程序进入后台时触发
  }
});

6、页面的生命周期函数

页面的生命周期函数是指在页面加载、显示、渲染和卸载等不同阶段会被触发的函数，可以在每个页面的 pageX.js 文件中定义。

// pageA.js
Page({
  onLoad: function(options) {
    // 页面加载时触发
  },
  onShow: function() {
    // 页面显示时触发
  },
  onReady: function() {
    // 页面初次渲染完成时触发
  },
  onHide: function() {
    // 页面隐藏时触发
  },
  onUnload: function() {
    // 页面卸载时触发
  }
});

以上是关于小程序生命周期的基本介绍，开发者可以根据实际需求在不同的生命周期函数中编写相应的业务逻辑。

四、WXS脚本

1、WXS 脚本 - 概述

1.1 什么是 wxs

WXS（WeiXin Script）是小程序的一种脚本语言，用于在 WXML 中对数据进行逻辑处理。它类似于 JavaScript，但有一些特定的语法和限制。

1.2 wxs 的应用场景

WXS 主要用于处理小程序页面中的逻辑，例如数据的计算、处理字符串等。它可以被用在 WXML 中进行数据绑定和逻辑运算。

1.3 wxs 和 JavaScript 的关系*

WXS 与 JavaScript 有相似之处，但并不完全相同。WXS 主要用于小程序，它的语法和能力受到一些限制，使其更适合于小程序环境下的使用。

2、WXS 脚本 - 基础语法

2.1 内嵌 wxs 脚本

在 WXML 文件中，可以使用 <wxs> 标签来嵌入 wxs 脚本。内嵌的 wxs 脚本可以直接在 WXML 中进行调用。

<!-- pageA.wxml -->
<wxs module="m1">
  var add = function(a, b) {
    return a + b;
  }
  module.exports.add = add;
</wxs>

<view>{{ m1.add(1, 2) }}</view>

2.2 定义外联的 wxs 脚本

也可以将 wxs 脚本定义在外部文件，使用 <wxs> 标签的 src 属性引入外联的 wxs 脚本。

<!-- util.wxs -->
var multiply = function(a, b) {
  return a * b;
}
module.exports.multiply = multiply;

<!-- pageB.wxml -->
<wxs src="./util.wxs" module="m2"></wxs>

<view>{{ m2.multiply(3, 4) }}</view>

2.3 使用外联的 wxs 脚本

外联的 wxs 脚本可以在 WXML 中通过模块的方式调用。

<!-- pageC.wxml -->
<wxs src="/utils/util.wxs" module="m3"></wxs>

<view>{{ m3.multiply(5, 6) }}</view>

3、WXS 脚本 - WXS 的特点

3.1 与 JavaScript 不同

WXS 在语法和功能上有一些差异，不同于 JavaScript。开发者在使用 WXS 时需注意其特殊的语法和限制。

3.2 不能作为组件的事件回调

WXS 不能作为组件的事件回调函数，不能直接绑定在组件的事件属性上。

3.3 隔离性

WXS 具有独立的作用域，不受页面的其他脚本影响。它的变量和函数不会与页面的 JavaScript 全局作用域发生冲突。

3.4 性能好

由于 WXS 是小程序专用的脚本语言，它在小程序环境下运行更高效，具有较好的性能。

以上是关于 WXS 脚本的基本介绍，开发者可以根据实际需求使用 WXS 在小程序中进行数据处理和逻辑运算。