HBuilderX初次开发uni-app各种配置

原创

已于 2024-03-28 15:13:57 修改 · 3.8k 阅读

51 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #编辑器 #vue.js #微信开放平台 #微信小程序

于 2024-03-28 09:32:05 首次发布

本文详细介绍了如何下载HBuilder，创建uni-app项目，以及如何配置个人号的appid。步骤包括下载HBuilderX，创建项目，获取并应用小程序appid，微信开发者工具的使用，新建和编译页面。

HBuilder下载

HBuilderX官网下载

点击直接下载

直接使用解压缩工具把HBuilder文件夹放在你想要存储的地方，比如D盘/programfiles/HBulider

启动

点击绿色图标直接启动，可以添加快捷方式到桌面更方便

HBuilder创建uni-app项目

创建

选择uni-app
填写自己想要的项目名称，最好是英文
自定义文件保存路径
选择模板（这里以最简单的默认模板为例）
vue版本选择
创建

创建完成会出现该项目在hbulider，很快

配置appid（个人号为例）

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

graphyer

关注关注

12
点赞
踩
51

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【第二趴】uni-app开发工具（手把手带你安装HBuilderX、搭建第一个多端项目初体验）

官方推荐

11-08

4万+

聚沙成塔——每天进步一点点，大家好我是几何心凉，不难发现越来越多的前端招聘JD中都加入了uni-app 这一项，它也已经成为前端开发者不可或缺的一项技能了，所以凉哥为大家推出聚沙成塔【45天玩转uni-app】专栏，帮助大家对 uni-app 进行学习和理解，uni-app可以通过一套代码多端发行，相信你掌握本语言后无论是毕设还是求职项目都可以说是锦上添花，妥妥加分项；快来订阅专栏跟着凉哥一起来感受 uni-app 为开发者带来的劲感吧！

HBuilder的下载与使用(详细步骤)

最新发布

小宝哥Code的专栏

10-22

1490

HBuilderX是一款由DCloud推出的轻量级前端开发工具，专为Web和移动端应用开发设计。它具备秒级启动、低内存占用等高性能特点，深度集成Vue生态，提供智能代码提示、语法高亮和多光标编辑等强大功能。作为UniApp开发的首选工具，HBuilderX支持一次开发多端发布，涵盖微信小程序、支付宝小程序、H5和App等平台。其特色包括丰富的代码助手、Emmet快速编码，以及符合中文开发者习惯的界面，大幅提升了前端开发效率，尤其适合Vue和跨平台应用开发场景。

❤ HbuildX使用以及快捷键

林太白

01-16

1万+

❤ HbuildX使用以及快捷键

使用HBuilderX高效搭建Uni-App微信小程序开发环境

qq_31226163的博客

05-24

6963

Uni-App是一个使用Vue.js开发所有前端应用的框架，支持发布到iOS、Android、H5、以及各种小程序平台（包括微信小程序、支付宝小程序等）。它的核心优势在于一套代码可以编译到多个平台，大大降低了跨平台开发的成本。HBuilderX是DCloud推出的一款专为前端开发者设计的开发工具，内置了对Vue.js、uni-app的完美支持，提供了强大的代码提示、智能感知、模板快速生成等功能，让开发效率飞升。从零开始，申请开通微信小程序全流程_微信公众号申请小程序 csdn-优快云博客。

HBuilderX,uni-app

daizikui的博客

10-02

2435

组件支持的生命周期，与vue标准组件的生命周期相同。uni.navigateBack() 关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。uni.navigateTo() 保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，使⽤。events ⻚⾯间通信接⼝，⽤于监听被打开⻚⾯发送到当前⻚⾯的数据。uni.redirectTo() 关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯。uni.reLaunch() 关闭所有⻚⾯，打开到应⽤内的某个⻚⾯。⼀般是在设置 ==>当前的⻚⾯栈，决定需要返回⼏层。⻚⾯，并关闭其他所有⾮。

[巨详细]使用HBuilder-X启动uniapp项目教程

肥晨开发的学习之路

06-18

6783

欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。点击运行–》运行到浏览器–》任意选择浏览器。其他的情况下可以选择合适的命令行。

2024年01uni-app 基础教程环境配置【uniapp 专题 1】(1)，字节跳动厂内部超高质量Flutter+Kotlin笔记

2401_84411433的博客

05-04

1314

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】3.uni-app创建项目的两种方式uni-app支持通过可视化界面、vue-cli命令行两种方式快速创建项目。选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为，如。

微信小程序使用uni-app开发小程序及部分功能实现详解心得

Fang2001131919的博客

06-19

4827

uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台；到此这篇关于微信小程序使用uni-app开发小程序及部分功能实现的文章就介绍到这了,更多相关微信小程序用uni-app开发小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

2301_82244509的博客

05-06

1263

选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为，如就是下载图片模板。整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，带后台

09-28

HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，管理后台是skyshop电商程序，用PHP+mysql开发的，简单部署了一下，可以使用。

使用cli 搭建uni-app项目并引入vant

weixin_43867229的博客

11-10

498

此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：我这里选的是。

hbuilderx创建、运行uni-app

zengliguang的专栏

02-24

4775

在百度开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 百度开发者工具，即可在百度开发者工具里面体验uni-app。在抖音开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 抖音开发者工具，即可在抖音开发者工具里面体验uni-app。真机运行：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。

使用hbuilder X创建uniapp项目

Swallow的博客

06-21

6208

使用hbuilder X创建uniapp项目一、打开hbuilder X软件，左上角文件-新建-项目，如图：二、在弹窗内，填写项目名称，选择你自己需要的项目案例，可根据自己需求选择vue版本2/3，如图：三、这时你的项目已经创建好了，自动由hbuilderX打开，项目大致文件内容如图：四、设置底部导航跳转，打开pages.json文件（pages是路由跳转地址，tabBar是配置底部导航栏），如果顶部导航想要添加相应的按钮图标，可添加‘app-plus’配置，这里的‘fontSrc’图标来自阿里，下

uni-app开发小程序：通过HBuilderX可视化界面创建uni-app项目

学亮编程手记

11-19

3775

uni-app支持通过可视化界面、vue-cli两种方式快速创建项目。可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

【蛋糕商城】（一）使用HBuliderX搭建uni-app项目

io_123io_123的博客

04-16

6847

【蛋糕商城】（一）项目搭建：如何搭建一个uni-app项目

创建、运行uni-app（通过HBuilderX）

博客

04-14

1377

uni-app官网•介绍•快速上手。

使用HBuilderX搭建uni-app

仅此一❤

03-04

9674

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。查看更多 1、工具安装 HBuilderX：官方IDE下载地址 2、创建uni-app 创建项目：创建完后目录结构（common目录是手动创建的） 3、使用vuex vuex是HBuilderX已经内置好了，可以直接使用代码如下 index.js ...