uni-app开发微信小程序环境搭建指南（HBuilder X+微信开发者工具）

uni-app开发微信小程序环境搭建指南（HBuilder X+微信开发者工具）

引用

CSDN

1.

https://blog.csdn.net/herui_2/article/details/144717637

前言

uni-app开发小程序已经很普遍了，本文将详细介绍使用uni-app开发微信小程序的环境搭建过程，包括所需软件的安装配置、项目创建、代码编写及运行等步骤。

一、软件部分

首先我们需要用到两个工具：微信开发者工具和HBuilder X。微信开发者工具主要实现编译运行功能，而代码编写和修改则需要在HBuilder X中进行。

1. 微信开发者工具

选择自己需要安装到的路径即可。下载地址：微信开发者工具

2. HBuilder X 开发工具

下载HBuilder X压缩包并解压即可使用。打开后的界面如下：

二、配置部分

建议先配置Node.js环境。以下是详细的配置步骤：

1. 关于 HBuilder X 配置

1. 打开HBuilder X的设置
2. 选择运行配置部分
3. 找到微信开发者工具路径，输入已安装的微信开发者工具路径
4. 找到Node路径，输入已安装的Node.js路径

2. 关于 微信开发工具 配置

1. 打开微信开发者工具
2. 点击右上角进入设置
3. 选择安全选项
4. 打开服务端口

三、运行项目

1. 新建项目

在HBuilder X中新建一个Vue2项目。注意一定要选择Vue2版本，否则无法运行微信小程序。

2. 代码编写

在新建的项目中，可以在index.vue文件中进行代码编写。对于有Web开发经验的开发者来说，入门uni-app开发会非常快。

3. 内置浏览器 编译

点击右上角的编译按钮，检查代码是否正确。如果代码没有问题，会显示你创建的模板。

4. 配置小程序

如果你是导入别人的项目，需要重新获取uni-app的ID。如果是自己创建的项目，则不需要进行这一步。

AppID获取

要获取微信小程序的AppID，可以参考这篇文章：微信小程序注册流程及APPID获取

注意

这个AppID需要与你登录微信开发者工具时使用的微信账号关联，否则无法正常运行。

四、实现效果

完成上述配置后，点击运行按钮，选择微信开发者工具，系统会自动编译运行。软件会自动启动并提示你选择信任运行。

运行效果如下：

在HBuilder X中修改代码后，只需按Ctrl + S即可自动运行编译。