安卓与js交互

最新推荐文章于 2024-05-11 07:16:05 发布

XinHao_Sir

最新推荐文章于 2024-05-11 07:16:05 发布

阅读量1.5k

点赞数

分类专栏：新的开始文章标签： javascript android 交互

本文链接：https://blog.csdn.net/XinHao_Sir/article/details/127792548

版权

新的开始专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何通过编写H5页面实现安卓和iOS应用的资源共用，以升级弹窗为例，详细展示了HTML、JS和CSS代码，并讲解了如何在安卓端与H5交互，通过设置JavaScript接口实现方法调用，从而达到跨平台的效果。

摘要由CSDN通过智能技术生成

前言： 因为公司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>Document</title>
    <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>

然后是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);
	})

});

然后是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;
}

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

我是本地加载的文件

 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();
        }
    }

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

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

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

在这里插入图片描述

XinHao_Sir

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
安卓与js交互

安卓\js\html\css\交互
复制链接

扫一扫

专栏目录