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

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

一、小程序的整体架构

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

├── 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 等。

{
  "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({}) 创建页面实例：

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 使用双大括号 {{}} 进行数据绑定，并支持指令：

<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。

例如：

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

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

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

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

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

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() ：本地存储

例如获取用户信息：

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

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

| 模块 | 说明 | | —

| app.json | 配置页面路径、导航栏、tabBar | | Page 结构 | 每个页面由 wxml/wxss/js/json 四部分组成 | | 事件绑定 | 使用 bindtap 而非 onclick | | 数据绑定 | {{}} +

| 列表渲染 | wx:for +

| 单位适配 | 全面使用 rpx | | 全局能力 | 通过 wx 对象调用微信 API |

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

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

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