| JavaScript

APP 的三种 开发模式

  • Native
  • WebAPP
  • HybridAPP

Native

Native APP 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强，需要用户下载安装使用。（简单来说，原生应用是特别为某种操作系统开发的，比如iOS、Android、黑莓等等，它们是在各自的移动设备上运行的）

该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

原生应用程序是某一个移动平台（比如iOS或安卓）所特有的，使用相应平台支持的开发工具和语言（比如iOS平台支持Xcode和Objective-C，安卓平台支持Eclipse和Java）。原生应用程序看起来（外观）和运行起来（性能）是最佳的。

优点

  1. 原生应用。性能最好，交互体验有优势
  2. 可以调用移动硬件设备的底层功能（摄像头、日历和地理位置等）

缺点

  1. 更新体验较差、需要用户手动更新。
  2. 苹果商店发布流程繁琐
  3. 使用不同的开发语言，所以开发、维护成本大

WebAPP

Web App 指采用Html5语言写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。（Web应用本质上是为移动浏览器设计的基于Web的应用，它们是用普通Web开发语言开发的，可以在各种智能手机浏览器上运行）

Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。

HTML5应用程序使用标准的Web技术，通常是HTML5、JavaScript和CSS。这种只编写一次、可到处运行的移动开发方法构建的跨平台移动应用程序可以在多个设备上运行。虽然开发人员单单使用HTML5和JavaScript就能构建功能复杂的应用程序，但仍然存在一些重大的局限性，具体包括会话管理、安全离线存储以及访问原生设备功能（摄像头、日历和地理位置等）。

优点

  1. 开发成本低，效率快
  2. 跨平台、升级维护简单，不受应用商店限制
  3. 不需要用户下载使用，有浏览器即可访问

缺点

  1. 依赖网络，访问速度受限于终端网速。每次访问，消耗流量
  2. 性能差，用户体验较差（因为需要去远端下载资源）
  3. 无法调用移动硬件设备的底层功能（摄像头、日历和地理位置等）

HybridAPP

Hybrid APP指的是半原生半Web的混合类App。需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是 Web 。

混合应用程序让开发人员可以把HTML5应用程序嵌入到一个细薄的原生容器里面，集原生应用程序和HTML5应用程序的优点（及缺点）于一体。

混合应用大家都知道是原生应用和Web应用的结合体，采用了原生应用的一部分、Web应用的一部分，所以必须在部分在设备上运行、部分在Web上运行。不过混合应用中比例很自由，比如Web 占90%，原生占10%；或者各占50%。

有些应用最开始就是包了个原生客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。比较知名的APP，比如手机百度和淘宝客户端 Android版，走的也是Hybrid App的路线，不过手机百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。

优点

  1. 开发成本较低，效率较快,性能介于 Native 与 WebAPP 之间，可与 Nactive 媲美
  2. 跨平台、实现多端展示同一个交互层
  3. 可以调用移动硬件设备的底层功能（摄像头、日历和地理位置等）

缺点

  1. 用户需要在应用商店下载，发布流程繁琐
  2. 团队中需要有懂 Web、IOS 开发的技术人员，双方需要配合工作

（1）第一种方案：Web架构为重

优点：

  • 全Web开发，一定程度上有利于Web前端技术人员快速地构建页面样式
  • 有利于在不同的平台上面展示同一个交互层
  • 便于调试，开发的时候可以通过浏览器的
  • 方式进行调试，工具丰富。
  • 兼容多平台
  • 顺利访问手机的多种功能
  • App Store中可下载（Wen应用套用原生应用的外壳）
  • 可线下使用
  • 页面存放于本地和服务器两种方式，部署应用程序(受限于UIwebview)

缺点：

  • 不确定上线时间
  • 虽然说你可以专注在界面以及交互开发上了，但是这页会成为一个缺点，比如说要仿造一个iOS的默认设置界面，就需要大量的html以及css代码了，而且效果不一定和iPhone上面的界面一样好
  • 用户体验不如本地应用
  • 性能稍慢（需要连接网络）
  • 技术还不是很成熟（比如Facebook现在的应用属于混合应用它可以在许多App Store畅通无阻，但是掺杂了大量Web特性，所以它运行速度比较慢，而现在为了提高性能FB又决定采用原生应用）

（2）第二种方案：编译转换方式

优点：

利用自己熟悉的语言进行应用开发。

缺点：

严重依赖于其工具厂商提供的工具包，调试的时候就要有全套的工具。

（3）第三种方案：Native架构为重（主流）

优点：

最稳定的Hybrid App开发方式了，交互层的效率上由Native的东西解决了，而且架构上基本就是在App内写网页，连App Store都是采用了该种方案；

缺点：

团队至少需要两个工程师，一个是Web的，一个是iOS或者Android的。当然如果开发人员会两种技术也可独立承担；还是运行效率，要权衡好多少界面采用Web来渲染，毕竟WebView的效率会相对降低，以前Facebook就是因为Web的渲染效率低下，把整个应用改为原生的解决方案。当然这里面可以通过优化来解决，但是优化也是有限度的。

3种APP对比分析

对用户来讲差别主要是用户体验，如果WebApp做得好也能接近原生App的效果；对于开发人员，WebApp更加易于移植到多个平台，减少非常多的工作量。

1.主要区别

原生APP中：

每一种移动操作系统都需要独立的开发项目；
每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等，需要使用各自的软件开发包，开发工具以及各自的控件。
Native App（原生型APP）需要开发“云服务器数据中心”和“APP客户端”
每次获取最新的APP功能，需要升级APP应用
原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架；
手机用户无法上网也可访问APP应用中以前下载的数据
原生型的APP可以调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）
APP应用更新新功能，涉及到每次要向各个应用商店进行
提交审核。
适用企业：游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。

WebAPP中：

因为运行在移动设备的浏览器上，所以只需要一个开发项目
这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成（PHP,Ruby on Rails,Python），这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2，APPcan以及Appcelerator Titanium等等。
Web APP需开发“html5云网站”和“APP客户端”
每次打开APP，都要通过APP框架向云网站取UI及数据
手机用户无法上网则无法访问APP应用中的数据
框架型的APP无法调用手机终端的硬件设备，（语音、摄像头、短信、GPS、蓝牙、重力感应等）
框架型APP的访问速度受手机终端上网的限制，每次使用均会消耗一定的手机上网流量
框架型APP应用的安装包小巧，只包含框架文件，而大量的UI元素、数据内容刚存放在云端
APP用户每次都可以访问到实时的最新的云端数据
APP用户无须频繁更新APP应用，与云端实现的是实时数据交互
适用企业：电子商务、金融、新闻资讯、企业集团，需经常更新内容的APP应用。

2.开发难度区别

移动web和混合App开发难度对于web开发者来说相对较低，而且可以充分利用现有的web开发工具和工作流程

3.发布渠道和更新方式

混合App可以在应用商店App Store发布，但可以自主更新，而原生App的更新必须通过应用商店App Store。

4.移动设备本地API访问

混合App可以通过JavaScript API访问到移动设备的摄像头、GPS；而原生App可以通过原生编程语言访问设备所有功能。

5.跨平台和可移植性

基于浏览器的移动web最好的可移植性和跨平台表现；混合App也能节省跨平台的时间和成本，只需编写一次核心代码就可部署到多个平台，而原生App的跨平台性能最差。

6.搜索引擎友好

只有移动web对搜索引擎友好，可与在线营销无缝整合。

7.货币化

混合App除广告外，还支持付费下载及程序内购买；原生App的程序内购买金额2012年首次超过下载收费。

8.消息推送

只有混合App和原生App支持消息推送，这能增加用户忠诚度。

9.获取方法区别

原生APP中：
直接下载到设备
以独立的应用程序运行(并不需要浏览器)
用户必须手动去下载并安装这些原生App
有一些商店与卖场来帮助用户寻找你的App，

WebAPP中：
从移动设备上的浏览器访问
不需要安装额外的软件
软件更新只需要服务器就够了
因为现在没有什么商品或卖场提供这种App，所以如何搜索这些移动Web App相当不简单

10.版本控制区别

原生APP中：
用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况

WebAPP中：
所有的用户都是用同样的版本

Crocodile 框架中通信

  1. 执行 webapck 打包 Hybrid 包时，将 vendor/bridge.js 文件打包至 crocodile.seed.js 中，在前端应用启动时，优先于其他脚本代码加载。
  2. 当 Native 的 webview 加载完成后，调用 H5 的web_view_finished_load接口获取 Nacti 端的基本信息(版本、系统参数…)
初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
WebSettings webSettings = mWebView.getSettings();
//Android容器允许JS脚本
webSettings.setJavaScriptEnabled(true);
//Android容器设置侨连对象
mWebView.addJavascriptInterface(getJSBridge(), "JSBridge");

//Android4.2版本以上，本地方法要加上注解@JavascriptInterface，否则会找不到方法。
private Object getJSBridge(){
    Object insertObj = new Object(){
    	@JavascriptInterface
        public String foo(){
            return "foo";
        }

        @JavascriptInterface
        public String foo2(final String param){
            return "foo2:" + param;
        }

    };
    return insertObj;
}
JS 调用
1
2
3
4
//调用方法一
window.JSBridge.foo() //返回:'foo'
//调用方法二
window.JSBridge.foo2('test') //返回:'foo2:test'
4.4 版本前
1
2
3
4
5
6
7
8
9
10
11
// mWebView = new WebView(this); //即当前webview对象
mWebView.loadUrl("javascript: 方法名('参数,需要转为字符串')");

//ui线程中运行
 runOnUiThread(new Runnable() {
        @Override
        public void run() {
            mWebView.loadUrl("javascript: 方法名('参数,需要转为字符串')");
            Toast.makeText(Activity名.this, "调用方法...", Toast.LENGTH_SHORT).show();
        }
});
4.4 版本后（包括）
1
2
3
4
5
6
7
//异步执行JS代码,并获取返回值
mWebView.evaluateJavascript("javascript: 方法名('参数,需要转为字符串')", new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
    		//这里的value即为对应JS方法的返回值
        }
});