移动端开发框架选择及实践
一、移动端框架选型
1、原生or 混合 or web
选型问题其实我并没有考虑,因为根据我们实际情况,最适合的还是混合开发。这里大概阐述一下原生、混合、web的区别。
原生开发没什么可说的,体验肯定是最好的,但是需android、ios两批人,小程序还要加人,人力成本相对较高。
这里所说的web是指用webview包装,主要问题是体验不太好,开发成本最低。
而混合开发则结合两者的优势,即可感受原生的体验,也可享受热更新。原生通过js调用android及ios的API(iOS是jscore,Android是v8)。特别是首页,列表等页面达到近似于原生的性能,也可以通过webview达到热更新的便利。
这里选型主要考虑人力情况、开发成本情况、人才的知识结构等。见下图:
2、三大框架
不讨论。根据人员知识结构决定了选择vue。
3、flutter or uniapp
这里特别说下flutter,因为它是google的产品,性能高。但它也只是个界面库。渲染性能排序:flutter>js调用原生渲染(react native/weex/uni-app)>webview渲染。但是flutter的写法很有可奇葩,不适应web开发者;另外三方接口调用方面能力弱。虽然flutter的发展势头不错,但对我们团队来说,成本还是太高。
二、uniapp框架选择
其实在写文章之前已经决定采用uniapp了,并不是它有多好,而是它适合我们目前的小团队。由于之前我们已经用uniapp来开发app,但由于库太旧,对nvue的支持弱,就决定升级原框架及页面,但并不想从头开始构造,于是选择合适的基础通用框架。
1、uni-starter
dcloud官方提供的快速框架,官方描述:uni-starter是一个集成了大量商用项目常见功能的,云端一体应用快速开发基本项目模版。APP有很多通用的功能,比如登录注册、头像、设置、banner、... uni-starter将这些功能都已经集成好。
其实已经基本满足一个通用框架的基本条件,本来准备采用它,但是它后台基于uniCloud,而且“不能将后台改成php、java等其他后台,这将违反使用许可协议“,由于我们后台有自己的框架,所以只能放弃了。
参考地址:https://gitcode.net/dcloud/uni-starter
2、uni-xiaofan
最终我们采用的基础框架。
原因有三:
(1) 跟旧框架一脉相承,升级成本低。
(2) 采用uview2,支持nvue。
(3) Mit协议,且目前作者在维护。
参考地址:https://ext.dcloud.net.cn/plugin?id=7164
3、ruoyi-uniapp
基于ruoyi的基础框架,目前只实现部分功能,界面可借鉴。
参考地址:https://gitee.com/big-hedgehog/ruoyi-uniapp
最终我们采用uni-xiaofan框架,并借鉴uni-starter及ruoyi-uniapp的部分功能。
三、uniapp实践
1、实践目标
(1)平台必须支持app(android和Ios),微信小程序、Chrome。
(2)app尽量采用nvue,特别是首页和列表部分。
(3)尽量采用flex布局,布局不使用百分比、没有媒体查询。
(4)基本框架支持vue3,尽量同时支持vue3。
(5)部分功能用uni-cloud实践,如版本升级及问题反馈功能。
2、UI库
本项目UI库主要采用uni-app自带的,再结合第三方库。第三方基础库主要采用uview2.0。
优先级:内置组件>uni-ui扩展组件>uview2.0组件>…
可通过uni_modules来安装扩展组件,不需要引用、注册,并可以通过右键快速更新组件。
3、布局
支持跨平台,框架使用 Flex 布局。
4、CSS
※尽量不使用百分比布局,如width:100%
※class 进行绑定时只支持数组语法。
※不支持媒体查询。
※不能在 style 中引入字体文件。
※不支持在css里写背景图background-image,但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念。
※设置background-color。
※文字内容,必须只能在text组件下,text组件不能换行写内容,否则会出现无法去除的周边空白。
※只有text标签可以设置字体大小,字体颜色。
另外尽量不使用uview2.0中的内置样式。
5、国际化
目前框架已支持国际化。使用时{{$t('mine.notLoggedInfo')}}or$t('mine.feedback')调用即可。
6、支持uniCloud
虽然我们不完全采用uniCloud,但是部分功能可通过unicloud实现,如版本升级及问题反馈等,实现更便捷。
四、uniapp页面
1、我的
2、消息
3、通讯录
4、工作台
移动端开发框架选择及实践相关推荐
- 跨桌面端之组件化实践
本文主要介绍了千牛PC跨端框架中,我们关于组件化部分的思考.方案选择.遇到的一些问题和解法. 此文为本系列文章第三篇, 第一篇:跨全端SDK技术演进 第二篇:跨桌面端之Web容器演进 本文:跨桌面端之 ...
- 阿里移动|《蚂蚁金服移动端高可用技术实践》
摘要:对于移动技术而言,2017年是继往开来之年.一方面是移动技术领域进入深水区,另一方面移动技术边界和内涵被不断重塑.阿里巴巴希望进一步推动移动应用研发事实标准落地,从而赋能整个行业开发者.在201 ...
- Dubbo3.0|阿里巴巴服务框架三位一体的选择与实践
作者|泮圣伟.董建凯 服务框架就像铁路的铁轨一样,是互通的基础,只有解决了服务框架的互通,才有可能完成更高层的业务互通,所以用相同的标准统一,合二为一并共建新一代的服务框架是必然趋势. Dubbo3. ...
- ios无痕埋点_移动端无痕埋点实践详解(二)
0x01 前言 在移动端无痕埋点实践详解(一)这篇文章大致总结了移动端无痕埋点的基本原理.主要介绍了什么是无痕埋点,无痕埋点的基础数据流程以及在Android系统上总体思路.这篇文章着重总结下无痕埋点 ...
- 一套代码编译出ios和android,Hippy: Hippy 是一个新生的跨端开发框架,目标是使开发者可以只写一套代码就直接运行于三个平台(iOS、Android 和 Web)...
Hippy 跨端开发框架 介绍 Hippy 是一个新生的跨端开发框架,目标是使开发者可以只写一套代码就直接运行于三个平台(iOS.Android 和 Web).Hippy 的设计是面向传统 Web 开 ...
- 基于Html5的移动端开发框架的研究
下面统计信息部分来自网络,不代表个人观点.请大家参考. 基于Html5移动端开发框架调查 序号 框架 简介 优点 缺 ...
- android 开发 目标绑定,Hippy: Hippy 是一个新生的跨端开发框架,目标是使开发者可以只写一套代码就直接运行于三个平台(iOS、Android 和 Web)...
Hippy 跨端开发框架 介绍 Hippy 是一个新生的跨端开发框架,目标是使开发者可以只写一套代码就直接运行于三个平台(iOS.Android 和 Web).Hippy 的设计是面向传统 Web 开 ...
- 5款主流跨端开发框架横向对比!
点击上方关注 前端技术江湖,一起学习,天天进步 跨平台开发框架到底哪家强? 目前市场上有多个专业做跨平台开发的框架,那么对开发者来说究竟哪一个框架更符合自己的需求呢?笔者特地总结对比了一下不同框架的特 ...
- 百度APP移动端网络深度优化实践分享(一):DNS优化篇
本文由百度技术团队"蔡锐"原创发表于"百度App技术"公众号,原题为<百度App网络深度优化系列<一>DNS优化>,感谢原作者的无私分享 ...
最新文章
- 17篇论文入选CVPR 2019,百度AI都在关注什么?(附论文地址)
- 删除文件session丢失
- Aop事务小结(事务管理器和自身构建)
- 同时查找数组中最大和最小值
- 【JFreeChart】JFreeChart—输出时序图
- Spring:Spring相关知识介绍笔记
- java弹窗点击事件_[Java教程]jQuery的click事件在当前页弹出层窗口(不打开新页面)...
- 对广义表L=((a,b),c,d)进行操作tail(head(L))的结果是
- ims系统 呈现服务器,基于IMS的呈现服务器的设计与实现
- java爬虫出发onclick事件_java爬虫(五)利用selenium 模拟点击获取动态页面的内容...
- git---Git中.gitignore配置
- 【HDOJ6955】Xor sum(异或前缀和,01字典树)
- 开始新的学习之旅--PHP开发学习--基础部分笔记
- 用R语言实现深度学习情感分析
- 深度学习aps_深度学习的目标检测算法是如何解决尺度问题的?
- Java中serialVersionUID作用
- 微信公众号迁移公证办理流程
- 从零开始之驱动开发、linux驱动(七十一、电容触摸屏驱动)
- 长江后浪推前浪, “趣出行”死在“火牛”的沙滩上
- 行之有效的一些教程链接
热门文章
- # HenCoder Android 自定义 View 1-8 硬件加速
- 牛客网 - Ricky’s RealDan’s Ricky(博弈)
- 鸿蒙荣耀x10max,华为nova7和荣耀x10max哪个好-华为nova7和荣耀x10max测评
- Zigbee W-Z-09 模块规格书
- 音频合并的软件有哪些?这几个软件分享给你
- Axure 8.1.0.3381激活码 亲测可用
- 欧拉角表示旋转会出现的问题——万向锁(Gimbal Lock)
- discuz和phpwind哪个好
- 检测到不兼容的键盘驱动程序的解决
- AWS EKS使用Pod安全组