从头开始混合App的设计、开发和实践（1）-开发准备

小贴士：了解了混合App的基本知识后，我们将开始实际构建混合App。从简单到深入，我们将深入了解混合App的各种技术细节。我们可能随时遇到问题，并一点一点地解决；

1、 准备工作：

现在，我们的混合App项目配备了一名Android工程师（肖燕）、一名ios工程师（小王）、一位前端工程师（肖正）和两名后端Java工程师（小张男和小张女）；

对于混合App的开发，业务层由前端实现，Native向js提供的API由Android和ios工程师实现。理想的状态是Native开发不涉及业务，只有前端难以实现的开发才由Native实现；

混合建筑的神圣地图：

混合应用架构。jpg格式

关于这张图片，仔细看5分钟，然后开始以下步骤

2、 前端H5框架结构：

前端H5使用最近流行的MVVM框架vue.js。这里不讨论选择vue的原因。

使用vue-cli脚手架工具初始化vue项目，配置语法检查，导入所需的依赖项，并创建新的项目目录图：

图像.png

3、 js和native之间交互的核心：

在js文件中定义js和native之间的交互方法，并在索引中导入该文件。html，并注册浏览器窗口对象的事件；

1.由于一组代码在多个终端上运行，包括Android、IOS和微信，并且不同终端的主机环境不同，前端应该能够确定当前的运行环境。这里我们使用用户代理方法进行判断；我们都知道用户代理标识浏览器类型，因此我们可以在Native加载Web视图时为Web视图定义特定的用户代理，

当前端加载页面时，我们可以通过window.navigator获取当前环境的用户代理。userAgent，解析用户代理，然后我们可以将当前运行的环境与Android、IOS和浏览器区分开来；

也可以通过其他方法来判断，比如在初始url之后携带参数的方式，以及从前端获取url和解析url的方式；

2.js向Native发送请求。这里我们使用url方案。Native可以以特定格式捕获url，以解析我们的前端发送请求的url，从而确定要做什么并执行相应的逻辑；

var url=“”；//URL包含与本机方约定的参数和参数格式；

var ifr=$（'