uni-app入门:HBuilderX安装与项目创建

简介: uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。

1.HBuilderX下载与安装


uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。


主要好处:

模板丰富

完善的智能提示

一键运行


   当然,依然可以根据自己的喜好,选择使用 VS Code、Sublime、记事本… 等自己喜欢的编辑器!

HBuilder下载:

   进入官方首页:HBuilderX 的官网,点击首页的 DOWNLOAD 进行下载,下载完成后解压自定义安装即可,操作很简单这里不再重述.

5cd564ea7b84b655e0c1564da3f191c6_906afda496e24b4ba3b0ee84248b5600.png

   一般下载正式版即可,alpha版更新频率要更快,提供反馈入口,个人理解更像一个公测版,这里下载正式版就能满足使用.

   双击 HBuilderX.exe 即可启动 HBuilderX.

   首次使用可以更改编辑器的配置信息,操作步骤如下:工具 -> 设置 -> 打开 Settings.json 按需进行配置.

5fc640741dd21a2ade3d119e07d6e7f7_a0e691bc2dc242638b058390b1571d39.png

源码视图下可以添加如下配置信息:

{
  "editor.colorScheme": "Default",
  "editor.fontSize": 12,
  "editor.fontFamily": "Consolas",
  "editor.fontFmyCHS": "微软雅黑 Light",
  "editor.insertSpaces": true,
  "editor.lineHeight": "1.5",
  "editor.minimap.enabled": false,
  "editor.mouseWheelZoom": true,
  "editor.onlyHighlightWord": false,
  "editor.tabSize": 2,
  "editor.wordWrap": true,
  "explorer.iconTheme": "vs-seti",
  "editor.codeassist.px2rem.enabel": false,
  "editor.codeassist.px2upx.enabel": false
}


2.新建 uni-app 项目并运行到微信开发者工具


   HBuilderX中选择:文件—新建—项目—创建项目名,项目详情信息创建步骤参考下图:

ec705d51e174b3c7879ed1a523730019_a603f13fb0804c1da41cca43c7b01b4e.png

   运行到微信开发者工具操作步骤参考下图:

ae099ee79aac64d9634ff9410374834c_2aec56e8600f4b848e93c242e30c4ce0.png

   设置微信开发者工具路径,设置路径:工具–设置

cb1c9e892ee4601b1d1bb06e1219ce70_e0158fc1fa9848358311c873f23a14ca.png

   微信开发者工具开启服务端口(微信开发者工具中设置–通用设置):

d826372cd3f85f481d1ca744178b30e1_2e40a4a06ba440329f9af18d013a07fd.png

   运行项目到微信开发者工具,操作步骤参考下图:

5a4a767a0d56ec89663323d9af5e1f0f_280a883a99344744b9220dcf9cf31fe8.png

   设置好之后会从微信开发者工具中打开该项目.


3.uni-app项目结构说明


项目目录结构:

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
└─package.json         配置项目描述信息,作者信息


App.vue中配置生命周期

常用的生命周期:

   onLaunch:初始化操作,项目启动只加载一次;

   onShow:项目启动或是从后台进入到前台;

   onHide:从前台进入到后台;

   以上三个常用于export default进行导出声明.关于生命周期更多方法可以看下官方连接:

https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle

main.js

   主要作用:初始化vue实例、导入常用的插件(如网络请求http)、存储全局变量.

pages.json

常见的配置项如下:

6a8764c58a7e2d7b4e5594c756159e14_5c766b34b349424a8c0579b8a9eac28f.png

   如果想在项目之前之后加载指定的页面,在最开始的时候配置page页面信息.其余是定义全局样式、tabbar、子包信息。

4.HBuilderX常用操作


项目中全局搜索关键字:

Ctrl+alt+f

全局搜索文件:

Ctrl+p
• 1

复制当前行到下一行:

Ctrl+shift+r

删除当前行:

Ctrl+d
• 1

将属性值添加单引号:

选中属性值之后按Ctrl+引号

点击函数名跳转到函数实现代码:

alt+鼠标左键

注意:仅能对调用函数名以及函数实现代码在同一页面进行跳转.也支持导入文件跳转指定的页面.

Hbuilder同时打开多个项目

选中项目,右键选择新窗口打开
相关文章
|
3月前
|
缓存 监控 Android开发
App Trace 快速安装解析(开发者视角)
App Trace 是一款应用性能监控工具,可追踪启动时间、方法耗时及卡顿等指标,助力开发调试与性能优化。支持 Android 和 iOS 平台,提供依赖引入、初始化配置和自动化脚本等快速安装方案,同时包含采样率、本地缓存等高级配置选项。集成后可通过日志检查与测试事件验证功能,注意在发布版本中使用 no-op 版本以减少性能影响,并确保隐私合规。
|
11天前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
2月前
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
210 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
2月前
|
存储 人工智能 Android开发
为什么微信发送的APP安装不了,.apk转化为.apk.1
微信发送的APP文件常被改为.apk.1格式导致无法安装,推荐使用夸克或QQ浏览器解决。
214 14
|
3月前
|
监控 测试技术 Android开发
App Trace技术解析:传参安装、一键拉起与快速安装
本文从开发者视角解析App Trace技术的关键功能与实现方法,涵盖传参安装、一键拉起和快速安装技术。详细介绍了Android和iOS平台的具体实现代码与配置要点,探讨了参数丢失、跨平台一致性及iOS限制等技术挑战的解决方案,并提供了测试策略、监控指标和性能优化的最佳实践建议,帮助开发者提升用户获取效率与体验。
|
3月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
295 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
2月前
|
存储 移动开发 监控
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
App Trace系统通过一键拉起、快速安装和免提写邀请码三大功能,显著提升用户转化率、安装成功率和邀请注册率。结合深度技术实现与优化,助力公司用户增长,成为移动端核心基础设施。
|
7月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
451 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
7月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
178 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex