移动开发技术都有哪些？

Posted 2023-05-12

传统的移动开发模式主要分为三种，Native App，Web App 和 Hybrid App，对于目前微信端比较火爆的开发平台小程序，或者其他厂商推广的流应用、轻应用等开发方式，基本都离不开H5的支撑。

拓展补充：

什么是原生开发？

原生开发指的是纯原生应用程序（简称App）开发，是在android、ios等移动平台上利用官方提供的开发语言、开发类库以及开发工具等进行App开发。比如Android App就是指使用Java或Kotlin开发语言在Eclipse或Android Studio的开发工具上直接调用Android SDK API开发的App；而iOS App就是指通过Objective-C或Swift开发语言在Xcode的开发工具上直接调用iOS SDK API开发的App。

原生开发的优点和缺点有哪些？

原生App开发代表着较好的用户体验和更快更高的性能，但是原生App的可移植性比较差，特别是一款原生App，Android和iOS都要各自开发，同样的逻辑、界面都要写两套。

主要优点：

可访问Android/iOS（平台） 提供的全部功能（如GPS、摄像头...）；

速度快、性能高以及可实现复杂动画及绘制和整体用户体验好。

主要缺点：

平台特定、开发成本高；不同平台必须维护不同代码，人力成本随之变大；

内容固定，动态化弱；大多数情况下，有新功能更新、Bug修复完时只能重新发版，用户需将App重新下载升级。

参考技术A

1.按APP的打包与发布方式来分类，APP分为三类：

需要安装的APP，Native App、Hybird App、React App都属于这一类，发布时需要将App打包成可执行程序，然后挂到市场或者网站上，让用户下载安装后才能运行，其功能受限于平台API与权限，但也可以通过一些技巧越过平台API与权限限制，比如Hook技术。

不需要安装的APP，Web App，其实本质上就是个网站，只是做成了和手机APP相仿的样子，发布方式与网站发布相同，用户可以通过浏览器或者微信之类的工具去加载这个网站，其功能相对于手机，受限于浏览器引擎提供对手机本地服务（文件、相机等等）访问的JS接口，通常功能非常少，所以限制较大。

需要用户已经安装某个第三方APP，然后跑在第三方APP上的APP，这类技术安卓上较多（典型的Python程序可以跑在PythonOnAndroid APP上，或者Ruby解释器可以跑Ruby程序），而iOS由于有对这类行为做出过明确限制，上架审核规则里有明确指出，不准APP可以下载源代码从而扩展功能，所以iOS上过去并不存在这样的APP。

2.针对需要安装的APP，APP开发技术有如下分类




基于官方推荐与支持的语言与框架开发的App，安卓目前官方推荐的是Java、Kotlin与C/C++进行开发，iOS目前官方推荐的是Objective-C、Swift与C/C++

基于一些第三方支持的语言和框架开发的App，这类大多是由一些互联网巨头与开源组织维护的，典型的技术有：

Qt（知名的跨平台GUI框架，基于C++，现在随诺基亚倒台被Digia收购与商业化），可以用来开发安卓和iOS，但问题是我有了Java和OC，为啥还要去用Qt C++，是因为太闲或者觉得BUG不够多吗。。。

Mono，微软.NET框架的开源山寨版，与.NET兼容程度很高，一般使用C#开发，可以用来开发安卓和iOS，性能不佳，C#的开发效率也没比Java和OC高到哪去，还要面对没有官方支持的一堆坑，用他得靠信仰

Node.js，可以使用JS开发然后编译成Native程序，可以用来开发安卓和iOS，但和大部分JS的东西一样，你懂的，JS是一种宗教

Go，Google的高并发系统级语言，原目标是用来替换C，但似乎并不是很美，新的语法似乎还不如老的C，看个人喜好吧，目前有一些第三方写的Android框架，iOS不清楚，没官方支持

Erlang、Ruby、Python，只要能编译二进制程序的框架理论上都能支持安卓和iOS，当然大多不靠谱，有病的可以试一下。

前端面试题，移动端兼容问题都有哪些，安卓和ios问题？

那么进入正文，不废话，直接把自己了解到的和一些看法说出来。
首先是屏幕问题，现在主流的移动设备以安卓和IOS为主，我们在制作移动端页面也是以兼容这两种设备去布局。
首先说iPhone，不得不说iPhone的屏幕考虑到了我们开发者的难处，从而给出iPhone屏幕的dpr都是整数值，在6plus出现之前，iphone的dpr始终是2（物理像素/逻辑像素＝2），即使是6plus出现了，iphone到底其实也就只有2，3这两个dpr。其实6plus的实际dpr并不是整数，而是2.87左右，不过，为了方便开发者来开发，iphone6plus对其做了一个调整，将dpr调整为3，然后在对屏幕进行了一个缩放。所以我们很容易对其做到兼顾。
而安卓的dpr值，并不像iphone那样就只有两个值。安卓的dpr是千奇百怪的，可能是1.5，2，3，4，2.5等等的都有。（甚至我还看到了1.7之类的，安卓的各个设备商，玩的真尼玛high啊。怎么高兴怎么来。）
那么现在开始说说移动端怎么布局以及字体该怎么设置，因为有各种各样的解决方式，我就不一一赘述，直接说手淘的解决方案：flexible.js
我为什么又一次把这个拿出来说，主要有两点原因：1.我觉得它好用，解决方式简单粗暴。2.它经过了比较长时间的考验，如今手淘还在用它。
具体的使用方法自己可以去flexible.js看看，这里我简单说说它的方案以及个人对它的改良。 参考技术A 建议你搜一下这几个meat
我自己整理的一些关于手机端显示web 的适配,关注点在于viewport 即,如何让浏览器展现网站内容并如何设定web宽度.viewport 这个属性web端很重要,不知道是不是你要的内容,还有很多其他的针对设定,可以自行搜索一下meat 手机端的针对属性
1: apple-mobile-web-app-capable (是否隐藏苹果手机工具栏和菜单栏)(是否苹果手机全屏)
No:默认样式,不隐藏
Yes:屏蔽工具栏和菜单栏;全屏显示
2: apple-mobile-web-app-status-bar-style(苹果手机状态栏如何显示)
Black:显示为黑色
black-translucent:显示为黑色并半透明(灰色)(可能会遮盖20到40px的页面顶部内容)
default:默认值(白色)
3: format-detection
Telephone:是否识别为手机号 yes/no
Email:是否识别为电子邮箱 yes/no
Adress:是否识别为地址 yes/no 注:当为yes时iPhone会自动跳转到地图
写法:
· meta name="format-detection" content="telephone=no"
· meta name="format-detection" content="email=no"
· meta name="format-detection" content="adress=no"
或者
meta name="format-detection" content="telephone=no,email=no,adress=no"
4: HandheldFriendly: 设备优化,针对一些老的不识别viewport的浏览器，比如黑莓
Yes/no
5: viewport:设置并规范webapp在手机浏览器中的可视区域
width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
常规写法:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

关于苹果手机webapp的设置
1: apple-mobile-web-app-capable设置为yes
允许苹果机通过safari添加主屏按钮到主屏幕上
2:设置<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"/>
设置苹果webapp的图标

3: <link rel="apple-touch-startup-image" href="/startup.png"/>
设置当网页被设置为webapp时,打开此webapp时启动时的图片 参考技术B 最近碰到几个很烦，苹果在输入的时候底部的键盘会把页面顶上去，相当于页面高度会重新计算，如果页面有定位或者弹窗之类的在弹窗之内的焦点会改变，要写一个键盘自动的下落的全局JS
还有苹果的自带浏览器不支持支付宝的app付款接口的跳转
还有一个苹果里面li标签不能触发点击事件，（这个不太确定，总之我把li标签换成div过后点击事件就生效了） 参考技术C 这个你可以去网上搜一下一大堆，牛客网里就有不少面试题你可以去看看，我感觉是不错的，你也可以试试。