Android(安卓)H5和App交互以及打开图库上传图片并显示
一、H5链接打开App
点击浏览器中的URL,如何启动App呢?
1、HTML链接处理
首先做成HTML的内容,url格式如下:
<a href="[scheme]://[host]/[path]?[query]">启动应用程序a>说明 :
schema: 判断启动的App
host: 标记
path: 标记,可无
query: 传值的(key,value)键值对,可无
例如:
<a href="myapp://jp.app/openwith?name=zhangsan&age=26">启动应用程序a>
本例中做如下超链接跳转:
Open APP
其中:
schema ---- finance 对应android中 android:schema
host --- pay.com 对应android中 android:host
path --- mpos 对应android中 android:pathPrefix
query --- orderId=1020160102 为Html链接和APP相互传递的数据,可以在Uri中通过getQueryParameter 方法获取
全部Html源码:
mpos H5打开APP
Open APP
2、android中如何处理?
1)在AndroidManifest.xml文件中,在需要跳转到的Activity中添加如下声明:
2)如何获取链接中传递的数据?
if (getIntent() != null) {if (Intent.ACTION_VIEW.equals(action)) { Uri uri = Uri.parse(getIntent().getDataString()); if (uri != null) {String orderId = uri.getQueryParameter("orderId");}} }
3 、应该注意的地方? 1)链接打开的Activity中,【android.intent.action.MAIN】和【android.intent.category.LAUNCHER】这2个,不能与这次追加的内容混合在一起;如果跳转的刚好是启动Activity,可以写一个类继承启动类。
2)参考:http://blog.csdn.net/jiangwei0910410003/article/details/23940445
二、App打开H5
使用WebView加载,传值可参考框架JsBridgeWebView。
GitHub地址:https://github.com/lzyzsd/JsBridge
加载远程html:webView.loadUrl("http://www.baidu.com");
加载本地html:webView.loadUrl("file:///android_asset/web_app.html");
三、App打开App
例如,点击app1某个页面中的按钮,要打开app2,
1、先检测是否安装了app2,客人通过包名检测;
2、安装,例如打开微信,如果没有安装就跳转到下载页:
try {PackageManager packageManager = getPackageManager(); Intent intent=new Intent(); intent = packageManager.getLaunchIntentForPackage("com.tencent.mm");startActivity(intent);} catch (Exception e) {e.printStackTrace();Intent viewIntent = newIntent("android.intent.action.VIEW",Uri.parse("http://weixin.qq.com/"));startActivity(viewIntent);}
或者
Intent intent = new Intent(Intent.ACTION_MAIN);intent.addCategory(Intent.CATEGORY_LAUNCHER); ComponentName cn = new ComponentName(app2PackageName, className); intent.setComponent(cn);startActivity(intent);
参考:http://blog.csdn.net/mad1989/article/details/38090513
3、如何从.aar中的某个页面跳转到主项目的某个页面?
使用隐式Intent跳转,具体如下:
1)主项目中:
findViewById(R.id.enter_test).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(LoginTestAcitvity.this, TestActivity.class); // TestActivity为.aar依赖库中的页面 startActivity(intent); } });
2).aar项目中: findViewById(R.id.btn_test).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(); intent.setAction("com.ddqb.MainActivity"); intent.addCategory("android.intent.category.DEFAULT"); TestActivity.this.startActivity(intent); } });
四、H5与App交互
1、WebView基础设置如下:
String mUrl = "http://10.0.41.19:8099/TomcatTest/web_app_upload_image.html"; WebSettings webSettings = webView.getSettings(); //设置WebView属性,能够执行Javascript脚本 webSettings.setJavaScriptEnabled(true); //设置可以访问文件 webSettings.setAllowFileAccess(true); //设置支持缩放 webSettings.setBuiltInZoomControls(true); //加载需要显示的网页 // 加载 asset目录下的本地html文件: mUrl = "file:///android_asset/web_app.html" webView.loadUrl(mUrl); //设置WebViewClient用来辅助WebView处理各种通知请求事件等,如更新历史记录、网页开始加载/完毕、报告错误信息等 webView.setWebViewClient(new WebViewClient() { // 以下方法避免 自动打开系统自带的浏览器,而是让新打开的网页在当前的WebView中显示 @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }); // 用于辅助WebView处理JavaScript的对话框、网站图标、网站标题以及网页加载进度等 webView.setWebChromeClient(new WebChromeClient() { @Override public void onReceivedTitle(WebView view, String title) { tv_title.setText(title); } }); // 使 H5可调用Native方法: android.nativeMethod() webView.addJavascriptInterface(new MyJsInterface(), "android");
2、H5 调用 Native 方法实现 H5页面 按钮点击事件处理,代码如下:
App WebViewActivity类中处理: public class MyJsInterface { @JavascriptInterface public void toastMessage(String msg) { Toast.makeText(WebViewActivity.this, "app to H5 toast " + msg, Toast.LENGTH_SHORT).show(); Intent intent = new Intent(WebViewActivity.this, FirstActivity.class); WebViewActivity.this.startActivity(intent); }
3、Native 传递数据给 H5,场景:点击原生页面的标题栏按钮,给H5页面传值 并且更新 H5页面: // 点击原生按钮,向H5页面发送数据,可更新H5页面 tv_click.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String msg = "from Native"; // loadUrl必须在主线程中执行 webView.loadUrl("javascript:toNative('" + msg + "')"); } });
H5 中页面数据更新代码:
五、H5页面从App图库中选择图片并在H5页面显示所选图片:
步骤一:重写onShowFileChooser / openFileChooser 方法(还要兼容其他各个版本)
private static final int REQUEST_LOAD_IMAGE_FROM_GALLERY = 0x10; private ValueCallback mSingleFileCallback; private ValueCallback mMultiFileCallback; private Uri imageUri; private void setWebChromeClient() { webView.setWebChromeClient(new WebChromeClient() { @Override public void onReceivedTitle(WebView view, String title) { tv_title.setText(title); } @Override public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, FileChooserParams fileChooserParams) { Log.e("Webview", "onShowFileChooser"); mMultiFileCallback = filePathCallback; openGallery(); return true; // 一定要return true 防止下次回到 WebView页面重新调用,抛异常 duplicate result } // 5.0以下的文件上传监听方法 public void openFileChooser(ValueCallback uploadMsg) { Log.e("Webview", "openFileChooser"); mSingleFileCallback = uploadMsg; openGallery(); } }); } private void openGallery() { Intent intent = new Intent(Intent.ACTION_GET_CONTENT, null); intent.setType("image/*"); startActivityForResult(intent, REQUEST_LOAD_IMAGE_FROM_GALLERY); }
步骤二:在onActivityResult 中获取所选图片 uri,回调给 H5(目前代码有点小缺陷,图片需要压缩,因为在H5加载 base64本地图片是耗时操作,要先压缩图片); @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == REQUEST_LOAD_IMAGE_FROM_GALLERY) { if (mSingleFileCallback == null && mMultiFileCallback == null) { return; } Uri tempUri = null; if (data != null) { String url = CommonUtil.getPath(WebViewActivity.this, data.getData()); File temp = new File(url); tempUri = Uri.fromFile(temp); } if (mSingleFileCallback != null) { // 5.0以下处理方式 if (data != null) { mSingleFileCallback.onReceiveValue(tempUri); } else { mSingleFileCallback.onReceiveValue(imageUri); } mSingleFileCallback = null; } else if (mMultiFileCallback != null) { // 5.0版本以上 Uri[] uris = null; if (data == null) { uris = new Uri[] {imageUri}; } else { // 多选图片[图片一定要压缩,转化为base网页加载很慢] String dataString = data.getDataString(); ClipData clipData = data.getClipData(); if (clipData != null) { int size = clipData.getItemCount(); uris = new Uri[size]; for (int i = 0; i < size; i++) { // 将所选图片的 url保存到 uris数组中 uris[i] = clipData.getItemAt(i).getUri(); } } if (!TextUtils.isEmpty(dataString)) { uris = new Uri[] {Uri.parse(dataString)}; } } if (uris == null) { mMultiFileCallback.onReceiveValue(null); mMultiFileCallback = null; } else { mMultiFileCallback.onReceiveValue(uris); mMultiFileCallback = null; } } } }
步骤三:在html页面中,使用 FileReader 获取上传的图片base64编码并显示在img标签:
function previewFile() {var img = document.getElementById("img");// 仅限上传单张图片 var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { img.src = reader.result; // 存储在本地的图片的base64编码 alert("result=" + reader.result); }, false); if (file) { reader.readAsDataURL(file); } }
更多相关文章
- Android中几种图像特效处理的集锦
- Android(安卓)动态加载布局文件
- Android图片资源的缩放问题
- 页面调用ADB操作Android设备
- Android实现IOS越界回弹的效果
- android imageview显示不全或者gilde加载不全
- android:background="@drawable/"图片拉伸问题
- Android动态加载jar、apk的实现
- android之图片切圆角