Android 原生功能与 Vue 交互实现

前端用 Android webview 嵌入 vue 地址，如何在vue 页面中显示 Android 版本号

一.要在vue页面中显示Android版本号

从Android中将该信息传递给Vue应用程序。可以通过使用WebView的Java Bridge来实现此目的。这里是一些可能有用的步骤：

1. 在你的Android代码中，使用getBuildVersionName()或getBuildVersionCode()等方法来获取Android的版本号。
2. 使用addJavascriptInterface()方法向你的WebView添加一个Java对象，该对象将允许JavaScript调用原生Android代码。
3. 在Vue应用程序中，编写JavaScript代码来调用此Java对象并获取版本号。可以在Vue组件生命周期函数中执行此操作。
4. 在Vue模板中显示Android版本号。

下面是示例代码：

在Android中：

publicclassAndroidBridge{privateString version;publicAndroidBridge(String version){this.version = version;}@JavascriptInterfacepublicStringgetVersion(){return version;}}
```java
// 在WebView的 onCreate() 方法中添加以下代码
webView.addJavascriptInterface(newAndroidBridge(getBuildVersionName()),"androidBridge");
在Vue中：

mounted (){const version = window.androidBridge.getVersion();
    console.log(`Android version: ${version}`);}

在Vue模板中：

<div>Android版本号：{{ androidVersion }}</div><script>
export default{
    data (){return{
            androidVersion: ''
        };},
    mounted (){this.androidVersion = window.androidBridge.getVersion();}};</script>

二. Android 原生功能

如相机，文件等与 webview 中 vue 页面交互

在Android中使用WebView的过程中，可以使用WebChromeClient和WebViewClient来重载一些方法，以处理例如打开相机、选择文件等行为。

举例来说，如果你想要在你的Vue应用程序中打开相机并拍照，你可以执行以下动作：

在Android中：

1.在Manifest文件中添加拍照和存储权限：

<uses-permission android:name="android.permission.CAMERA"/><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

2.使用以下代码在WebViewClient的shouldOverrideUrlLoading方法中捕获URL，并处理请求：

@OverridepublicbooleanshouldOverrideUrlLoading(WebView view,WebResourceRequest request){if(request.getUrl().toString().startsWith("take-photo://")){Intent intent =newIntent(MediaStore.ACTION_IMAGE_CAPTURE);if(intent.resolveActivity(getPackageManager())!=null){startActivityForResult(intent,REQUEST_IMAGE_CAPTURE);}returntrue;}returnsuper.shouldOverrideUrlLoading(view, request);}@OverrideprotectedvoidonActivityResult(int requestCode,int resultCode,Intent data){if(requestCode ==REQUEST_IMAGE_CAPTURE&& resultCode ==RESULT_OK){// 将照片数据返回给WebView
        webView.loadUrl("javascript:onPhotoCapture('"+getPhotoDataAsBase64()+"')");}}privateStringgetPhotoDataAsBase64(){// 从相机Intent中获取捕获到的照片数据，并转换为Base64字符串格式returnBase64.encodeToString(getImageData(),Base64.DEFAULT);}privatebyte[]getImageData(){// 从相机Intent中获取捕获到的照片数据，并转换为字节数组格式Bundle extras = data.getExtras();Bitmap imageBitmap =(Bitmap) extras.get("data");ByteArrayOutputStream outputStream =newByteArrayOutputStream();
    imageBitmap.compress(Bitmap.CompressFormat.JPEG,100, outputStream);return outputStream.toByteArray();}

在Vue中：

在Vue中创建一个JavaScript方法，将其绑定在Vue实例上，以便从Android端调用，并可以使用data:image/jpeg;base64格式的信息展示拍下的照片。

export default{
    data (){return{
            takenPhoto: ''
        };},
    methods:{
        onPhotoCapture (photoData){this.takenPhoto = 'data:image/jpeg;base64,' + photoData;}}};

在Vue组件中触发对应的android端URL，例如：

<button @click="takePhoto">拍照</button><script>
export default{
    methods:{
        takePhoto (){// 触发对应的android端URL
            window.location.href = 'take-photo://';}}};</script>