您当前的位置:首页 > 电脑百科 > 程序开发 > 框架

跨平台移动端框架UniApp的应用实践

时间:2019-11-25 11:12:46  来源:  作者:

引言

CRM改造项目需要研发涵盖网上营业厅(web版)主要业务能力的移动端掌厅App,项目整体开发周期较短,且要求支持多平台上线(IOSAndroid/ target=_blank class=infotextkey>安卓、H5等)。每个平台要求相对一致的展示效果和用户体验,多端多尺寸设备的适配效果和SDK接入都成为痛点,引入一套跨平台的Hybrid(混合开发)框架势在必行。

一、移动端跨平台技术演进

以往最早的以Cordova为代表的Hybrid开发,主要依赖于WebView。但是WebView是一个很重的控件,很容易产生内存问题,而且复杂的UI在WebView上显示的性能不理想。JS与Native代码之间的通信需要使用JSBridge进行上下文切换,因此会降低一些性能。

Cordova原理示意图

跨平台移动端框架UniApp的应用实践

 

直至Facebook革命性地推出了ReactNative技术,才得以抛开了WebView组件,改为利用JAVAScriptCore来做桥接,将JS调用转为Native调用,只牺牲了API转换的小部分性能,这是跨平台开发的一大步进步。 UniApp框架的构建思想正是来源于此,并且引入Vue Runtime 深度定制进一步优化了渲染性能和用户体验,而其采用的VueJS通用语法也一并解决了React Native各平台代码差异化过大,且需要较多原生知识的问题。

React Native及UniApp原理示意图

跨平台移动端框架UniApp的应用实践

 

二、UniApp框架介绍与应用

1. 什么是UniApp

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到IOS、Android、H5、小程序等多个平台,由DCloud(数字天堂)公司推出和运营维护。

2. 为什么是UniApp

对比其他移动端跨平台框架(如Cordova/ReactNative/NativeJS),UniApp在跨端抹平度、扩展灵活性、性能体验、周边生态、开发成本等几个方面上拥有明显的优势。

(1)跨端数量多:一套代码,编译后可发布到iOS、Android、H5、小程序等多个平台,且跨端抹平度高,应用的显示效果接近一致,真正能落实到生产力。这一点是UniApp的最大优势,完胜其他跨平台框架。

(2)性能体验优秀:UniApp是体验更好的Hybrid框架,加载新页面速度更快。且App端支持weex原生渲染,可实现更流畅的动画效果。相比较而言,依赖于WebView的Cordova框架性能方面就有所欠缺了。

(3)生态开放丰富:UniApp的插件市场,集成了近千余第三方插件,各种轮子拿来即用;同时,由于UniApp的接口API采用了小程序规范,微信生态的各种SDK可直接用于跨平台App。在这个方面作对比,React Native框架的社区活跃度和资料文档都较为有限。

(4)开发成本低:以前由N个平台开发人员(IOS/安卓/H5)完成的开发任务,现在采用前端通用技术栈实现,研发、维护、测试各环节的成本都大幅下降。

同时,HBuilderX工具搭配UniApp可以免终端调试,可视化创建项目、可视化安装组件和扩展编译器,研发人员的开发体验也变得更好,从而能够更高效地编写代码。

3. 功能框架示意图

UniApp在组件跨平台(图中绿色部分)的基础上,同时支持某平台下特色功能的定制开发。通过条件编译引入该平台个性化UI组件或调用专有API,即可实现单平台下的定制化需求且不影响和干扰其他平台。

跨平台移动端框架UniApp的应用实践

 

4. 应用生命周期

UniApp 支持如下的应用生命周期函数:

跨平台移动端框架UniApp的应用实践

 

5. 如何使用UniApp

(1) 下载开发工具:HBuilderX

App开发版本: http://www.dcloud.io/hbuilderx.html

(2) 安装并打开IDE之后,在点击工具栏里的文件 -> 新建 -> 项目

(3) 选择uni-app,输入工程名,如:uni-test,点击创建,成功创建 UniApp应用。点击模板里的 Hello uni-app 即可体验官方示例。

(4) 进入项目,点击工具栏的运行 -> 运行到浏览器/真机下运行/模拟器运行,也可以选择小程序在微信开发者工具里运行。

(5) 工程目录结构

跨平台移动端框架UniApp的应用实践

 

6. 开发规范

(1)页面文件 遵循Vue单页面组件规范,Vue中的结构依然采用三大顶级代码块

https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B

(2)组件标签 VUE通用模板写法,编译后以IOS或Android原生UI控件渲染

(所以不能使用标准的HTML标签,JS对DOM操作也得尽量避免)

https://uniapp.dcloud.io/component/README

跨平台移动端框架UniApp的应用实践

 

3)接口能力 微信小程序规范,接口地址前缀由wx修改uni

https://uniapp.dcloud.io/api/README

(4)样式控制:以upx为尺寸单位,UniApp规定屏幕的基准宽度750upx,使用 flex布局

https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80

总结

任何框架都首先要服务于实际业务需求,技术的选型也需根据研发团队成员的技术方向和具体情况而定,对于项目建设而言技术框架没有最好的只有最适合的。综合来讲, UniApp是一个非常优秀的移动端跨平台框架,在UI表现力、性能体验、生态成熟度几个维度都能经得起推敲,从推出至目前一年多的时间行业内的接受态度也都是比较认可和反馈较佳的,比较适合这个做项目做产品讲究短平快,组件化,小而美的时代,所以推荐给大家学习和应用。

想了解更多前端知识欢迎评论区留言或私信我!

欢迎关注公众号:fkdcxy 疯狂的程序员丶 获取更多前端教程!



Tags:框架   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
近日只是为了想尽办法为 Flask 实现 Swagger UI 文档功能,基本上要让 Flask 配合 Flasgger, 所以写了篇 Flask 应用集成 Swagger UI 。然而不断的 Google 过程中偶然间发现了...【详细内容】
2021-12-23  Tags: 框架  点击:(6)  评论:(0)  加入收藏
文章目录1、Quartz1.1 引入依赖<dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.3.2</version></dependency>...【详细内容】
2021-12-22  Tags: 框架  点击:(12)  评论:(0)  加入收藏
大家好,我是很帅的狐狸今天我打算系统地聊聊资产配置 今儿我打算介绍一个超级无敌实用的资产配置框架。过去几年,我被问到最多的,可能是下面这一类问题&mdash;&mdash; 我有10...【详细内容】
2021-12-14  Tags: 框架  点击:(10)  评论:(0)  加入收藏
1 前言ObjectiveSQL 是一个Java ORM 框架,它不仅是Active Record 模式在Java 中的应用,同时还针对复杂SQL 编程提供近乎完美的解决方案,使得Java 代码与SQL 语句有机的结合,改变...【详细内容】
2021-12-13  Tags: 框架  点击:(14)  评论:(0)  加入收藏
对项目的基本介绍 1.整个框架主要是给MVVM框架使用的,自己写完interface接口后,通过自定义的注解就能自动生成接口方法 2.用Kotlin的Flow去代替Rxjava,因为我发现RxJava功能很...【详细内容】
2021-12-08  Tags: 框架  点击:(17)  评论:(0)  加入收藏
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  Tags: 框架  点击:(15)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  Tags: 框架  点击:(19)  评论:(0)  加入收藏
流水线(Pipeline)是把一个重复的过程分解为若干个子过程,使每个子过程与其他子过程并行进行的技术。本文主要介绍了诞生于云原生时代的流水线框架 Argo。 什么是流水线?在计算机...【详细内容】
2021-11-30  Tags: 框架  点击:(21)  评论:(0)  加入收藏
TKinterThinter 是标准的python包,你可以在linx,macos,windows上使用它,你不需要安装它,因为它是python自带的扩展包。 它采用TCL的控制接口,你可以非常方便地写出图形界面,如...【详细内容】
2021-11-30  Tags: 框架  点击:(27)  评论:(0)  加入收藏
项目介绍您可以方便快速地开发微信全平台的应用(包括微信公众号、小程序、小游戏、企业号、开放平台、微信支付、JS-SDK、微信硬件/蓝牙,等等)。本项目的 Demo 同样适合初学者...【详细内容】
2021-11-17  Tags: 框架  点击:(38)  评论:(0)  加入收藏
▌简易百科推荐
近日只是为了想尽办法为 Flask 实现 Swagger UI 文档功能,基本上要让 Flask 配合 Flasgger, 所以写了篇 Flask 应用集成 Swagger UI 。然而不断的 Google 过程中偶然间发现了...【详细内容】
2021-12-23  Python阿杰    Tags:FastAPI   点击:(6)  评论:(0)  加入收藏
文章目录1、Quartz1.1 引入依赖<dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.3.2</version></dependency>...【详细内容】
2021-12-22  java老人头    Tags:框架   点击:(12)  评论:(0)  加入收藏
今天来梳理下 Spring 的整体脉络啦,为后面的文章做个铺垫~后面几篇文章应该会讲讲这些内容啦 Spring AOP 插件 (了好久都忘了 ) 分享下 4ye 在项目中利用 AOP + MybatisPlus 对...【详细内容】
2021-12-07  Java4ye    Tags:Spring   点击:(14)  评论:(0)  加入收藏
&emsp;前面通过入门案例介绍,我们发现在SpringSecurity中如果我们没有使用自定义的登录界面,那么SpringSecurity会给我们提供一个系统登录界面。但真实项目中我们一般都会使用...【详细内容】
2021-12-06  波哥带你学Java    Tags:SpringSecurity   点击:(18)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  清闲的帆船先生    Tags:框架   点击:(19)  评论:(0)  加入收藏
流水线(Pipeline)是把一个重复的过程分解为若干个子过程,使每个子过程与其他子过程并行进行的技术。本文主要介绍了诞生于云原生时代的流水线框架 Argo。 什么是流水线?在计算机...【详细内容】
2021-11-30  叼着猫的鱼    Tags:框架   点击:(21)  评论:(0)  加入收藏
TKinterThinter 是标准的python包,你可以在linx,macos,windows上使用它,你不需要安装它,因为它是python自带的扩展包。 它采用TCL的控制接口,你可以非常方便地写出图形界面,如...【详细内容】
2021-11-30    梦回故里归来  Tags:框架   点击:(27)  评论:(0)  加入收藏
前言项目中的配置文件会有密码的存在,例如数据库的密码、邮箱的密码、FTP的密码等。配置的密码以明文的方式暴露,并不是一种安全的方式,特别是大型项目的生产环境中,因为配置文...【详细内容】
2021-11-17  充满元气的java爱好者  博客园  Tags:SpringBoot   点击:(25)  评论:(0)  加入收藏
一、搭建环境1、创建数据库表和表结构create table account(id INT identity(1,1) primary key,name varchar(20),[money] DECIMAL2、创建maven的工程SSM,在pom.xml文件引入...【详细内容】
2021-11-11  AT小白在线中  搜狐号  Tags:开发框架   点击:(29)  评论:(0)  加入收藏
SpringBoot开发的物联网通信平台系统项目功能模块 功能 说明 MQTT 1.SSL支持 2.集群化部署时暂不支持retain&will类型消 UDP ...【详细内容】
2021-11-05  小程序建站    Tags:SpringBoot   点击:(56)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条