❤ uniapp 开发小程序环境搭建和使用零（0 开篇-介绍和运行）

♥ uniapp 环境搭建

1、工具

开发uniapp小程序需要用到的两个工具

HbuildX [开发小程序使用]
https://www.dcloud.io/hbuilderx.html

微信开发者工具
HbuildX开发的小程序运行到微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2、地址：

开发小程序官网：

https://www.dcloud.io/

（1）微信公众平台

https://mp.weixin.qq.com/

（2）微信开发文档

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

（3）uniapp开发文档

https://uniapp.dcloud.net.cn/

3、HbuilderX （开发工具）

官网地址是：
https://www.dcloud.io/
下载地址
https://www.dcloud.io/hbuilderx.html

windows系统选择对应的版本，建议下载到D盘

下载好的压缩包直接解压

解压成功以后双击进行运行

运行成功

4、微信开发者工具（运行环境）

微信开发者工具是微信运行小程序和uniapp的工具
下载的地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

选择自己对应的版本下载即可：

记住自己的安装地址：
记住这个地址：

D:\anzhuang\微信web开发者工具

等待安装完毕！

5、项目导入（存在项目：如何导入 ）

从文件根目录导入即可

6、新建项目

接下来我们就开发属于我们的第一个uniapp
打开Hbuildx，在其中选择文件，点击新建,然后搭建我们的第一个项目

选择就可以搭建属于我们的vue2或者vue3项目，这里我们以vue3版本为例，选择最简单的模板
这里我以vue3为主我搭建了一个项目

名字就简单拿了一下与我相关联的！
等项目完成以后，我们uniapp的项目环境已经搭建好了！

7、项目目录

(1) 新建立的项目目录
新建立的项目目录如下
这里我们选择最简单的模板

(2) 新建components 公共组件目录

(3) pages 页面

新建API
新建 tabBar
新建首页

添加组件列表页面

这里我们简单解释一下这个目录
目录结构

这里面包含了我们存放各种静态资源、小程序配置、项目配置、项目页面配置、项目应用配置、以及各种出入口等！

pages - 主组件目录
static - 静态资源目录
App.vue - 页面入口文件
main.js - 入口文件
manifest.json - 应用配置文件，用于指定应用的名称、图标、权限等
pages.json - 全局配置文件，包括页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
uni.scss - 全局样式文件
components - 公共组件目录

8、配置微信开发者工具地址

接下来我们就运行一下我们的项目
依次点击“工具”菜单，选择“设置”，然后点击“运行配置”，最后设置微信开发者工具的路径
在这里先把我们微信开发者工具的运行地址给填写上，如果不熟悉的话，可以查看一下自己微信开发者工具运行的地方

点击运行，运行我们的第一个项目

在这个过程之中需要依次构建我们的项目需要的环境以及依赖等，需要稍微等待一段时间
安装成功以后会提示我们：编辑工具下载成功，请重新运行！
这个时候再次点击运行，重新运行项目

9、打开微信开发者工具端口

怎么都没有反应，没办法，我只能自己手动打开了一下微信开发者工具
原来微信开发者工具要扫码登陆：
再次重新点击运行，提示如下

意思就是需要我们去打开微信开发者工具的端口
好，走起！
我们打开服务端口！
点击“设置”，选择“安全”，然后开启“服务端口”。接着到 Huildx 重新启动项目。

然后在微信小程序开发者信任工具之中信任项目并且运行

项目启动成功，看看我们的预览的界面！

10、使用官方推荐的方式搭建页面

先放图片，开发属于底部界面tab栏目

接下来为项目配置启动页面和四个底部tab切换栏目

配置好我们的底部tab栏切换时所对应的界面

这里我们需要了解几个对应的部分，

11、完善预览项目

接下来完善一下我们的项目，依次在page/tabBar下面依次搭建我们的项目，然后完善一下我们的配置，这个时候相信你已经启动看到自己的项目啦！
js 代码解读复制代码{

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "启动页面"
			}
		},
		{
			"path": "pages/tabBar/component",
			"style": {
				"navigationBarTitleText": "内置组件",
				"backgroundColor": "#F8F8F8"
			}
		}, {
			"path": "pages/tabBar/API",
			"style": {
				"navigationBarTitleText": "接口",
				"backgroundColor": "#F8F8F8"
			}
		}, {
			"path": "pages/tabBar/CSS",
			"style": {
				"navigationBarTitleText": "CSS",
				"backgroundColor": "#F8F8F8"
			}
		},
		{
		  "path": "pages/tabBar/template",
		  "style": {
		    "navigationBarTitleText": "模板"
		  }
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#007AFF",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		"list": [{
				"pagePath": "pages/tabBar/component",
				"iconPath": "static/component.png",
				"selectedIconPath": "static/componentHL.png",
				"text": "内置组件"
			},
			{
				"pagePath": "pages/tabBar/API",
				"iconPath": "static/api.png",
				"selectedIconPath": "static/apiHL.png",
				"text": "接口"
			},
			{
				"pagePath": "pages/tabBar/CSS",
				"iconPath": "static/css.png",
				"selectedIconPath": "static/cssHL.png",
				"text": "CSS"
			},
			{
				"pagePath": "pages/tabBar/template",
				"iconPath": "static/template.png",
				"selectedIconPath": "static/templateHL.png",
				"text": "模板"
			}
		]
	},
	"uniIdRouter": {}
}

到这里我们项目已经开始跑起来啦！