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

graphyer

已于 2024-03-28 15:13:57 修改

阅读量3.6k

点赞数 12

文章标签： uni-app 编辑器 vue.js 微信开放平台微信小程序

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

本文链接：https://blog.csdn.net/graphyer/article/details/137097000

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HBuilder下载

HBuilderX官网下载

点击直接下载

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

启动

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

HBuilder创建uni-app项目

创建

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

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

配置appid（个人号为例）

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

graphyer

关注关注

12
点赞
踩
50

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uni-app开发工具: HBuilderX运行配置、调试、项目基础配置、开发规范

专注于计算机研发知识和资讯分享

09-22

9313

引言 HBuliderX 开发版:https://www.dcloud.io/hbuilderx.html 微信小程序开发工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html Serverless WordPress 建站 https://kunnan.blog.csdn.net/article/details/120020130 I HBuliderX的使用 1.1 HBuliderX的运行

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

qq_31226163的博客

05-24

6420

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

参与评论您还未登录，请先登录后发表或查看评论

Hbuilderx 安装使用教程

热门推荐

xiaolouuuu的博客

12-06

1万+

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

HBuilderX,uni-app

daizikui的博客

10-02

2215

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

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

肥晨开发的学习之路

06-18

5449

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

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

博客

04-14

1261

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

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

2401_84411433的博客

05-04

1267

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

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

Fang2001131919的博客

06-19

4790

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

uni-app面试题

admin12345671的博客

04-16

6497

入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";

2301_82244509的博客

05-06

1193

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

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

09-28

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

HBuilder创建uniapp项目（Vue3、Vant Weapp）

LuoYi_ly_的博客

05-16

1万+

HBuilder搭建uniaop项目步骤，使用Vue3与Vant Weapp组件库

使用hbuilder X创建uniapp项目

Summer_JK的博客

06-21

5987

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

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

io_123io_123的博客

04-16

6715

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

使用HBuilderX搭建uni-app

仅此一❤

03-04

9549

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

hbuilderx创建、运行uni-app

zengliguang的专栏

02-24

4524

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

HbuilderX+uniapp项目-基础配置

m0_66987245的博客

02-26

1664

HbuilderX+uniapp项目-基础配置

HBuilderX 之初始化uni-app项目、项目目录结构介绍及前提配置

水w的博客

06-12

8498

HBuilderX 之初始化uni-app项目、项目目录结构介绍及前提配置。接上一篇https://blog.csdn.net/qq_45956730/article/details/125240776?spm=1001.2014.3001.5502