Android混合开发快速上手入门


97f44d5ceec64843ad9a1323025ee159~tplv-k3u1fbpfcp-watermark.awebp

一 混合开发简介

原生app :java/kotlin 纯原生写出的app;

web app:web写出的app;

hybird app:原生+web(通过webview)写出的app;

当然,现在也有很多第三方混合开发框架以及简便的js桥,但是作为最基础的webview,掌握js/android的互调等相关知识是非常必要的。

二 Android-Js互调

2.1 准备自己的html文件

安卓和html中js的互调,一是要有安卓代码,二肯定需要html网页。工程中,网页都是放在服务器,方便随时更改,用户无需再次更新自己的app,已达到hybrid开发的目的,实例方便起见,将html文件放在了本地。

首先,在自己安卓项目中的app目录下新建assets文件夹(若没有):

70cd67349e074097b29c9c67f02577cc~tplv-k3u1fbpfcp-watermark.awebp

接着,在assets文件夹下新建自己的html文件,代码如下:

<html>
<head>
<meta http-equiv="Content-Type" charset="GB2312"/>

<script type="text/javascript">
function javacalljs(){
document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
}

function javacalljswith(arg){
document.getElementById("showmsg").innerHTML = (arg);
}

</script>

</head>

<body>
<h3 align="center">Web模块</h3>

<h3 id="showmsg" align="center">调用js显示结果</h3>

<div style="text-align:center; vertical-align:middle;">
<input type="button" value="Js调用Java代码" onclick="window.android.jsCallAndroid()"/>
</div>

<br>

<br>

<div style="text-align:center; vertical-align:middle;">
<input type="button" value="Js调用Java代码并传参数" onclick="window.android.jsCallAndroidArgs('Js传过来的参数')"/>
</div>

</body>
</html>

2.2 WebView控件的准备设置

在自己的activity活动中获得webview控件后,需要进行以下设置:

WebSettings webSettings = webview.getSettings();
//与js交互必须设置
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
webview.addJavascriptInterface(MainActivity.this,"android");
  • webSettings.setJavaScriptEnabled(true) 表示让WebView支持调用Js;
  • webview.loadUrl("file:///android_asset/html.html") 表示加载assets文件下的html.html文件(因为没有网络地址所以加载的本地文件)
  • webview.addJavascriptInterface(MainActivity.this,"android") 给webview添加Js调用接口,第一个参数为类对象,第二个参数为自定义别名,Js通过这个别名来调用Java的方法,我这里自定义为android。 html中用到:<input type="button" value="Js调用Java代码" οnclick="window.android.jsCallAndroid()"/>

2.3 Android调用Js代码

在android代码中(如按钮点击事件中),通过webview这个中介调用loadUrl来执行html代码中的Js代码:

 tvJs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webview.loadUrl("javascript:javacalljs()");
}
});

下为html中要被安卓调用的js函数代码,函数意图为:向id为showmsg的h3大小标题中写入字符串“JAVA调用了JS的无参函数”。

function javacalljs(){
document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
}

在上述基础上,若要在Android调用Js函数时传参数,只需要在loadUrl方法中进行字符串的拼接,将参数以字符串形式拼接进去即可。

webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");

2.4 Js调用Android方法和传参数

点击html按钮,通过οnclick="window.android.jsCallAndroid()事件,通过android别名调用Java文件的jsCallAndroid()方法。曾经Js可直接调用Java代码窃取App信息,为安全起见,在Android4.4以上并且必须加入@JavascriptInterface才有响应。

@JavascriptInterface
public void jsCallAndroid(){
tvShowmsg.setText("Js调用Android方法");
}

@JavascriptInterface
public void jsCallAndroidArgs(String args){
tvShowmsg.setText(args);
}

所有的activity代码如下:

package com.lucas.autils.autils;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;

/**
* 原生webview js与安卓互调
*/

public class JsJavaActivity extends Activity {

private WebView webview;
private TextView tvJs;
private TextView tvJsArgs;
private TextView tvShowmsg;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_jsjava);

setWebview();
initView();
}

private void initView() {
tvJs = (TextView) findViewById(R.id.tv_androidcalljs);
tvJsArgs = (TextView) findViewById(R.id.tv_androidcalljsargs);
tvShowmsg = (TextView) findViewById(R.id.tv_showmsg);

tvJs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webview.loadUrl("javascript:javacalljs()");
}
});

tvJsArgs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");
}
});
}

private void setWebview() {
webview = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webview.getSettings();
webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);
//与js交互必须设置
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
webview.addJavascriptInterface(JsJavaActivity.this,"android");
}

@JavascriptInterface
public void jsCallAndroid(){
tvShowmsg.setText("Js调用Android方法");
}

@JavascriptInterface
public void jsCallAndroidArgs(String args){
tvShowmsg.setText(args);
}

}

三 常用的几个方法和注意点

3.1 WebViewClient中的shouldOverrideUrlLoading拦截url

安卓webview中setWebViewClient方法中需要一个WebViewClient对象,而WebViewClient中有个方法为shouldOverrideUrlLoading,通过此方法可以进行我们需要跳转的url地址的拦截,并根据我们需要进行自定义化的一些操作,解析url做相应的事情。

3.2 WebViewClient中的onPageStarted

onPageStarted会在webview加载相应的url开始之前进行调用,常用来处理需要在加载相应url之前的一些操作。

3.3 WebViewClient中的onPageFinished

onPageStarted会在webview加载相应的url结束之后进行调用,常用来处理需要在加载相应url之后的一些操作,比如加载后更加网页标题填充原生页面最上方的活动标题。

3.4 webview的evaluateJavascript方法

该方法的执行不会使页面刷新,而方法(loadUrl )的执行则会使页面刷新。此Android 4.4 后才可使用。

//拦截url
webview.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.indexOf("jump")>-1){
Toast.makeText(JsJavaActivity.this,"拦截到了相应url",Toast.LENGTH_LONG).show();
return true;
}else if (url.startsWith("http")){
view.loadUrl(url);
return true;
}
return false;
}


@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
// 开始加载页面时
}



@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 加载结束

//因为该方法的执行不会使页面刷新,而方法(loadUrl )的执行则会使页面刷新。
//Android 4.4 后才可使用
webview.evaluateJavascript("javascript:changename()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
Log.v("Native",value);
}
});


}

});

0 个评论

要回复文章请先登录注册