Android H5和App互動以及開啟相簿上傳圖片並顯示

阿新 • • 發佈：2019-01-21

一、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>

本例中做如下超連結跳轉：

<a href="finance://pay.com/mpos?orderId=1020160126"> Open APP </a>

其中：

schema ---- finance 對應android中 android:schema

host --- pay.com 對應android中 android:host

path --- mpos 對應android中 android:pathPrefix

query --- orderId=1020160102 為Html連結和APP相互傳遞的資料，可以在Uri中通過getQueryParameter 方法獲取

全部Html原始碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mpos</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
<meta name="imagemode" content="force">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
</head>
<body>
<h1>H5開啟APP</h1>
<a href="finance://pay.com/mpos?orderId=102016000"> Open APP </a>
</body>
</html>

2、android中如何處理？

1）在AndroidManifest.xml檔案中，在需要跳轉到的Activity中新增如下宣告：

     <activity
            android:name=".ui.activity.OrderDetailActivity"
            android:configChanges="keyboardHidden|orientation"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/CustomTitle">

            <intent-filter>
                <category android:name="android.intent.category.BROWSABLE" />
                <category android:name="android.intent.category.DEFAULT" />
                <action android:name="android.intent.action.VIEW" />
                <data
                    android:host="pay.com"
                    android:pathPrefix="/mpos"
                    android:scheme="finance" />
            </intent-filter>
        </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。

載入遠端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 = new
			Intent("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);

3、如何從.aar中的某個頁面跳轉到主專案的某個頁面？

使用隱式Intent跳轉，具體如下：

1）主專案中：

<activity
            android:name="com.ddqb.MainActivity"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="com.ddqb.MainActivity"/>
                <category android:name="android.intent.category.DEFAULT" />  <!--要設定一下category-->
            </intent-filter>
        </activity>

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頁面按鈕點選事件處理，程式碼如下：

<input type="button" value="JS Call Native: Toast Message" onclick="android.toastMessage()">

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 中頁面資料更新程式碼：

 <input type="text" value="hhhh" id="pp"/>
 
<script type="text/javascript"> 
	// 2. js供 Native 呼叫的方法
	function toNative(msg) {
		alert("Hello, from H5, received msg: " + msg);
		var p = document.getElementById("pp");
		p.value = msg;
	}
</script>

五、H5頁面從App相簿中選擇圖片並在H5頁面顯示所選圖片：

步驟一：重寫onShowFileChooser / openFileChooser 方法（還要相容其他各個版本）

private static final int REQUEST_LOAD_IMAGE_FROM_GALLERY = 0x10;
    private ValueCallback<Uri> mSingleFileCallback;
    private ValueCallback<Uri[]> 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<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                Log.e("Webview", "onShowFileChooser");
                mMultiFileCallback = filePathCallback;
                openGallery();

                return true;  // 一定要return true 防止下次回到 WebView頁面重新呼叫，拋異常 duplicate result
            }

            // 5.0以下的檔案上傳監聽方法
            public void openFileChooser(ValueCallback<Uri> 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標籤：

<input accept="image/*" capture="camera" id="imgFile" name="imgFile"  type="file"  onchange="previewFile()" > <br/>
 <p></p>
 <img src="" id="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 H5和App互動以及開啟相簿上傳圖片並顯示

一、H5連結開啟App 點選瀏覽器中的URL，如何啟動App呢？ 1、HTML連結處理首先做成HTML的內容，url格式如下： <a href="[scheme]://[host]/[path]?[query]">啟動應用程式</a> 說明：

android 開啟攝像頭以及選取相簿照片剪裁圖片並使用比例壓縮大小

之前搜尋了各種網上的開啟攝像頭拍照和選取相簿的方式，發現大部分都不太相容、適合。因此在這裡總結一下切實可用的方法（參考第一行程式碼）拍照使用的是FileProvider，這

[Android] WebView中拍照或從相簿上傳圖片

　　WebView 上傳圖片, 想必很多人都碰到過這樣的場景. 而且 WebView 在4.4前後的區別非常大, 比如對URL跳轉的格式, 對JS的注入宣告等等, 4.4以後的WebView 已經是chromium核心, 有多強大就無需我贅述. 說這些, 其實也

Android——從本地相簿上傳圖片至伺服器

android實現本地圖片上傳至服務端，只需幾步操作即可實現，下面一起看看。首先看下效果：主要程式碼： package com.kevin.imageuploadclient.fragment; import android.graphics

配置好fastfds和nginx，eclipse用程式碼上傳圖片失敗

1、提示：timed out，22122 說明無法訪問22122的埠有可能是虛擬機器網絡卡沒開，也有可能是虛擬機器22122埠未開啟。兩個都開啟後還是不行。我就想知道主機能不能訪問虛擬機器的22122埠。網上找到了用命令 telnet ip 埠測試如下

WebView中拍照或從相簿上傳圖片

WebView 上傳圖片, 想必很多人都碰到過這樣的場景. 而且 WebView 在4.4前後的區別非常大, 比如對URL跳轉的格式, 對JS的注入宣告等等, 4.4以後的WebView 已經是chromium核心, 有多強大就無需我贅述. 說這些, 其實也是

apicloud相機及從相簿裡上傳圖片並剪下

<template> <div class="chat" style="font-size: 0.16rem"> <img :src=tu /> <div @click="bb">點選上傳圖片</div> &

Java和PHP兩種方式實現上傳圖片到新浪微博的圖床

這幾天遇到一個需求,需要將圖片上傳到新浪微博的圖傳,研究了一下, 特此記錄1.模擬登陸,獲取cookie登入地址為:https://login.sina.com.cn/sso/login.php?client=ssologin.js(v1.4.15)&_=140313

[Swift通天遁地]四、網路和執行緒-(9)上傳圖片並實時顯示上傳進度

本文將演示上傳圖片至伺服器，並實時顯示上傳的進度。首先確保在專案中已經安裝了所需的第三方庫。點選【Podfile】,檢視安裝配置檔案。 1 source 'https://github.com/CocoaPods/Specs.git' 2 platform :ios, '12.0' 3 u

web app專案使用uploadifive外掛上傳圖片

做了一個微信公眾號的專案，需要上傳使用者的照片資料。使用了uploadifive.js外掛做的圖片上傳。具體操作如下：參考文件： 1.引入相關js <link rel="stylesheet" href="static/css/uplo

java ssh上傳視訊並顯示縮圖以及視訊在網頁中的播放

非原創，整合網上的各個步驟及自己的實施一.上傳視訊使用以下htm標籤即可 <form name="uploadForm" method="post" enctype="multipart/form-data" action="xxx" <td><input

Android基礎-獲取網路上的圖片並顯示

android手機和瀏覽器也是一樣的，也可以通過網路通訊獲取資料，如呼叫webservice，EJB等。下面就通過一個小例子從網路獲取一幅圖片並顯示在手機上，開發中將會使用到一個新的元件ImageView. 設計效果圖： 1.在AndroidManife

C# winform 上傳圖片，顯示圖片和gridview中新增按鈕

上傳圖片，顯示圖片using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using Syst

android+html5上傳圖片只顯示圖片頭部部分

應公司要求用android+html5開發，其中上傳圖片遇到奇葩的問題。 1、上傳圖片是把bitmap轉byte轉base64 2、放在img標籤顯示步驟很清晰，這樣可以實現啊，對吧：先做個實驗，把base64碼控制檯打印出來，然後放在img標籤顯示，看看行不行。。。。

android上傳圖片並附帶上傳資料，檔案流

package cn.back.servlet.app; import java.io.File; import java.io.IOException; import java.io.OutputStream; import java.io.PrintWriter; import java.net.URLD

呼叫系統相簿上傳圖片到伺服器--OPPO等部分手機上出現短暫的顯示桌面問題

主要原因是主體樣式設定的問題：這裡把appTheme設定一個style即可： <item name="android:windowBackground">@color/white</item> <!--下面這個屬

php + js 實現拖拽上傳以及複製貼上上傳圖片

/**xeditor.js**/ xeditor_config = {basePath:'xeditor/' };//xeditor路徑 (function ($) {//阻止瀏覽器預設行。 $.fn.extend({ "setup": funct

NotificationManagerService啟動流程以及和app互動實現原理

SystemServer啟動（main方法被呼叫） public final class SystemServer { public static void main(String[] args) { new SystemServer

android:theme和app:popupTheme的作用，以及在android 3.0以下不起作用問題的解決

在android5.0中，新增了Material Design設計語言，確實挺炫的，使用Toolbar代替了之前的Actionbar確實靈活很多。之前我們只能在application或者activi

xamarin.form 使用WebView和APP互動

<WebView Source="https://www.baidu.com"> </WebView> 　　可以用後臺程式碼和webview互動，例如webview.Eval("alert('hello')"); xamarin.form原生webvi

Android H5和App互動以及開啟相簿上傳圖片並顯示

相關推薦