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 和 原生小程序开发区别
每个页面是一个 .vue 文件，数据绑定及事件处理同 Vue.js 规范属性绑定src="{{url}}”升级成 :src="url"事件绑定 bindtap="eventName"升级成 @tap="eventName"，支持()传参支持 Vue 常用指令 v-for、v-if、v-show、v-model等
一个小例子：
用户列表：
结果：
五、命令行创建 uni-app 项目
通过HBuilderX 创建通过命令行创建(不必依赖 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类型声明文件