[巨详细]使用HBuilder-X新建uniapp项目教程

已于 2024-06-19 13:34:17 修改
阅读量1.3k 收藏 7
点赞数 5
分类专栏： uniapp 文章标签： uni-app
于 2024-06-18 12:05:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48998573/article/details/139768970
版权

在这里插入图片描述

文章目录

安装HBuilder-X

详细步骤可看上文》》

启动uniapp项目

先打开HBuilder-X
在这里插入图片描述
点击新建项目在这里插入图片描述
选择uniapp侧边栏，mian中的点击浏览
在这里插入图片描述选择已经安装到本地的uniapp项目，并输入项目名称
在这里插入图片描述
点击创建 即可创建成功
在这里插入图片描述
点击运行到浏览器，选择想要显示的浏览器即可：
在这里插入图片描述

在这里插入图片描述

其他：

下载预览浏览器

在这里插入图片描述

下载终端插件

在这里插入图片描述
在这里插入图片描述

想用uni-ui

在HBuilderX 新建uni-app项目的模板中，选择uni-ui模板
在这里插入图片描述
在这里插入图片描述

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。

使用HBuilderX高效搭建Uni-App微信小程序开发环境
qq_31226163的博客
05-24 6313
Uni-App是一个使用Vue.js开发所有前端应用的框架，支持发布到iOS、Android、H5、以及各种小程序平台（包括微信小程序、支付宝小程序等）。它的核心优势在于一套代码可以编译到多个平台，大大降低了跨平台开发的成本。HBuilderX是DCloud推出的一款专为前端开发者设计的开发工具，内置了对Vue.js、uni-app的完美支持，提供了强大的代码提示、智能感知、模板快速生成等功能，让开发效率飞升。从零开始，申请开通微信小程序全流程_微信公众号申请小程序 csdn-CSDN博客。
使用hbuilder X创建uniapp项目
Summer_JK的博客
06-21 5959
使用hbuilder X创建uniapp项目一、打开hbuilder X软件，左上角 文件-新建-项目，如图： 二、在弹窗内，填写项目名称，选择你自己需要的项目案例，可根据自己需求选择vue版本2/3，如图： 三、这时你的项目已经创建好了，自动由hbuilderX打开，项目大致文件内容如图： 四、设置底部导航跳转，打开pages.json文件（pages是路由跳转地址，tabBar是配置底部导航栏），如果顶部导航想要添加相应的按钮图标，可添加‘app-plus’配置，这里的‘fontSrc’图标来自阿里，下
uni-app的上手实现教程
最新发布
m0_72030584的博客
04-09 699
uni-app上手实现指南
HBuilderX（uni-app） 新手保姆级教程！看这篇就够了！
xiaolouuuu的博客
12-06 9812
HBuilderX 是一款集成开发环境（IDE），它支持多种编程语言和框架，包括HTML、CSS、JavaScript、PHP等。而 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，它允许开发者编写一次代码，然后发布到iOS、Android、Web（包括PC和移动端）、以及各种小程序（微信/支付宝/百度等）平台。
HBuilderX 创建 uni-app 项目
Singe_lq的博客
11-21 683
👉国内 gitee 下载github 下载。通过命令行创建 uni-app 项目，，TypeScript 类型支持友好。编译成 H5 端可运行。vue3 + ts 版。通过浏览器预览项目。
hbuilderx创建、运行uni-app
zengliguang的专栏
02-24 4423
在百度开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 百度开发者工具，即可在百度开发者工具里面体验uni-app。在抖音开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 抖音开发者工具，即可在抖音开发者工具里面体验uni-app。真机运行：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。
HBuilderX初次开发uni-app各种配置
graphyer的博客
03-28 3531
你需要下载HBuilder和微信开发者工具需要申请微信小程序appid当然后面的开发还有很多事情要做，慢慢去学吧，比如下载uni-ui插件使用等。
使用HBuilder X创建uniapp项目并安装与配置uView的详细步骤
qq_35309973的博客
02-26 3926
HBuilder X是DCloud公司推出的一个强大的HTML5开发工具，支持Vue.js、uni-app框架等。uView是一个基于uni-app的UI组件库，提供了丰富的界面交互组件。下面将详细介绍在HBuilder X中安装和配置uView的步骤。
HBuilderX入门uniapp
09-26
【HBuilderX入门uniapp】项目是为初学者设计的一个基础教程，主要涵盖了使用HBuilderX工具进行uniapp开发的基本流程。uniapp是一个基于Vue.js的多端开发框架，能够帮助开发者一次编写，多端运行，包括微信小程序、...
uni-app项目（一）-初始化uni-app项目_下载 HBuilderX_新建 uni-app 项目_把项目运行到微信开发者工具_使用 git 管理项目
qq_45811054的博客
03-30 1692
ui-app项目（一）-初始化uni-app项目_下载 HBuilderX_新建 uni-app 项目_把项目运行到微信开发者工具_使用 git 管理项目
新手HbuilderX uni-app使用心得
zwh1636771005的博客
06-06 1180
当然还是和刚刚上面说的咿呀那个，创建项目，名称我用的Uni-A_1，然后创建首页、搜索页、分类页、电影详情页，以及一些其他的页面，好了，这个项目和我的新手心得就写到这里了，然后我后续学到了很多其他东西，一时半会不好总结，只能大概提一下，后续学到的，可以用云数据库充当后端代替接口，然后还有代码的拓展组件，还有第三方代码uni-ui 介绍 | uni-app官网 (dcloud.net.cn)，内置组件的使用方法里面也可以找到，实在解决不了的疑问问问老师，再就是百度、g先生。
HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，带后台
09-28
HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，管理后台是skyshop电商程序，用PHP+mysql开发的，简单部署了一下，可以使用。
创建uniapp项目
持续输出，励志当全栈开发人员
11-13 2401
因为他在template中调用的时候只要写属性名，但是在script中调用的时候却要写成**“变量名.value”**拿到相关的数据，这种用法就很像ref。2.尽量只将他堪称一个只读属性，要改的话就改他的数据源，而不是计算属性本身。比如不要直接给下面的fullName属性赋值，可以给firstName赋值来改变数据。补充：这个案例用到了相关的过滤属性，以下是完成的相关案例。filter进行相关的过滤，reduce进行求和。
HBuilderX,uni-app
daizikui的博客
10-02 2115
组件支持的生命周期，与vue标准组件的生命周期相同。uni.navigateBack() 关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。uni.navigateTo() 保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，使⽤。events ⻚⾯间通信接⼝，⽤于监听被打开⻚⾯发送到当前⻚⾯的数据。uni.redirectTo() 关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯。uni.reLaunch() 关闭所有⻚⾯，打开到应⽤内的某个⻚⾯。⼀般是在设置 ==>当前的⻚⾯栈，决定需要返回⼏层。⻚⾯，并关闭其他所有⾮。
[巨详细]使用HBuilder-X启动uniapp项目教程
肥晨开发的学习之路
06-18 5190
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。点击运行–》运行到浏览器–》任意选择浏览器。其他的情况下可以选择合适的命令行。
uni-app入门:HBuilderX安装与项目创建
weixin_43401380的博客
12-04 3759
uni-app入门实战:HBuilderX安装与项目创建
uni-app开发小程序：通过HBuilderX可视化界面创建uni-app项目
学亮编程手记
11-19 2485
uni-app支持通过 可视化界面、vue-cli两种方式快速创建项目。可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
HBuilder uni-app 小程序开发
SuperAE86的博客
12-10 1916
这几天研究了哈小程序开发，使用过的是HBuilder和微信开发工具： .下载HBiulder和微信小程序开发工具(稳定版)。 https://www.dcloud.io/hbuilderx.html HBiulder https://developers.weixin.qq.com/miniprogram/dev/devtools/dow...
uni-app笔记2-HBuilderX创建uni-app
zj850324的博客
12-24 573
睿洛医疗 1，准备环境 安装HBuilderXhttps://hx.dcloud.net.cn/Tutorial/install/windows安装微信开发者工具（开远程端口）https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2，创建uni-app 在点击工具栏里的文件 -> 新建 -> 项目; 选择uni-app类型，输入工程名，选择模板，点击创建; 3，运............
hbuilderx环境配置uniapp
03-08
### HBuilderX UniApp 环境配置教程 #### 一、下载并安装 HBuilderX HBuilderX 是 DCloud 官方提供的集成开发环境，专门用于支持 UniApp 的开发工作。为了开始配置环境，需先访问[HBuilderX官方网站](https://www.dcloud.io/hbuilderx.html)，按照页面提示完成软件的下载与安装过程[^1]。 #### 二、初始化项目设置 首次启动 HBuilderX 后，建议创建一个新的 UniApp 项目来熟悉界面布局和基本操作流程。通过菜单栏选择 `File -> New Project` 来新建一个名为 “MyFirstUniApp”的空白模板工程。这一步骤有助于理解项目的结构以及后续可能涉及到的各种资源文件夹用途[^3]。 #### 三、配置微信开发者工具（可选） 如果计划利用微信小程序功能，则还需额外安装 微信开发者工具 。此步骤并非强制性的但对于想要测试或发布到微信平台的应用来说非常重要。安装完成后，在 HBuilderX 中可以通过指定路径找到该应用程序的位置来进行关联设置。 #### 四、导入离线 SDK (针对特定需求) 对于某些高级特性或者自定义组件的支持，可能会需要用到官方提供的离线 SDK 资源包。这些资源通常包含了预编译好的库文件和其他必要的依赖项。以 Android 平台为例，可以将解压后的 `HBuilder-Integrate-AS` 文件夹内的内容复制至本地磁盘上的合适位置，并在 IDE 内部相应选项里指明其所在地址以便于后期调用[^2]。 ```bash # 假设已将SDK放置于 ~/Documents/uniapp-sdk/ cd ~/Documents/uniapp-sdk/HBuilder-Integrate-AS ``` #### 五、调整安全性及其他个性化设定 考虑到不同用户的实际应用场景差异较大，因此有必要根据具体情况进行一些个性化的参数调节。比如启用 HTTPS 支持、修改默认端口号等都属于常见的优化措施之一。这部分的具体指导信息可以在网络上查找更多详细的文档资料作为补充学习材料。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奶糖 肥晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值