国泰基金 Hybrid App 开发探索
小编入职国泰基金已有将近4个月，作为WEB前端开发，在当下流行的大前端概念下，也算是蹭了波儿潮流，做了一次Android的Hybrid开发，小编也是有机会从全局的角度参与了整个Android Hybrid的开发流程，对这样一种混合模式的开发流程算是有了一个比较全面的了解。
首先我们先看下整体的效果
首先还是要稍微简单的介绍下什么是Hybrid开发，不过在这之前还是要稍稍了解下Native App和Web App
一、Native App
Native App即原生应用，即我们一般所称的客户端，是针对不同手机系统单独开发的本地应用，如需使用需要先下载到手机并安装，下载Native App的最常见方法是访问应用程序商店，如苹果的App Store、安卓市场、Google Play等。在技术实现上一般采用针对操作系统的特定语言进行编写，如：使用Objective-c开发IOS应用，使用Java+Android开发android应用。
二、Web App
Web App又叫Web应用，简单的说就是一个触屏版的网站。Web应用完全用HTML、JavaScript和CSS等Web技术开发，通过移动设备的浏览器来访问，缺点是这些基于浏览器的应用无法调用系统API来实现一些高级功能，也不适合高性能要求的场合。
到此，既然我们知道了原生和WEB APP的概念，这时候我们来说下混合模式应用。
Hybrid App又叫混合应用，是一种介于Native App、Web App之间的App，它虽然看上去是一个Native App，但只是一个UI WebView，里面访问的是一个Web App。Hybrid App实质是伪造一个浏览器的apk/ipa原生程序，并运行了一个Web APP。Hybrid App兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。它可以使web开发人员可以几乎零成本的转型成移动应用开发者，并且相同的代码只需针对不同平台进行编译就能实现在多平台的分发，而相较于Web App，开发者可以通过包装好的接口，调用大部分常用的系统API。
不过这里小编作为一个WEB前端开发者，苦逼的搭建了一整套的Android + JAVA工程框架，还好当时大学学的JAVA没有完全还给老师~
首先来看下前端整体的一个技术树
关于Android的部分，小编不想细说，毕竟脱离JAVA已经有些时间，文章中未必能够讲到位，因此不想误导大家
WEB 前端侧是一个典型的vue技术栈的结构：
我们采用vue来封装我们的主要业务逻辑，若有频繁的DOM操作，我们还是采用了jquery的解决方案，使用Vuex和LocalStorage结合的方式来存储我们页面之间的状态数据亦或是业务基础数据，Webpack和Less的职责自然不用多说。
在国泰的APP中，我们采用了CROSSWALK的解决方案来替换系统自带的webview的方式，从而尽可能的降低在Android平台上的兼容性问题的出现，在使用Crosswalk之前，我们必须了解Crosswalk
一、什么是Crosswalk
crosswalk是一款开源的web引擎，在Android4.0以上的系统中使用Crosswalk可以让应用程序在h5方面上获得一致性体验。
它的优势十分明显：crosswalk采用的是Chromium内核，所以crosswalk会享有Chromium的功能和优势。支持最新的H5 API。
不过劣势的话，是存在性能问题，其通过大量的反射来构建它的主要功能，同时由于crosswalk是将整个内核打包，所以应用的体积会很大，不过这也只不过使你的APK增加20 ~ 50M左右的体积，这点体积在现代的手机系统中并不是事儿~
Crosswalk官网：https://crosswalk-project.org/index_zh.html
二、国泰APP中关于Crosswalk的使用
我们看下在我的工程中，关于Corsswalk的封装
我将涉及到webview的ResourceClient，UIClient以及Webview进行了独立的封装，这样会使得我们的APP使用Corsswalk的方式会更加灵活和定制化，方便针对我们的业务场景进行更好的抽离，比如我需要单独封装一个在webview中封装自定义user-agent的操作，这里我在集成自XWalkview的类中增加一个初始化逻辑即可：
了解了什么是Crosswalk后，那么接下来我们看下一个典型Hybrid数据交互的流程， 这里我举一个基金申购的例子
我们注意红色框框中的内容，这是Android Bybird的主要交互方式，这里的JSBridge只是一个笼统的概念，我将原生调用webview中的JS的方法叫做JSBridge，那么Android中原生JAVA是如何调用webview中的JS方法，webview中的JS方法如果调用原生的JAVA方法呢，这里我来简单的介绍下：
一、Android原生调用Crosswalk中的JS方法
1. 首先在我们的H5工程中，我们抽离了一个webview.js，这个JS中集成了工程中原生能够调用的JS的方法，同时我们将这个方法塞入了window变量中
这是我们webview.js中的部分方法：
2. 接下来在我们的JAVA文件中，我们只需要通过Crosswalk的内置方法，我们便能调用webview中的window中的变量，因此可以访问其封装的JS方法了：
二、在JS中调用原生的JAVA方法
1. 首先我们需要打开Crosswalk中的配合开关，使得Crosswalk支持这样的调用
2. 在需要JS调用的原生方法中打上@Javascript的注解，比如：
3. 在应用初始化其中的webview后，会在webview中注入一个叫做NativeInterface的变量，这个变量是和window变量平级的，打上@Javascript注解的方法都会封装在这个变量之中，因此在我们的JS方法中，我们可以直接调用这个变量中的方法来激发对原生JAVA方法的调用：
至此，国泰Android App中主要的Hybrid架构已经给大家介绍的差不多了，这是一篇偏整体架构的技术文章，有很多细节没有和大家好好介绍，小编深感抱歉，一方面业务相关的内容小编不方便给大家多说，另外一方面关于Android侧构建小编其实也是一个门外汉，还是要多谢淘宝和美团的Android大牛的悉心指导，小编才一步一步构建出来，最后如有纰漏和技术问题，大家多多交流，不对的地方欢迎大家指正~
邮箱还是那个邮箱：[email protected]