一文就知道uniapp等跨端开发的使用场景,学习成本,如何快速使用,基本语法等

文章目录

        • 一、简介
        • 二、uniapp用在哪些企业
        • 三、学习成本
        • 四、本次课程概括
        • 五、相关文档和学习资料
        • 六、快速使用
        • 七、Uni-app的基本语法
        • 八、项目实战

一、简介

是一个跨平台开发各种各样应用的一套框架。只需要写一套代码,可以适配多达14种产品类型,比如H5移动端、微信小程序及各种其他小程序,ios、安卓等接近原生APP的应用(可以上架到App Store或应用商店)。所以这里的多端,指的并不是PC、平板、手机端,而是移动端优先,开发者可以一次编码,分别编译为小程序和 Android 以及 iOS 应用,实现多端开发。

Uniapp 是由中国开发者开发的,因此在中国的使用量和受欢迎程度最高。根据 2023年的数据,Uniapp 在国内的使用量占据了 50% 以上的市场份额,远超其他跨平台开发框架。

可以简单理解为uniapp是一款工具,他能让我们用前端的方式写代码,然后编译成各种平台所需要的代码,比如网页端、小程序端和app端(这种app相当于包裹了一层app的壳,里面其实是web)。

10分钟了解uniapp:https://uniapp.dcloud.net.cn/ 打开该地址后,往下拉中间位置有个视频。

uniapp的特点就是除了跨平台,主要是用前端的方式来开发APP(可以在应用市场上架的APP)。

扩展-开发APP的两种方式:

1、混合式开发–前端(比如用uniapptaro等前端框架,就像开发网页一样)

2、原生开发-- 比如安卓用java,ios用Swift语言,开发难度大,学起来也麻烦,企业需求在减少

应用打包后的后缀:

1、安卓 .apk
2、ios的后缀 .ipa

二、uniapp用在哪些企业

1、外包公司-因为他们要给客户开发各种手机app或小程序

2、中小型开发APP的公司,自己产品需要

3、大公司重要产品基本上不会用uniapp,他们更倾向于走原生开发

三、学习成本

uniapp写起来的感觉像是使用了vue的语法结构,微信小程序的API和标签,如果你两者都学习了,那么几乎没有什么学习成本。

优点:

  • 跨平台支持:Uniapp 支持开发 iOS、Android、Web、小程序、快应用等多个平台的应用,开发者只需编写一套代码,即可部署到多个平台,这为开发者节省了大量的时间和精力。
  • 开发效率高:Uni-app使用Vue.js作为开发框架,开发效率比较高。
  • 组件库丰富:Uni-app提供了丰富的组件库,可以快速构建应用程序
  • API丰富:Uni-app提供了许多API,可以方便地访问设备硬件和系统功能。

缺点:

  • 学习成本高:虽然Uni-app使用Vue.js作为开发框架,但是对于一些没有开发经验的人来说,学习成本还是比较高的。
  • 兼容性问题:由于Uni-app要兼容多种平台,因此在某些平台上可能存在兼容性问题。
  • 功能受限:Uni-app提供的API比较有限,某些高级功能可能无法实现。
四、本次课程概括

1、如何学习:到官方文档学习,最靠谱,因为只有官方是真的为你好,准确,完整,不带私货。

2、先用起来,侧重于解决开发问题

3、会结合AI来帮助编程

五、相关文档和学习资料

1、官网:https://uniapp.dcloud.net.cn/

2、如何学习:https://uniapp.dcloud.net.cn/resource.html

3、官网推出的3节课就可学会的视频:https://ke.qq.com/course/3169971/10920598598344371

4、官方文档:https://uniapp.dcloud.net.cn/tutorial/

六、快速使用

1、安装Node.js(可选)HBuilderX

https://www.dcloud.io/hbuilderx.html

2、创建Uni-app项目

3、运行Uni-app项目

七、Uni-app的基本语法

1、模板语法(内置标签)

使用vue的语法+微信小程序的写法。

小程序的写法指的是标签用的是小程序的那套,比如用<view>代替<div>,具体见图片表格或者:

组件:https://uniapp.dcloud.net.cn/component/

2、样式语法

Uni-app的样式语法和普通的CSS语法相同,但需要注意的是,在像素单位上,一般用upx而不是pxrpx

https://uniapp.dcloud.net.cn/tutorial/syntax-css.html

3、vue语法

https://uniapp.dcloud.net.cn/tutorial/vue-basics.html

4、常用API

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

  • 跳转页面:可以使用uni.navigateTouni.redirectTo方法来跳转页面。其中,uni.navigateTo方法用于打开一个新页面,uni.redirectTo方法用于关闭当前页面并打开一个新页面。
  • 获取设备信息:可以使用uni.getSystemInfo方法来获取设备的基本信息,例如设备的型号、操作系统版本、屏幕尺寸等。
  • 获取位置信息:可以使用uni.getLocation方法来获取设备的位置信息(经纬度)。
  • 拍照和选择图片:可以使用uni.chooseImage方法来拍照或选择图片。该方法会弹出系统的图片选择器或拍照界面。
  • 发起网络请求:可以使用uni.request方法来发起网络请求。该方法支持各种HTTP请求方式,例如GET、POST、PUT等。

5、页面、生命周期、路由

https://uniapp.dcloud.net.cn/tutorial/page.html

八、项目实战

1、todolist

2、使用静态数据实现新闻列表+新闻详情

3、使用接口实现新闻列表+新闻详情

可通过添加如下v获得项目开发源代码和素材

如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。

加我微信可提供web前端开发,网站开发、技术咨询、答疑、直播讲座等服务

祝你能成为一名优秀的WEB前端开发工程师!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/627870.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1月16日,每日信息差

​第一、苹果将推出欧盟特供版App Store。由于这些变化&#xff0c;App Store将被一分为二&#xff0c;欧盟国家有一个版本&#xff0c;世界其他地区将是另一个版本。欧盟的新法规《数字市场法案》&#xff08;DMA&#xff09;要求苹果允许开发者在App Store之外发布他们的iOS应…

[足式机器人]Part2 Dr. CAN学习笔记-Advanced控制理论 Ch04-9 可观测性与分离原理

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-Advanced控制理论 Ch04-9 可观测性与分离原理

Dubbo应用连接Zookeeper问题与解决方案

最近&#xff0c;遇到了一个关于Dubbo应用启动的问题&#xff0c;在部署应用的过程中&#xff0c;应用无法成功连接到ZooKeeper进行服务注册。尽管telnet端口显示正常&#xff0c;排除了网络问题&#xff0c;但问题仍然存在。 首先&#xff0c;查看日志获取线索分析问题。日志…

vue知识-07

ref # 放在组件上&#xff1a; this.$refs.名字 ---组件对象.组件对象.属性 # 在vue项目中使用: // 写在组件上 <HelloWorld ref"my_hello_world"></HelloWorld>handleClick() {console.log(this.$refs)this.$refs.my_hello_world.name # 获取子组件中…

vue:使用【3.0】:条件模块

一、条件层级效果图 二、代码 <template><ContentWrap><!-- 添加条件分支:level1 --><div class"btnBox" v-if"isEdit"><el-button type"primary" click"add">添加条件分支</el-button></div…

UE5 RPG AttributeSet的设置

AttributeSet 负责定义和持有属性并且管理属性的变化。开发者可以子类化UAttributeSet。在OwnerActor的构造方法中创建的AttributeSet将会自动注册到ASC。这一步必须在C中完成。 Attributes 是由 FGameplayAttributeData定义的浮点值。 Attributes能够表达从角色的生命值到角色…

《现代C++语言核心特性解析》笔记草稿

仅供学习记录之用&#xff0c;谢绝转发 第1章 新基础类型&#xff08;C11&#xff5e;C20&#xff09; 1.1 整数类型long long 更多笔记 “在C中应该尽量少使用宏&#xff0c;用模板取而代之是明智的选择。C标准中对标准库头文件做了扩展&#xff0c;特化了long long和unsi…

【C++】vector的使用及模拟实现

目录 一、vector的介绍及使用1.1 介绍vector1.2 vector的使用1.2.1 构造1.2.2 遍历访问1.2.3 容量空间1.2.4 增删查改 二、vector的模拟实现2.1 成员变量2.2 迭代器相关函数2.3 构造-析构-赋值重载2.3.1 无参构造2.3.2 有参构造12.3.3 有参构造22.3.4 拷贝构造2.3.5 赋值重载2.…

RAG基础功能优化、以及RAG架构优化

RAG基础功能优化 对RAG的基础功能优化&#xff0c;我们要从RAG的流程入手[1]&#xff0c;可以在每个阶段做相应的场景优化。 从RAG的工作流程看&#xff0c;能优化的模块有&#xff1a;文档块切分、文本嵌入模型、提示工程优化、大模型迭代。下面针对每个模块分别做说明&#…

【IAP】FREERTOS堆大小影响到FLASH写入

最近在调LPC177X芯片IAP升级时发现&#xff0c;同一套代码&#xff0c;稍微加了点东西就导致写入失败&#xff0c;确认写入flash接口无误后 #define SRC_ADDR_NOT_MAPPED 4通过写入失败返回值&#xff0c;上网查阅资料 我在这里勾选了IRAM2区&#xff0c;也就是默认是可以使用…

兴达易控EtherCAT转Profibus网关让工业自动化变得轻松快捷

EtherCAT转Profibus网关&#xff08;XD-ECPBM20&#xff09;是一种用于实现不同通信协议间互联互通的设备。它主要用于工业控制系统中&#xff0c;能够将EtherCAT总线的数据传输转换为Profibus网络可接受的格式。这样的网关设备在工业自动化领域有着广泛的应用&#xff0c;因为…

【计算机网络】第七,八,九章摘要重点

第七章网络管理 1.计算机网络面临的两大威胁&#xff1f; 恶意程序有&#xff1a;计算机病毒&#xff0c;计算机蠕虫&#xff0c;特洛伊木马&#xff0c;逻辑炸弹&#xff0c;后门入侵和流氓软件。 2.安全的计算机网络四个目标&#xff1a; 机密性&#xff0c;端点鉴别&…

一文解析 Copycat Dex与 Bitcat Dex的区别

Copycat Dex和 Bitcat Dex都带一个 Cat 并且都是衍生品协议&#xff0c;很多人都会误认为这两个是同一个项目&#xff0c;实际不然。它们是面向两个不同赛道、不同资产类型的衍生品项目。 Copycat Dex和 Bitcat Dex都是衍生品 DEX&#xff0c;它们最本质的区别主要在于&#xf…

软件测试|使用Python提取出语句中的人名

简介 在自然语言处理&#xff08;NLP&#xff09;中&#xff0c;提取文本中的人名是一项常见的任务。Python作为一种流行的编程语言&#xff0c;拥有强大的NLP库和工具&#xff0c;使我们能够轻松地进行这项任务。在本文中&#xff0c;我们将使用Python示例来演示如何提取文本…

springboot vue线上部署项目注意跨域问题

springboot vue线上部署项目注意跨域问题 nginx配置 server {listen 8080;server_name localhost;charset utf-8;location / {root /home/user/cf/vue/dist;index index.html index.htm;try_files $uri $uri/ /index.html;add_header Access-Control-Allow-Origin *;add_heade…

MC使用Waterfall 跨服

前言 想弄一个跨服&#xff0c;目前这篇文章是边测试边写的&#xff0c;两个子服都是在同一个机器上运行的 如果两个子服在不同的网络&#xff0c;跨服的延迟就会比较高 两个子服 s1 和 s2 都是使用folia核心 版本1.20.1s1 端口: 25565s2 端口 : 25566 1.下载 Waterfall W…

Hello 2024补题

Wallet Exchange&#xff08;Problem - A - Codeforces&#xff09; 题目大意&#xff1a;A&#xff0c;B做游戏&#xff0c;它们的钱包里各有a,b个硬币&#xff0c;轮到它们操作时&#xff0c;它们可以扔掉自己或者对手钱包里的硬币&#xff0c;谁不能操作谁输&#xff0c;问…

Kafka的安装、管理和配置

Kafka的安装、管理和配置 1.Kafka安装 官网: https://kafka.apache.org/downloads 下载安装包,我这里下载的是https://archive.apache.org/dist/kafka/3.3.1/kafka_2.13-3.3.1.tgz Kafka是Java生态圈下的一员&#xff0c;用Scala编写&#xff0c;运行在Java虚拟机上&#xf…

【大数据】Flink 详解(九):SQL 篇 Ⅱ

《Flink 详解》系列&#xff08;已完结&#xff09;&#xff0c;共包含以下 10 10 10 篇文章&#xff1a; 【大数据】Flink 详解&#xff08;一&#xff09;&#xff1a;基础篇【大数据】Flink 详解&#xff08;二&#xff09;&#xff1a;核心篇 Ⅰ【大数据】Flink 详解&…

Flutter之配置环境创建第一个项目

随着时代发展&#xff0c;使用Flutter开发的项目越来越多&#xff0c;于是踏上了Flutter开发之路。 作为一个Android开发人员&#xff0c;也只能被卷到与时俱进&#xff0c;下面一起创建一个Flutter项目吧。 一、Android开发&#xff0c;电脑上已经具备了的条件&#xff1a; …