第一步：从安卓里调用ionic指定页面
主要是通过WebView打开h5界面
NewWebViewActivity主要代码
import android.app.Activity;
import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
import com.example.lmtpddemo.view.SimpleHorizontalProgressbar;
import androidx.localbroadcastmanager.content.LocalBroadcastManager;
/**
* Description：主要用于与ionic交互
*/
public class NewWebViewActivity extends Activity {
//预约挂号
public static final int ACTION_REG = 1;
//选择医院
public static final int ACTION_SELECT_HOS = 2;
//页面类型
public final static String ACT_TYPE = NewWebViewActivity.class.getName() + ".actType";
//webview
private WebView mWebView;
//水平进度条
private SimpleHorizontalProgressbar mHorizontalProgressbar;
//地址
private String mUrl;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LocalBroadcastManager.getInstance(this).registerReceiver(receiver, new IntentFilter("jumpNative"));
setContentView(R.layout.activity_new_web_view);
mWebView = (WebView) findViewById(R.id.web_view);
mHorizontalProgressbar = (SimpleHorizontalProgressbar) findViewById(R.id.horizontal_pbr);
WebSettings webSettings = mWebView.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);//开启DOM
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
int actType = getIntent().getIntExtra(ACT_TYPE, ACTION_REG);
if (actType == ACTION_REG) {
mUrl = "http://192.168.20.131:8105/#/GetBigDeptPage";
} else if (actType == ACTION_SELECT_HOS) {
mUrl = "http://192.168.20.131:8105/#/SelectHospitalPage";
}
System.out.println();
// 先载入JS代码
// 格式规定为:file:///android_asset/文件名.html
mWebView.loadUrl(mUrl);
mWebView.setWebViewClient(new WebViewClient() {
@Override
// 在点击请求的是链接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 判断url链接中是否含有某个字段，如果有就执行指定的跳转（不执行跳转url链接），如果没有就加载url链接
System.out.println("ionicUrl = " + url);
if (url.contains("/finish")) {
finish();
return true;
} else {
return false;
}
}
});
//设置进度条
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress == 100) {
mHorizontalProgressbar.setVisibility(View.INVISIBLE);
} else {
if (View.INVISIBLE == mHorizontalProgressbar.getVisibility()) {
mHorizontalProgressbar.setVisibility(View.VISIBLE);
}
mHorizontalProgressbar.setProgress(newProgress);
}
super.onProgressChanged(view, newProgress);
}
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
if (title != null) {
System.out.println("title == "+title);
}
}
});
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// 当按下返回键时所执行的命令
if (keyCode == KeyEvent.KEYCODE_BACK) {
// 此处写你按返回键之后要执行的事件的逻辑
if (mWebView.canGoBack()) {
mWebView.goBack();
} else {
finish();
}
return super.onKeyDown(keyCode, event);
}
return super.onKeyDown(keyCode, event);
}
}
NewWebViewActivity的xml文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".NewWebViewActivity">
<TextView
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentTop="true"
android:background="#FFFFFF"
/>
<WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none" />
<!--水平滚动-->
<include
layout="@layout/horizontal_progressbar"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="2dp"
/>
</RelativeLayout>
image.png
当你点击选择医院按钮的时候，webview调用ionic写的选择医院界面，点预约挂号按钮的时候，webview调用ionic写的预约挂号界面。
现在有个问题就是，当你在ionic页面里选择完医院的时候，怎么通知原生安卓端关闭掉webview这个Activity呢？这时就涉及到ionic向原生安卓传值的问题了。
解决方法：我们在选择完医院的时候，往iFrame里加入特定字段，来代表特定的操作，我这里是用finish表示关闭当前activity的操作，当用户在ionic端选择完医院点击确定的时候，我们向安卓的webview传递一个“finish”字段，安卓可以在webview的shouldOverrideUrlLoading方法里截获这个字段，去做相应的操作，具体代码上面代码已经写的很清楚了。
CommonUtil.jsCallNative("haleyAction://finish");
/**
* js调用原生
* @param url 协议接口
*/
public static jsCallNative(url) {
let iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", url);
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
另外一个问题：安卓怎么打开ionic的指定页面？
我们这里用的是ionic里的DeepLinker，在app.module.ts里的import里配置下页面的路由，
image.png
这时我们在安卓webview的url就可以填：
mUrl = "http://192.168.20.131:8105/#/GetBigDeptPage";
mUrl = "http://192.168.20.131:8105/#/SelectHospitalPage";
网友评论