第二章：开发环境准备

好，咱们正式开始动手了。这一章我带你把开发环境搭起来。说实话，很多新手卡在这一步——不是账号注册出问题，就是工具装不对版本。别急，我一步步带你走。

2.1 注册小程序账号

先得有个账号。你打开微信公众平台，点「注册」，选「小程序」类型。这里有个坑——千万别选成「订阅号」，我见过不止一个同事犯过这错。

注册流程很简单：填邮箱、设密码、激活邮件。嗯，这里要注意——邮箱别用QQ邮箱，我遇到过收不到验证码的情况，后来换成163才搞定。

注册完登录后台，在「设置」→「基本设置」里能看到你的AppID。这串字符很重要，后面创建项目要用。我习惯把它记在备忘录里，省得每次翻后台。

2.2 安装开发者工具

去微信官方下载「微信开发者工具」。别去第三方网站下，我有个朋友贪方便，结果装了个带广告的版本，折腾半天。

安装时注意几点：

• 版本选择：稳定版就行，别追最新版。我吃过亏——有次用RC版，调试插件时莫名其妙报错，回退到稳定版就好了。
• 安装路径：别用中文路径。虽然现在工具支持了，但有些第三方插件不认中文路径，你想想看，排查起来多麻烦。
• 系统要求：Windows 10以上，macOS 10.13以上。我自己的Mac是M1芯片，跑起来没问题。

装完后打开工具，用微信扫码登录。这时候你会看到三个模式：

模式	用途	我推荐
小程序	开发普通小程序	插件开发也用这个
小游戏	游戏类项目	插件用不上
代码片段	快速测试小功能	偶尔用，挺方便

选「小程序」模式就行。插件项目本质上也是小程序项目，只是多了个插件目录。

2.3 创建插件项目

好，重头戏来了。打开工具，点「新建项目」，填入：

• 项目名称：比如「my-plugin-demo」
• 目录：选个你记得住的位置
• AppID：填刚才注册的那个
• 开发模式：选「小程序」
• 后端服务：选「不使用云服务」
• 语言：JavaScript 或 TypeScript，我习惯用 JS，入门简单

点确定后，工具会生成一个默认模板。这时候别急着写代码——我们要把它改成插件项目。

然后在 app.json 里加上插件声明：

{
  "plugins": {
    "my-plugin": {
      "version": "0.0.1",
      "provider": "你的AppID"
    }
  }
}

等等，这里有个细节——provider 填的是插件提供者的 AppID。如果你自己开发自己用，填你自己的。如果是团队协作，填插件维护者的那个。

2.4 项目目录结构解析

创建完项目，咱们看看目录长什么样。我直接给你画个图：

my-plugin-demo/
├── app.js              # 小程序入口文件
├── app.json            # 全局配置
├── app.wxss            # 全局样式
├── project.config.json # 项目配置
├── pages/              # 小程序页面（测试用）
│   └── index/
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
└── plugin/             # 插件目录（核心）
    ├── plugin.json     # 插件配置文件
    ├── index.js        # 插件入口
    ├── components/     # 插件组件
    │   └── my-component/
    │       ├── index.js
    │       ├── index.json
    │       ├── index.wxml
    │       └── index.wxss
    ├── pages/          # 插件页面
    │   └── plugin-page/
    │       ├── index.js
    │       ├── index.json
    │       ├── index.wxml
    │       └── index.wxss
    └── api/            # 插件API
        └── index.js

我来拆解一下每个文件的作用：

plugin/plugin.json

这是插件的身份证。里面声明了插件暴露哪些组件、页面和API。举个例子：

{
  "publicComponents": {
    "my-component": "components/my-component/index"
  },
  "pages": {
    "plugin-page": "pages/plugin-page/index"
  },
  "main": "index.js"
}

说白了，你在这里列出来的东西，外面才能用。没列出来的，就是插件内部私有的。我刚开始做插件时，忘了在 publicComponents 里注册组件，结果主程序死活引用不到，排查了半小时...

plugin/index.js

插件入口文件。通常用来导出一些全局方法：

module.exports = {
  getVersion: function() {
    return '0.0.1';
  },
  init: function(options) {
    console.log('插件初始化', options);
  }
};

plugin/components/

放自定义组件的地方。每个组件一个文件夹，结构和小程序组件一样。我习惯把通用UI组件放这里，比如弹窗、加载动画这些。

plugin/pages/

插件自己的页面。注意——插件页面不能跳转到小程序页面，只能在自己的页面里玩。这是微信的限制，设计时要想清楚。

pages/ 目录

这个目录属于小程序主包，用来测试插件。我一般在这里写几个测试页面，调用插件的组件和API，验证功能是否正常。

2.5 避坑指南

最后分享几个我踩过的坑：

• AppID 填错：插件开发时，主包和插件的 AppID 必须一致。我曾经用两个不同的号，结果插件加载失败，报错信息还特别隐晦。
• 目录权限：Mac 用户注意，如果项目放在 iCloud 同步目录下，工具可能无法正常读写文件。我建议放本地硬盘。
• 工具版本：如果你用 Windows，记得关闭「实时编译」功能。有次它把我的代码改乱了，排查半天才发现是工具自动格式化搞的鬼。

好了，环境搭好了，目录结构也清楚了。下一章咱们开始写真正的插件代码——做一个能用的自定义组件。你准备好了吗？