提交 6315018c 编写于 作者: shutao-dc's avatar shutao-dc

新增native-view示例

上级 7ff5fb51
...@@ -483,6 +483,14 @@ ...@@ -483,6 +483,14 @@
"navigationBarTitleText": "涂鸦" "navigationBarTitleText": "涂鸦"
} }
}, },
// #ifndef WEB
{
"path": "pages/component/native-view/native-view",
"style": {
"navigationBarTitleText": "native-view"
}
},
// #endif
{ {
"path": "pages/tabBar/API", "path": "pages/tabBar/API",
"style": { "style": {
...@@ -2751,4 +2759,4 @@ ...@@ -2751,4 +2759,4 @@
] ]
} }
] ]
} }
\ No newline at end of file
<template>
<view>
<native-button class="native-button" style="width: 200px; height: 100px;" :text="buttonText" @buttonTap="ontap"
@load="onload"></native-button>
<time-picker class="native-time-picker" :hour=2 :minute=3 @changed="onChanged"></time-picker>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
buttonText: "native-button",
isLoad: false
}
},
onLoad() {
},
methods: {
ontap(e : UniNativeViewEvent) {
uni.showToast({
title: "按钮被点击了"
})
},
onload() {
//标记已初始化 用于自动化测试
this.isLoad = true
},
onChanged(e : UniNativeViewEvent) {
console.log("onchanged-----", e.detail)
}
}
}
</script>
<style>
.native-button {
height: 100px;
width: 100px;
margin: 25px auto 25px auto;
}
.native-time-picker {
margin: 10px auto 25px auto;
}
</style>
<template> <template>
<object @init="onObjectInit" @customClick="onclick"></object> <native-view @init="onviewinit" @customClick="onclick"></native-view>
</template> </template>
...@@ -33,12 +33,12 @@ ...@@ -33,12 +33,12 @@
}, },
}, },
methods: { methods: {
onObjectInit(e : UniObjectInitEvent) { onviewinit(e : UniNativeViewInitEvent) {
this.button = new NativeButton(e.detail.element); this.button = new NativeButton(e.detail.element);
this.button?.updateText(this.value) this.button?.updateText(this.value)
this.$emit("load") this.$emit("load")
}, },
onclick(e: UniObjectCustomEvent) { onclick(e: UniNativeViewEvent) {
this.$emit("buttonTap", e) this.$emit("buttonTap", e)
} }
}, },
......
import { Button } from "android.widget" import { Button } from "android.widget"
export class NativeButton { export class NativeButton {
$element : UniObjectElement; $element : UniNativeViewElement;
constructor(element : UniObjectElement) { constructor(element : UniNativeViewElement) {
this.$element = element; this.$element = element;
bindView(); bindView();
} }
...@@ -17,12 +17,12 @@ export class NativeButton { ...@@ -17,12 +17,12 @@ export class NativeButton {
//监听原生Button点击事件 //监听原生Button点击事件
this.button?.setOnClickListener(_ => { this.button?.setOnClickListener(_ => {
const detail = {} const detail = {}
//构建自定义UniObjectCustomEvent返回对象 //构建自定义UniNativeViewEvent返回对象
const event = new UniObjectCustomEvent("customClick", detail) const event = new UniNativeViewEvent("customClick", detail)
//响应分发原生Button的点击事件 //响应分发原生Button的点击事件
$element.dispatchEvent(event) $element.dispatchEvent(event)
}) })
//UniObjectElement 绑定 安卓原生view //UniNativeViewEvent 绑定 安卓原生view
$element.bindAndroidView(button!); $element.bindAndroidView(button!);
} }
......
<template> <template>
<object class="def-picker" @init="onObjectInit" @timechanged="onTimeChanged"></object> <native-view class="def-picker" @init="onviewinit" @timechanged="ontimechanged"></native-view>
</template> </template>
<script lang="uts"> <script lang="uts">
...@@ -47,11 +47,11 @@ ...@@ -47,11 +47,11 @@
}, },
}, },
methods: { methods: {
onObjectInit(e : UniObjectInitEvent) { onviewinit(e : UniNativeViewInitEvent) {
this.picker = new NativeTimePicker(e.detail.element, this.hourValue, this.minuteValue); this.picker = new NativeTimePicker(e.detail.element, this.hourValue, this.minuteValue);
this.$emit("load") this.$emit("load")
}, },
onTimeChanged(e : UniObjectCustomEvent) { ontimechanged(e : UniNativeViewEvent) {
this.$emit("changed", e) this.$emit("changed", e)
} }
}, },
......
...@@ -2,9 +2,9 @@ import { TimePicker } from "android.widget" ...@@ -2,9 +2,9 @@ import { TimePicker } from "android.widget"
import { View } from "android.view" import { View } from "android.view"
export class NativeTimePicker { export class NativeTimePicker {
$element : UniObjectElement; $element : UniNativeViewElement;
constructor(element : UniObjectElement, hour: number, minute: number) { constructor(element : UniNativeViewElement, hour: number, minute: number) {
this.$element = element; this.$element = element;
bindView(hour, minute); bindView(hour, minute);
} }
...@@ -17,7 +17,7 @@ export class NativeTimePicker { ...@@ -17,7 +17,7 @@ export class NativeTimePicker {
setMinute(minute) setMinute(minute)
this.picker?.setOnTimeChangedListener((_, hourOfDay, minute) => { this.picker?.setOnTimeChangedListener((_, hourOfDay, minute) => {
const detail = {"hour": hourOfDay, "minute": minute} const detail = {"hour": hourOfDay, "minute": minute}
const event = new UniObjectCustomEvent("timechanged", detail) const event = new UniNativeViewEvent("timechanged", detail)
$element.dispatchEvent(event) $element.dispatchEvent(event)
}) })
} }
...@@ -25,9 +25,9 @@ export class NativeTimePicker { ...@@ -25,9 +25,9 @@ export class NativeTimePicker {
setHour(hour: number) { setHour(hour: number) {
this.picker?.setHour(hour.toInt()) this.picker?.setHour(hour.toInt())
} }
setMinute(minute: number) { setMinute(minute: number) {
this.picker?.setMinute(minute.toInt()) this.picker?.setMinute(minute.toInt())
} }
} }
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册