是一个跨平台开发各种各样应用的一套框架。只需要写一套代码,可以适配多达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、混合式开发–前端(比如用uniapp
或taro
等前端框架,就像开发网页一样)
2、原生开发-- 比如安卓用java
,ios用Swift
语言,开发难度大,学起来也麻烦,企业需求在减少
应用打包后的后缀:
1、安卓 .apk
2、ios的后缀 .ipa
1、外包公司-因为他们要给客户开发各种手机app或小程序
2、中小型开发APP的公司,自己产品需要
3、大公司重要产品基本上不会用uniapp,他们更倾向于走原生开发
uniapp写起来的感觉像是使用了vue的语法结构,微信小程序的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项目
1、模板语法(内置标签)
使用vue的语法+微信小程序的写法。
小程序的写法指的是标签用的是小程序的那套,比如用<view>
代替<div>
,具体见图片表格或者:
组件:https://uniapp.dcloud.net.cn/component/
2、样式语法
Uni-app的样式语法和普通的CSS语法相同,但需要注意的是,在像素单位上,一般用upx
而不是px
或rpx
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.navigateTo
和uni.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前端开发工程师!