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

新增object示例

上级 c0a48236
......@@ -1751,7 +1751,15 @@
"navigationBarTitleText": "",
"backgroundColorContent": "#fffae8"
}
}
},
// #ifdef APP-ANDROID
{
"path": "pages/component/object/object",
"style": {
"navigationBarTitleText": "自定义组件"
}
}
// #endif
],
"globalStyle": {
"pageOrientation": "portrait",
......
describe('object.uvue', () => {
if (process.env.uniTestPlatformInfo.indexOf('web') > -1 || process.env.UNI_AUTOMATOR_APP_WEBVIEW == 'true') {
it('object', () => {
expect(1).toBe(1)
})
return
}
beforeAll(async () => {
page = await program.reLaunch('/pages/component/object/object')
await page.waitFor('native-button');
});
it('object检测init函数是否相应', async () => {
await page.waitFor(600)
const value = await page.data('isLoad')
expect(value).toBe(true)
})
})
<template>
<view>
<native-button class="native-button" style="width: 200px; height: 100px;" :text="buttonText" @tap="ontap" @load="onload"></native-button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
buttonText: "封装object实现的button",
isLoad: false
}
},
onLoad() {
},
methods: {
ontap(e: UniObjectCustomEvent) {
console.log("native-button----------"+e.type)
},
onload() {
//标记已初始化 用于自动化测试
this.isLoad = true
}
}
}
</script>
<style>
.native-button {
height: 100px;
width: 100px;
margin: 100px auto 25px auto;
}
</style>
<template>
<object @init="onObjectInit" @click="onclick"></object>
</template>
<script lang="uts">
import { NativeButton } from "@/uni_modules/uni-native-button";
export default {
data() {
return {
button: null as NativeButton | null,
value : ""
}
},
props: {
"text": {
type: String,
default: ''
}
},
watch: {
"text": {
handler(newValue : string, oldValue : string) {
this.value = newValue
this.button?.updateText(this.value)
},
immediate: true
},
},
methods: {
onObjectInit(e : UniObjectInitEvent) {
this.button = new NativeButton(e.detail.element);
this.button?.updateText(this.value)
this.$emit("init")
},
onclick(e: UniObjectCustomEvent) {
this.$emit("tap", e)
}
},
unmounted() {
}
}
</script>
<style>
</style>
{
"id": "uni-native-button",
"displayName": "uni-native-button",
"version": "0.0.1",
"description": "vue开发button原生组件",
"keywords": [
"tencent",
"map",
"tmap"
],
"repository": "",
"engines": {
"HBuilderX": "^4.25"
},
"dcloudext": {
"type": "uts",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "n",
"vue3": "y"
},
"App": {
"app-android": {
"minVersion": "21"
},
"app-ios": {
"minVersion": "9"
}
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "u",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
## native-button
通过 object 分装原生平台Button按钮
{
"minSdkVersion": "21"
}
\ No newline at end of file
import { Button } from "android.widget"
export class NativeButton {
$element : UniObjectElement;
constructor(element : UniObjectElement) {
this.$element = element;
bindView();
}
button : Button | null = null;
bindView() {
//通过UniElement.getAndroidActivity()获取android平台activity 用于创建view的上下文
this.button = new Button($element.getAndroidActivity()!); //构建原生view
//限制原生Button 文案描述不自动大写
this.button?.setAllCaps(false)
//监听原生Button点击事件
this.button?.setOnClickListener(_ => {
const detail = {}
//构建自定义UniObjectCustomEvent返回对象
const event = new UniObjectCustomEvent("click", detail)
//响应分发原生Button的点击事件
$element.dispatchEvent(event)
})
//UniObjectElement 绑定 安卓原生view
$element.bindAndroidView(button!);
}
updateText(text: string) {
//更新原生Button 文案描述
this.button?.setText(text)
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册