為了功能的快速迭代，為了減少資源成本，和bug熱修復等等，電商巨頭們迎來了H5的時代。目前市場上HybridApp模式是最多的，本公司也是一樣。下面我紀錄一下我使用H5方面的一些體會。純屬個人想法。勿噴。
1、（PhoneGap）Cordova
PhoneGap是一款開源的手機應用開發平臺，它僅僅只用HTML和JavaScript語言就可以製作出能在多個移動裝置上執行的應用。 PhoneGap將移動裝置本身提供的複雜的API進行了抽象和簡化，提供了一系列豐富的API供開發者呼叫，只要你會HTML和Javascript或 者Java語言，就可以利用PhoneGap提供的API去呼叫各種功能，製作出在各種手機平臺(iPhone，Android ，BlackBerry，Symbian，Palm，Window Phone)上執行的應用。目前phonegap獲得Apple,IBM,NOKIA,palm等眾多公司的支援。簡單來說使用PhoneGap就是使用HTML,JavaScript和CSS來開發程式，最終通過PhoneGap可以產生對應版本的native 程式。Cordova是後面Apache改的名字，歷史原因，這裡不細說了。
看這張圖，PhoneGap API將你寫的h5應用打包成響應的native程式，這個是怎麼實現的呢？看過程式碼就知道了：
[code]public class MainActivity extends CordovaActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
}
}
初始化一個WebView
[code] protected void init() {
appView = makeWebView();
createViews();
if (!appView.isInitialized()) {
appView.init(cordovaInterface, pluginEntries, preferences);
}
cordovaInterface.onCordovaInit(appView.getPluginManager());
// Wire the hardware volume controls to control media if desired.
String volumePref = preferences.getString("DefaultVolumeStream", "");
if ("media".equals(volumePref.toLowerCase(Locale.ENGLISH))) {
setVolumeControlStream(AudioManager.STREAM_MUSIC);
}
}
其實很簡單，就是我們平常使用的H5＋webView這種開發模式。webview 的好與不好我就不說了。
Cordova與native通過phone Gap Bridge（CordovaLib）來通訊，也就是說phoneGap提供了豐富的外掛庫來與native通訊。沒有接觸外掛開發的工程師們可以看看我寫的這篇自定義Cordova外掛—SweetAlertDialogPlugin
很多時候Cordova提供的外掛是滿足不了我們開發需要的，因此都是我們自定義外掛開發。
所以我們看到了phoneGap還是停留在web層。對於使用者體驗，依然差的要死。對於前端已經沒有激情了。呵呵。
2、React native
Facebook 在 React.js Conf 2015 大會上推出了基於 JavaScript 的開源框架 React Native，本中文教程翻譯自 React Native 官方文件。
React Native 結合了 Web 應用和 Native 應用的優勢，可以使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象作業系統原生的 UI 元件，代替 DOM 元素來渲染等。
React Native 使你能夠使用基於 JavaScript 和 React 一致的開發體驗在本地平臺上構建世界一流的應用程式體驗。React Native 把重點放在所有開發人員關心的平臺的開發效率上——開發者只需學習一種語言就能輕易為任何平臺高效地編寫程式碼。Facebook 在多個應用程式產品中使用了 React Native，並將繼續為 React Native 投資。
官方是這麼介紹的，大家真正關心的恐怕不是這個，而是js如何跟原生元件搭上關係的呢。舉個例子。我們熟悉的Toast.
JS程式碼，前端攻城獅們，是不是很同意看的懂啊。
[code]'use strict';
var RCTToastAndroid = require('NativeModules').ToastAndroid;
/**
* This exposes the native ToastAndroid module as a JS module. This has a function 'show'
* which takes the following parameters:
*
* 1. String message: A string with the text to toast
* 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG
*/
var ToastAndroid = {
SHORT: RCTToastAndroid.SHORT,
LONG: RCTToastAndroid.LONG,
show: function (
message: string,
duration: number
): void {
RCTToastAndroid.show(message, duration);
},
};
module.exports = ToastAndroid;
native程式碼：
[code]package com.facebook.react.modules.toast; import android.widget.Toast; import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.common.MapBuilder; import java.util.Map; /**
* {@link NativeModule} that allows JS to show an Android Toast.
*/
public class ToastModule extends ReactContextBaseJavaModule { private static final String DURATION_SHORT_KEY = "SHORT";
private static final String DURATION_LONG_KEY = "LONG"; public ToastModule(ReactApplicationContext reactContext) {
super(reactContext);
} @Override
public String getName() {
return "ToastAndroid";
} @Override
public Map<String, Object> getConstants() {
final Map<String, Object> constants = MapBuilder.newHashMap();
constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
return constants;
} @ReactMethod
public void show(String message, int duration) {
Toast.makeText(getReactApplicationContext(), message, duration).show();
}
}
通過getName這個方法拿到JS傳過來的名字ToastAndroid，來呼叫Toast。手法跟Cordova差不多。更多元件的封裝可以去ReactAndroid的原始碼。覺得寫的還是非常不錯的。
React與Cordova不同，React通過封裝原生元件來供js來調，這在一定程度上提升了使用者體驗。而且效能上要好太多。