package io.dcloud.uniplugin;
import android.content.Context;
import android.graphics.Color;
import android.widget.TextView;
import java.util.HashMap;
import java.util.Map;
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 TestText extends UniComponent<TextView> {
public TestText(UniSDKInstance instance, AbsVContainer parent, AbsComponentData basicComponentData) {
super(instance, parent, basicComponentData);
}
@Override
protected TextView initComponentHostView(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);
Map<String, Object> params = new HashMap<>();
Map<String, Object> number = new HashMap<>();
number.put("tel", telNumber);
//目前uni限制 参数需要放入到"detail"中 否则会被清理
params.put("detail", number);
fireEvent("onTel", params);
}
@UniJSMethod
public void clearTel() {
getHostView().setText("");
}
@Override
public void onActivityResume() {
super.onActivityResume();
}
@Override
public void onActivityPause() {
super.onActivityPause();
}
@Override
public void onActivityDestroy() {
super.onActivityDestroy();
}
}
然后在dcloud_uniplugins.json 配置
{
"plugins": [
{
"type": "component",
"name": "myText",
"class": "io.dcloud.uniplugin.TestText"
}
]
},
在uni-app中的vue页面中引入注册:
import extTest from "./component/extTest.nvue"
components: {
extTest
},
extTest.nvue页面代码:
<template>
<view >
<text class="hello-text">uni原生插件示例</text>
</br>
<view>
<myText
ref="telText"
tel="12305333333"
style="width: 200; height: 100"
@onTel="onTel"
@click="myTextClick"></myText>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
onLoad() {},
methods: {
onTel(e) {
console.log("onTel=" + e.detail.tel);
},
myTextClick(e) {
this.$refs.telText.clearTel();
},
},
};
</script>
5 个回复
HRK_01
能提供一下测试工程吗?我来跟进排查一下
1***@qq.com (作者)
然后在dcloud_uniplugins.json 配置
{
"plugins": [
{
"type": "component",
"name": "myText",
"class": "io.dcloud.uniplugin.TestText"
}
]
},
在uni-app中的vue页面中引入注册:
import extTest from "./component/extTest.nvue"
components: {
extTest
},
extTest.nvue页面代码:
<template>
<view >
<text class="hello-text">uni原生插件示例</text>
</br>
</template>
<script>
</script>
1***@qq.com (作者)
A麦田守望者A
我也是报这个错,自定义安卓原生组件,直接在vue中引用,就会报错。如果是跳转到新的Activity,是可以显示的。
Bobb - 全栈开发
只能nvue 才能渲染出组件的吗