uniapp+vue3+ts开发微信小程序+抖音小程序等跨平台应用入门，环境搭建

淩亂°似流年 2024-02-21 09:29 5阅读 0赞

![2396e04b20df4e509e7b50b9c124953a.png][]使用之前需要安装hbuilder和微信开发者工具，hbuilder是uniapp的开发工具，微信开发者工具是微信官方的小程序开发平台：

hbuilder下载地址：[HBuilderX-高效极客技巧][HBuilderX-]

微信开发者工具：[微信开发者工具下载地址与更新日志 | 微信开放文档][Link 1]

hbuilder需要加压后打开里面的启动文件，但是这种方式相对麻烦，可以创建一个桌面快捷方式来使用。

## 1.创建项目 ##

点击城建，创建项目名称和小程序模板，然后选择Vue3

![94e7bdca39fd44ceb7e75354def93010.png][]

## 2.设置微信开发者工具 ##

创建完项目之后，点击运行，会报一个错误：\[error\] 工具的服务端口已关闭。要使用命令行调用工具，请在下方输入 y 以确认开启，或手动打开工具 -> 设置 -> 安全设置，将服务端口开启![bc1fff887ebd4cdf9be2caa17c9aa274.png][]

这是因为微信开发者工具的安全端口没有开启： 开启这个就可以了

![2179dce1e2414d91850826dd502aacdd.png][]

然后重新运行就可以了： ![6c5c02bb9ec24e1dbe307a7c7a0fdae2.png][]

[2396e04b20df4e509e7b50b9c124953a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/a81a8f92e50a47ccb441883cb0ab1a32.png
[HBuilderX-]: https://www.dcloud.io/hbuilderx.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[94e7bdca39fd44ceb7e75354def93010.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/0d1b782bbc91480f961a7b8468486853.png
[bc1fff887ebd4cdf9be2caa17c9aa274.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/7748477b04c44080956a64e54a1a48d1.png
[2179dce1e2414d91850826dd502aacdd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/027ba32dcaae439f983f2145b5248b1c.png
[6c5c02bb9ec24e1dbe307a7c7a0fdae2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/cb32c421038c4cf587d2990507948998.png