android hybird 与h5 app区别

hybird 与h5 app是不一样的,以前对这两者理解有所误解,在实际开发中也并未真正采用hybird,而是使用h5+app外壳实现移动端应用。虽然开发出来的应用实现了无需升级app实现主功能更新，但是交互体验上较原生相差甚多。

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”(摘自百度百科)

一般hybird app会将需要动态更新页面及功能内置到app中,也就是将web页面预置到本地,android端通过加载本地html页面实现快速加载,由于不需要经过网络,速度上会有极大的提升。而需要升级是，则需在服务器上建立对应的资源包，并将服务器资源包与本地html版本做对比，若不一致则从服务器加载资源压缩包，并下载到本地，从而实现不需要重新安装app快速升级迭代的目的。此功能适用于需要频繁更新，又对性能要求较高的场景，例如新闻头条页等。若用h5实现，则体验上会相差不少。

android 与js混合调用方式

1.通常android与js混合调用的方式是android端定义webView，并设置如下代码

WebSettings settings = mWebView.getSettings();

settings.setJavaScriptEnabled(true);

//设置本应用加载网页

mWebView.setWebViewClient(new WebViewClient(){

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url)

return true;

}

});

mWebView.loadUrl("***.html");

此处传入url并开启访问网络权限即可实现打开页面.AndroidManifest.xml

下面正式开始JS调用android方式

需要建立一个桥,如下

import android.content.Context;

import android.webkit.JavascriptInterface;

import android.widget.Toast;

public class JsInterface {

private Context mContext;

public JsInterface(Context context){

mContext = context;

}

//必须加注解,为了安全性考虑,4.2后强制

@JavascriptInterface

public void showToast(String params){

Toast.makeText(mContext,"Hello"+params,Toast.LENGTH_LONG).show();

}

}

//MainActivity中

JsInterface jsInterface = new JsInterface(MainActivity.this);

myWebView.addJavascriptInterface(jsInterface,"bridge");

//js中,使用如下代码

document.getElementById('#btn').addEventListener("click",function(){

if(window.bridge){

window.bridge.showToast('from js methods');

}

})

此时js可以成功 调用到android中原生方法,但是回调会很麻烦,4.4中有evaluatejavascript可以实现,但是未兼容到4.4以下。至此，因为本文中的重点，hybird的实现方案及js与android交互方案。

hybird中的实现方式

原理与android中原生schema协议类似，通过拦截URl形式实现。可以通过自定义协议名称，然后webView中拦截这个schema，并解析其中参数与回调函数，js调用android方法，并实现回调。

首先定义协议，即需要拦截的scheme ，我在这里定义 myschema://utils,这个协议名可以是任意的，只要拦截统一即可。

封装的js方法如下

function invoke(action, data, callback) {

// 拼装 schema 协议,action对应需要实现的方法名

var schema = 'myshema://utils/' + action

// 拼接参数 data对应参数

schema += '?a=a'

var key

for (key in data) {

if (data.hasOwnProperty(key)) {

schema += '&' + key +"="+ data[key];

}

}

// 处理 callback

var callbackName = ''

if (typeof callback === 'string') {

callbackName = callback

} else {

callbackName = action + Date.now()

window[callbackName] = callback

}

schema += '&callback='+callbackName;

//最终拼接出来应该是zhezhong这种形式 myshema://utils/actioin?a=a&key=value&callback=callbackName

// 触发

var iframe = document.createElement('iframe')

iframe.style.display = 'none'

iframe.src = schema // 重要！此处会发送连接,会被webviwe捕获到

var body = document.body

body.appendChild(iframe)

setTimeout(function () {

body.removeChild(iframe)

iframe = null

})

}

index中

document.getElementById('btn1').addEventListener('click', function () {

// invokeScan()

invoke('showToast',{name:'js'},function(res){

console.log("回调成功",res)'

})

//location.href="http://www.baidu.com";

})

android中,将js文件与index文件放置与assets文件夹下,webView加载此index,并设置拦截,代码如下

myWebView.setWebViewClient(new WebViewClient(){

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

//重要,此处实现拦截,可解析参数,根据action名称调用不同方法,此处未演示

if(url.contains("myshema://utils/")){

Toast.makeText(MainActivity.this,"调用成功",Toast.LENGTH_LONG).show();

String callback = "";

Mapparams = UriUtil.URLRequest(url);

if(params.containsKey("callback")){

view.loadUrl("javascript:"+params.get("callback")+"()");

}

}else{

view.loadUrl(url);

}

return true;

}

});

myWebView.loadUrl("file:///android_asset/index.html");

至此,实现了通过自定义schema实现js拦截调用android原生方法的方案,此方案好处是可以隐藏调用细节,将调用细节封装到内部,更安全,而且兼容性更好.

若有问题,欢迎提问并与我联系,转载请注明作者!