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

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

引用

CSDN

1.

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

目录
前言
一 软件部分

1. 微信开发者工具
2. HBuilder X 开发工具
   二 配置部分
3. 关于 HBuilder X 配置
4. 关于 微信开发工具 配置
   三 运行项目
5. 新建项目
6. 代码编写
7. 内置浏览器 编译
8. 配置小程序
   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 X下载地址：
https://www.dcloud.io/hbuilderx.html

把压缩包解压即可使用。打开之后界面如下：

二 配置部分

注：这边建议把 Node.js 环境加上哦

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）的详细流程，旨在提供简明的入门指导和实践建议。微信小程序提供了一个简单而直接的方式，让开发者能够快速开始他们的小程序开发旅程。开发者需要访问微信公众平台的官方网站，并选择“小程序”作为注册类型。这个过程中，你会被要求提供一些基本信息，包括但不限于你的个人或企业信息。值得注意的是，根据你的开发目的选择正确的账号类型非常重要，因为它会影响到你可以使用的微信小程序功能和权限。_微信小程序appid
https://blog.csdn.net/Captinyoo/article/details/136433186

注意

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

四 实现效果

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

修改代码 在HBuilder X里面修改了代码之后
按 Ctrl + S 即可以自动运行编译