tips:了解了关于Hybrid App的基础知识后,后面我们开始实际做一款Hybrid App,由浅入深,深入学习Hybrid App的各种技术细节,随时都可能遇见问题,一点一滴去解决就好了;
一、准备工作:
现在我们这个Hybrid App项目配备了一名Android工程师(小严),一名ios工程师(小王),一名前端工程师(小郑),两名后端Java工程师(小张男&小张女);
关于Hybrid App开发,业务层由前端实现,Native提供给js的api由Android与ios工程师实现,理想状态是Native开发不涉及业务,前端难以实现的才交由Native去实现;
Hybrid架构圣图:
关于这张图,仔细盯5分钟,再开始下文...
二、前端H5框架搭建:
前端H5这块用了最近比较流行的MVVM框架vue.js,关于为什么选用vue,这里不展开。
使用vue-cli脚手架工具初始化一个vue项目,配置语法检查,引入所需依赖,新建工程目录图:
三、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 = $('<iframe style="display: none;" src="' + url + '"/>');
$('body').append(ifr);
3. 我们在js向native发送请求时,如果是需要native有回调callback js时,需要在发送请求前,像浏览器window对象注册一个回调事件;当native执行回调时,会根据url参数中携带的callbackId,来寻找window中注册的回调事件,并执行回调
这样就完成了一次,js调用native,native回调js,双方的通信基本完成;
具体还有很多细节,是与native端提前约定好的,