从零开始Hybrid App设计开发与实践（1）-开发准备

    tips：了解了关于Hybrid App的基础知识后，后面我们开始实际做一款Hybrid App，由浅入深，深入学习Hybrid App的各种技术细节，随时都可能遇见问题，一点一滴去解决就好了；

一、准备工作：
现在我们这个Hybrid App项目配备了一名Android工程师（小严），一名ios工程师（小王），一名前端工程师（小郑），两名后端Java工程师（小张男&小张女）；
关于Hybrid App开发，业务层由前端实现，Native提供给js的api由Android与ios工程师实现，理想状态是Native开发不涉及业务，前端难以实现的才交由Native去实现；
Hybrid架构圣图：

hybrid app架构圣图.jpg

关于这张图，仔细盯5分钟，再开始下文...
二、前端H5框架搭建：
前端H5这块用了最近比较流行的MVVM框架vue.js，关于为什么选用vue，这里不展开。
使用vue-cli脚手架工具初始化一个vue项目，配置语法检查，引入所需依赖，新建工程目录图：

image.png

三、js与native交互的核心：
将js与native交互的方法定义在一个js文件中，index.html中引入这个文件，给浏览器window对象注册事件；
1. 既然是一套代码运行在多端，Android端、ios端、微信端，不同端的宿主环境是不同的，那么前端就要能够判断出当前的运行环境是哪种，这里我们采取user agent的方式来判断；都知道user agent是标识浏览器类型的，那么我们可以在Native load一个webview时给webview定义专有的user agent，
我们前端在页面加载的时候可以通过window.navigator.userAgent来拿到当前环境的user agent，解析user agent，便可以区分出当前运行环境是 Android、ios、浏览器；
也可以通过其他方式来判断，比如通过初始url后面携带参数的方式，前端获取url解析url的方式等；

2. js向Native发送请求，这里我们采用url scheme的方式，native可以捕获特定格式的url，来解析我们前端发送请求的url，来判断出js要做哪种事情，执行相应的逻辑；
var url = ‘’；// url中携带着与Native端约定好的参数、参数格式等；
var ifr = $('