小程序已经成为连接用户与服务的重要载体，微信、支付宝、快手、抖音等平台都有自己的小程序生态。它们的开发范式高度相似：一套以 JavaScript 为核心的逻辑层 + 一套类 HTML 的视图层。本文以最常见的平台为例，梳理从小程序注册到首个版本上线的完整流程。

一、平台注册与准备

在小程序开放平台注册账号，完成主体认证（个人或企业）后，获得 AppID。AppID 是后续所有 API 调用的身份标识，务必妥善保存。

  • 主体认证：个人主体功能受限（无法开通支付等），企业主体功能完整
  • 服务类目：需提前规划小程序的服务类目，部分类目要求提供资质
  • 域名白名单：接口请求的服务器域名需要在后台配置为合法域名，且必须 HTTPS

二、下载开发者工具

各平台官方提供开发者工具，内置模拟器、真机调试、代码上传等功能。基本开发流程：

# 命令行工具初始化项目（部分平台支持）
# 也可以在开发者工具中直接新建项目并填入 AppID
npx @miniapp/cli init my-miniapp

新建项目时填入 AppID，即可开始开发。开发者工具支持断点调试、网络面板、小程序体检等能力，建议开发阶段就善用这些工具。

三、认识项目结构

小程序项目采用"页面 + 全局"的组织方式，一个典型项目结构如下：

miniapp/
├── app.js            # 全局逻辑（生命周期、全局数据）
├── app.json          # 全局配置（页面路由、窗口样式、tabBar）
├── app.wxss          # 全局样式
├── pages/
│   ├── index/
│   │   ├── index.js      # 页面逻辑
│   │   ├── index.json    # 页面配置
│   │   ├── index.wxml    # 页面结构
│   │   └── index.wxss    # 页面样式
├── components/       # 自定义组件
├── utils/            # 公共工具
└── project.config.json

核心概念就三个：

  • WXML：负责页面结构，类似 HTML，支持数据绑定 {{ }} 和条件/循环渲染
  • WXSS：负责样式，支持大部分 CSS 特性，额外提供 rpx 自适应单位
  • JS：负责逻辑，通过 data 驱动视图更新

四、第一个页面

一个典型的页面代码：

// pages/index/index.js
Page({
  data: {
    message: '你好，小程序！',
    items: ['苹果', '香蕉', '橘子'],
  },

  onLoad() {
    console.log('页面加载');
  },

  handleTap() {
    this.setData({ message: '你点击了我' });
  },
})
<!-- pages/index/index.wxml -->
<view class="container">
  <text>{{ message }}</text>
  <view wx:for="{{ items }}" wx:key="*this">{{ item }}</view>
  <button bindtap="handleTap">点我</button>
</view>

注意：修改数据必须通过 setData，直接改 this.data 不会触发视图更新。

五、接口请求与域名配置

小程序内发请求需要使用平台提供的 request API，并满足域名白名单要求：

// 请求封装示例
function request(url, data = {}, method = 'GET') {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      method,
      header: { 'Content-Type': 'application/json' },
      success: res => resolve(res.data),
      fail: err => reject(err),
    });
  });
}
开发阶段可以在开发者工具中勾选"不校验合法域名"，但正式发布前必须把域名配置到白名单，并保证服务器已启用 HTTPS。

六、提审与发布

开发完成后的上线流程：

  1. 自测：使用真机调试覆盖主要功能路径，重点检查支付、登录等核心流程
  2. 代码上传：在开发者工具中上传代码，填写版本号与备注
  3. 提交审核：在管理后台提交审核，填写测试说明，便于审核人员快速通过
  4. 审核通过：审核通过后可选择全量发布或分阶段灰度
  5. 版本管理：线上出问题时通过后台快速回滚到上一版本

七、常见审核驳回原因

  • 功能无法体验：审核人员无法登录/无法进入核心页面
  • 类目不符：实际功能与所选服务类目不匹配
  • 诱导分享：页面存在诱导用户分享的文案或设计
  • 隐私问题：未在隐私协议中说明收集用户信息的用途

小结

小程序开发的入门门槛不高，重点是把注册认证、项目结构、接口请求和提审发布这几个环节摸透。掌握了这套流程，跨平台迁移时只需要处理平台差异即可。