目录
前言
一 软件部分
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获取（完整版图文教程）文章浏览阅读5.1w次，点赞83次，收藏210次。本文将图文介绍小程序>微信小程序注册、完善小程序账号信息、添加项目成员和体验成员和获取小程序ID（AppID）及小程序密钥（AppSecret）的详细流程，旨在提供简明的入门指导和实践建议。小程序>微信小程序提供了一个简单而直接的方式，让开发者能够快速开始他们的小程序开发旅程。开发者需要访问微信公众平台的官方网站，并选择“小程序”作为注册类型。这个过程中，你会被要求提供一些基本信息，包括但不限于你的个人或企业信息。值得注意的是，根据你的开发目的选择正确的账号类型非常重要，因为它会影响到你可以使用的小程序>微信小程序功能和权限。_小程序>微信小程序appidhttps://blog.csdn.net/Captinyoo/article/details/136433186
注意
这个ID 和我们登录的微信开发者工具登录的微信需要关联 否则运行不了
如果我们需要运行别人的小程序 ，也需要修改这个部分
四 实现效果
做完上面之后，我们只需要点击 上面的运行 选择 微信开发者工具 就可以自动编译运行了
软件会自动启动 选择信任运行
运行效果
修改代码 在HBuilder X里面修改了代码之后
按 Ctrl + S 即可以自动运行编译
