HBuilderX（uni-app） 新手保姆级教程！看这篇就够了！

HBuilderX 是一款集成开发环境（IDE），它支持多种编程语言和框架，包括HTML、CSS、JavaScript、PHP等。而 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，它允许开发者编写一次代码，然后发布到iOS、Android、Web（包括PC和移动端）、以及各种小程序（微信/支付宝/百度等）平台。

目录

一、下载HBuilderX

二、 启动运行

三、 pages.json 和 tabBar 

四、uni-app 和 原生小程序开发区别

五、命令行创建 uni-app 项目

六、vscode开发

 七、扩展组件（uni-ui）

---

一、下载HBuilderX

去官方下载：

HBuilderX-高效极客技巧

二、 启动运行

1、安装插件

HBuilderX 安装插件 uni-app (vue3) 主要是为了支持基于 Vue 3 构建的 Uni-app 项目。Uni-app 是一个跨平台的应用开发框架，它支持使用 Vue.js 来开发应用，并且能够编译到多个平台（如微信小程序、Android、iOS、H5等）。随着 Vue 3 的发布，Uni-app 也在更新中引入了 Vue 3 的支持，提供了更好的性能、功能和开发体验。 

（1）点击插件安装

安装vue3编译器：

（2）运行后报错 

使用微信小程序开发者工具时遇到了初始化（initialize）的错误，服务端口未开启

在开发者工具的设置 -> 安全设置中开启服务端口。

（3）点击设置

点开微信开发者工具，打开端口

（4）成功 

点击分离窗口更好编写代码：

三、 pages.json 和 tabBar 

 1、各文件的功能

 具体配置请看官网：uni-app官网

2、新建页面

勾选pages.json可以编辑页面标题：

路由会在page.json中自动配置好：

基本配置如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path" : "pages/my/my",
			"style" : 
			{
				"navigationBarTitleText" : "我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",// 导航栏文本颜色
		"navigationBarTitleText": "uni-app", // 默认导航栏标题
		"navigationBarBackgroundColor":  "#1bac9b",// 导航栏背景色
		"backgroundColor": "#F8F8F8",// 页面背景色
		"enablePullDownRefresh": true//开启下拉刷新
	},
	 // 配置 tabBar
	  "tabBar": {
	    "color": "#000000", // 图标和文字的颜色
	    "selectedColor": "#ff6300", // 选中的图标和文字的颜色
	    "backgroundColor": "#FFFFFF", // tabBar 背景颜色
	    "borderStyle": "black", // tabBar 上边框颜色（ios有效）
	    "list": [
	      {
	        "pagePath": "pages/index/index", // 对应的页面路径
	        "iconPath": "static/home.png", // 图标路径
	        "selectedIconPath": "static/home_active.png", // 选中时的图标路径
	        "text": "首页" // 标签栏文字
	      },
	      {
	        "pagePath": "pages/my/my",
	        "iconPath": "static/mine.png",
	        "selectedIconPath": "static/mine_active.png",
	        "text": "我的"
	      }
	    ]
	  },
	"uniIdRouter": {}
}

配置完后如下：

四、uni-app 和 原生小程序开发区别

1. 每个页面是一个 .vue 文件，数据绑定及事件处理同 Vue.js 规范
2. 属性绑定src="{{url}}”升级成 :src="url"
3. 事件绑定 bindtap="eventName"升级成 @tap="eventName"，支持()传参
4. 支持 Vue 常用指令 v-for、v-if、v-show、v-model等

 一个小例子：

<template>
	<view class="content">
		<view class="text-area" style="text-align: center;">
			用户列表：
			<text class="name">{{ name }}</text>
			<button @click="change">改名</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const name = ref('小红')
	const change = () => {
		name.value = name.value === "小红" ? "小兰" : "小红"
	}
</script>

 结果：

五、命令行创建 uni-app 项目

1. 通过HBuilderX 创建
2. 通过命令行创建(不必依赖 HBuilderX) 

地址： uni-app官网

使用Vue3/Vite版：

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

六、vscode开发

1、安装插件

2、新建页面

3、ctrl+i代码提示

 4、ts校验

 5、JSON注释

1、点击设置

2、配置允许注释的JSON

 七、扩展组件（uni-ui）

1、ts类型声明文件