深圳APP软件开发定制公司

热线 全国服务热线: 400-829-2729
深圳APP软件开发公司,IOS、安卓软件开发服务优质的公司!
官网微信扫一扫 微信
二维码
  • 首页
  • APP开发
  • 小程序
  • 区块链
  • 物联网
  • 软件定制
  • 成功案例
  • 资讯
  • 关于我们
客服 icon
和我们在线交淡
应用行业:
  • 全部
  • 未分类
  • 企业资讯
  • 金融类型
  • 电商领域
  • 便捷生活
  • 餐饮行业
  • 医疗卫生
  • 体育运动
  • 教育培训
  • 旅游社交
  • 物流管理
  • 智能家居
  • 服装定制
  • 物联网
全部

移动端开发之web app开发

作者:软捷科技 阅读量:187



1 移动端开发分类

1.1 Native App 原生App开发

缺陷:

(1)开发本钱高

(2)维护本钱高

(3)更新缓慢,根据不同渠道,提交–审核–上线流程较杂乱。

长处:

(1)用户体会好

(2)功能安稳

(3)操作速度快

(4)能够拜访本地资源(通讯录,相册)

(5)能够规划超卓的动效,转场

(6)具有系统等级的贴心告诉或提醒

(7)用户留存率高

总的来说,native app开发从android、ios智能手机呈现就有了开发技能,功能体会最优,API比较完善,可是学习起来难度比较高,开发本钱比较高(跟开发周期相对来说比较长也是有联系的)。

2 Web App 网页App开发

长处:

(1)发版彻底自控,随时更新

(2)跨渠道,由于本身来说用的是Web的东西,所以能够在恣意渠道上运行

(3)本钱小,Web页面嵌入Webview开发起来速度非常快,一个人就能够轻松搞定

缺陷:

(1)功能差

(2)弱网络或无网络条件下体会差

(3)适用有展示类需求的项目,可是假如要完成的功能比较杂乱的话就显得力不从心

总的来说,相比Native App,Web App体会中受限于网络环境和烘托功能。Web APP对网络环境的依赖性较大,由于Web APP中的H5页面,当用户运用时,去服务器恳求显现页面。假如此刻用户恰巧遇到网速慢,网络不安稳等其他环境时,用户恳求页面的功率大打折扣,在用户运用中会呈现不流畅,时断时续的不良感触。一起,H5技能自身烘托功能较弱:对杂乱的图形样式,多样的动效,自定义字体等的支撑性不强。因此,应留意以下几点:1.简化不重要的动画/动效;2.简化杂乱的图形文字样式;3.削减页面烘托的频率和次数。

3 Hybrid App 混合型App开发

长处:

(1)体会好

(2)安稳性强动态性强

(3)本钱相对低跨渠道

缺陷:对团队技能栈要求相对高功能优化

Hybrid App就是Native结合Web混合开发,Native+JS代码代表作是cordova前身是phonegap,现在移交给Apache,中心JsBridge,JS调Java,Java调JS。由于混合开发,所以体会挨近原生、安稳性强并且发版快。

2 Viewport视口

2.1 视口

视口是移动设备上用来显现网页的区域,一般会比移动设备可视区域大,宽度可能是980px或许1024px,意图是为了显现下整个为PC端规划的网页。这样带来的后果是移动端会呈现横向滚动条,为了避免这种状况,移动端会将视口缩放到移动端窗口的巨细。这样会让网页不容易观看,能够用meta标签,name="viewport"来设置视口的巨细,将视口的巨细设置为和移动设备可视区相同的巨细。

在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域能够设置高度宽度,能够按份额放大缩小,并且能设置是否答应用户自行缩放。

2.2参数阐明

width:宽度设置的是viewport宽度,能够设置device-width特殊值

initial-scale:初始缩放比,大于0的数字

maximum-scale:最大缩放比

minimum-scale:最小缩放比

user-scalable:用户是否能够缩放,yes或no(1或0)

2.3 设置方法

3 移动端适配布局

运用百分比自适应布局(流式布局)一起需要对移动端的viewport视口进行设置,就能够到达适配的意图。

3.1 流体布局+少量呼应式

流体布局:运用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线(border)无法用百分比,能够运用样式中的计算函数calc()来设置宽度,或许运用box-sizing属性将盒子设置为边线计算盒子尺度。

呼应式布局:运用媒体查询的方法,经过查询浏览器的宽度,不同的宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方法,然后完成呼应式布局,呼应式布局的页面能够适配多种终端屏幕(pc、平板、手机)。

3.2 根据rem的布局

rem指的是参照根节点的文字巨细,根节点指的是html标签,设置html标签的巨细,其他的元素相关尺度设置用rem。这样,一切元素都有了统一的参照规范,改动html文字的巨细,就会改动一切元素用rem设置的尺度巨细。