微信小程序从零到上线：注册、开发工具与审核发布全流程

注册入口在微信公众平台，选择「小程序」类型开始注册。第一步不是填名字，而是确定主体类型——它决定了这个账号能做哪些事、需要准备什么材料，也决定了后续能不能开通支付等关键能力。

主体类型	常见用途	需要准备的材料
个人	工具类、内容展示类小程序	身份证信息与本人身份验证
企业	电商、到店服务、需要支付的应用	营业执照、法人信息、对公账户或法人验证
政府 / 媒体	政务办事、资讯发布类服务	机构证明与对应行业资质
其他组织	公益、协会等组织服务	组织机构证明与对应资质

注册时需要留意的几点：

• 名称唯一：小程序名称在全平台唯一，重名无法通过，建议先查询再定稿。
• 服务类目要与实际功能一致：类目不仅影响审核，也决定了你可以调用哪些接口；选了金融、医疗、直播等特殊类目，需要额外资质。
• 提前绑定开发者：在「成员管理」里把团队成员加为开发者，否则他们无法用工具上传代码。
• 记好 AppID：AppID 是项目的唯一标识，本地新建项目时要原样填入，写错会导致无法预览和上传。

把这一步做扎实，后面至少能省下两三次「材料被打回」的往返。资料齐全后，平台会给出一个小程序 AppID，接下来的编码环节就围绕它展开。

微信小程序有官方的一体化开发工具，覆盖编码、预览、调试、真机运行与代码上传。到微信官方文档的「开发者工具」页面下载对应系统的稳定版安装包，Windows 与 macOS 都支持。

安装完成后，用小程序管理员或已绑定的开发者账号扫码登录。工具会记住登录态，但登录态过期后需要重新扫码——很多「上传按钮灰掉」的问题，本质都是登录态失效。

新建项目时要填三项关键信息：项目名称、项目目录、AppID。AppID 可以直接填注册时拿到的值，也可以先选择「测试号」在本地跑通，再替换成正式 AppID。创建完成后，工具会在项目根目录生成 project.config.json，这份文件记录了项目的编译与校验设置：

{
  "miniprogramRoot": "miniprogram/",
  "appid": "wx0000000000000000",
  "setting": {
    "urlCheck": false,
    "es6": true,
    "minified": true
  },
  "compileType": "miniprogram"
}

其中几个字段值得说明：

• miniprogramRoot：小程序源码目录，默认是根目录，插件或云开发项目常改为子目录。
• urlCheck：开发期可以设为 false，跳过请求域名的合法性校验；上线前必须回到 true，并在后台配置服务器域名。
• es6：开启后工具会把 ES6+ 语法转成兼容形式，现代写法可以放心使用。

这些设置只影响本地开发与编译，不会随代码一起发布；真正决定线上行为的是后台的域名白名单与类目配置，两者不要混淆。

一个小程序项目由「全局文件 + 若干页面」组成。全局文件负责整体行为，页面的样式与配置默认继承全局，再按需覆盖。理解这套结构，后面加页面、抽组件都会很顺。

文件 / 目录	作用	是否必需
app.json	全局配置：页面路径、窗口样式、tabBar	必需
app.js	全局逻辑：启动时执行、全局数据与方法	必需
app.wxss	全局样式，所有页面默认继承	可选
pages/…	各页面目录，含 4 个同名文件	必需
project.config.json	开发者工具的项目配置	工具生成
sitemap.json	控制页面是否允许被微信索引	可选

每个页面由四个同前缀文件组成：.wxml 描述结构、.wxss 写样式、.js 写逻辑、.json 写页面级配置。全局的 app.json 至少要声明所有页面路径，凡是没登记的页面都无法跳转：

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window": {
    "navigationBarTitleText": "示例小程序",
    "navigationBarBackgroundColor": "#1E5FA8",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      { "pagePath": "pages/index/index", "text": "首页" },
      { "pagePath": "pages/detail/detail", "text": "详情" }
    ]
  }
}

常见坑有两个：一是 pages 数组里的路径不带扩展名，写全了文件名反而报错；二是 tabBar 里未配置图标的项在某些基础库版本下会空白，建议图标与文字成对出现。

小程序的渲染是数据驱动的：WXML 负责「长什么样」，JS 负责「有什么数据」，两者通过双大括号绑定。写页面时先想清楚数据结构，再回填视图，代码会干净很多。

<view class="card">
  <text class="title">标题字段</text>
  <text>计数文本</text>
  <button bindtap="onTap">点我加一</button>
</view>
<!-- 动态内容用双大括号包裹 data 里的字段名完成绑定 -->

对应的逻辑文件用 Page() 注册，通过 setData 更新数据。注意 setData 是异步的，需要基于最新值计算时应先取值再赋值，而不是连续读 this.data：

Page({
  data: { title: "Hello 小程序", count: 0 },
  onTap() {
    this.setData({ count: this.data.count + 1 });
  }
});

样式方面，WXSS 引入了 rpx 单位：以屏幕宽度 750rpx 为基准，能按机型等比缩放。它解决的是不同宽度手机的适配问题，但这不意味着可以放弃弹性布局——长文案、可变内容仍然要用 flex 让容器自适应，否则窄屏容易出现折行挤压。

• 数据绑定：用双大括号把 data 里的字段插进模板，也可写简单三元与运算，复杂逻辑放回 JS。
• 事件绑定：bindtap 冒泡、catchtap 阻止冒泡，列表项点击常用后者。
• 列表渲染：wx:for 配 wx:key，key 用稳定的唯一值，别用下标。
• 条件渲染：频繁切换用 hidden，整块不渲染用 wx:if。

把这四件事做对，页面基本不会有性能问题。真正影响体验的往往是细节，比如图片没有设置固定宽高导致列表跳动，这些在真机预览里最容易暴露。