移动端开发相关概念

最新推荐文章于 2021-10-10 18:46:50 发布

wangfan741

最新推荐文章于 2021-10-10 18:46:50 发布

阅读量485

点赞数 1

分类专栏： mofang 文章标签：移动开发 web

本文链接：https://blog.csdn.net/wangfan741/article/details/110290987

版权

mofang 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

1.APP类型

在这里插入图片描述

1.1 Native APP

Native APP又称原生APP，就是我们平时说的手机应用软件。

原生APP 是针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发出来的，通常是由“服务器数据+APP应用客户端”两部份构成。

实现技术：


iOS:  Object C或者 swift

Android: java

优缺点


优点：

		体验好，用户无法上网也可访问APP应用中以前下载的数据

		性能稳定，可调用手机的硬件设备（语音、摄像头、短信、GPS、重力感应等）和本地资源（通讯录，相册等）

		操作速度快，能够实现出色的动效，转场动画

		

缺点：

		开发周期长，开发人员工资起点高。

		用户要使用原生APP，必须通过安装到手机里面才行，而且APP软件体积大，占用较多手机内存容量

		更新缓慢，根据不同平台，提交–审核–上线流程较复杂。

		要获取最新功能，需要升级应用，所以会容易出现有些用户不升级，导致多个不同功能版本出现，维护成本大

		跨平台差，每种平台都需要独立的开发语言。Java(安卓),Objective-C(iOS)等等

Web APP

Web APP本质上是为移动浏览器设计的网站，可以在各种智能手机浏览器上运行。

实现技术：


HTML5+Javascript+CSS3

vue组件化+项目打包

....

优缺点


优点：

		一套代码到处运行，可以同时在 PC、Android、iPhone 浏览器上访问

		开发者不需要发布到应用市场审核，用户不需要下载、安装和更新

		开发周期短，维护成本低

		用户不需用户手动更新，可以自动更新，直接使用最新版本



缺点：

		转场表现略差，要求联网

		用户体验没那么炫。图片和动画支持性不高

		没法在App Store中下载、无法通过应用下载获得盈利机会

		对手机功能应用缺乏，有限制（摄像头、GPS、蓝牙等）

Hybrid APP

Hybrid App就是混合APP，就是Native结合Web的混合开发，就是内部本质是Web网页，使用打包软件给它套一层原生APP的外壳。

实现技术：


React Native

phoneGap(cordova+android)

APICloud

WeX5

appMobi

appcan

....

优缺点


优点：

		集众家之长，既可以调用丰富的手机设备API，也能拥有Web APP的跨平台能力

		可以在应用商店发布，实现收费下载

		内部是网页结构，可以自主更新，做到开发一次，所有平台生效

		降低开发成本和技术成本，降低维护和开发周期

缺点：

		本质上就是一个Web APP使用了原生APP的壳，所以体验比不上原生APP

		开发难度比Web APP高，有一定的学习成本，开发周期比Web APP长

		APP发布有可能无法通过审核，需要多次调整，才能发布

		依赖开发框架本身提供的手机设备API，少部分设备功能还是只能借住原生语言进行调用才可以

		对团队技术栈要求相对高，既要懂web开发的，也要懂原生APP开发的

2. 移动端屏幕介绍

在这里插入图片描述

3. 移动端自适配方案

目前常用的布局适配方案就3种，分别是vw、像素百分比+flex弹性布局和rem+viewport，后者最流行最容易。

当然，rem+viewport这种方案的实现方式也有很多，其中最著名的就是淘宝的**flexible方案**。

4.元信息（meta）

html中的meta标签，也叫元信息标签。作用就是用来告诉浏览器，当前网页的附加信息。

meta标签主要有2个属性比较重要。

| 属性名 | 属性值 | 作用描述 |

| :--------- | :-------------------------------------------- | :----------------- |

| http-equiv | content-type , expires , refresh , set-cookie | 设置 HTTP 头部 |

| name | viewport，author , description , keywords | 设置网页附加信息 |

例子：


<head>

	<meta name="description" content="移动端开发" />

    <meta name="keywords" content="移动端,APP,flask" />

  

	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

	<meta http-equiv="Refresh" content="5;url=http://www.luffycity.com" />

</head>

视口（Viewport）

视口是一个相对比较复杂的概念，所以我们可以简单的理解为，viewport就是用户看手机页面时的可视区域，相当于桌面浏览器的窗口。在桌面浏览器中，viewport 就是浏览器窗口的宽度高度。但在移动端设备上就有点太窄了。

关于视口的详细扩展知识可以参看：https://www.w3cplus.com/css/viewports.html

视口通过meta标签进行设置


<meta name="viewport" content="width=device-width, initial-scala=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

视口参数说明

| 属性名 | 属性值 |

| ------------- | ------------------------ |

| device-width | 设备的宽度 |

| initial-scale | 初始的缩放比例 |

| minimum-scale | 允许用户缩放到的最小比例 |

| maximum-scale | 允许用户缩放到的最大比例 |

| user-scalable | 用户是否可以手动缩放 |

像素（pixel）

在移动端上，所谓的像素分为两种。

CSS像素：CSS像素就是我们在编写CSS代码时的像素。

设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。

媒体查询（media query）

媒体查询是css3的一个新增语法属性，它根据页面的视口宽度来定义特殊的 CSS 规则，一般用于进行移动端适配。


@media screen and (min-width:600px) and (max-width:900px){

  body {background-color:#f5f5f5;}

}

wangfan741

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端开发相关概念

1.APP类型1.1 Native APPNative APP又称原生APP，就是我们平时说的手机应用软件。原生APP 是针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发出来的，通常是由“服务器数据+APP应用客户端”两部份构成。实现技术：iOS: Object C或者 swiftAndroid: java优缺点优点：体验好，用户无法上网也可访问APP应用中以前下载的数据性能稳定，可调用手机的硬件设备（语音、摄像头、短
复制链接

扫一扫