移动端开发技术浅析

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kd1216181067/article/details/78225896

移动端开发技术浅析


目录

  1. APK下载
  2. 概述
  3. 技术介绍
  4. 技术对比
  5. 参考资料

1. APK 下载

百度云链接:https://pan.baidu.com/s/1pLp44Fh

2. 概述

“一次编码,处处运行” 永远是程序员们的理想乡。二十年前 Java 正是举着这面大旗登场,击败了众多竞争对手。但是时至今日,事实已经证明了 Java 笨重的体型和缓慢的发展显然已经很难再抓住这个时代快速跃动的脚步。在新时代的移动大潮下,一个应用想要取胜,完美的使用体验可以说必不可少。使用 native 的方式固然对提升用户体验很有帮助,但是移动的现状是必须针对不同平台 (至少是 iOS 和 Android) 进行开发。这对于开发来说妥妥的是隐患和额外的负担:我们不仅需要在不同的项目间努力用不同的语言实现同样代码的同步,还要承担由此带来的后续维护任务。如果仅只限制在 iOS 和 Android 的话还行,但是如果还要继续向 Windows Phone 等平台拓展的话,所需要付出的代价和工数将几何级增长,这显然是难以接受的。于是,一个其实一直断断续续被提及但是从没有占据过统治地位的概念又一次走进了移动开发者们的视野,那就是跨平台开发。

3. 技术介绍

在移动端进行App开发的历史潮流中,涌现出了很多的新技术,其中有 webview+html+css3 ,RN(React Native), NS(native script)等等一系列的开发技术。下面就一一介绍各个技术的实现
开发模式

hybrid APP

介绍

Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App,但只有一个UI WebView,里面访问的是一个Web App,比如街旁网最开始的应用就是包了个客户端的壳,其实里面是HTML5的网页,后来才推出真正的原生应用。再彻底一点的,如掌上百度和淘宝客户端Android版,走的也是Hybrid App的路线,不过掌上百度里面封装的不是WebView,而是自己的浏览内核,所以体验上更像客户端,更高效。

开发语言

html + javascript + css3

运行机制

在开发中js+h5+css3来开发UI,如果需要调用原生的API的话只能通过webview 来进行调用。如果webview 上面的API不满足需求则可能需要自己来进行插件的开发。此项技术的核心为webview。

Xamarin APP

介绍

作为一个跨平台开发框架,在这一框架内,开发iOS、Android、Windows Phone和Mac App应用可以不用转到Eclipse 或者额外购买Mac并使用Xcode,而继续在Visual Studio之中使用C#与.NET Framework进行。Xamarin.Mobile有很多优点。 Xamarin Studio是一个用C#语言开发跨平台应用的集成开发环境,它和iOS以及Android SDK紧密整合。Xamarin Studio提供了很多现代开发所需功能,包括代码完成、调试器、打包和发布应用(支持通过TestFlight发布应用程序)。对于Android,Xamarin还包含了自己的UI生成器(对于iOS,则使用苹果Xcode的UI生成器),此外还集成了Git和Subversion。开发者可以使用Xamarin Studio在模拟器和真机上对移动应用进行测试和bug调试。Xamarin Studio能够完美支持Windows和Mac。Visual Studio Xamarin还提供了for vs2010 vs2012的插件,这个是比较吸引人的地方。该插件可以很好地与微软的生态系统集成,可以在Mac OS机器的仿真器上进行远程调试和测试。在Mac OS上,因为iOS的现有限制,面向iOS的C#代码会通过AOT编译技术直接编译为ARM汇编代码。而在Android上,应用程序会转换为IL,启动时再进行JIT编译。但插件里面只有Android/iOS类型的项目,更多其它平台上的项目都没有。iOS的项目的编译和调试需要Xcode支持,则说明还需要一台Mac的系统以及Xcode环境,以及一个装在Mac上的辅助软件Xamarin.iOS,Xamarin.iOS是运行在Mac上的软件,用来负责编译和调试软件,并且把结果通过socket通信反应到IDE上。

开发语言

c#

运行机制

收费,自己底层封装的原生的组件供给c#来进行调用。在顶层提供统一的API调用

native script APP

介绍

NativeScript 的思路就是使用移动平台的 JavaScript 引擎来进行跨平台开发。逻辑部分自然无需多说,关键在于如何使用平台特性,JavaScript 要怎样才能调用 native 的东西呢。NativeScript 给出的答案是通过反射得到所有平台 API,预编译它们,然后将这些 API 注入到 JavaScript 运行环境,接下来在 Javascript 调用后拦截这个调用,并运行 native 代码。这么做最大的好处是你可以任意使用最新的平台 API 以及各种第三方库。通过对元数据的反射和注入,NativeScript 的 JavaScript 运行环境总能找到它们,触发相应的调用以及最终访问到 iOS 或者 Android 的平台代码。最新版本的平台 SDK 或者第三方库的内容总是可以被获取和使用,而不需要有什么限制。对于 UI 的处理,NativeScript 选择了使用类似 Android 的 XML 的方式进行布局,然后用 CSS 来控制控件的样式。内置数据双向绑定。android上用法v8 虚拟机。ios 上用内置的javascriptcore

开发语言

javascript + css3 + xml

运行机制

在javascript 代码运行的时候自动注入全局的native的API,即调用的除了js的原生的代码外,其他属于native script的js代码都会映射到原生的js代码调用。

weex APP

介绍

Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。Weex 表面上是一个客户端技术,但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面,然后编译成一段 JavaScript 代码,形成 Weex 的一个 JS bundle;在云端,开发者可以把生成的 JS bundle 部署上去,然后通过网络请求或预下发的方式传递到用户的移动应用客户端;在移动应用客户端里,WeexSDK 会准备好一个 JavaScript 引擎,并且在用户打开一个 Weex 页面时执行相应的 JS bundle,并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践;同时,如果用户没有安装移动应用,他仍然可以在浏览器里打开一个相同的 web 页面,这个页面是使用相同的页面源代码,通过浏览器里的 JavaScript 引擎运行起来的。Weex 的 iOS 和 Android 客户端中都会运行一个 JavaScript 引擎,来执行 JS bundle,同时向各端的渲染层发送规范化的指令,调度客户端的渲染和其它各种能力。在 iOS 下选择了 JavaScriptCore 内核,而在 Android 下选择了 UC 提供的 v8 内核。无论是从性能还是稳定性方面都提供了强有力的保障。

开发语言

javascript + css3 + vue

运行机制

通过weex SDK准备的javascript引擎来运行js代码,并且进行native代码的调度。

react native APP

介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere),RN需要一个JS的运行环境, 在IOS上直接使用内置的javascriptcore, 在Android 则使用webkit.org官方开源的jsc.so。
##### 开发语言
es6+css3+jsx

运行机制

UI采用React 的虚拟dom。API通过jsbridge 调用native方法。bridge是一种JS 和 JAVA代码通信的机制, 用bridge函数传入对方module 和 method即可得到异步回调的结果。

flutter APP

特点

Flutter是一个移动应用程序的软件开发工具包(SDK),用一个代码库构建高性能、高保真的iOS和Android应用程序。目标是使开发人员能够为Android和iOS提供自然的高质量的应用,在滚动行为、排版、图标等方面实现零差异。学习Flutter不需要Android或iOS的开发经验,因为Flutter程序使用Dart语言编写,如果您使用过Java或JavaScript等语言,轻易就能上手,只要有面向对象语言的经验,即使不是程序员也能开发Flutter应用程序!

开发语言

dart

运行机制

flutter 内置一套engine,所编写的代码都是在该engine上面运行的。engine由C++编写实现。运行速度和原生APP相差不大。所有的UI组件由虚拟机进行绘制

4. 技术对比

Hybrid Xamarin native script weex react native flutter
android & ios代码共享程度 100% 90% 90% 90% 90% 100%
开发语言 html5+css3+js c# javascript+css+xml vue+es6+css3 react+es6+css3 dart
动画效果支持 较好 较好
用户体验性 一般 流畅 流畅 流畅 流畅 流畅
插件丰富程度 丰富 未知 较丰富 比较少 较丰富 较丰富
学习成本(针对web前端开发) 较低 较高 较高
界面开发难易程度 较低 较高 较高 较高
数据绑定
中文文档支持
是否支持 xml 标签语法
是否支持热更新 未知
是否支持和现有项目集成 未知
github star - - 11305 5567 54221 7762
最低支持Android版本 取决于对webview的支持程度 可选择 4.2+ 可选择 4.1+ 4.2+
最低支持IOS版本 取决于对webview的支持程度 可选择 iOS8+ 可选择 iOS8.0+ iOS8+

5. 参考资料

  1. flutter官网

  2. nativescript官网

  3. React Native 中文官网

  4. hybrid app 百度百科

  5. React官网

  6. dart 官网

  7. ES6基础教程

如果您也对web前端移动端开发以及想对前沿学习了解的话,请加前端学习交流群:304638320,并且注明是通过csdn渠道加入的该群

阅读更多

没有更多推荐了,返回首页