Android 展示HTML5

转载

mob64ca1417b0c6 2024-09-04 21:19:59

文章标签 Android 展示HTML5 webview android vue h5 文章分类 Android 移动开发

1、Android webview 调用 js(Vue) [android --> js(vue)]

1.1先看 Vue 中代码怎么写

mounted() {
    //将要给原生调用的方法挂载到 window 上面
    window.callJsFunction = this.callJsFunction
},
data() {
    return {
        msg: "哈哈"
    }
},
methods: {
    callJsFunction(str) {
        this.msg = "我通过原生方法改变了文字" + str
        return "js调用成功"
    }
}

在 methods 中定义一个供 Android 调用的方法 callJsFunction(str) , 并可接收一个参数 str，然后改变页面中的文字。

如果只是在 methods 中定义方法，原生调用会找不到这个方法。所以要在页面加载的时候将方法挂载在 window 上，这样 WebView 就可以拿到此方法了。注意，这步很重要一定要写！

注意一个细节，this.callJsFunction 后面不要加括号 ()，加括号相当于直接调用了。

总结起来 Vue 中要做的事情就两步：

在 methods 中定义方法
在 mounted 中将方法挂载在 window 上

1.2 普通js代码

<html>
<head>
    <title>js调用android原生代码</title>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
    <script type="text/javascript">
        function javacalljs(){
             document.getElementById("content").innerHTML +=
                 "<br\>java调用了js函数，无参";
        }

        <!--这里取到的是 android端传过来的数据-->
        function javacalljswithargs(data){
             document.getElementById("content").innerHTML +=
                 ("<br\>"+data);
        }

    </script>
</head>
<body>
    <br/><br/>
    <li><a onClick="window.injectedObject.startFunction()">点击调用java代码</a></li>
    <!--可以将android端传过来的数据，处理后,放在这里再传给android端-->
    <li><a onClick="window.injectedObject.startFunction('我是网页传出来的数据')">点击调用java代码并传递参数</a></li><br/>
<div id="content">内容显示</div>
</body>
</html>

或者

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Carson</title>
    <script>
			function callAndroid(){
				window.android.invoke_location();
			}

			<!--这里取到的是 android端传过来的数据-->
        function javacalljswithargs(data){
             document.getElementById("content").innerHTML =
                 (data);
        }


    </script>
</head>
<body>
<button type="button" id="button1" onclick="callAndroid()">点击按钮</button>
<div id="content">内容显示</div>
</body>
</html>

1.3 Java调用WebView里的js代码(传递参数).android端java代码这样写:

// 告诉WebView启用JavaScript执行。默认的是false。
ws.setJavaScriptEnabled(true);
(1)、如果点击调用就直接执行就好：

// 无参数调用
webView.loadUrl("javascript:javacalljs()");
// 传递参数调用
webView.loadUrl("javascript:javacalljswithargs('" + "android传入到网页里的数据，有参" + "')");

(2)、如果是显示后就调用，注意放在html显示完成之后
MyWebViewClient.java

@Override
    public void onPageFinished(WebView view, String url) {
        // 无参数调用
        webView.loadUrl("javascript:javacalljs()");
        // 传递参数调用
        webView.loadUrl("javascript:javacalljswithargs('" + "android传入到网页里的数据，有参" + "')");
        super.onPageFinished(view, url);
    }

/**
     * 4.4以上可用 evaluateJavascript 效率高
     */
    private void load(String jsCode) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            evaluateJavascript(jsCode, null);
        } else {
            loadUrl(jsCode);
        }
    }

2.WebView里的js代码调用Java本地方法(传递参数)

2.1 vue(js)中,调用android代码:

import Bridge from 'common/bridge.js'
....

methods: {

getLocation: function() {
				// 向移动端端发送消息, 获取定位地址
				if (Bridge.isIOS()) {
					Bridge.callhandler('getAddress', {}, (data) => {
						this.detailEntity.jobLocation = data;
					});
				} else {
					window.android.invoke_location();
				}
			},


...
}

webview中实现与js交互接口：

// 通过addJavascriptInterface()将Java对象映射到JS对象
        // 参数1：Javascript对象名
        // 参数2：Java对象名
        webView.addJavascriptInterface(new AndroidInterfaceWeb(this), "android");// AndroidtoJS类对象映射到js的test对象

上面这段代码的“android”对应window.android.invoke_location();的android.

下面是AndroidInterfaceWeb.java类:

//https://www.jianshu.com/p/53e72a0cdfa1
public class AndroidInterfaceWeb {
    private AgentWeb agent;
    private Activity activity;
    private String TAG = "AndroidInterfaceWeb";

    public AndroidInterfaceWeb(Activity activity) {
        this.activity = activity;
    }

    @JavascriptInterface
    public void invoke_native() {
        Log.e("invoke_native", "TokenInvalidException");

        RxBus.getInstance().post(new RefreshCookie());
    }

    @JavascriptInterface
    public void invoke_location() {
        Log.e("invoke_location", "invoke_location");

        RxBus.getInstance().post(new RefreshLocation());

    }

}

3.andriod开发 webview调照相机拍照上传及文件选择等多种方式

参考链接:

3.1 服务端jsp代码如下

<input name = "file" type="file" />

或者说 h5的vue、uniapp代码如下,这个使用了控件:

tapIcon: function(e) {
				var that = this;
				uni.chooseImage({
					success: (chooseImageRes) => {
						// debugger
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: this.$baseUrl + '/bd/bdAttach/attachUpload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'uFile',
							formData: {
								'uRemark': '',
								'bizId': this.bizId
							},
							success: (uploadFileRes) => {
								uni.showToast({
									title: '上传成功',
									duration: 2000
								});
								that.initData();
							},
							fail: (error) => {
								debugger
								console.log(error);
							}
						});


					}
				});
			},

3.2 安卓客户端代码（WebViewActivity）如下：

private ValueCallback<Uri> mUploadMessage;
private ValueCallback<Uri[]> mUploadCallbackAboveL;
private Uri imageUri;
private String imageFilePath;
private final static int FILECHOOSER_RESULTCODE = 10000;

mWebView.setWebChromeClient(new WebChromeClient() {
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
        }
        public void openFileChooser(ValueCallback uploadMsg, String acceptType ) {
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            startActivityForResult(
                    Intent.createChooser(i, "File Browser"),
                    FILECHOOSER_RESULTCODE);
        }
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture){
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            startActivityForResult( Intent.createChooser( i, "File Browser" ), WebViewActivity.FILECHOOSER_RESULTCODE );
        }
        public boolean onShowFileChooser (WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
            mUploadCallbackAboveL = filePathCallback;
            startActivityForResult(
                    Intent.createChooser(createDefaultOpenableIntent(), "File Browser"),
                    FILECHOOSER_RESULTCODE);
            return true;
        }
        @Override
        public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
            //创建一个Builder来显示网页中的对话框
            new AlertDialog.Builder(WebViewActivity.this).setTitle("信息提示").setMessage(message)
                    .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            if(message.contains("重新登录"))
                                WebViewActivity.this.startActivity(new Intent(WebViewActivity.this,WelcomeActivity.class));
                            else
                                result.confirm();
                        }
                    }).setCancelable(false).show();
            return true;
        }

        @Override
        public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
            new AlertDialog.Builder(WebViewActivity.this).setTitle("信息提示").setMessage(message)
                    .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            result.confirm();
                        }
                    }).setNegativeButton("取消", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    result.cancel();
                }
            }).setCancelable(false).show();
            return true;
        }

        @Override
        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
            return super.onJsPrompt(view, url, message, defaultValue, result);
        }
    });

private Intent createDefaultOpenableIntent() {
    Intent chooserIntent = Intent.createChooser(createSoundRecorderIntent(), "SoundRecorder");
    chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{createImageIntent(),createCamcorderIntent(),createCameraIntent()});
    Intent i = new Intent(Intent.ACTION_GET_CONTENT);
    i.addCategory(Intent.CATEGORY_OPENABLE);
    i.setType("*/*");
    chooserIntent.putExtra(Intent.EXTRA_INTENT, i);
    return chooserIntent;
}


private Intent createCameraIntent() {
    // 指定拍照存储位置的方式调起相机
    String filePath = Environment.getExternalStorageDirectory() + File.separator
            + Environment.DIRECTORY_PICTURES + File.separator;
    String fileName = "IMG_" + DateFormat.format("yyyyMMdd_hhmmss", Calendar.getInstance(Locale.CHINA)) + ".jpg";
    imageUri = Uri.fromFile(new File(filePath + fileName));
    imageFilePath = filePath + fileName;

    Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
    captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);

    return captureIntent;
}

private Intent createCamcorderIntent() {
    return new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
}

private Intent createImageIntent() {
    Intent Photo = new Intent(Intent.ACTION_PICK,
            android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
    return Photo;
}


@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == FILECHOOSER_RESULTCODE) {
        // 经过上边(1)、(2)两个赋值操作，此处即可根据其值是否为空来决定采用哪种处理方法
        if (mUploadMessage != null) {
            chooseBelow(resultCode, data);
        } else if (mUploadCallbackAboveL != null) {
            chooseAbove(resultCode, data);
        } else {
            Toast.makeText(this, "发生错误", Toast.LENGTH_SHORT).show();
        }
    }
}

/**
 * Android API < 21(Android 5.0)版本的回调处理
 * @param resultCode 选取文件或拍照的返回码
 * @param data 选取文件或拍照的返回结果
 */
private void chooseBelow(int resultCode, Intent data) {
    if (RESULT_OK == resultCode) {
        if (data != null) {
            // 这里是针对文件路径处理
            Uri uri = data.getData();
            if (uri != null) {
                mUploadMessage.onReceiveValue(uri);
            } else {
                mUploadMessage.onReceiveValue(null);
            }
        } else {
            // 以指定图像存储路径的方式调起相机，成功后返回data为空
            File mFile = new File(imageFilePath);
            Uri mUri = null;
            try {
                if (ActivityCompat.checkSelfPermission(WebViewActivity.this, Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
                    ActivityCompat.requestPermissions(WebViewActivity.this, new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE},1);
                }
                mUri = Uri.parse(MediaStore.Images.Media.insertImage(getContentResolver(), mFile.getAbsolutePath(), mFile.getName(), mFile.getName()));
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
            mUploadCallbackAboveL.onReceiveValue(new Uri[]{mUri});
        }
    } else {
        mUploadMessage.onReceiveValue(null);
    }
    mUploadMessage = null;
}

/**
 * Android API >= 21(Android 5.0) 版本的回调处理
 * @param resultCode 选取文件或拍照的返回码
 * @param data 选取文件或拍照的返回结果
 */
private void chooseAbove(int resultCode, Intent data) {
    if (RESULT_OK == resultCode) {
        if (data != null) {
            // 这里是针对从文件中选图片的处理
            Uri[] results;
            Uri uriData = data.getData();
            if (uriData != null) {
                results = new Uri[]{uriData};
                mUploadCallbackAboveL.onReceiveValue(results);
            } else {
                mUploadCallbackAboveL.onReceiveValue(null);
            }
        } else {
            File mFile = new File(imageFilePath);
            Uri mUri = null;
            try {
                if (ActivityCompat.checkSelfPermission(WebViewActivity.this, Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
                    ActivityCompat.requestPermissions(WebViewActivity.this, new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE},1);
                }
                mUri = Uri.parse(MediaStore.Images.Media.insertImage(getContentResolver(), mFile.getAbsolutePath(), mFile.getName(), mFile.getName()));
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
            mUploadCallbackAboveL.onReceiveValue(new Uri[]{mUri});
        }
    } else {
        mUploadCallbackAboveL.onReceiveValue(null);
    }
    mUploadCallbackAboveL = null;
}

以下是只有拍照跟选择相册两项的选择, 上面那段代码, 可选择项更多:

private Intent createDefaultOpenableIntent() {
        Intent chooserIntent = Intent.createChooser(createImagePickerIntent(), "SoundRecorder");
        chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{createCameraIntent()});
//        Intent i = new Intent(Intent.ACTION_GET_CONTENT);
//        i.addCategory(Intent.CATEGORY_OPENABLE);
//        i.setType("*/*");
//        chooserIntent.putExtra(Intent.EXTRA_INTENT, i);
        return chooserIntent;
    }

    // 拍照
    private Intent createCameraIntent() {
        // 指定拍照存储位置的方式调起相机
        String filePath = Environment.getExternalStorageDirectory() + File.separator
                + Environment.DIRECTORY_PICTURES + File.separator;
        String fileName = "IMG_" + DateFormat.format("yyyyMMdd_hhmmss", Calendar.getInstance(Locale.CHINA)) + ".jpg";
        imageUri = Uri.fromFile(new File(filePath + fileName));
        imageFilePath = filePath + fileName;

        Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
        captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);

        return captureIntent;
    }


// 选择图库
    private Intent createImagePickerIntent() {
        Intent Photo = new Intent(Intent.ACTION_PICK,
                android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        Photo.setType("image/*");
        return Photo;
    }

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。