uni-app 安卓原生插件扩展组件 Component 在Vue3环境下无法显示 Vue2显示正常

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 安卓原生插件扩展组件 Component 在Vue3环境下无法显示 Vue2显示正常

产品分类

uniapp/App

开发环境信息

项目 信息
PC开发环境操作系统 Windows
PC开发环境版本号 win10专业版21H1
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 12
手机厂商 OPPO
手机机型 k7X PERMOO
页面类型 nvue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

操作步骤

<template>  
    <view class="content">  
        <test-component ref="testComponent" style="width:200rpx;height:100rpx" tel="12305"></test-component>  
    </view>  
</template>  

<script setup>  
import { ref } from 'vue'  

const testComponent = ref(null)  
const handleClick = () => {  
    testComponent.value.clearTel()  
}  
</script>

插件代码

package com.example.test_component;  

import android.content.Context;  
import android.graphics.Color;  
import android.widget.TextView;  

import androidx.annotation.NonNull;  

import io.dcloud.feature.uniapp.UniSDKInstance;  
import io.dcloud.feature.uniapp.annotation.UniJSMethod;  
import io.dcloud.feature.uniapp.ui.action.AbsComponentData;  
import io.dcloud.feature.uniapp.ui.component.AbsVContainer;  
import io.dcloud.feature.uniapp.ui.component.UniComponent;  
import io.dcloud.feature.uniapp.ui.component.UniComponentProp;  

public class TestComponent extends UniComponent<TextView> {  
    public TestComponent(UniSDKInstance instance, AbsVContainer parent, AbsComponentData componentData) {  
        super(instance, parent, componentData);  
    }  

    @Override  
    protected TextView initComponentHostView(@NonNull Context context) {  
        TextView textView = new TextView(context);  
        textView.setTextSize(20);  
        textView.setTextColor(Color.BLACK);  
        return textView;  
    }  

    @UniComponentProp(name = "tel")  
    public void setTel(String telNumber) {  
        getHostView().setText("tel: " + telNumber);  
    }  

    @UniJSMethod  
    public void clearTel() {  
        getHostView().setText("");  
    }  

    @Override  
    public void onActivityResume() {  
        super.onActivityResume();  
    }  

    @Override  
    public void onActivityPause() {  
        super.onActivityPause();  
    }  

    @Override  
    public void onActivityDestroy() {  
        super.onActivityDestroy();  
    }  

}

预期结果

在vue3版本中正常显示

实际结果

在vue2版本可以显示，vue3版本无法显示

bug描述

安卓原生插件扩展组件 Component，在vue3版本页面不显示，控制台报warn，切换vue2版本正常显示

Image


Harmonyos Next教程
3 回复

大神，我这边也遇到这个问题了，请问有解决方案吗？ 添加了vite.config.js也不显示UI，但是事件可以调用


遇到同样问题。

在uni-app中，如果你遇到了在Vue3环境下无法显示安卓原生插件扩展组件（Component），而在Vue2环境下显示正常的问题，这通常与Vue3的响应式系统和生命周期管理等差异有关。以下是一个简化的示例，展示了如何在uni-app中为安卓原生插件编写扩展组件，并尝试解决在Vue3中的显示问题。

1. 编写原生插件（以Java为例）

首先，确保你的安卓原生插件已经正确编写并打包成aar文件。假设你的插件提供了一个名为MyNativeView的自定义View。

2. 在uni-app中集成原生插件

在manifest.json中配置原生插件：

"nativePlugins": {
    "MyNativePlugin": {
        "package": "com.example.mynativeplugin",
        "version": "1.0.0",
        "provider": "wxxxxxxxxxxxx" // 替换为你的DCloud插件市场ID
    }
}

3. 创建Vue3组件封装原生插件

创建一个Vue3组件，如MyNativeComponent.vue：

<template>
  <view>
    <!-- 预留位置给原生组件 -->
    <view ref="nativeContainer" style="width: 100%; height: 300px;"></view>
  </view>
</template>

<script>
export default {
  name: 'MyNativeComponent',
  mounted() {
    // 调用原生插件的方法，创建并添加原生View到预留位置
    const nativePlugin = uni.requireNativePlugin('MyNativePlugin');
    nativePlugin.createView({
      id: 'myNativeViewId',
      container: this.$refs.nativeContainer,
      success: (res) => {
        console.log('Native view created:', res);
      },
      fail: (err) => {
        console.error('Failed to create native view:', err);
      }
    });
  },
  beforeUnmount() {
    // 清理原生View，防止内存泄漏
    const nativePlugin = uni.requireNativePlugin('MyNativePlugin');
    nativePlugin.removeView({
      id: 'myNativeViewId',
      success: (res) => {
        console.log('Native view removed:', res);
      },
      fail: (err) => {
        console.error('Failed to remove native view:', err);
      }
    });
  }
}
</script>

4. 在页面中使用组件

在你的页面中引入并使用这个组件：

<template>
  <view>
    <MyNativeComponent />
  </view>
</template>

<script>
import MyNativeComponent from '@/components/MyNativeComponent.vue';

export default {
  components: {
    MyNativeComponent
  }
}
</script>

注意事项

  • 确保你的原生插件与uni-app的版本兼容。
  • 在Vue3中，生命周期钩子如mounted和beforeUnmount与Vue2的mounted和beforeDestroy有所不同，确保正确使用。
  • 如果仍然存在问题，检查原生插件的日志输出，看是否有更详细的错误信息。

通过上述步骤，你应该能够在Vue3环境下正确显示安卓原生插件扩展组件。如果问题依旧，请检查原生插件的实现细节或寻求DCloud官方支持。

回到顶部