Hybrid开发基础

大家好，欢迎来到IT知识分享网。

1、Hybrid开发的优劣势

移动开发目前有四种方式：原生(Native APP)、混合开发(Hybrid APP)、网页应用(Web APP)、React Native APP,Hybrid开发在移动端开发中使用比较多，目前在微信、支付宝、淘宝、抖音等APP都有应用，相对于其他两种开发方式有如下特点：

2、Hybrid架构

通过JSBridge，H5页面可以调用Native的API，Native也可以调用H5页面的方法或者让H5页面回调。

3、原生页面与H5页页面交互

3.1、Android与H5通信基本方式

Native调用JS
4.4之前

// mWebView = new WebView(this); //即当前webview对象  mWebView.loadUrl("javascript: 方法名('参数,需要转为字符串')"); //ui线程中运行 runOnUiThread(new Runnable() { 
    @Override public void run() { 
    mWebView.loadUrl("javascript: 方法名('参数,需要转为字符串')"); } }); 

4.4以后

//异步执行JS代码,并获取返回值  mWebView.evaluateJavascript("javascript: 方法名('参数,需要转为字符串')", new ValueCallback() { 
    @Override public void onReceiveValue(String value) { 
    //这里的value即为对应JS方法的返回值 } }); 

Navtive调用H5页面的js方法，有如下特点：

• 4.4之前通过loadurl方法调用JS方法，无法获取方法的返回值
• 4.4之后通过evaluateJavascript异步调用js方法，只能在onReceiveValue拿到返回值
• 不适合大量数据传输的场景，数据量大的场景用接口调用比较好
• mWebView.loadUrl()需要再ui线程运行，mWebView为UI控件
  JS调用Native
  

WebSettings webSettings = mWebView.getSettings(); //Android容器允许JS脚本，必须要 webSettings.setJavaScriptEnabled(true); //Android容器设置侨连对象 mWebView.addJavascriptInterface(getJSBridge(), "JSBridge"); 

Native通过addJavascriptInterface添加JS对象，然后在该对象的内部声明对应的API方法，有如下特点：

• 在Android4.2以上(api17后)，暴露的API需要加上注解@JavascriptInterface，否则找不到方法
• 在api17之前，addJavascriptInterface有风险，可以通过反编译native注册的js对象,然后在页面通过反射java的内置静态类。获取一些敏感信息
• JS能调用已暴露的API，得到相应的返回值

3.2、Android与H5通信：JSBridge

4、JS Bridge设计

• 第一步：设计出一个Native与JS交互的全局桥对象
• 第二步：JS调用Native
• 第三步：Native得知API被调用
• 第四步：分析URL-参数和回调的格式
• 第五步：Native如何调用JS
• 第六步：H5中API方法的注册以及格式

第一步：设计出一个Native与JS交互的全局桥对象
定义个一个H5全局对象JS Bridge实现，该对象是H5页面中全局对象window的一个属性

var JSBridge = window.JSBridge || (window.JSBridge = { 
   }); 

第二步：JS调用Native
通过callHandler方法调用原生
第三步：Native得知api被调用
Android捕获scheme url
在WebViewClient通过shouldoverrideurlloading拦截scheme url

public boolean shouldOverrideUrlLoading(WebView view, String url){ 
    //读取到url后自行进行分析处理 //如果返回false，则WebView处理链接url，如果返回true，代表WebView根据程序来执行url return true; } 

第四步：分析url-参数和回调的格式

• responseId String行 h5页面中对应需要执行的回调函数Id，在h5中生成scheme url
• responseData Json Native需要传递给h5的数据格式，包括(resultcode:(是否调用成功 1成功 0失败)，result：执行完的结果信息，errmsg：传递一些调用失败的错误信息)

//将回调信息传给H5 JSBridge._handleMessageFromNative(messageJSON); 

Native调用H5方法，数据格式为：{handleName:api名，data：数据，callbackId：回调id}

• handleName String型 ：需要调用的h5开放的api名称
• data JSON型 ：需要传递的数据
• callbackid String型：原生生成的回调函数id，h5执行完毕通过scheme url通知原生api成功执行

第六步：H5中api方法注册及格式

//注册一个测试函数 JSBridge.registerHandler('testH5Func',function(data,callback){ 
    alert('测试函数接收到数据:'+JSON.stringify(data)); callback&&callback('测试回传数据...'); }); 

5、JS Bridge中实现的通用功能自定义tabBar

• 自定义tabBar左右两侧按钮的功能及样式
• 打开一个新的webview承接跳转的url
• 关闭webview
• 关闭多个webview
• 监听resume、pause事件
• 下拉刷新
• app唤起

6、JS Bridge实现的业务功能支付功能

• 获取位置信息
• 页面第三方分享
• 调用相机、图片上传等