JavaScript调用原生API获取手机型号

跨平台技术简介

针对原生开发面临问题,人们一直都在努力寻找好的解决方案,而时至今日,已经有很多跨平台框架,根据其原理,主要分为三类:

  • H5+原生(Cordova、Ionic、微信小程序)
  • JavaScript开发+原生渲染 (React Native、Weex、快应用)
  • 自绘UI+原生(QT for mobile、Flutter)

在接下来的章节中我们逐个来看看这三类框架的原理及优缺点。

Hybrid技术简介

H5+原生混合开发

这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现,通过原生的网页加载控件WebView (Android)或WKWebView(iOS)来加载。这样一来,H5部分是可以随时改变而不用发版,动态化需求能满足;同时,由于h5代码只需要一次开发,就能同时在Android和iOS两个平台运行,这也可以减小开发成本,也就是说,H5部分功能越多,开发成本就越小。我们称这种h5+原生的开发模式为混合开发 ,采用混合模式开发的APP我们称之为混合应用Hybrid APP ,如果一个应用的大多数功能都是H5实现的话,我们称其为Web APP 。

目前混合开发框架的典型代表有:Cordova、Ionic 和微信小程序,值得一提的是微信小程序目前是在webview中渲染的,并非原生渲染,但将来有可能会采用原生渲染。

混合开发技术点

如之前所述,原生开发可以访问平台所有功能,而混合开发中,H5代码是运行在WebView中,而WebView实质上就是一个浏览器内核,其JavaScript依然运行在一个权限受限的沙箱中,所以对于大多数系统能力都没有访问权限,如无法访问文件系统、不能使用蓝牙等。所以,对于H5不能实现的功能,都需要原生去做。而混合框架一般都会在原生代码中预先实现一些访问系统能力的API, 然后暴露给WebView以供JavaScript调用,这样一来,WebView就成为了JavaScript与原生API之间通信的桥梁,主要负责JavaScript与原生之间传递调用消息,而消息的传递必须遵守一个标准的协议,它规定了消息的格式与含义,我们把依赖于WebView的用于在JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为WebView JavaScript Bridge, 简称 JsBridge,它也是混合开发框架的核心。

示例:JavaScript调用原生API获取手机型号

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

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

    class JSAPI {
     @JavascriptInterface
     public Object getPhoneModel(Object msg) {
       return Build.MODEL;
     }
    }
    
  2. 将原生API通过WebView注册到JsBridge中

    import wendu.dsbridge.DWebView
    ...
    //DWebView继承自WebView,由dsBridge提供  
    DWebView dwebView = (DWebView) findViewById(R.id.dwebview);
    //注册原生API到JsBridge
    dwebView.addJavascriptObject(new JsAPI(), null);
    
  3. 在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有访问系统的能力,看到这里,我相信你也可以自己实现一个混合开发框架了。

总结

混合应用的优点是动态内容是H5,web技术栈,社区及资源丰富,缺点是性能不好,对于复杂用户界面或动画,WebView不堪重任。

发布了183 篇原创文章 · 获赞 51 · 访问量 7万+
展开阅读全文

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

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览