WebViewClient中,重写
	@Override
    public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) {
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            LogUtils.d("shouldOverrideKeyEvent()");
            if (event.getKeyCode() == KeyEvent.KEYCODE_0) {
                view.loadUrl("javascript:onkeydown("+KEY_ZERO+")");
            }else if (event.getKeyCode() == KeyEvent.KEYCODE_1) {
                view.loadUrl("javascript:onkeydown("+KEY_ONE+")");
            }
        }
        return super.shouldOverrideKeyEvent(view, event);
    }

重写此方法才能够处理在浏览器中的按键事件

本篇文章主要总结一下现在APP当中使用的js、webView混编架构和技术。

什么是 js 混编？
js混编简单说就是使用JavaScript开发APP程序。

android应用使用的是java，Kotlin 、c/c++ 为主的语言开发，ios使用的object-c 、 swift、c/c++ 为主语言开发，由于市场是基本都是android和ios手机，所以一般公司开发什么项目android和ios的APP都必须开发。android和ios都提供一个库webkit浏览器引擎的支持，android提供了一个组件webView用于显示网页，相当于一个内置浏览器，ios也有类似一个组件UIWebView；webView和UIWebView也都支持js bridge的模式，就是js与java或者object-c进行交互，那么就产生一种开发模式就是hybrid APP开发模式。
hybrid 应用
hybrid APP开发模式由于可以使用HTML5 、css、js进行大量UI开发得到了飞速的发展，到后面这类开发也出现很多优秀的框架例如：cordova(phoneGap) ionic 等，他们基本架构都是使用浏览器组件（webView,UIWebView）渲染UI，使用js调用原生代码执行手机功能。那么随后发展中hybrid应用也暴露很多问题。
hybrid 应用缺点


UI渲染性能差，例如加载白屏，渲染卡顿
内存消耗高，主要是没有优秀的回收复用机制，例如原生recyclerView
用户交互差，用户触摸反应迟钝等
UI渲染失真


那么为了解决hybrid APP中的鸡肋痛点，那么也产生除了很多记得新js 混编开发框架，例如react native(facebook 公司出品), Xamarin(微软公司出品，c#阵营，干的也是跨平台这档子事);这种框架已经不再是hybrid模式，应该叫做js native APP 开发模式。
js native 应用(react native ,Xamarin )
js native 应用克服了很hybrid的缺点，他是通过js开发使用自定义封装UI控件进行开发，最终打包成原生应用。
1、优点


原生级别的UI渲染
没有通过webView来进行桥接，减少内存消耗
用户体验迅速，触摸流畅
提供原生方法调用自定义接口，和自定义UI组件的封装使用，可以无缝对接你现在应用
android和ios端高度UI一致性


其实缺点也是比较明显，例如：
1、缺点


一定的学习成本，相当于学习新的开发技术
项目避免不了封装自定义方法和UI控件，桥接代码多
项目维护成变高了


常用混编框架对比表




项目
cordova（phoneGap）
react native
Xamarin
ionic




是否使用webView交互
是
否
否
是


是否具备自有UI组件
否
是
是
是


开源
是
是
是
是


是否打包成原生
否
是
是
否


具备定制IDE工具
否
是
是
否


开发语言
js
js
c#
js


推荐理由
前身phoneGap，历史悠久
facebook大厂背景，使用react js开发，提供了良好的调用原生api和UI组件机制
强烈推荐，超级大厂微软支持，mono是后台，导出平台不止是android 、iOS， 还有windows桌面程序
具备独立js UI，建立在cordova之上


总体而言优点还是跨平台，如果选择js混编框架还是推荐使用react native。

react native整合进入android应用 ，加入js开发模式
操作步骤：
配置好React Native依赖和项目结构。

创建js文件，编写React Native组件的js代码。

在应用中添加一个RCTRootView。这个RCTRootView正是用来承载你的React Native组件的容器。

启动React Native的Packager服务，运行应用。

验证这部分组件是否正常工作。
开始前我们必须使用react native脚手架搭建出一个可以运行的hello world 项目，本文介绍主要是集成react native框架进入现有应用重点不是环境搭建，所以你可以自行百度react native官网的初始化项目文章。
假设你现在已经有了环境了和一个可以运行hello world 项目了 那么我们可以开始接入现有应用了。
hello world 项目项目目录如图：

复制node_modules目录和package.json进入你android项目跟目录如图：

创建index.android.js 文件放入android根目录，写入代码：
'use strict';
import React from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    NativeModules,
    ToastAndroid,
    requireNativeComponent,
    DeviceEventEmitte,
    Alert
} from 'react-native';

class HelloWorld extends React.Component {

    constructor(props) {
        super(props);
    }

    componentWillMount() {
    }


    render() {
        return (
            <View style={styles.container}>
                <Text style={{alignItems:'flex-start', backgroundColor:'red', height:49, textAlign:'right'}}>
                    作者jason 李
                </Text>
            </View>
        )
    }

}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
    },
    hello: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

AppRegistry.registerComponent('HelloWorlds', () => HelloWorld);


接下是android部分了：
在入口gradle文件加入代码：
allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url "$rootDir/node_modules/react-native/android"  //加入这句
        }
    }
}

在项目gradle文件中加入依赖：
compile "com.facebook.react:react-native:0.55.3"

创建Application程序：
public class MyApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }

    };
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

创建react activity：
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // 注意这里的MyReactNativeApp必须对应“index.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorlds", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

加入权限：
<uses-permission android:name="android.permission.INTERNET" />


至此所有的配置结束!!!
运行测试
在目录打开cmd：输入
yarn start
然后用Android studio运行你的项目！！

本文主要是针对**APP进行开发之前的技术选型准备文档，现在share出来，希望在做同类开发的您留下宝贵意见。

=============================分割线=====================================

一， 主要应用技术

 Node.Js
    Node.js 是一个基于ChromeV8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

 Cordova
    Cordova是一款开放源代码的App开发框架，旨在让开发者使用HTML、Javascript、CSS等WebAPIs开发跨平台的移动平台 应用程序，其原名称之为PhoneGap，Adobe收购Nitobi公司后，PhoneGap商标保留，代码贡献给了Apache基金会，而 Apache将其命名为ApacheCallback，其后发布新版本时，定名为ApacheCordova。
Cordova是一个行动设 备的API接口集，利用JavaScript存取这些接口可以调用诸如摄影机、罗盘等硬件系统资源。配合上一些基于HTML5、CSS3技术的UI框架， 如jQueryMobile、DojoMobile或SenchaTouch，开发者得以快速地开发跨平台App而不需要编写任何的原生代码。
注意到因为Cordova本身仍是一个原生程式，为App打包时依然需要用到这些系统平台的SDK。
 
   Ionic
     Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架，它自称为是“本地与HTML5的结合”。该框架提供了很多基本的移动用户界面范例，例如像列表（lists）、标签页栏（tabbars）和触发开关（toggleswitches）这样的简单条目。它还提供了更加复杂的可 视化布局示例，例如在下面显示内容的滑出式菜单。
Ionic宣称他们极度强调性能，并且通过限制DOM交互、完全移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。

PS：Ionic的npm安装需要Python环境的支持，建议使用2.7的版本。

  Angular.Js
     AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。[1]框架 采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操 作不再重要并提升了可测试性。
设计目标：

将应用逻辑与对DOM的操作解耦。这会提高代码的可测试性。
将应用程序的测试看的跟应用程序的编写一样重要。代码的构成方式对测试的难度有巨大的影响。
将应用程序的客户端与服务器端解耦。这允许客户端和服务器端的开发可以齐头并进，并且让双方的复用成为可能。
指导开发者完成构建应用程序的整个历程：从用户界面的设计，到编写业务逻辑，再到测试。

   Angular 遵循软件工程的MVC模式，并鼓励展现，数据，和逻辑组件之间的松耦合。通过依赖注入（dependencyinjection），Angular为客户 端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。
 
二， 开发概述
    混编APP主要是在Cordova的基础上，加入移动端组件Ionic，因为Ionic是基于Angular.Js编写的，所以，要求页面前端使用Angular.JS取代Jquery。

三，前期Demo&概述

1,NodeJs
         http://blog.csdn.net/lhc1105/article/details/50614046
         http://blog.csdn.net/lhc1105/article/details/50644830
2,Cordova
         http://blog.csdn.net/lhc1105/article/details/50614604
         http://blog.csdn.net/lhc1105/article/details/50614452
3,AngularJs
         http://blog.csdn.net/lhc1105/article/details/50662088
 
4，Ionic官网
         http://www.ionic.wang/js_doc-index.html
 
 

许多客户在选择开发APP时，都会被开发者问到一个，你是选择原生开发，还是混编开发。对于外行客户而言，不是很能理解原生和混编的区别。下面简单介绍一下两者的区别，企业在开发的时候能够根据自身情况从多重角度考虑选择哪种开发模式。
介绍
原生APP即Native App开发，是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App软件开发。比如Android一般是利用Java、Eclipse、Android studio等开发语言；IOS是利用Objective-C 和Xcode进行开发。
混编APP即Hybrid App开发，结合原生和HTML5开发的技术，取长补短的一种开发模式，原生代码部分利用WebView插件或者其它的框架为HTML5提供了一个容器，程序主要的业务实现、界面展示是利用H5相关的Web技术进行实现的


开发区别
原生APP开发是采用完全的安卓或IOS系统开发语言进行编写，所需开发周期和开发成本相较于混编app比较高。但是原生开发的用户体验感，运行速度，页面交互功能都比较强大。
但是原生app的可移植性较差，且每次更新都需要重新进行编译上传，用户更新app时也需要重新下载进行安装，

混编APP的开发则具备轻量化，运行速度和用户体验也差不了太多。更新应用时，用户仅仅需要进行轻量化更新即可，无需重新下载这个安装包。但混编APP往往依赖于网络传输，各自的优缺点比较明显。
如何选择
企业想要开发APP，可以根据自己的功能需求、预算和开发周期决定。如果预算成本较低，且产品功能体系比较单一可以选择开发混编APP。混编APP的存在即有理，优劣并存，许多混编APP发展好了转原生的也是可以的。



但是如果功能需求体量级比较大，本身又有比较明确的规划愿景。建议开发原生APP，毕竟它的交互功能，用户操作体验都比混编APP优秀。
无论是原生开发，还是混编开发，都可以咨询链环科技，免费提供功能建议和流程梳理。具体请咨询链环科技（http://www.txxweb.com）