微信小程序开发之WXML、WXSS与JS示例详解

前言

在之前的学习中，我详细了解了小程序项目的组成结构和JSON配置文件的作用。今天将深入探讨构成小程序页面的另外三个核心文件：WXML、WXSS和JS文件。这三个文件与JSON文件共同组成了小程序的完整页面体系，它们各司其职，协同工作，为开发者提供了完整的页面开发能力。

一、WXML模板文件

1.1 什么是WXML

WXML（WeiXin Markup Language）是微信小程序框架设计的一套标签语言，用于构建小程序的页面结构。

1.2 WXML与HTML的主要区别

WXML虽然与HTML相似，但在标签体系和功能特性上有显著差异：

标签对应关系：

• <view> 代替 <div> - 视图容器，用于布局和包裹内容

• <text> 代替 <span> - 文本容器，用于包裹文本内容

• <image> 代替 <img> - 图片组件，用于显示图片

• <navigator> 代替 <a> - 导航组件，用于页面跳转

示例对比：

html

<!-- HTML写法 -->
<div class="container">
  <span class="title">产品名称</span>
  <img src="product.jpg" alt="产品图片">
  <a href="detail.html">查看详情</a>
</div>

<!-- WXML写法 -->
<view class="container">
  <text class="title">产品名称</text>
  <image src="product.jpg"></image>
  <navigator url="/pages/detail/detail">查看详情</navigator>
</view>

二、WXSS样式文件

2.1 什么是WXSS

WXSS（WeiXin Style Sheets）是微信小程序的样式语言，用于描述WXML组件的外观样式。

2.2 WXSS的主要特点

① 兼容CSSWXSS支持CSS的大部分特性，包括：

• 常用选择器（类选择器、ID选择器、元素选择器）

• 盒模型相关属性

• Flex布局和Grid布局

• 文本样式和字体设置

• 背景和边框样式

示例：

css

/* 与CSS基本一致 */
.container {
  display: flex;
  padding: 20rpx;
  background-color: #f5f5f5;
}

.title {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

② 扩展的特性

尺寸单位rpx：

• 响应式像素，可以根据屏幕宽度自适应

• 设计稿一般以750rpx为基准

css

/* 在750rpx设计稿上，375rpx相当于屏幕一半宽度 */
.box {
  width: 375rpx;  /* 在任何宽度的屏幕上都是屏幕的一半 */
  height: 200rpx;
}

样式导入：

css

/* 导入外部样式文件 */
@import "common.wxss";

2.3 样式优先级规则

text

内联样式 > 页面样式 > 全局样式

• 内联样式：直接在WXML中写的style属性

• 页面样式：当前页面的.wxss文件

• 全局样式：app.wxss文件

三、JS逻辑文件（具体细节后面讲解）

3.1 JS文件的分类与作用

在小程序中，JS文件按照功能和使用场景分为三类，每类文件都有特定的调用函数：

① app.js - 应用入口文件

• 通过调用 App() 函数 来注册整个小程序

• 是整个小程序的起点，管理全局状态

• 执行一次，整个小程序生命周期内有效

② 页面的.js文件 - 页面逻辑文件

• 通过调用 Page() 函数 来注册单个页面

• 每个页面都必须有对应的JS文件

• 管理页面的数据、事件和生命周期

③ 普通的.js文件 - 功能模块文件

• 不需要调用特定函数，直接定义模块功能

• 用于封装可复用的工具函数和业务逻辑

• 通过 require() 或 import 在其他文件中引入使用

3.2 JS文件的基本结构

基于上面的分类，JS文件的基本结构也相应不同：

① app.js 的基本结构

// 调用 App() 函数注册小程序
App({
  // 全局数据
  globalData: {},
  
  // 生命周期函数
  onLaunch() {},
  onShow() {},
  onHide() {},
  
  // 全局方法
  globalMethod() {}
})

② 页面.js 的基本结构

// 调用 Page() 函数注册页面
Page({
  // 1. 数据部分 - 定义页面的初始数据
  data: {},
  
  // 2. 生命周期函数 - 控制页面的生命周期
  onLoad() {},
  onShow() {},
  onReady() {},
  
  // 3. 事件处理函数 - 响应用户的交互操作
  handleTap() {},
  
  // 4. 自定义函数 - 实现特定的业务逻辑
  customMethod() {}
})

③ 普通.js 的基本结构

// 直接定义模块功能
// 工具函数定义
function formatTime() {}

// 导出供其他文件使用
module.exports = {
  formatTime: formatTime
}

四、总结：四个文件协同工作

通过今天的学习，我完整了解了小程序页面的四个核心文件：

• .json文件 - 配置管理

  • 页面窗口配置

  • 导航栏样式设置

• .js文件 - 逻辑控制

  • 数据处理和状态管理

  • 生命周期控制

  • 事件响应处理

• .wxml文件 - 结构展示

  • 页面结构描述

  • 数据绑定渲染

  • 条件/列表渲染

• .wxss文件 - 样式美化

  • 页面样式设置

  • 响应式布局实现

  • 视觉样式美化

这四个文件形成了一套完整的前端开发体系：

• 分离关注点：每个文件负责特定的功能

• 紧密协作：JS提供数据，WXML展示结构，WXSS美化外观，JSON配置表现

• 高效开发：清晰的职责划分提高了开发效率和代码可维护性

掌握这四个文件的特性和使用方法，是开发微信小程序的基础。在实际开发中，需要根据业务需求，合理地在四个文件间分配功能，编写出结构清晰、易于维护的小程序代码。

总结

到此这篇关于微信小程序开发之WXML、WXSS与JS的文章就介绍到这了,更多相关微信小程序WXML、WXSS与JS内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！