移动测试开发 Hybird app 开发入门之 Native 和 H5 页面交互原理

opentest-oper@360.cn · September 17, 2019 · 651 hits

移动端主流的应用程序可分为3大类:
Native App :原生应用,其页面资源文件都存放于本地
Web App :受限制与UIwebview,页面存放于服务器
Hybird App : 介于二者之间的混合应用

Hybird App 又叫混合应用,看上去像一个Native App,但实际只有一个webview,里面是一个Web App,它可兼具“Native APP良好的用户交互体验”和“Web APP跨平台开发”的优势。它可以使得开发者可以几乎零成本转

型移动应用开发者,并且相同的代码只需针对不同平台进行编译就能实现多个平台上的应用,相较于Web APP开发者还可以通过包装好的接口,调用大部分常用的系统API。

本篇文章主要介绍Hybird App中原生页面和H5页面如何交互。

一、native调用js

创建一个webview对象,并绑定webview控件
①调用不带参数无返回值的js方法

webView.loadUrl("javascript:方法名()");

②调用不带参数有返回值的js方法

webView.evaluateJavascript("javascript:方法名()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(MainActivity.this, "返回值: "+value, Toast.LENGTH_LONG).show();
}
});

③调用带参数无返回值的js方法

webView.loadUrl("javascript:方法名(" + "'转化为字符串的参数'" + ")");

注意事项:
Ⅰ、4.4以前仅仅可用loadUrl调用js方法,4.4以后才可通过evaluateJavaScript调用js获取到返回值
Ⅱ、webView是UI控件,调用的js函数若耗时太长,需在非UI线程的子线程中运行,以免造成anr

二、js调用native

①需要开启javascript调用native的开关, 如下

webView.getSettings().setJavaScriptEnabled(true);

②设置Native与JS交互的全局桥对象

//name:android在网页里面可以用window.name.方法名调用java方法
webView.addJavascriptInterface(MainActivity.this, "name");

③在全局桥对象中(这里是MainActivity中)声明js要调用的方法,并加上注解@JavascriptInterface,例如:

@JavascriptInterface
public void noParaFunc() {
Log.d(TAG, "noParaFunc: 调用");
runOnUiThread(new Runnable() {
@Override
public void run() {
Button button = (Button) findViewById(R.id.button2);
button.setText("JS->android 无参成功");
}
});
}

④在HTML中js调用原生的代码:
不带参数的方法:window.name.noParaFunc()
不带参数的方法:window.name.ParaFunc(‘test’)

*注: *在api17之前addJavascriptInterface有风险,hacker可以反编译获取Native注册的Js对象,然后在页面通过反射java的内置静态类,获取敏感信息实施破坏。

遇到的坑:

如果APP中需要跳转到http页面,需要声明:

<uses-permission android:name="android.permission.INTERNET" />

并且在application中的属性中添加

android:usesCleartextTraffic="true"

否则会出现以下错误(这是由于从Android 9.0(API级别28)开始,默认情况下限制了明文流量的网络请求,对未加密流量不再信任,直接放弃请求,因此http的url均无法在webview中加载,https 不受影响):

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
No Reply at the moment.
需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up