微信开发者工具保姆级教程（下载+配置+实战演练+避坑指南）

着急下载的小伙伴请直接转到：微信开发者工具官网最新版安装包下载

提到微信小程序，我想到的是点餐、查快递、预约挂号。平时用起来很顺手，但如果想自己做一个，该从哪里开始？
 

搜了一圈，很容易碰到 AppID、云开发、基础库这些名词。作为刚接触这个软件的人，我最想弄明白的其实就三件事：软件怎么下载，装好以后点哪里，能不能先做出一个看得见的东西。

这篇文章就从这里开始。我们先安装微信开发者工具，再创建一个基础项目，最后做一个“点击按钮加 1”的小页面。代码可以直接复制，不需要先把所有编程知识学完。

微信开发者工具是什么？

微信开发者工具是微信官方提供的小程序开发和调试软件。你可以在里面写代码、查看页面效果、找出错误，也可以把项目放到手机微信里预览。
 

对我这样的新手来说，比较方便的一点是：编辑代码和查看效果可以在同一个软件里完成。改完一段文字，保存、编译，就能看到页面有没有变化。

它主要提供这些功能：

• 代码编辑：写页面内容、调整样式、添加按钮功能。
• 模拟器：在电脑上查看小程序的大致运行效果，还可以切换不同屏幕尺寸。
• 调试器：查看报错，帮助我们找到写错的位置。
• 手机预览：生成二维码，用微信扫码查看真实手机上的效果。

软件本身可以免费下载安装，支持 Windows 和 macOS，自带中文界面。后续如果使用云资源、认证等服务，是否收费要看对应服务的规则，和下载安装工具是两回事。

安装好它，也不代表已经做好了一个小程序。我们还需要创建项目，再往里面添加页面和功能。下面先完成一个最简单的练习。

安装前需要先安装 Node.js 吗？

不需要。如果只是按照本文创建基础项目、编辑页面、编译和手机预览，直接下载安装微信开发者工具就可以了，不用提前安装 Node.js。
 

Node.js 是运行 JavaScript 工具链的环境，后面如果要使用 npm 安装依赖，或者使用 Taro、uni-app 等开发框架，再按照对应项目的要求安装即可。刚开始学习时不用为了“以后可能用到”先增加这一步。

下载微信开发者工具

微信开发者工具官网最新版安装包下载：

https://pan.quark.cn/s/32da8497f3a2

安装微信开发者工具

下面按 Windows 安装向导的常见流程说明。不同版本的页面和按钮文字可能略有区别，按安装器实际提示操作即可。

双击刚下载的 .exe 安装包。

如果 Windows 弹出“是否允许此应用对你的设备进行更改”，先确认运行的是从官方页面下载的安装包，再继续。

阅读安装向导中的说明和许可协议，确认后点击<下一步>

 

接受安装协议，点击<我接受>


选择安装位置，默认位置一般可以直接使用。如果想统一管理软件，也可以点击“浏览”选择其他安装目录

不必为了安装这个软件专门新建一个磁盘分区。安装位置和小程序代码的保存位置也可以不同，后面创建项目时还会单独选择代码目录。

确认设置，点击“安装”，等待安装结束。

安装过程中先不要关闭窗口。完成后，按页面提示点击“完成”或启动软件；也可以从开始菜单中搜索“微信开发者工具”打开。
 

登录微信开发者工具

第一次打开软件，会显示登录二维码，使用手机微信扫码登录开发者工具


打开手机微信，使用“扫一扫”扫描二维码，在手机上确认登录。

登录成功后，进入项目列表，准备创建小程序项目。

这里容易混淆两个账号：登录开发者工具用的是你的微信；创建正式小程序项目时，还需要对应的小程序 AppID。

我会把 AppID 理解成“小程序的编号”。它用来告诉工具：现在开发的是哪一个小程序。它不是微信号，也不是小程序的名字。

没有 AppID，怎么办？

刚开始学习，可以先看下面两种情况，选择符合自己的那一种。

1) 只是练习：先申请测试号

打开官方测试号申请页面，使用手机微信扫描二维码，就可以获得分配给自己的测试账号。再按页面提示查看测试号的 AppID，用它创建练习项目。
 

如果创建项目时看到“测试号”或“申请测试号”入口，也可以从工具里的入口进入申请流程。详细操作可查看小程序测试号说明。
 

测试号适合了解工具、练习页面和基础交互。它的能力和正式小程序有所区别，具体限制以官方测试号说明为准。
 

部分版本也会提供游客模式等入口。官方说明，游客模式只能编辑本地项目。我们这次还想尝试手机预览，所以建议正常扫码登录，并使用测试号或自己有权限的正式 AppID。

2) 准备开发自己的小程序：注册正式账号

打开微信公众平台，进入小程序注册流程，按页面提示填写资料、完成验证。

注册完成后，登录小程序后台，找到“开发－开发设置”，复制“AppID（小程序 ID）”。如果后台导航调整，可以在后台查找“开发设置”。

注意区分小程序、订阅号和服务号的 AppID。创建小程序项目，要使用小程序的 AppID。旁边的 AppSecret 是密钥，本次练习不需要用到，不要复制到页面代码中。

创建你的第一个小程序

账号准备好以后，我们就可以创建项目了。这里跟随官方入门教程，选择“不使用云服务＋JS 基础模板”，先做一个本地页面。

1) 回到开发者工具的项目列表，找到“小程序”栏，点击“＋”或“新建项目”。

2) 填写项目名称，例如：我的第一个小程序。
 

项目名称主要方便自己区分项目，这里先取一个容易认出的名字即可。

3) 选择代码保存目录，例如：D:\MiniPrograms\hello-wechat

创建新项目时，选择一个空文件夹。如果电脑没有 D 盘，就在自己的文档目录中新建文件夹，不要照搬盘符。也不要把整个桌面或“下载”文件夹选成项目目录。

4) 填入自己的小程序 AppID，或者按界面提示使用已申请的测试号。

5) 后端服务选择“不使用云服务”，模板选择“JS－基础模板”，然后点击“创建”。

这里的 JS 指 JavaScript。为了和下面的练习对应，先选择 JS 模板；如果选成 TypeScript，项目里可能会出现 .ts 文件，和本文的 .js 示例不同。

6) 等待项目打开

正常情况下，模拟器中会出现模板自带的页面。模板的文字和外观可能随版本变化，只要页面正常显示、没有阻止运行的报错，就可以继续。

先认识界面，再动手修改

项目打开后，一下子看到很多文件和按钮，很容易不知道先看哪里。我会先认准这几个区域：
 

区域	新手先用它做什么
模拟器	查看页面效果，点击按钮
文件目录树	找到准备修改的文件
编辑区	输入、修改代码
调试器中的 Console	查看报错提示
顶部工具栏	找到“编译”和“预览”

接下来会用到三类文件：

• .wxml：写页面里显示什么，比如文字和按钮。
• .wxss：写页面是什么样子，比如颜色、间距、字号。
• .js：写点击按钮以后做什么。

你还会看到 .json 文件，它主要负责配置。这次先保留模板原来的配置，别急着删文件。
 

简单使用：做一个“点击加 1”的小页面

我给第一次练习定的目标很小：页面上显示一个数字，点击按钮就加 1，再加一个“清零”按钮。

这个例子不需要购买服务器，也不需要调用外部接口。我们先体验一次“改代码－编译－查看效果”的完整过程。

1) 修改页面内容

在文件目录中展开 pages，再展开 index，点击 index.wxml。

先把原来的内容复制到其他地方留一份，再把这个文件的内容替换为下面的代码：

<view class="starter">
    <text class="starter-title">你好，我的第一个小程序！</text>
    <text class="starter-count">已经点击 {{count}} 次</text>
    <button type="primary" bindtap="addCount">点我加 1</button>
    <button bindtap="resetCount">清零</button>
</view>

这里的 {{count}} 是用来显示数字的位置；bindtap 后面的名字，是点击按钮时要执行的操作。暂时记住这两点就够用了。

2) 添加按钮功能

点击同一目录下的 index.js，备份原内容，然后替换为：

Page({
  data: {
    count: 0
  },

  addCount() {
    this.setData({
      count: this.data.count + 1
    })
  },

  resetCount() {
    this.setData({
      count: 0
    })
  }
})

count: 0 表示初始数字是 0。addCount 负责加 1，resetCount 负责清零；setData 会更新数据，让页面显示新的数字。

3) 调整页面样式

点击 index.wxss，备份原内容，然后替换为：

.starter {
  padding: 80rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.starter-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
}

.starter-count {
  margin: 40rpx 0;
  font-size: 30rpx;
}

.starter button {
  width: 100%;
  margin-top: 24rpx;
}

rpx 是小程序常用的尺寸单位，这里用它设置间距和字号。第一次练习，可以先复制，看到效果后再尝试修改数字。

4) 保存并编译

分别保存刚才修改的三个文件。Windows 可以使用 Ctrl＋S，如果还有未保存的文件，也可以通过“文件－保存所有”保存。
 

然后点击顶部“编译”。
 

你应该能看到标题、“已经点击 0 次”和两个按钮。点击“点我加 1”，数字会变成 1、2、3……；点击“清零”，数字回到 0。
 

如果没有变化，先确认三件事：改的是 pages/index 下面的文件、三个文件都保存了、当前编译的是这个项目的首页。也可以看看 app.json 中 pages 的第一项是否为 pages/index/index。

做到这里，我们已经让文字、按钮和数字配合起来了。下一次可以把标题换成自己的名字，或者把“加 1”改成“加 2”，每次只改一处，看看结果。

在手机微信里预览

电脑上的页面能运行以后，我还想看看它在手机上是什么样子。

1. 确认项目已保存、编译成功，电脑可以正常联网。
2. 点击顶部“预览”，等待工具生成二维码。
3. 用当前项目开发者的手机微信扫码。第一次尝试，建议使用登录开发者工具时的同一个微信账号。
4. 在手机上点击“点我加 1”和“清零”，检查文字、按钮和数字是否正常。

 

如果扫码提示没有权限，先检查项目 AppID 是否正确、扫码的微信是否有这个小程序的开发者权限。使用测试号时，还需要核对测试号支持的功能和当前工具提示。
 

手机预览成功，也不等于小程序已经公开上线。正式发布通常还需要上传代码、在后台提交审核、审核通过后发布，并完成适用的账号资料、备案等要求。我们这篇先完成入门练习。

微信开发者工具常见问题

1) 一定要安装 Node.js、买服务器吗？

本文使用官方 JS 基础模板，练习内容只涉及本地页面和按钮，不需要额外安装 Node.js，也不需要购买服务器。以后如果使用第三方依赖、特定框架或后端服务，再按那个项目的要求准备。

2) 创建项目时提示目录不符合要求，怎么办？

如果是新建练习项目，换一个空文件夹即可。
 

如果已经有别人提供的完整项目，应使用导入或打开项目的入口，选择它的项目目录。不要为了让文件夹变空，把已有项目文件删掉。

3) 提示 AppID 无效，或者没有开发者权限？

先确认复制的是小程序 AppID，没有多出空格。再确认工具登录的微信已获得该 AppID 的开发者权限。学习用的测试号和正式 AppID，也要按各自的流程使用。

4) 复制代码后报错，页面变成空白？

打开调试器里的 Console（控制台），先看第一条红色错误提示。
 

本次练习最容易出现的问题是：代码没有复制完整、括号漏了、把中文标点放进代码，或者 WXML 中的 addCount、resetCount 和 JS 里的名字不一致。可以先恢复备份，再逐个文件重新替换。

5) 为什么我改了代码，手机里还是旧效果？

先保存全部文件，重新编译，再点击“预览”生成新的二维码，重新扫码。不要一直使用之前那张二维码。排查时先确认电脑模拟器已经显示新效果，再看手机。

6) 模拟器里正常，就可以发布了吗？

还需要在真实手机上检查。屏幕尺寸、系统和微信版本都可能影响实际效果。对于第一次练习，至少确认手机上能打开页面、文字没有挤在一起、按钮能正常操作。

总结

如果刚接触微信开发者工具，不妨先把目标放小一点：装好工具，创建一个项目，改出一个能点击的页面。
 

AppID、编译这些词，跟着操作一遍会容易理解得多。等“点击加 1”跑起来以后，再继续学习增加页面、保存数据或调用接口，也就有了具体的起点。