跳到主要内容

页面创建与配置

在小程序开发中，页面是用户交互的核心部分。每个页面通常由四个文件组成：.json（配置文件）、.wxml（结构文件）、.wxss（样式文件）和 .js（逻辑文件）。本文将详细介绍如何创建和配置小程序页面，并解释页面的生命周期。

页面创建​

1. 创建页面文件​

在小程序项目中，页面通常存放在 pages 目录下。每个页面需要创建一个独立的文件夹，并在其中添加以下四个文件：

  • index.json：页面配置文件
  • index.wxml：页面结构文件
  • index.wxss：页面样式文件
  • index.js：页面逻辑文件

例如，创建一个名为 home 的页面：

bash
pages/
  home/
    index.json
    index.wxml
    index.wxss
    index.js

2. 注册页面​

在小程序的 app.json 文件中，需要将新创建的页面注册到 pages 数组中。例如：

json
{
  "pages": [
    "pages/home/index"
  ]
}
备注

注册页面时，路径不需要写文件扩展名，框架会自动寻找对应的文件。

页面配置​

1. 页面配置文件 (index.json)​

每个页面的配置文件用于设置页面的窗口表现，例如导航栏标题、背景颜色等。以下是一个简单的配置示例：

json
{
  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}
提示

页面配置会覆盖 app.json 中的全局配置。如果页面没有配置，则使用全局配置。

2. 页面结构文件 (index.wxml)​

WXML 是小程序的结构语言，类似于 HTML。以下是一个简单的页面结构示例：

xml
<view class="container">
  <text>欢迎来到首页</text>
  <button bindtap="handleClick">点击我</button>
</view>

3. 页面样式文件 (index.wxss)​

WXSS 是小程序的样式语言，类似于 CSS。以下是一个简单的样式示例：

css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

4. 页面逻辑文件 (index.js)​

页面的逻辑文件用于处理用户交互和数据绑定。以下是一个简单的逻辑示例：

javascript
Page({
  data: {
    message: 'Hello, 小程序!'
  },
  handleClick() {
    wx.showToast({
      title: '按钮被点击了',
      icon: 'none'
    });
  }
});

页面生命周期​

小程序页面有以下几个生命周期函数：

  • onLoad：页面加载时触发
  • onShow：页面显示时触发
  • onReady：页面初次渲染完成时触发
  • onHide：页面隐藏时触发
  • onUnload：页面卸载时触发

以下是一个生命周期函数的示例：

javascript
Page({
  onLoad(options) {
    console.log('页面加载', options);
  },
  onShow() {
    console.log('页面显示');
  },
  onReady() {
    console.log('页面初次渲染完成');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  }
});
警告

生命周期函数是页面开发中非常重要的部分，理解它们的触发时机有助于更好地管理页面状态。

实际案例​

假设我们要开发一个简单的待办事项列表页面，用户可以在页面中添加和删除任务。以下是一个简单的实现：

1. 页面结构 (index.wxml)​

xml
<view class="container">
  <input placeholder="输入任务" bindinput="handleInput" />
  <button bindtap="addTask">添加任务</button>
  <view wx:for="{{tasks}}" wx:key="index">
    <text>{{item}}</text>
    <button bindtap="deleteTask" data-index="{{index}}">删除</button>
  </view>
</view>

2. 页面逻辑 (index.js)​

javascript
Page({
  data: {
    tasks: [],
    inputValue: ''
  },
  handleInput(e) {
    this.setData({
      inputValue: e.detail.value
    });
  },
  addTask() {
    const { tasks, inputValue } = this.data;
    if (inputValue.trim()) {
      tasks.push(inputValue);
      this.setData({
        tasks,
        inputValue: ''
      });
    }
  },
  deleteTask(e) {
    const { index } = e.currentTarget.dataset;
    const { tasks } = this.data;
    tasks.splice(index, 1);
    this.setData({
      tasks
    });
  }
});

3. 页面样式 (index.wxss)​

css
.container {
  padding: 20px;
}
input {
  margin-bottom: 10px;
}
button {
  margin-top: 10px;
}

总结​

通过本文，我们学习了如何在小程序中创建和配置页面，掌握了页面的基本结构和生命周期函数。页面是小程序开发的核心部分，理解页面的创建和配置方法对于开发复杂的小程序至关重要。

附加资源与练习​

  • 练习：尝试创建一个新的页面，并实现一个简单的计数器功能。
  • 资源：查阅小程序官方文档以获取更多关于页面配置和生命周期的详细信息。
注意

在开发过程中，务必注意页面的生命周期，避免在错误的时机执行操作。