您的位置：首页 > 移动开发 > Android开发

Android 入门第八讲02-WebView的高级用法（Android调用 JS 代码（ loadUrl 方法，案例练习），JS调用 Android 代码，流行框架总结，跨平台技术）

2020-08-06 17:32 3027 查看

Android 入门第八讲02-WebView（Android调用 JS 代码（ loadUrl 方法，案例练习），JS调用 Android 代码，流行框架总结，跨平台技术）

  • 3.JS调用 Android 代码
  • 4.流行框架总结
  • 5.跨平台技术

    • Android 入门第八讲01-WebView（WebView概述，基本用法（加载远程网页，加载本地网页），进阶用法（前进返回，清除缓存，网页自适应屏幕，缩放），WebView的三个子类）

    准备工作

    第一步，添加权限
    在mainifests里添加权限代码

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

    在<application结点下添加

    android:usesCleartextTraffic="true"


    第二步，添加控件
    布局文件中添加WebView控件

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>


    第三步，创建Assets文件夹

    第四步，创建 test.html 页面文件
    编写网页

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">//自适应屏幕
<title>Document</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<div>div content</div>
</body>
</html>

    第五步，加载本地网页

    public class MainActivity extends AppCompatActivity {

WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView=findViewById(R.id.webview);
mWebView.loadUrl("file:///android_asset/test.html");

WebSettings webSettings = mWebView.getSettings();

//如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
webSettings.setJavaScriptEnabled(true);//js开关默认不打开，网页中的所有js方法就无法执行，如果我们把这个方法设置为ture，网页中搞得js方法才可以执行
mWebView.setWebChromeClient(new WebChromeClient(){

@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Log.i("Main","------onJsAlert");
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this)
.setIcon(R.mipmap.ic_launcher)
.setTitle("title")
.setMessage("message")
.setPositiveButton("确定",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
Toast.makeText(MainActivity.this, "确定按钮", Toast.LENGTH_LONG).show();
}
}).setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
Toast.makeText(MainActivity.this, "关闭按钮", Toast.LENGTH_LONG).show();
dialogInterface.dismiss();
}
});
builder.create().show();

return true;//屏蔽默认的js弹框

}

});

}

}

    运行

    1.WebView 和Android互调概述

    1、H5网页端 调用Android某些功能

    举个例子，我们之前讲过，在微信中的公众号大多是用webview来呈现的， 那么有些好的文章或者公众号可能会出现 打赏 的需求，我们在点击打赏以后，一般都会要跳转到支付功能，也就是说在我们点击打赏以后，会跳出一个微信支付框，那这个微信支付框是从哪里调用的呢，网页里是没有微信支付功能的，实际上这个功能是由安卓来实现的，所以这就用到了 H5网页端 调用Android某些功能

    2、Android 要传递数据到网页

    举个例子，在支付宝中，有很多页面都是用webview加载的，在这个加载的网页当中，可能会显示一些用户信息，比如姓名，那这个网页是从哪里得到这个“姓名”的呢，实际上这个信息是安卓端传给这个webview的，所以这就用到了 Android 要传递数据到网页

    2.WebView 的高级用法

    1.Android调用 JS 代码

    第一步，添加html网页代码（复制粘贴到原来的test.html）

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<script>
// Android需要调用的方法
function callJS() {
alert("Android调用了JS的callJS方法");
}
</script>
</body>
</html>

    第二步，添加按钮

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"/>

<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/button"/>

</androidx.constraintlayout.widget.ConstraintLayout>

    loadUrl 方法

    1.在button的点击事件里，调用loadUrl ，从而使得点击按钮可以调用到js里的方法

    Button button=findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

Log.i("Main","onclik");
//加载当前网页上的js方法
mWebView.loadUrl("javascript:callJS()");
}
});


    test.html代码

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<script>
// Android需要调用的方法
function callJS() {
alert("Android调用了JS的callJS方法");
}
</script>
</body>
</html>

    运行

    2.点击按钮，向js页面传值，这里我们传一个username

    Button button=findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

Log.i("Main","onclik");
//加载当前网页上的js方法
mWebView.loadUrl("javascript:callJS('username')");//这里 字符串需要用 单引号 'xxx' 框起来，不然会当做对象来传递
}
});


    test.html代码

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<div id="show">test</div>
<script>
// Android需要调用的方法
function callJS(data) {
document.getElementById("show").innerHTML = data
}
</script>
</body>
</html>


    运行（可以看到点击按钮后，test变成了username）

    还有一种方式

    Button button=findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

String url="username111";
//加载当前网页上的js方法
mWebView.loadUrl("javascript:callJS('"+url+"')");//这里 字符串需要用 单引号 框起来，不然会当做对象来传递
}
});


    运行

    案例练习-网络访问获取数据传到webview网页端

    第一步，导入网络访问所需的代码
    加依赖

    implementation 'org.xutils:xutils:3.8.5'

    MainActivity中添加网络访问的代码

    IP地址：http://148.70.46.9/usercenter

    x.Ext.init(getApplication());
x.Ext.setDebug(BuildConfig.DEBUG);// 是否输出debug日志, 开启debug会影响性能.
x.view().inject(this);//没有用到view注解可以先不用

RequestParams params = new RequestParams("http://148.70.46.9/usercenter");
x.http().get(params, new Callback.CommonCallback<String>() {
@Override
public void onSuccess(String result) {
}
@Override
public void onError(Throwable ex, boolean isOnCallback) {
}
@Override
public void onCancelled(CancelledException cex) {
}
@Override
public void onFinished() {
}
});

    第二步，传值

    第三步，解析json数据
    在网页端解析json对象就比安卓端简单些，只需要用到JSON.parse()这个方法就可以帮助我们解析数据
    test.html代码

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<div id="show">test</div>
<script>
// Android需要调用的方法
function callJS(data) {
var result = JSON.parse(data);
document.getElementById("show").innerHTML = result.nickname
}
</script>
</body>
</html>

    总结一下：我们所有的数据，这个网页上的数据是从哪里得到？可以通过安卓网络请求帮我们得到这个数据结果，然后再把数据传到前端的页面，前端的页面拿到数据以后，前端可以自己去做解析，而且json解析在前端会比较方便一点，前端通过解析字符串，就可以直接拿到里面的数据，然后再把里面的数据传递出来

    3.JS调用 Android 代码

    第一步，加入html代码

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<div id="show">test</div>
<button onclick="myclick()">点击按钮</button>
<script>
// Android需要调用的方法
function callJS(data) {
var result = JSON.parse(data);
document.getElementById("show").innerHTML = result.nickname
}
function myclick(){
document.location ="test for webview"

}
</script>
</body>
</html>

    mWebView.setWebViewClient(new WebViewClient(){

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//所有页面加载都要经过这个方法

Log.i("Main","url:"+url);
view.loadUrl(url);
return true;
}
});

    运行（可以看到打印了网页端返回的数据）

    还有一种传值方式（但是我的模拟器版本低了，所以我用真机调试一下果然是可以的）

    这里值得一提的是，这是通过返回的request，去得到其中的数据，还有button要声明全局变量

    @Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {

Log.i("Main", "url" + request.getUrl().getQueryParameter("nickname"));
mButton.setText(request.getUrl().getQueryParameter("nickname"));

return true;
}
});


    html代码

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<div id="show">test</div>
<button onclick="myclick()">点击按钮</button>
<script>
// Android需要调用的方法
function callJS(data) {
var result = JSON.parse(data);
document.getElementById("show").innerHTML = result.nickname
}
function myclick(){
document.location ="js://baidu.com?nickname=test123"

}
</script>
</body>
</html>


    运行（可以看到，点击网页端的按钮以后，安卓端的按钮文本改变了）

    换了一个新模拟器（雷电模拟器4），运行也成功了，点击按钮，打印日志，并且把数据传递给button

    4.流行框架总结

    1.ui框架

    控件有很多差异
    uniapp： https://uniapp.dcloud.io/

    uniapp中有很多样式，只需要引入js，就可以达到和安卓开发一样的效果

    vuejs:https://cn.vuejs.org/

    vuejs，前端目前最火的框架

    mui： https://dev.dcloud.net.cn/mui/

    类似于uniapp

    cordova：http://cordova.axuer.com/

    网页端 有些android功能实现比较难得这些点,比如调用摄像头，获取蓝牙的数据，就可以用cordova来帮我们解决

    2.WebView框架

    TBS:https://x5.tencent.com/tbs/sdk.html

    5.跨平台技术

    1.H5+ 原生混合开发

    适用场景：

    • 微信小程序
    • H5

    缺点：但是 网页端的页面编写的速度，比起 android写法会 速度慢大概30%

    2.Javascript 开发 + 原生渲染

    常用框架：

    • React Native
    • Weex-基于Vue.js

    还是用H5来写页面 ，但是可以用像React Native或者这个Weex，帮助我们把H5的代码翻译成Android代码，所以还是相当于安卓的原生运行，所以在一定程度上减小了性能的损耗

    3.自绘 UI

    • Flutter

    谷歌官方推出的技术
    它可以用一种语言来写程序，可以在android上运行也可以在ios上运行，还可以在网页端运行，而且甚至可以把WebView在性能上的损耗降到0或以下，也就是说用Flutter写出来的代码可能比android写出来的代码性能还会更高，是目前安卓最流行的一种技术之一

    关于WebView的所有知识就先讲到这里啦，感兴趣的小伙伴们还可以去挖掘其中更深层的知识，也欢迎来和博主分享哦，毕竟博主也只是一个小小白，还需努力嘿嘿嘿，谢谢您的阅读。

    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航