前言： 因为公司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
我给大家来一张图表明一下文章来源：https://www.toymoban.com/news/detail-403742.html
文章来源地址https://www.toymoban.com/news/detail-403742.html
到了这里，关于安卓与js交互的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
