前面幾篇部落格我們介紹了webView的基本使用和js與Android的相互呼叫,並且簡單的封裝了個X5WebView.

本篇部落格我們通過前面的知識整合來實現一個比較實用的功能.就是點選網頁上的img標籤選擇手機裡的圖片或拍照,然後將圖片顯示在網頁對應的元素上.

大概就是這個樣子吧.
這裡寫圖片描述

下面是實現步驟:
我們從零開始!

1.建立專案
我的專案名字叫做HybridApp_SelectAndShowImg.不要問我為什麼起這麼長的名字,因為越長越專業.
這裡寫圖片描述

這是建立好的專案,只有一個MainActivity

這裡寫圖片描述

2.分析需求
1)首先,我需要有個網頁,這個網頁很簡單,就是放了一些img標籤,然後給img標籤添加個點選事件,點選後去呼叫Android提供的方法去拍照或者選擇照片.得到android傳過來的圖片路徑後去顯示圖片即可.

好,那我們就先寫個簡單的網頁.對前端不是太熟悉的同學可以看看我web前端專欄裡面的前面幾篇文章.順便記得頂一下呦!
web前端基礎

前端程式碼:

html很簡單,引入了jquery,index.js和index.css

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>
        <div class="content">
            <h1>我是網頁</h1>
            <img />
            <img />
            <img />
            <img />
        </div>
    </body>
</html>

index.js程式碼定義了兩個方法:

    var imgDom;
    $(function() {

        /*點選事件*/
        $("img").on("click", function() {
            console.log("點選調android拍照");
            imgDom = this; //將當前點選的img標籤賦給變數imgDom
            console.log("當前節點:" + imgDom);
            window.android.takePhoto();

        });

    });

    /*顯示圖片*/
    function displayImg(path) {
        console.log("顯示圖片");
        $(imgDom).attr("src", "file://" + path);

    }

index.css程式碼:

.content {
    width: 100%;
    margin: auto;
}

h1 {
    width: 150px;
    margin: auto;
    margin-bottom: 20px;
}

img {
    border: 1px solid pink;
    border-radius: 5px;
    width: 100px;
    height: 100px;
}

2)網頁搞定後我們來看看Android這邊需要什麼東西,首先我需要用webView載入網頁,然後需要拍照和選擇圖片,最後把得到的圖片路徑回傳給網頁即可.

webView方面用的還是上一篇部落格我們簡單封裝的X5ProgressWebView.
圖片選擇器用的而是一個第三方的開源庫
和谷歌的glide.

我們主要是看看MainActivity裡的程式碼,其實程式碼很少,只是給前端提供了一個takephoto方法,然後得到圖片路徑後去呼叫js提供的 displayImg(path)方法,並將路徑傳過去就可以了.

package com.yzq.hybridapp_selectandshowimg.activity;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.JavascriptInterface;

import com.lzy.imagepicker.ImagePicker;
import com.lzy.imagepicker.bean.ImageItem;
import com.yzq.hybridapp_selectandshowimg.R;
import com.yzq.hybridapp_selectandshowimg.Tool.MyImagePicker;
import com.yzq.hybridapp_selectandshowimg.common.Constants;
import com.yzq.hybridapp_selectandshowimg.view.ProgressWebView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {


    public final String TAG = "MainActivity";
    private ProgressWebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (ProgressWebView) findViewById(R.id.webView);

        webView.addJavascriptInterface(new JsInterface(), "android");
        webView.loadUrl("file:///android_asset/index.html");

    }


    /*與js進行互動的類*/
    private class JsInterface {

        @JavascriptInterface
        public void takePhoto() {
            MyImagePicker.takePhoto(MainActivity.this, 1, false);
        }
    }


    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        switch (resultCode) {
            case ImagePicker.RESULT_CODE_ITEMS:
                if (data != null && requestCode == Constants.REQUEST_CODE_TAKE_PHOTO) {
                    ArrayList<ImageItem> images = (ArrayList<ImageItem>) data.getSerializableExtra(ImagePicker.EXTRA_RESULT_ITEMS);
                    String path = images.get(0).path;
                    /*將圖片顯示在網頁上*/
                    String method = "javascript:displayImg('" + path + "')";
                    webView.loadUrl(method);

                }
                break;
        }
    }
}

ok,這樣就可以了,如果你的網頁是從伺服器端載入的,那麼顯示圖片的時候會發現圖片顯示不出來,並且會提示這個錯誤:
android webview Not allowed to load local resource
解決這個問題請看:

下面是本篇部落格的demo
Demo