微信小程序开发教程：从零到上线完整指南

很多朋友想学微信小程序开发，但面对官方文档和一堆配置项容易迷失方向。这篇教程会带你从环境搭建、项目结构、核心语法到发布上线，走完一个完整流程。内容基于原生小程序开发，适合有基础 HTML/CSS/JS 的开发者。

一、开发前准备

开始之前，你需要准备三样东西：

• 一个已注册的微信小程序账号（在微信公众平台申请，拿到 AppID）
• 微信开发者工具（官方提供，支持 Windows 和 macOS）
• 基础的 JavaScript、HTML、CSS 知识

没有 AppID 也可以先用「测试号」开发，但正式发布必须使用真实 AppID。

二、创建第一个小程序项目

打开微信开发者工具，选择「新建项目」，填写项目名称、目录和 AppID，模板选择「不使用云开发」或「JavaScript 基础模板」即可。创建完成后，你会看到如下目录结构：

project/
├── app.js          // 小程序逻辑
├── app.json        // 全局配置
├── app.wxss        // 全局样式
├── pages/
│   └── index/
│       ├── index.js    // 页面逻辑
│       ├── index.json  // 页面配置
│       ├── index.wxml  // 页面结构
│       └── index.wxss  // 页面样式
└── project.config.json // 项目配置

小程序采用「逻辑层 + 视图层」分离的架构。逻辑层运行在 JSCore 中，视图层使用 WebView 渲染，两者通过数据绑定和事件系统通信。

三、核心配置：app.json

app.json 是小程序的全局配置，决定页面路径、窗口表现、底部导航等。一个典型配置如下：

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

注意：pages 数组的第一项就是小程序的启动页；tabBar 的 list 最少 2 项、最多 5 项。

四、WXML 与数据绑定

WXML 是小程序的模板语言，类似 HTML，但支持数据绑定和列表渲染。看一个例子：

<view class="container">
  <text>{{title}}</text>
  <view wx:for="{{list}}" wx:key="id">
    <text>{{item.name}}</text>
  </view>
  <button bindtap="handleTap">点击我</button>
</view>

对应页面逻辑 index.js：

Page({
  data: {
    title: 'Hello 小程序',
    list: [
      { id: 1, name: '第一项' },
      { id: 2, name: '第二项' }
    ]
  },
  handleTap() {
    this.setData({ title: '你点击了按钮' })
  }
})

关键点：修改数据必须用 this.setData()，直接赋值不会触发视图更新。setData 是异步的，且传输数据量越大性能越差，应尽量避免频繁调用。

五、常用生命周期函数

页面生命周期是小程序开发的核心概念之一：

• onLoad：页面加载时触发，只调用一次，适合请求初始数据
• onShow：页面显示时触发，每次回到该页面都会调用
• onHide：页面隐藏时触发
• onUnload：页面卸载时触发
• onPullDownRefresh：下拉刷新时触发

App 级别也有 onLaunch、onShow、onHide 等生命周期，常用于初始化全局数据。

六、发起网络请求

小程序不能直接用 fetch 或 XMLHttpRequest，必须使用 wx.request：

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

注意：正式环境必须使用 HTTPS，且域名需要在微信公众平台「开发设置」中配置到 request 合法域名列表，否则真机调试会失败。开发阶段可以勾选「不校验合法域名」临时绕过。

七、页面跳转与路由

小程序路由由框架管理，常用 API：

• wx.navigateTo：保留当前页，跳转到新页面（最多 10 层）
• wx.redirectTo：关闭当前页再跳转
• wx.switchTab：跳转到 tabBar 页面
• wx.navigateBack：返回上一页

页面间传参可通过 URL query，例如 wx.navigateTo({ url: '/pages/detail/detail?id=1' })，在目标页 onLoad 的 options 中接收。

八、调试与发布上线

开发完成后，按以下步骤发布：

1. 在开发者工具中点击「上传」，填写版本号和备注
2. 登录微信公众平台，进入「版本管理」，将开发版本提交审核
3. 审核通过后点击「发布」，小程序即可被用户搜索使用

发布前建议检查：页面路径是否正确、request 域名是否配置、是否有敏感权限未声明、体验版是否在真机上测试通过。

九、学习建议

小程序开发门槛不高，但要写出体验好的产品，需要关注性能优化、分包加载、自定义组件和状态管理。建议先照着官方文档把基础组件和 API 过一遍，再动手做一个小项目（如待办清单、天气查询），遇到问题多查官方社区和开发者工具的控制台报错。坚持做完整项目，比看十篇教程更有用。