小程序 -- 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