小程序页面结构

介绍

微信小程序的页面结构是开发小程序的基础。每个页面由四个文件组成：WXML、WXSS、JS 和 JSON。这些文件分别负责页面的结构、样式、逻辑和配置。理解这些文件的作用及其相互关系，是掌握小程序开发的关键。

页面文件的组成

1. WXML 文件

WXML（WeiXin Markup Language）是小程序的页面结构文件，类似于 HTML。它用于定义页面的结构和内容。WXML 支持数据绑定、条件渲染、列表渲染等功能。

wxml
<view class="container">
  <text>{{message}}</text>
  <button bindtap="changeMessage">点击我</button>
</view>

在上面的示例中，{{message}} 是一个数据绑定表达式，bindtap 是一个事件绑定，当按钮被点击时，会触发 changeMessage 方法。

2. WXSS 文件

WXSS（WeiXin Style Sheet）是小程序的样式文件，类似于 CSS。它用于定义页面的样式。WXSS 支持大部分 CSS 特性，并且引入了 rpx 单位，用于适配不同屏幕尺寸。

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

text {
  font-size: 32rpx;
  color: #333;
}

在上面的示例中，container 类用于居中显示内容，text 元素设置了字体大小和颜色。

3. JS 文件

JS 文件是小程序的逻辑文件，用于处理页面的交互逻辑。它包含了页面的生命周期函数、事件处理函数等。

javascript
Page({
  data: {
    message: 'Hello, 小程序!'
  },
  changeMessage: function() {
    this.setData({
      message: '你点击了按钮!'
    });
  }
});

在上面的示例中，Page 函数用于定义页面的逻辑。data 对象用于存储页面的数据，changeMessage 方法用于更新 message 的值。

4. JSON 文件

JSON 文件是小程序的配置文件，用于配置页面的窗口表现、导航栏、标题等。

json
{
  "navigationBarTitleText": "我的小程序",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}

在上面的示例中，navigationBarTitleText 设置了导航栏的标题，navigationBarBackgroundColor 设置了导航栏的背景颜色，navigationBarTextStyle 设置了导航栏文字的颜色。

页面生命周期

小程序页面有特定的生命周期函数，开发者可以在这些函数中执行相应的操作。常见的生命周期函数包括：

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

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

实际案例

假设我们要开发一个简单的计数器小程序，用户点击按钮时，计数器加一。

WXML 文件

wxml
<view class="container">
  <text>当前计数：{{count}}</text>
  <button bindtap="incrementCount">增加计数</button>
</view>

WXSS 文件

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

text {
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

JS 文件

javascript
Page({
  data: {
    count: 0
  },
  incrementCount: function() {
    this.setData({
      count: this.data.count + 1
    });
  }
});

JSON 文件

json
{
  "navigationBarTitleText": "计数器"
}

总结

通过本文，我们了解了微信小程序页面结构的基本组成部分，包括 WXML、WXSS、JS 和 JSON 文件的作用及其相互关系。我们还通过一个简单的计数器案例，展示了这些文件在实际开发中的应用。

提示

在实际开发中，合理使用页面生命周期函数可以提高页面的性能和用户体验。

附加资源

练习

创建一个新的小程序页面，实现一个简单的待办事项列表。
尝试使用 WXML 的条件渲染功能，根据待办事项的状态显示不同的样式。
在 JSON 文件中配置页面的导航栏标题和背景颜色。

通过完成这些练习，你将更深入地理解小程序页面结构的各个部分及其在实际开发中的应用。

介绍​

页面文件的组成​

1. WXML 文件​

2. WXSS 文件​

3. JS 文件​

4. JSON 文件​

页面生命周期​

实际案例​

WXML 文件​

WXSS 文件​

JS 文件​

JSON 文件​

总结​

附加资源​

练习​

介绍