javascript android 安卓与js交互

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

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

这个就是使用h5写的，然后把我的h5代码贴出来

首先是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

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

相关链接

 您阅读本篇文章共花了：