微信小程序开发教程

微信小程序已经成为国内最重要的轻应用平台之一，覆盖零售、电商、工具、服务行业等。下面我们从环境搭建到上线发布，带你一步一步完成一个小程序。

一、微信小程序是什么？

微信小程序是一种“无需下载安装、用完即走”的轻应用，运行在微信中，依赖微信提供的 API（支付、登录、地图、用户授权等）。

特点：

门槛低、开发快
生态大（微信 10 亿用户）
学习成本低（HTML + CSS + JS 类似语法）

二、开发小程序需要准备什么？

1. 微信小程序账号

注册网址： https://mp.weixin.qq.com/

选择类型：

个人：无法使用支付、直播等高级能力
企业/个体户：可使用支付、订阅消息等完整能力
政府/组织：面向政务类项目

2. 安装微信开发者工具

下载地址（官方）： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

开发者工具提供：

代码编辑
模拟器预览
调试
真机调试
上传发布

3. 小程序的构成

3.1 文件结构

包括4大主要文件：

文件类型	后缀	说明
结构文件	`.wxml`	类似 HTML
样式文件	`.wxss`	类似 CSS
逻辑文件	`.js`	小程序逻辑脚本
配置文件	`.json`	全局或页面配置

小程序采用模块化结构，核心文件如下：

├── pages/               # 页面目录（每个页面一个子文件夹）
│   ├── index/           # 首页（默认页面）
│   │   ├── index.js     # 页面逻辑（数据、事件处理）
│   │   ├── index.json   # 页面配置（如导航栏标题）
│   │   ├── index.wxml   # 页面结构（类似HTML，描述UI）
│   │   └── index.wxss   # 页面样式（类似CSS，美化UI）
│   └── logs/            # 日志页（示例页面）
├── utils/               # 工具函数（如格式化时间、请求封装）
├── app.js               # 全局逻辑（小程序启动时执行，如初始化）
├── app.json             # 全局配置（页面路径、窗口样式、tabBar等）
├── app.wxss             # 全局样式（所有页面共享）
└── project.config.json  # 项目配置（开发者工具个性化设置）

3.2 双线程架构（核心机制）

线程	运行环境	职责
逻辑层	JavaScript引擎	处理业务逻辑、数据请求
视图层	WebView渲染	渲染页面UI（WXML+WXSS）

两线程通过数据绑定和事件系统通信

4 数据绑定与事件系统

4.1 数据绑定（视图随数据更新）

逻辑层通过data定义数据，视图层用绑定数据，修改数据需用setData触发视图更新。（详见六、常用 API 示例）

4.2 事件系统（用户交互响应）

常见事件类型：

bindtap：点击事件（最常用）；
bindinput：输入框内容变化时触发；
bindsubmit：表单提交时触发。

三、创建第一个小程序

打开微信开发者工具：

新建小程序项目
输入 AppID（个人开发可用“测试账号”）
选择空模板
确认创建

你会看到默认生成的代码结构。

四、编写第一个页面

以首页 index 为例。

1. index.wxml（结构）

xml

<view class="container">
  <text class="title">Hello，小程序！</text>
  <button bindtap="clickMe">点我一下</button>
</view>

2. index.wxss（样式）

css

.container {
  padding: 40rpx;
}

.title {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 20rpx;
}

3. index.js（逻辑）

javascript

Page({
  data: {
    msg: "Hello，小程序！"
  },

  clickMe() {
    wx.showToast({
      title: "你点击了按钮",
      icon: "success"
    })
  }
})

4. index.json（页面配置）

json

{
  "navigationBarTitleText": "首页"
}

保存后即可在模拟器看到效果。

五、全局配置 app.json

用于配置小程序页面路径、导航栏、底部 Tab 等。

示例：

json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "我的小程序"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}

六、常用 API 示例

以下是最常见的小程序 API：

1. 获取用户信息

javascript

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

2. 网络请求

小程序需通过HTTPS请求外部接口，且域名需在公众平台「开发→开发设置→服务器域名」中配置（开发阶段可在开发者工具中勾选「不校验合法域名」临时跳过）。

javascript

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success(res) {
    console.log(res.data)
  }
})

3. 数据绑定（双向显示）

WXML:

xml

<!-- 文本绑定 -->
<text>{{message}}</text>

<!-- 按钮绑定点击事件 -->
<button bindtap="addCount">点击加1</button>

<!-- 显示count -->
<view>当前计数：{{count}}</view>

JS:

javascript

Page({
  // 页面初始数据
  data: {
    message: "Hello 小程序！",
    count: 0
  },

  // 按钮点击事件处理函数
  addCount() {
    // 必须用setData更新数据，直接修改this.data.count无效
    this.setData({
      count: this.data.count + 1,
      message: `点击了${this.data.count + 1}次`
    });
  }
});

七、云开发（可选但非常强大）

无需服务器即可实现：

数据库（MongoDB）
云函数（Node.js）
文件存储
云托管（Web 服务）

开启方式：开发者工具 → “云开发” → 开通环境

示例：调用云函数

javascript

wx.cloud.callFunction({
  name: 'hello',
  data: { msg: "hi" }
})

八、预览与真机调试

点击“预览”扫描二维码即可在手机端测试
点击“上传”上传代码到小程序后台

九、发布上线

发布流程：

提交审核
审核通过后点击“发布”
小程序即可在微信搜索访问

十、学习资源推荐

官方文档 小程序开发指南 API文档
社区微信开放社区 GitHub开源项目：Taro（多端统一框架）
UI组件库 Vant Weapp（轻量美观） WeUI（微信官方风格）iView Weapp
小程序支付、地图、登录等高级 API 的使用。

实战建议

如果你要做一个真正上线可用的小程序，建议：

使用 分包加载 提高性能
使用 WXS 提升渲染效率
使用 云开发 减少服务器成本
使用 组件化开发（同 Vue 的思想自带支持）

常见问题解答

Q1：小程序和网页开发有什么区别？

小程序使用WXML/WXSS（类HTML/CSS），但语法有差异（如<view>代替<div>）
不支持DOM/BOM操作，通过数据绑定更新视图
需遵循微信的安全规范（如域名白名单）

Q2：如何学习更高效？

模仿优秀开源项目（GitHub搜索miniprogram-demo）
从修改现成模板开始（微信开发者工具提供模板市场）
关注「微信开放社区」每日更新的技术文章

微信小程序开发教程 ​

一、微信小程序是什么？ ​

二、开发小程序需要准备什么？ ​

1. 微信小程序账号 ​

2. 安装微信开发者工具 ​

3. 小程序的构成 ​

3.1 文件结构 ​

3.2 双线程架构（核心机制） ​

4 数据绑定与事件系统 ​

4.1 数据绑定（视图随数据更新） ​

4.2 事件系统（用户交互响应） ​

三、创建第一个小程序 ​

四、编写第一个页面 ​

1. index.wxml（结构） ​

2. index.wxss（样式） ​

3. index.js（逻辑） ​

4. index.json（页面配置） ​

五、全局配置 app.json ​

六、常用 API 示例 ​

1. 获取用户信息 ​

2. 网络请求 ​

3. 数据绑定（双向显示） ​

七、云开发（可选但非常强大） ​

八、预览与真机调试 ​

九、发布上线 ​

十、学习资源推荐 ​

实战建议 ​

常见问题解答 ​

微信小程序开发教程

一、微信小程序是什么？

二、开发小程序需要准备什么？

1. 微信小程序账号

2. 安装微信开发者工具

3. 小程序的构成

3.1 文件结构

3.2 双线程架构（核心机制）

4 数据绑定与事件系统

4.1 数据绑定（视图随数据更新）

4.2 事件系统（用户交互响应）

三、创建第一个小程序

四、编写第一个页面

1. index.wxml（结构）

2. index.wxss（样式）

3. index.js（逻辑）

4. index.json（页面配置）

五、全局配置 app.json

六、常用 API 示例

1. 获取用户信息

2. 网络请求

3. 数据绑定（双向显示）

七、云开发（可选但非常强大）

八、预览与真机调试

九、发布上线

十、学习资源推荐

实战建议

常见问题解答