1.开发背景。
随着当前开发迭代要求速度更快,改动更灵活,不需要发布版本就能实时更新app的内容,故当前H5制作界面越来越受到科技公司和开发者的欢迎。
2.实现交互
今天记录一下开发过程中用到的H5交互方法,采用了第三方框架jsbridge,记录一下,以防自己忘记了。废话少说,直接上代码。
1)首先到app的配置文件build.gradle中设置依赖
implementation 'com.github.lzyzsd:jsbridge:1.0.4'
2)activity的核心代码
webview.setDefaultHandler(new DefaultHandler());
webview.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
if (newProgress == 100) {//取消进度加载框
mHnLoadingLayout.setStatus(HnLoadingLayout.Success);
}
}
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
if (StringUtils.isNotEmpty(title, true)) {
if (title.length() >= 10) {//处理H5界面标题字符串过长导致展示不出的问题
String strTitle = title.substring(0, 10) + "...";
mTvTitle.setText(strTitle);
} else {
mTvTitle.setText(title);
}
}
}
});
String token = HnPrefUtils.getString(NetConstant.User.TOKEN, "");
if (About.equals(getIntent().getStringExtra("type"))) {
webview.loadUrl(getIntent().getStringExtra("url") + "&&access_token=" + token);
}
//注册监听方法当js中调用callHandler方法时会调用此方法(handlerName必须和js中相同)
webview.registerHandler("send", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
//显示js传递给Android的消息
sendinfo(data);
//Log.e("Android收到了消息",data);
//Android返回给JS的消息
function.onCallBack("我是js调用Android返回数据:");
}
});
webview.setDefaultHandler(new DefaultHandler() {
@Override
public void handler(String data, CallBackFunction function) {
function.onCallBack("Android收到了默认的消息");
}
});
}
/**
* 与服务器对接的原生方法
*
* @param jsons
*/
public void sendinfo(String jsons) {
try {
JSONObject json = new JSONObject(jsons);
String act = json.optString("act");//活动类型
String id = json.optString("id");//跳转用到的id
String fun_reback = json.optString("fun_reback");//返回方法
String returnurl = json.optString("returnurl");//回放链接
if (StringUtils.isEmpty(act)) return;
if (StringUtils.equals("live", act)) {//
HnLiveSwitchDataUitl.joinRoom(HnMyWebviewActivity.this, id, "");//跳转普通直播间
}
if (StringUtils.isNotEmpty(fun_reback,true)){ //
//调用js方法必须在主线程
webview.callHandler(fun_reback, jsons, new CallBackFunction() {//原生app给安卓给js发送数据
@Override
public void onCallBack(String data) {//来自web的回传数据
}
});
}
} catch (JSONException e) {
e.printStackTrace();
}
}
/**
* 创建json数据包,填充数据返回给服务器
*/
private void makeJsonDataReturnServer(String str) {
try {
//解析js callback方法 数据
JSONObject mJson = new JSONObject(str);
String callback = mJson.optString("callback");//解析js回调方法
//重新组装方法
JSONObject json = new JSONObject();
json.put("name1", "value1");
json.put("name2", "value2");
} catch (JSONException e) {
e.printStackTrace();
}
}
3.总结
以上代码就是核心调用H5方法,交互的方法了,有部分交互方法没用到,就没写出来,感兴趣自己去找找该框架的方法及源码。