微信小程序开发：WXML、WXSS 与云开发

FreeGuideOnline 最新 2026-06-18

微信小程序开发：WXML、WXSS 与云开发入门指南

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。本教程将带领初学者从零开始，掌握微信小程序的核心开发技术——WXML（页面结构）、WXSS（页面样式）以及云开发（后端服务），帮助你快速构建功能完善的小程序。

第1章：环境准备与项目创建

在开始编码之前，请确保你的开发环境已就绪。

注册小程序账号
访问微信公众平台，点击“立即注册”，选择“小程序”类型，按指引完成注册。注册后，在“开发”->“开发管理”->“开发设置”中，记下你的 AppID，后续新建项目时会用到。
下载并安装开发者工具
前往微信开发者工具下载页面，根据你的操作系统选择对应版本。安装完成后，启动工具并使用微信扫码登录。
创建第一个小程序项目
在工具首页点击“新建项目”，填写项目名称和目录，输入上一步获取的 AppID（也可选择“测试号”进行快速体验），后端服务选择“不使用云服务”（我们先手动搭建本地项目，稍后会引入云开发）。模板选择“JavaScript 基础模板”，点击“确定”即可生成项目。

第2章：理解 WXML——小程序的骨架

WXML（WeiXin Markup Language）是框架设计的一套标签语言，用来构建小程序页面的结构。它类似于 HTML，但并非 HTML，拥有特有的组件和动态数据绑定能力。

2.1 基础语法与数据绑定

WXML 通过 {{ }} 插值表达式将逻辑层（JS）数据动态显示到视图上。

示例：在页面中显示一段文本

pages/index/index.wxml：

<view class="container">
  <text>{{message}}</text>
</view>

pages/index/index.js：

Page({
  data: {
    message: 'Hello, 微信小程序！'
  }
})

这里 {{message}} 会随着 JS 中 data 的变化而实时更新。

2.2 条件渲染与列表渲染

wx:if / wx:elif / wx:else：控制组件的显示或隐藏。
wx:for：遍历数组，重复渲染某个组件。

<!-- 条件渲染 -->
<view wx:if="{{score >= 90}}">优秀</view>
<view wx:elif="{{score >= 60}}">及格</view>
<view wx:else>不及格</view>

<!-- 列表渲染，默认使用 item 表示数组元素，index 表示索引 -->
<view wx:for="{{students}}" wx:key="id">
  {{index}} - {{item.name}}
</view>

wx:key 用于提高列表渲染的性能，通常指定数组元素中唯一的字段。

2.3 事件绑定

WXML 中使用 bind 或 catch 绑定事件，bind 不阻止冒泡，catch 会阻止事件冒泡。

<button bindtap="handleTap">点击我</button>

对应的 JS 中定义事件处理函数：

Page({
  handleTap: function(event) {
    console.log('按钮被点击了', event);
  }
})

2.4 常用组件速览

组件名	说明
view	类似 div，块级容器
text	文本显示
image	图片，使用 src 属性
button	按钮
input	输入框
scroll-view	可滚动视图区域

更多组件请查阅官方文档。

第3章：掌握 WXSS——为小程序披上美丽外衣

WXSS（WeiXin Style Sheets）是一套样式语言，用于描述 WXML 的组件样式。它在 CSS 的基础上进行了扩展和优化。

3.1 尺寸单位 rpx

为了适配不同宽度的屏幕，小程序新增了 rpx（responsive pixel） 尺寸单位。规定屏幕宽度为 750rpx，无论设备实际像素是多少，都能等比换算。例如，在 iPhone6 上，屏幕宽度为 375px，则 1rpx = 0.5px。建议设计稿直接使用 750px 宽度，开发时 1px = 1rpx，免去换算麻烦。

3.2 选择器与样式导入

WXSS 支持大部分 CSS 选择器（类选择器、ID 选择器、元素选择器等）。

全局样式：在 app.wxss 中定义的样式对每个页面都生效。
局部样式：在页面目录下的同名 .wxss 文件中定义的样式仅作用于当前页面。
样式导入：使用 @import 语句导入外部样式表。

/* pages/index/index.wxss */
@import "../common/common.wxss";

.container {
  display: flex;
  justify-content: center;
  padding: 20rpx;
}
.text-primary {
  color: #1aad19;
  font-size: 32rpx;
}

3.3 常用布局技巧：Flex 布局

小程序视图层强烈推荐使用 Flex 布局，它可以让布局更加灵活高效。

<!-- WXML -->
<view class="flex-row">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
</view>

.flex-row {
  display: flex;
  flex-direction: row;       /* 主轴方向：行 */
  justify-content: space-around; /* 主轴对齐 */
  align-items: center;       /* 交叉轴对齐 */
}
.item {
  width: 100rpx;
  height: 100rpx;
  background-color: #e5e5e5;
}

3.4 适应深色模式

从基础库 2.11.1 开始，小程序支持 DarkMode。可以在 app.json 中配置 "darkmode": true，然后在 WXSS 中使用媒体查询 @media (prefers-color-scheme: dark) 来定义深色主题下的样式。

/* 默认浅色 */
.page { background-color: #fff; color: #000; }

@media (prefers-color-scheme: dark) {
  .page { background-color: #000; color: #fff; }
}

第4章：小程序云开发——免运维的后端服务

传统开发模式中，你还需要自己搭建服务器、申请域名、部署数据库。而微信小程序云开发为开发者提供了数据库、存储和云函数三大基础能力，无需管理服务器，且天然具备微信私有协议鉴权，大大降低了开发门槛。

4.1 开通云开发

在开发者工具中，点击顶部工具栏的“云开发”图标。
首次使用需开通环境，点击“开通”并创建环境（建议环境名合理命名，如“dev”），等待大约 2 分钟初始化完成。

在你的小程序项目根目录 app.js 中初始化云开发环境：

App({
  onLaunch: function() {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        env: '你的环境ID', // 如 env: 'dev-xxxxx'
        traceUser: true,
      });
    }
  }
});

traceUser 设置为 true 可以在云开发控制台查看用户访问记录。

4.2 云数据库——一个 JSON 文档型数据库

云数据库是一个非关系型数据库，每条记录都是一个 JSON 对象。你可以在小程序端直接操作数据库（无需搭建中间层），也可以在云函数中操作。

基础操作示例：增删改查

// 获取数据库引用
const db = wx.cloud.database();
// 获取集合（表）的引用
const todosCollection = db.collection('todos');

// 1. 新增一条待办事项
todosCollection.add({
  data: {
    title: '学习WXSS',
    completed: false,
    createTime: db.serverDate() // 服务器时间
  }
}).then(res => {
  console.log('新增成功', res);
});

// 2. 查询所有未完成的待办
todosCollection.where({
  completed: false
}).get().then(res => {
  console.log('查询结果', res.data);
});

// 3. 更新一条记录（需要已知记录的 _id）
todosCollection.doc('记录_id').update({
  data: {
    completed: true
  }
});

// 4. 删除一条记录
todosCollection.doc('记录_id').remove();

重要规则：小程序端直接操作数据库受权限控制，默认仅拥有者(userId)可读写自己的数据。你可以在云开发控制台 - 数据库 - 集合权限设置中调整权限。

4.3 云存储——管理文件与图片

云存储用于存放用户上传的图片、音频等资源，并返回一个带有有效期的 fileID 供访问。

// 选择图片并上传
wx.chooseImage({
  count: 1,
  success: function(res) {
    const filePath = res.tempFilePaths[0];
    const cloudPath = 'images/' + Date.now() + '.png'; // 云端的路径
    wx.cloud.uploadFile({
      cloudPath: cloudPath,
      filePath: filePath,
      success: res => {
        console.log('上传成功，fileID:', res.fileID);
        // 可以将 fileID 存到数据库以便后续使用
      }
    });
  }
});

展示图片时使用 image 组件，src 需要是有效的临时链接。可以利用 wx.cloud.getTempFileURL 将 fileID 转为临时链接：

wx.cloud.getTempFileURL({
  fileList: [fileID]
}).then(res => {
  console.log('临时链接', res.fileList[0].tempFileURL);
});

4.4 云函数——在云端运行的 Node.js 代码

当需要执行复杂逻辑、调用第三方 API 或实现更高级的权限控制时，应使用云函数。云函数运行在纯净的 Node.js 环境中。

创建与使用云函数：

在项目根目录 cloudfunctions 文件夹上右键，选择“新建 Node.js 云函数”，命名为 getOpenId。

编写云函数入口文件 index.js：

// cloudfunctions/getOpenId/index.js
const cloud = require('wx-server-sdk');
cloud.init();
exports.main = async (event, context) => {
  const { OPENID } = cloud.getWXContext();
  return { openid: OPENID };
};

在云函数目录上右键，选择“上传并部署：云端安装依赖”（无需手动安装 wx-server-sdk，云端已包含）。
小程序端调用云函数：
```
wx.cloud.callFunction({
  name: 'getOpenId'
}).then(res => {
  console.log('用户openid:', res.result.openid);
});
```
云函数中可以使用 wx-server-sdk 访问数据库、云存储，并进行业务逻辑处理。

4.5 云开发控制台

你可以在开发者工具内直接打开“云开发控制台”，进行数据管理、上传文件、查看云函数日志、设置权限等操作。这是管理后端资源的核心入口。

第5章：构建一个简单的待办事项小程序实例

将以上知识串联起来，我们完成一个简易的 Todo 小程序。

目录结构

pages/index/     (首页，添加与展示待办)
cloudfunctions/getTodos/ (云函数，读取所有待办)

步骤1：设计云数据库 在云开发控制台创建集合 todos，权限暂时设置为“所有用户可读，仅创建者可读写”。

步骤2：编写页面结构 pages/index/index.wxml

<view class="container">
  <input placeholder="输入待办事项" bindinput="onInput" value="{{inputValue}}" />
  <button bindtap="addTodo">添加</button>

  <view class="todo-list">
    <view wx:for="{{todos}}" wx:key="_id" class="todo-item">
      <text>{{item.title}}</text>
      <text class="status">{{item.completed ? '已完成' : '未完成'}}</text>
    </view>
  </view>
</view>

步骤3：页面逻辑 pages/index/index.js

const db = wx.cloud.database();
Page({
  data: {
    inputValue: '',
    todos: []
  },
  onLoad() {
    this.getTodos();
  },
  onInput(e) {
    this.setData({ inputValue: e.detail.value });
  },
  // 直接在小程序端添加数据（简便起见）
  addTodo() {
    if (!this.data.inputValue) return;
    db.collection('todos').add({
      data: {
        title: this.data.inputValue,
        completed: false
      }
    }).then(() => {
      this.setData({ inputValue: '' });
      this.getTodos();
    });
  },
  // 获取待办列表（使用云函数可以做得更复杂，这里直接用小程序端查询）
  getTodos() {
    db.collection('todos').get().then(res => {
      this.setData({ todos: res.data });
    });
  }
});

步骤4：编写样式 pages/index/index.wxss

.container { padding: 20rpx; }
input { border: 1rpx solid #ccc; height: 80rpx; padding: 0 20rpx; margin-bottom: 20rpx; }
button { margin-bottom: 30rpx; }
.todo-item { display: flex; justify-content: space-between; padding: 20rpx 0; border-bottom: 1rpx solid #eee; }
.status { color: #888; }

步骤5：预览与测试 点击工具上的“预览”，扫码在手机上查看效果。你可以在云开发控制台实时看到数据库变化。

进阶学习建议

深入学习 WXS 脚本，在视图层直接处理数据（如日期格式化）。
掌握 自定义组件 开发，提高代码复用率。
研究云函数中的 事务（Transaction） 与 聚合搜索，实现复杂数据操作。
阅读官方的小程序性能优化指南，包括 setData 优化、图片懒加载等。