Android嵌入Udesk即时通讯网页插件（二、实现发送照片）

张振琦

打开的网页插件，下方的输入框右侧有个 + 号 按钮，点击后，会看到评价和文件。

评价按钮是Udesk客服系统即时通讯开启了满意度调查，点击评价按钮会显示满意度调查的相关内容，如果客服服系统即时通讯没有开启满意度调查，就不会显示评价按钮。

文件按钮就是用来发送文件的。但是这个按钮默认是没有响应的，这个需要代码来开发。移动端上的文件主要还是图片，下面就来介绍如何对接这个文件按钮，打开手机图库发送图片。

接着上一篇的代码，继续开发。我们需要继续设置WebView使其可以响应网页的按钮，打开手机图库，同时还要重写onActivityResult，使其可以接收到选择的图片。
WebIMActivity.java

package com.example.usewebim;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebIMActivity extends AppCompatActivity {

    private ValueCallback<Uri[]> mFilePathCallback = null;
    private int REQUEST_CODE_LOLIPOP = 1;  // 5.0以上版本

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

        WebView webView = (WebView) findViewById(R.id.wv_webim);

        WebSettings mWebSettings = webView.getSettings();
        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);//设置js可以直接打开窗口，如window.open()，默认为false
        mWebSettings.setJavaScriptEnabled(true);//是否允许JavaScript脚本运行，默认为false。设置true时，会提醒可能造成XSS漏洞
        mWebSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放。大视图模式
        mWebSettings.setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题
        mWebSettings.setAppCacheEnabled(true);//是否使用缓存
        mWebSettings.setDomStorageEnabled(true);//开启本地DOM存储
        mWebSettings.setLoadsImagesAutomatically(true); // 加载图片

        //覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        webView.setWebChromeClient(new WebChromeClient() {
            // 5.0+
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                if (mFilePathCallback != null) {
                    mFilePathCallback.onReceiveValue(null);
                }
                mFilePathCallback = filePathCallback;
                //打开手机图库
                Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
                contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
                contentSelectionIntent.setType("image/*");
                startActivityForResult(contentSelectionIntent, REQUEST_CODE_LOLIPOP);
                return true;
            }
        });

        webView.loadUrl("你的Udesk即时通讯网页插件专用链接");
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == REQUEST_CODE_LOLIPOP) {  // 选择文件返回 5.0+
            Uri[] results = null;
            if (resultCode == RESULT_OK) {
                String dataString = data.getDataString();
                if (dataString != null) {
                    results = new Uri[]{Uri.parse(dataString)};
                }
            }
            mFilePathCallback.onReceiveValue(results);  // 当获取要传图片的Uri，通过该方法回调通知
            mFilePathCallback = null;
        }
    }
}

运行程序，看一下效果，点击文件按钮

选择一个照片，即可发送出去

客服系统中的效果

代码中只实现了，android5.0以上的按钮触发代码，其他低版本可以参考其他文章自行实现。这个文件按钮还可以实现其他更加丰富的功能，例如打开相机拍摄并发送，这些大家可以自己去尝试一下。下一篇会介绍身份认证的内容，打开即时通讯插件同时传入客户的信息。