微信小程序入门：从零构建一个 Blog 小程序

微信小程序（WeChat Mini Program）是一种无需下载安装即可使用的应用，近年来在内容展示、电商、工具类应用等领域广泛应用。本文将基于一份学习笔记，系统梳理微信小程序的基础结构与核心概念，并以构建一个简易 Blog 小程序为例，帮助开发者快速上手。

一、小程序的整体架构

一个微信小程序由全局配置和**页面（Pages）**组成，整体结构如下：

arduino 复制代码

├── app.js        // 小程序逻辑
├── app.json      // 全局配置
├── app.wxss      // 全局样式
├── pages/        // 页面目录
│   ├── index/
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   ├── index.js
│   │   └── index.json
│   └── detail/
│       ├── detail.wxml
│       ├── detail.wxss
│       ├── detail.js
│       └── detail.json

1. 全局配置文件 app.json

app.json 是小程序的全局配置文件，用于定义页面路径、窗口表现、tabBar 等。

json 复制代码

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window": {
    "navigationBarTitleText": "我的 Blog",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/home.png",
        "selectedIconPath": "assets/home-active.png"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "详情",
        "iconPath": "assets/detail.png",
        "selectedIconPath": "assets/detail-active.png"
      }
    ]
  }
}

navigationBarTitleText：导航栏标题。
tabBar：底部标签栏，最多支持 5 个页面。

二、页面（Page）的组成

每个页面由四个文件组成：

.wxml：结构模板（类似 HTML）
.wxss：样式文件（类似 CSS，但支持 rpx 单位）
.js：页面逻辑（Page 实例）
.json：页面配置（可选）

1. 页面逻辑：Page 实例

在 .js 文件中，通过 Page({}) 创建页面实例：

php 复制代码

Page({
  data: {
    menus: [
      { id: 1, title: '前端入门' },
      { id: 2, title: '小程序开发' },
      { id: 3, title: '数据驱动视图' }
    ]
  },
  handleClick(e) {
    console.log('点击了菜单:', e.currentTarget.dataset.id);
  }
})

data：页面数据，自动绑定到 WXML。
事件处理函数（如 handleClick）直接写在 Page 配置中。

2. 模板与数据绑定：WXML

WXML 使用双大括号 {{}} 进行数据绑定，并支持指令：

ini 复制代码

<view class="container">
  <block wx:for="{{menus}}" wx:key="id">
    <view bindtap="handleClick" data-id="{{item.id}}">
      {{item.title}}
    </view>
  </block>
</view>

block：逻辑容器，不会渲染为真实节点。
wx:for：循环渲染列表，默认项为 item。
wx:key：提高列表渲染性能，需提供唯一 ID。
bindtap：绑定点击事件（等价于 onclick，但小程序中应使用 bindtap）。

三、响应式单位 rpx

小程序使用 rpx（responsive pixel） 作为尺寸单位，实现跨设备适配：

屏幕宽度固定为 750rpx（以 iPhone 6 为基准）。
1rpx = 物理像素 / 设备像素比。
设计师通常提供 750px 宽度的设计稿，开发者可直接按 1:1 转换为 rpx。

例如：

css 复制代码

.title {
  font-size: 32rpx; /* 约等于 16px */
  padding: 20rpx;
}

✅ 建议：避免使用 px，统一使用 rpx，确保在不同机型上显示一致。

四、数据驱动界面：核心思想

小程序采用 数据驱动视图 的开发模式：

在 data 中定义状态；
WXML 通过 {{}} 绑定数据；
通过 this.setData() 更新数据，自动触发视图更新。

kotlin 复制代码

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

⚠️ 注意：不要直接修改 this.data，必须通过 this.setData() 触发响应式更新。

五、wx 对象：调用微信能力

wx 是小程序提供的全局 API 对象，用于调用微信原生能力：

wx.navigateTo()：跳转页面
wx.request()：发起网络请求
wx.getStorageSync()：本地存储

例如获取用户信息：

javascript 复制代码

wx.getUserProfile({
  desc: '用于完善会员资料',
  success: (res) => {
    console.log(res.userInfo);
  }
})

六、总结：构建 Blog 小程序的关键点

模块	说明
app.json	配置页面路径、导航栏、tabBar
Page 结构	每个页面由 wxml/wxss/js/json 四部分组成
事件绑定	使用 `bindtap` 而非 `onclick`
数据绑定	`{{}}` + `data` + `setData()`
列表渲染	`wx:for` + `wx:key`
单位适配	全面使用 `rpx`
全局能力	通过 `wx` 对象调用微信 API

通过以上结构和规范，你可以快速搭建一个结构清晰、适配良好、交互流畅的 Blog 类小程序。后续可在此基础上接入云开发、富文本渲染、评论系统等功能，打造完整的个人博客平台。

📌 提示：微信开发者工具提供了实时预览、调试和性能分析功能，是开发过程中不可或缺的利器。

开始你的小程序之旅吧！ 🚀