对于原生native还是倍加推崇的,极佳的用户体验和性能让我学的如痴如醉,可是互联网这个世界可以用一句话可以总结:没有什么是不可能的。自从阿里淘宝天猫横空出世,它们教会了人们如何在网上购物,然后仿佛一夜之间,电商公司如雨后春笋般的涌现,连小学生都知道掌上O2O。这不得不说是一个奇迹。在感叹的同时,电商界已经打的头破血流了,CEO们想尽办法挤占市场,因此一款好的产品,一款好的APP也就是必须的。(ps:终于说到APP了)。
为了功能的快速迭代,为了减少资源成本,和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程序,这个是怎么实现的呢?看过代码就知道了:
初始化一个WebView
其实很简单,就是我们平常使用的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代码,前端攻城狮们,是不是很同意看的懂啊。
native代码:
通过getName这个方法拿到JS传过来的名字ToastAndroid,来调用Toast。手法跟Cordova差不多。更多组件的封装可以去ReactAndroid的源码。觉得写的还是非常不错的。
React与Cordova不同,React通过封装原生组件来供js来调,这在一定程度上提升了用户体验。而且性能上要好太多。
为了功能的快速迭代,为了减少资源成本,和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改的名字,历史原因,这里不细说了。
![](https://i-blog.csdnimg.cn/blog_migrate/05ce48d9e05e264b13c9f1fccc31ea56.png)
看这张图,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来调,这在一定程度上提升了用户体验。而且性能上要好太多。