uni-app跨平台框架介绍和快速入门

简介: uni-app跨平台框架介绍和快速入门

前言:

  首先今天主要介绍的是一个多平台的前端框架uni-app,关于多平台的前端框架网上有很多成熟的解决方案比如说Taro,React Native,Flutter等这些都是一些非常优秀的前端跨平台的框架(大家想要了解更多可以上网查询各种框架的优缺点,温馨提示:没有最好的框架,选择适合自己或者自己团队的才是最好的框架)。

为什么选择uni-app?

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

  现如今Vue已经成为了一个前端的主流框架之一的快速开发框架,从招人人才贮备以及项目的开发效率我们选择使用uni-app这个跨平台框架。并且uni-app现已经支持11个平台,也就是说我们使用uni-app写一个应用程序,可以编译生成11个平台的应用,对于不同产品或者客户所需来说这简直是完美。

1336199-20210925172036494-1770935433.png

  并且uni-app在开发者数量、案例、跨端广度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

1336199-20210925172352196-2118449352.png

  对于不善于前端或者公司缺少前端的个人或者公司而言,uni-app绝对是不二之选,因为uni-app周边的生态非常丰富在插件市场中基本上可以搜索到符合大多数人所需要的插件模板。如商城,博客,小程序等等。


1336199-20210925173016972-1025833448.png

1336199-20210925173045442-1192941501.png1336199-20210925173105617-804301269.png

新手如何快速开始?

  假如你是一个前端没有任何经验的开发者,首先建议先大概了解一下vue的相关知识点(比如说vue的基本语法,什么是双向绑定,条件判断,怎么数据请求绑定等常用的方法),然后开发uni-app应用时把uni-app的相关api文档了解一下(当然也可以边做编程相关的语法,实战开发起来能让我们更快的熟悉)。

uni-app的api文档:https://uniapp.dcloud.io/api/README

  开发之前可以先看一下uni-app官方出门的视频教程:

《uni-app官方教程》

  通过快速上手👉,亲身体验下uni-app,开始之前,开发者需先下载安装如下工具:

可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。

1336199-20210925175058162-413838232.png

快速开发你的第一个Android应用

1、打开HBuilderX=>文件=>新建项目=>uni-app项目类型

注意这里我使用的是uni-app演示用的框架组件,主要是为了展示生成的Android的应用效果。

1336199-20210925214138667-30548388.png

2、在浏览器运行查看我们新建项目MyFirstApp的web页面效果

点击工具栏的运行 => 运行到浏览器 => 选择浏览器

1336199-20210925220540974-1943535349.png

1336199-20210925220632658-1507706007.png

3、发布原生App(云打包)

点击工具栏的发布=>原生App(云打包)

1336199-20210925221358857-732389655.png

输入Dcloud的后台登录邮箱和密码(没有的话需要先注册)

1336199-20210925221531711-1129868543.png

在manifest.json中获取应用标识(AppId)

1336199-20210925222357405-1332293338.png

配置App打包所需要的相关信息

1336199-20210925222207450-284066288.png

等待编译打包(可能花费的时间有点长请耐心等待)

 1336199-20210925222755448-1038827082.png

1336199-20210925222855626-297000077.png

打包完成打开生成apk的目录查看并将其安装到Android手机上查看效果

1336199-20210925223258285-1189284676.png

 

相关文章
|
小程序 容器 JavaScript
探索uni-app:构建跨平台应用的神奇工具
探索uni-app:构建跨平台应用的神奇工具
|
移动开发 前端开发 JavaScript
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
1351 0
|
12月前
|
JSON 自然语言处理 数据格式
使用Tabs选项卡组件快速搭建鸿蒙APP框架
ArkUI提供了很多布局组件,其中Tabs选项卡组件可以用于快速搭建鸿蒙APP框架,本文通过案例研究Tabs构建鸿蒙原生应用框架的方法和步骤。
703 5
使用Tabs选项卡组件快速搭建鸿蒙APP框架
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
18488 81
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
《仿盒马》app开发技术分享-- 兑换订单列表框架(75)
上一节我们针对订单兑换的业务逻辑进行了完善,成功的在兑换物品之后修改了用户信息的修改,新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。
231 0
|
人工智能 开发框架 小程序
【一步步开发AI运动APP】二、跨平台APP AI运动识别方案介绍
本系列博文旨在帮助开发者从【AI运动小程序】迈向性能更优的【AI运动APP】开发。通过「云智AI运动识别」uni-app版插件,提供本地原生极速识别、精准姿态检测及运动计时计数功能,支持健身系统、线上赛事、学生体测、康复锻炼等多场景应用。插件无需云端依赖,一次付费永久使用,成本低且扩展性强。同时兼容uni-app与uni-app x框架,适合不同技术背景的开发者快速上手,助力抢占AI辅助运动市场。下篇将介绍插件引入,敬请期待!
|
缓存
flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
基于最新跨平台框架flutter3.x+dart3+getx+flutter_datepicker纯手写实战的一款仿去哪儿/携程旅游酒店预约客房app系统。
706 8
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
1451 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
在uni-app中,使用axios实现网络请求和登录功能涉及以下几个关键步骤: 1. **安装axios和axios-auth-refresh**: 在项目的`package.json`中添加axios和axios-auth-refresh依赖,可以通过HBuilderX的终端窗口运行`yarn add axios axios-auth-refresh`命令来安装。 2. **配置自定义常量**: 创建`project.config.js`文件,配置全局常量,如API基础URL、TenantId、APP_CLIENT_ID和APP_CLIENT_SECRET等。
1255 60
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十六):【移动开发】整合uni-app搭建移动端快速开发框架-环境搭建
正如优秀的软件设计一样,uni-app把一些移动端常用的功能做成了独立的服务或者插件,我们在使用的时候只需要选择使用即可。但是在使用这些服务或者插件时一定要区分其提供的各种服务和插件的使用场景,例如其提供的【uni-starter快速开发项目模版】几乎集成了移动端所需的所有基础功能,使用非常方便,但是其许可协议只允许对接其uniCloud的JS开发服务端,不允许对接自己的php、java等其他后台系统。
977 61

热门文章

最新文章