一路踩坑走过微信小程序自动预览之路

1. 小程序自动预览概述

小程序自动预览功能可以使开发人员在保存代码后自动更新并预览小程序，无需手动编译、上传和构建，大大提高了开发效率。微信提供两种方式实现自动预览：命令行调用和HTTP调用。

2. 命令行调用

2.1 配置微信开发者工具

首先，需要在微信开发者工具中配置自动预览功能。

1. 打开微信开发者工具，点击右上角的设置按钮。
2. 在「设置」窗口中，找到「自动预览」选项，勾选「启用自动预览」复选框。
3. 选择「自动预览」方式，有两种选择：
   • 内置浏览器：使用微信开发者工具内置的浏览器进行预览。
   • 外部浏览器：使用默认的系统浏览器进行预览。

2.2 安装依赖

在项目根目录下，运行以下命令安装依赖：

npm install -g weixin-devtools-cli

2.3 启动自动预览

安装完成后，在项目根目录下运行以下命令启动自动预览：

weixin-devtools --type=app --project=./

3. HTTP调用

3.1 获取端口号

微信开发者工具提供了获取端口号的API，可以通过以下步骤获取端口号：

1. 打开微信开发者工具。
2. 点击右上角的设置按钮。
3. 在「设置」窗口中，找到「网络」选项卡。
4. 在「网络」选项卡中，找到「端口号」字段，复制该端口号。

3.2 发送HTTP请求

获取端口号后，可以使用HTTP请求触发自动预览：

curl -X POST "http://127.0.0.1:8088/rebuild"

其中，127.0.0.1是本机IP地址，8088是端口号。

4. 踩过的坑

4.1 命令行调用时提示Error: Unknown command

如果在运行命令时提示Error: Unknown command，可能是因为你没有安装依赖。可以按照以下步骤解决：

npm install -g weixin-devtools-cli

4.2 命令行调用时提示Error: Cannot find module 'weixin-devtools-cli'

如果在运行命令时提示Error: Cannot find module 'weixin-devtools-cli'，可能是因为你的环境变量中没有安装微信开发者工具的bin目录。可以按照以下步骤解决：

1. 在环境变量中添加微信开发者工具的bin目录。
2. 重新打开终端窗口。

4.3 命令行调用时提示Error: Please input valid project path

如果在运行命令时提示Error: Please input valid project path，可能是因为你输入的项目路径不正确。可以按照以下步骤解决：

1. 检查你输入的项目路径是否正确。
2. 确保项目路径中没有空格。

4.4 HTTP调用时提示connection refused

如果在发送HTTP请求时提示connection refused，可能是因为你的端口号不正确。可以按照以下步骤解决：

1. 检查你获取的端口号是否正确。
2. 确保微信开发者工具正在运行。