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

目录

前言

一 软件部分

1. 微信开发者工具

2. HBuilder X 开发工具

二 配置部分

1. 关于 HBuilder X 配置

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

三 运行项目

1. 新建项目

2. 代码编写

3. 内置浏览器 编译

4. 配置小程序

AppID获取

注意

四 实现效果

---

前言

uni-app开发小程序的已经很普遍了，当然肯定有很多人已经发过环境搭建这些，我这边只是记录我搭建的时候遇到的问题记录一下，防止之后自己忘记咯，有问题可以指出就行

一 软件部分

首先我们需要用到两个东西 一个是微信开发者工具 ，一个是 HBuilder X，这两个东西，微信开发者工具主要实现的编译运行部分，代码部分需要在 HBuilder X里面进行编写和修改，当然用 HBuilder X 内置的web也可以运行起来

1. 微信开发者工具

选择自己需要安装到的路径上就行了

微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html

安装好以后

2. HBuilder X 开发工具

 XHbuilder Xhttps://www.dcloud.io/hbuilderx.html

把压缩包解压即可使用

打开之后界面如下

二 配置部分

注：这边建议把  Node.js 环境加上哦
提供一个安装教程查看

Vue开发 -- Node.js环境配置以及项目运行（图文讲解）文章浏览阅读1.8k次，点赞23次，收藏25次。写项目需要使用到Vue开发，恰好重新换电脑了，也就记录一下安装以及配置过程，记录一下遇到的问题和解决方法，方便以后看和参考。_node 项目运行https://herui.blog.csdn.net/article/details/135671505

1. 关于 HBuilder X 配置

打开设置

 选择运行配置部分 找到微信开发者路径 把我们安装的微信开发者工具安装路径放进去

 还是运行配置部分 找到 node 路径 把我们安装的 node放进去

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

首先点击 开发者工具的 右上角 进去设置

 点击 安全 选项 并把服务端口 打开

三 运行项目

1. 新建项目

首先在 HBuilder X 里面新建一个 Vue2 的项目
一定要选择 Vue2 不然运行不了微信小程序

2. 代码编写

软件会让我们自己建立项目，我们就可以在 index.vue 里面进行我们代码编写了

开发过web的小伙伴 入门这个应该很快

3. 内置浏览器 编译

我们直接点击右上 编译 一下看一下代码这些是否有错 ，没有就是会显示我们自己建立的模板

4. 配置小程序

首先我们需要进行一些配置

如果我们是导入的别人的项目，我们需要重新获取一下 uni-app 的 id

如果自己建立的项目可以不管这部分

找到微信小程序配置 

我们需要 微信小程序的 AppID 查看下面这篇文章 然后获取一些

AppID获取

微信小程序注册流程及APPID获取（完整版图文教程）文章浏览阅读5.1w次，点赞83次，收藏210次。本文将图文介绍微信小程序注册、完善小程序账号信息、添加项目成员和体验成员和获取小程序ID（AppID）及小程序密钥（AppSecret）的详细流程，旨在提供简明的入门指导和实践建议。微信小程序提供了一个简单而直接的方式，让开发者能够快速开始他们的小程序开发旅程。开发者需要访问微信公众平台的官方网站，并选择“小程序”作为注册类型。这个过程中，你会被要求提供一些基本信息，包括但不限于你的个人或企业信息。值得注意的是，根据你的开发目的选择正确的账号类型非常重要，因为它会影响到你可以使用的微信小程序功能和权限。_微信小程序appidhttps://blog.csdn.net/Captinyoo/article/details/136433186

注意

这个ID 和我们登录的微信开发者工具登录的微信需要关联 否则运行不了
如果我们需要运行别人的小程序 ，也需要修改这个部分

 四 实现效果

做完上面之后，我们只需要点击 上面的运行 选择 微信开发者工具 就可以自动编译运行了

 软件会自动启动 选择信任运行

运行效果

修改代码 在HBuilder X里面修改了代码之后

按 Ctrl + S 即可以自动运行编译

---