• 安卓与js交互

    前言： 因为公司app有安卓端和ios两端，所有想尽可能的节省资源，所以打算把一些资源用h5编写，达到安卓\ios公用一套代码的目的。
    首先我要说明，我是安卓开发，所以h5写的不好请忽略
    好了，我们正式开始：

    首先贴出我的效果图，以这次的app检测升级弹出窗为例

    升级提示框
    这个就是使用h5写的，然后把我的h5代码贴出来

    首先是html文件

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js">script>
    <script type="text/javascript" src="js.js">script>

    <style>
		body{
			margin: 0;
		}

	style>

head>

<body>



<div class="div">
    <div id="content">

        <div id="div_head_img">
            <img id="iv_head" src="app_icon.png" width="50px" height="50px">
        div>

        <div id="div_title">
            <h3 id="tv_title">新版本邀您体验 h3>
        div>

        <div id="div_context">

            <p id="tv_context">您了解内测版本存在一定的功能限制和特殊要求，请您认真阅读《内测用户协议》，如同意请点击“抢先体验”参与内测
                您了解内测版本存在一定的功能限制和特殊要求，请您认真阅读“内测用户协议”，如同意请点击“抢先体验”参与内测
                「禅定模式」QQ音乐陪你一起沉浸式听歌、专注当下，通过“播放p>

        div>

        <div id="div_bottom">

            <div id="div_cancel">
                <h5 id="tv_cancel">暂不升级h5>
            div>

            <div id="div_confirm">
                <h5 id="tv_confirm">立即升级h5>
            div>

        div>

    div>
div>


<script type="text/javascript">
		//提供使用的方法
		//本来是写到js文件中的，但是安卓没有调用成功，所以写到了这里
		function callJS() {
			var _control = document.getElementById("tv_title");
			_control.textContent = 'string'
		}
		//是否显示取消按钮的方法
		function cancelState(state) {
			var _control = document.getElementById("div_cancel");
			if (state) {
				_control.style.display = "flex";
			} else {
				_control.style.display = "none";
			}
		}

		// 更换标题文案的方法
		function setTitle(string) {
			var _control = document.getElementById("tv_title");
			_control.innerHTML = string
		}

		// 更换内容文案的方法
		function setContext(string) {
			var _control = document.getElementById("tv_context");
			var strTemp = string.replace(/&/g,"\n")
            _control.innerHTML = strTemp;
		}

		// 更换取消按钮文案的方法
		function setCancel(string) {
			var _control = document.getElementById("tv_cancel");
			_control.innerHTML = string
		}

		// 更换确认按钮文案的方法
		function setConfirm(string) {
			var _control = document.getElementById("tv_confirm");
			_control.innerHTML = string
		}

	script>


body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108

    然后是js文件

    $(document).ready(function () {

	// 确认升级按钮点击事件
	$("#tv_confirm").on("click", function () {
		//回调给安卓监听
		var context = $(this).text();
		window.jump.myConfirm(context);
	})
	// 取消升级按钮点击事件
	$("#tv_cancel").on("click", function () {
		//回调给安卓监听
		var context = $(this).text();
		window.jump.myCancel(context);
	})

});


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    然后是css文件

    .div {
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: rgb(85 0 0 / 50%); */
    background-color: #00000000;
}

#content {
    width: 100%;
    height: 100%;
    /* position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    background-color: #ffffff; */
}

#iv_head {
    margin-top: 30px;
}

#tv_title {
    margin-top: 30px;
}

/* 顶部图片 */
#div_head_img {
    width: 100%;
    height: 20%;
    margin: 0 auto;
    /* 父元素设置为浮动布局 */
    display: flex;
    /* 父元素下的子元素位于主轴上的位置为：center */
    justify-content: center;
    /* 父元素下的子元素位于交叉轴上的位置为：center */
    align-items: center;
    background-image: linear-gradient(#6ed9ef, #ffffff);
}

/* 标题 */
#div_title {
    width: 100%;
    height: 10%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 内容 */
#div_context {
    margin-top: 30px;
    width: 100%;
    height: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-x: auto;
    white-space: pre-line;
}

/* 底部 */
#div_bottom {
    width: 80%;
    height: 20%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* 取消 */
#div_cancel {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 确认 */
#div_confirm {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 升级弹出框文本内容 */
#tv_context {
    margin-left: 30px;
    margin-right: 30px;
}

/* 立即升级按钮 */
#tv_confirm {
    color: #8A78FE;
}



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103

    接下来正主出场，也就是安卓代码了

    我是本地加载的文件

     private void initWebView(Context context, String url, AppCheckEntity.DataDTO data) {
        webView.getSettings().setJavaScriptEnabled(true);//支持javascript
        webView.setWebContentsDebuggingEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setBlockNetworkImage(false);
        webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
        webView.addJavascriptInterface(new WebEvent(), "jump");
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //JS代码调用一定要在 onPageFinished（） 回调之后才能调用，否则不会调用。p
                initJs(context, data);
            }
        });
        webView.loadUrl(url);
    }

	//这些是调用我在js中写的方法，如果不知道在哪里的话，可以复制方法名在html文件中查找一下
	private void initJs(Context context, AppCheckEntity.DataDTO data) {
        try {
            //js方法调用

            //判空并更换app升级信息内容
            String updateDescription = data.getUpdateDescription();
            if (!TextUtils.isEmpty(updateDescription))
                webView.loadUrl("javascript:setContext('" + updateDescription + "')");

            //判断当前升级等级，是否为强提示
            String updateLevel = data.getUpdateLevel();
            if (updateLevel.equals("strong_prompt"))
                webView.loadUrl("javascript:cancelState(false)");
            else
                webView.loadUrl("javascript:cancelState(true)");

            webView.loadUrl("javascript:setTitle('" + context.getString(R.string.app_upgrade_title) + "')");
            webView.loadUrl("javascript:setCancel('" + context.getString(R.string.app_upgrade_no) + "')");
            webView.loadUrl("javascript:setConfirm('" + context.getString(R.string.app_upgrade_yes) + "')");
        } catch (Exception e) {
        }
    }

//最关键的是这个类
 public class WebEvent {
 		//js注解
        @JavascriptInterface
        public void myConfirm(String msg) {
            if (listener != null)
                listener.onRightClickListener();
        }

        @JavascriptInterface
        public void myCancel(String msg) {
            if (listener != null)
                listener.onLeftClickListener();
        }
    }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    这个是在js文件中写的方法名
    //回调给安卓监听
    var context = $(this).text();
    window.jump.myCancel(context);

    	jump与上方的window后的jump需保持一致
	webView.addJavascriptInterface(new WebEvent(), "jump");
	
	然后我们本类重写的方法名必须与jump后的方法名保持一致myCancel

    • 1
    • 2
    • 3
    • 4

    我给大家来一张图表明一下

    在这里插入图片描述
    在这里插入图片描述

  • 相关阅读:
    安全岗春招面经总结
    java 项目部署
    clang分析iOS的block实现
    ROX NHS ester, 5-isomer(209734-74-7,344402-35-3)_ROX NHS酯5-异构体
    火车头双标题插件-火车头采集器双标题插件下载及安装教程
    gdb常用调试命令 + 多进程调试命令
    手写promise
    LeetCode 69. x 的平方根
    【前端面试题】2023年 国庆 前端面试真题之JS篇
    2022-11-10 工作记录--HTML-video视频播放
  • 原文地址：https://blog.csdn.net/XinHao_Sir/article/details/127792548