uni-app 系列之（一）—— 快速入门

已于 2023-03-22 09:33:52 修改
阅读量436 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # uni-app 文章标签： uni-app 前端 javascript
于 2023-03-16 18:41:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HH18700418030/article/details/129266864
uni-app是一个用于构建多端应用的前端框架，开发者可以编写一套代码发布到多个平台。本文介绍了uni-app的官方文档、开发工具HBuilderX、开发规范、特征以及项目实践，包括如何搭建项目、在浏览器和手机上运行、以及在微信开发者工具中的运行步骤。

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

简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

即使不跨端，uni-app 同时也是更好的小程序开发框架。

官方文档

https://uniapp.dcloud.net.cn/

开发工具

uni-app 的开发工具首选 uni-app 官方推荐工具：https://www.dcloud.io/hbuilderx.html

HBuilderX 是通用的前端开发工具，但为 uni-app 制成特别强化。

HBuilderX，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。

也简称HX，HX是轻如编辑器、强如IDE的合体版本。

开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 有如下开发规范：

  • 页面文件遵循 Vue 单文件组件（SFC）规范，详见
最低0.47元/天 解锁文章

200万优质内容无限畅学
『uniapp』添加桌面长按快捷操作 shortcuts（详细图文注释）
MZH
05-30 1397
大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！发现你走远了@mzh原创作品，转载必须标注原文链接欢迎关注『uniapp』 专栏，持续更新中欢迎关注『uniapp』 专栏，持续更新中『未完待续』
uni-app 经验分享，从入门到离职（三）——关于 uni-app 生命周期快速了解上手
热门推荐
黛琳ghz的博客，期待你的关注。
02-02 3万+
这篇文章是本专栏 uni-app 基础篇的第三章，通过上一篇文章的基础，我们继续对 uni-app 进行更深一步的了解和学习，这篇文章的主要内容的是讲一下在 uni-app 中的应用生命周期函数，以及关于 App.vue/App.uvue 文件在项目中的作用。
uniapp快速入门
m0_66832889的博客
05-23 1218
Uniapp是一款基于Vue.js框架的开发平台，允许开发者使用Vue语法进行跨平台应用的开发，支持应用编译成H5、小程序、APP等多种平台。Uniapp具有开发简单、调试便捷、开发效率高等优点，因此逐渐成为了跨平台开发的热门选择之一。uni-app官方文档地址pages文件夹存放页面static内的文件不会进行编译，不要放js文件，可放到common中（注意体积限制）unpackage文件夹存放打包的文件components文件夹存放各种组件App.vue。
2021 不会还有人不会uniapp吧[狗头]
CS_DGD的博客
05-24 1818
UniAPP 快速入门学习 一、UniAPP 介绍 （1）什么是 UniAPP ？ uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台，方便开发者快速交付，不需要转换开发思维，不需要更改开发习惯。 （2）为什么要选择 UniAPP ？ 开发者/案例数量更多 几十万应用、uni 统计月活12亿、70+ 微信 / QQ群 平台能力不受限 在跨端的同时，
uni-app快速入门
aoshisen的博客
09-04 387
文章目录uni-app简介uni-app优势快速入门 uni-app简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 uni-app 诞生的背景： 多端泛滥 体验不好 生态不丰富 uni-app优势 跨平台更多：一套代码多端使用，能优雅的在一个项目里调用不同平台的特色功能。 运行体验更好：组件、api 与微信小程序一致，兼容weex 原生渲
uni-app 快速入门
m0_58492934的博客
06-13 1617
uni-app 快速入门
uni-app 经验分享，从入门到离职（五）——由浅入深 uni-app 数据缓存
最新发布
黛琳ghz的博客，期待你的关注。
02-23 3万+
这篇文章是本专栏 uni-app 的基础篇的第五章，文章的主要内容是关于 uni-app 数据缓存的相关知识，包括如何使用 uni-app 提供的数据缓存 API 进行数据的读取、存储和删除操作。
uni-app 之组件 入门教程 uniapp在线教程 uni app视频教程
06-20
通过这三个视频教程——"uni-app_之组件_入门教程_uniapp在线教程_uni_app视频教程-202042213529259_30599.zip"、"uni-app_之组件_入门教程_uniapp在线教程_uni_app视频教程-202042213524160_82447.zip"和"uni-app_...
uni-app 经验分享，从入门到离职（四）——页面栈以及页面跳转的 API（开发经验总结）
黛琳ghz的博客，期待你的关注。
02-21 3万+
这篇文章是本专栏 uni-app 的项目实战篇，主要内容的是页面栈以及页面跳转的 API，页面栈是 uni-app 中一个重要的概念，它用于管理应用程序中的页面层级关系。接下来讲一下如何利用页面栈来实现页面之间的切换和导航，以及如何使用 uni-app 提供的 API 来进行页面跳转等等知识点。
uniapp----快速入门
weixin_43846020的博客
05-10 501
Uni-app快速入门+项目实战
qq_43405603的博客
06-20 2924
对uni-app进行全局配置的，决定页面文件的路径、窗口样式、原生的导航栏、底部的tabbar，它类似于微信开发者工具小程序中的app.json。简介：Uni-app是基于Vue+微信小程序体系，且基Uni-app可以开发 微信小程序、H5、安卓app、ios-app等多端项目。9、入口文件main.js——跟以前vue的差不多，引入vue，实例化一个对象并且挂载到页面上去。11、uni-app生命周期——支持vue声明周期，新增了应用生命周期和页面生命周期。6、编译配置——vue.config.js。
uniapp快速入门开发
祎祎的博客
12-04 1万+
uniapp快速入门一、uni-app简单介绍**什么是uni-app？**uni-app的优点二、如何创建uniapp项目1、安装HBuilderX2、如何在微信小程序里面跑起来3、官方提示三、学习框架1、项目结构介绍2、开发规范2.1 uni-app 约定的开发规范2.2 uni-app 开发的注意事项3、页面样式与布局（1）尺寸单位三，如何使用组件四、路由跳转1、uni.navigateTo(OBJECT)2、uni.redirectTo(OBJECT)3、uni.reLaunch(OBJECT)4、
uni-app入门教程
没有途径，只有努力
04-15 5488
入门教程官网安装SCSS/SASS编译插件并引入项目搭建工具创建项目项目结构配置开发微信小程序【第一步:】配置微信开发者工具路径【第二步:】配置微信小程序对应的AppID【第三步:】打开微信小程序服务端口(在微信开发者工具中)【第四步:】实现案例并且运行项目创建页面创建icon文件配置pages.json运行 官网 https://uniapp.dcloud.io/ 安装SCSS/SASS编译插件并引入 安装地址:https://ext.dcloud.net.cn/search?q=sass 然后就可以
uniapp基础（新手入门）
m0_55734030的博客
11-28 5684
uniapp是由dcloud公司开发的多端融合框架。uniapp的出现让我们的开发更为方便，一次开发，多端运行。更重要的是学习成本不会很大，因为uniapp主要是Vue语法加上小程序的api，学过vue和小程序，再学uniapp会更加得心应手。介绍一下端端分为App端（HTML+ nvue（原生view）native.js(js原生沟通的桥梁) weex内置ios/安卓的模块使用），H5端(h5专用api),各种小程序（微信为主）
关于uni-app入门看完这篇就够了
00后的一位普通处女座前端程序员
09-27 5550
这是一篇关于uni-app入门的文章，也是我对uni-app的总结与归纳，刚开始的时候在这个平台上面找寻同类型的文章的时候发现讲的都很片面不怎么详细，所以就写了一篇关于基本入门的文章，全文总计 字 预计阅读时间约为 分钟，推荐有Vue基础的朋友来阅读，否则可能听的有些困难，主要是uni-app是基于Vue来的嘛uni-app导航栏官方文档如下图所示当我点击小图标的时候就能切换页面的这种方式就叫标签导航下载图标推荐是下载两个一个代表选中，一个代表没激活图标下载网站iconfont。
uni-app的基本使用学习笔记（简记）
m0_66148802的博客
03-10 918
主要讲解学习uni-app的基本使用，详细文档还需要看uni-app官网。
Uniapp学习（1）Uniapp是什么，HBuilder软件介绍
Designer 小郑的技术博客
06-27 2714
本文简单介绍了 Uniapp 是什么，以及对 Uniapp 开发利器 HBuilder X 进行了介绍，让大家更高效的入门 Uniapp 开发。
uni-app介绍使用说明
m0_68092412的博客
06-22 252
在HBuilder X中创建新项目：打开HBuilder X，选择“文件”菜单中的“新建”选项，然后选择“uni-app”进行项目创建。- 使用uni-app的API和组件：uni-app提供了一系列的API和组件，可以方便地处理文件、网络请求、用户交互等功能。- 官方文档：uni-app官方网站提供了详细的开发文档和教程，可以帮助您更好地学习和使用uni-app。希望这些说明能对您有所帮助！- 选择模板：根据您的需求，选择适合的模板，uni-app提供了多种常用的模板供选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值