移动开发技术你知道多少

Jason199
143 阅读5分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天， 点击查看活动详情

我个人认为，想要了解一门新技术， 就要知道这项技术背景是在什么环境下出来的，又会解决什么样的问题，因为只有这样才能理解为什么这项技术会凭空出现，肯定是现有的技术有了无法结觉得瓶颈问题了。

1.1.1 原生开发与跨平台技术

#1. 原生开发

#1. 原生开发

原生应用程序是指移动平台（iOS或安卓）所特有的应用，使用与平台相互支持的开发工具和开发语言，并直接调用系统提供的SDK API。例如Android原生应用就是使用Java或Kotlin语言直接调用Android SDK开发的应用程序；而iOS原生应用就是指通过Objective-C或Swift语言直接调用iOS SDK开发的应用程序。原生开发有以下主要优势：

 可访问平台全部功能（GPS、摄像头）；
速度快、性能高、可以实现复杂动画及绘制，整体用户体验好；

缺点：

 平台特定，开发成本高；不同平台必须维护不同代码，人力成本随之变大；
 内容固定，动态化弱，大多数情况下，有新功能更新时只能发版；

在移动互联网发展的初期，业务场景并不复杂，原生开发还可以应对产品需求迭代。 不过后来随着物联网时代到来、移动互联迅猛发展，日新月异的业务场景逐渐出现，传统的纯原生开发已经不能满足日益增长的业务需求。主要表现在：

  • 动态化内容需求逐渐增大；当需求发生变化时，纯原生应用需要通过升级版本来更新内容，但应用上架、审核是需要周期，这对高速变化的互联网时代来说是比较头疼的问题之一了，所以，对应用动态化(不发版也可以更新应用内容)的需求就变的迫在眉睫。
  • 业务需求变化快，开发成本增加；原生开发一般都要维护Android、iOS两个开发团队，版本迭代时，无论人力成本，还是测试成本这些统统都会变大。

总结说来，纯原生开发主要面临动态化变化和开发成本增加两个问题，针对这两个问题，，为了解决这些问题诞生了跨平台的动态化框架。

2. 跨平台技术简介

针对原生开发面临的问题，行业内部一直都在努力寻找好的解决方案，已经有很多跨平台框架，根据其原理，主要分为三类：

1. H5 + 原生（Cordova、Ionic、微信小程序）

这类框架主要原理就是将 App 中需要动态变动的内容通过HTML5（简称 H5）来实现，通过原生的网页加载控件WebView （Android）或 WKWebView（iOS）来加载（以后若无特殊说明，我们用WebView来统一指代 Android 和 iOS 中的网页加载控件）。这种方案中，H5 部分是可以随时改变而不用发版，动态化需求能满足；同时，由于 H5 代码只需要一次开发，就能同时在 Android 和 iOS 两个平台运行，这也可以减小开发成本，也就是说，H5 部分功能越多，开发成本就越小。我们称这种 H5 + 原生 的开发模式为混合开发 ，采用混合模式开发的App我们称之为混合应用或 HTMLybrid App ，如果一个应用的大多数功能都是 H5 实现的话，我们称其为 Web App 。

目前混合开发框架的典型代表有：Cordova、Ionic 。大多数 App 中都会有一些功能是 H5 开发的，至少目前为止，HTMLybrid App 仍然是最通用且最成熟的跨端解决方案。

在此，我们需要提一下小程序，目前国内各家公司小程序应用层的开发技术栈是 Web 技术栈，而底层渲染方式基本都是 WebView 和原生相结合的方式。

#1) 示例：JavaScript调用原生API获取手机型号

下面我们以 Android 为例，实现一个获取手机型号的原生 API 供 JavaScript 调用。在这个示例中将展示 JavaScript 调用原生 API 的流程，读者可以直观的感受一下调用流程。我们选用笔者在Github上开源的 dsBridge作为 JsBridge 来进行通信。dsBridge 是笔者实现的一个跨平台的 JsBridge 库，此示例中只使用其同步调用功能。

  • 首先在原生中实现获取手机型号的API getPhoneModel

    class JSAPI {
 @JavascriptInterface
 public Object getPhoneModel(Object msg) {
   return Build.MODEL;
 }
}

  • 将原生API通过WebView注册到JsBridge中

    import wendu.dsbridge.DWebView
...
//DWebView继承自WebView，由dsBridge提供  
DWebView dwebView = (DWebView) findViewById(R.id.dwebview);
//注册原生API到JsBridge
dwebView.addJavascriptObject(new JsAPI(), null);

  • 在JavaScript中调用原生API

    var dsBridge = require("dsbridge")
//直接调用原生API `getPhoneModel`
var model = dsBridge.call("getPhoneModel");
//打印机型
console.log(model);

上面示例演示了 JavaScript 调用原生 API 的过程，同样的，一般来说优秀的 JsBridge 也支持原生调用 JavaScript ，dsBridge 也是支持的，如果您感兴趣，可以去 Github dsBridge 项目主页查看。

现在，我们回头来看一下，混合应用无非就是在第一步中预先实现一系列 API 供 JavaScript 调用，让 JavaScript 有访问系统功能的能力，看到这里，我相信你也可以自己实现一个混合开发框架了

avatar
文章
阅读
粉丝