index.vue 3.9 KB
Newer Older
1

lizhongyi_'s avatar
lizhongyi_ 已提交
2
<template>
3
	<view >
lizhongyi_'s avatar
lizhongyi_ 已提交
4 5 6 7 8 9 10 11 12

	</view>
</template>
<script lang="uts">
	import TextUtils from 'android.text.TextUtils'
	import Button from 'android.widget.Button'
	import LinearLayout from 'android.widget.LinearLayout'
	import View from 'android.view.View'

13
	class ButtonClickListsner implements View.OnClickListener {
14 15 16
		constructor() {
			super()
		}
lizhongyi_'s avatar
lizhongyi_ 已提交
17 18 19 20 21 22 23
		override onClick(v ? : View) {
			console.log(v)
		}
	}

	//原生提供以下属性或方法的实现  
	export default {
24 25 26
		/**
		 * 组件名称,也就是开发者使用的标签
		 */
lizhongyi_'s avatar
lizhongyi_ 已提交
27
		name: "uts-hello-view",
28 29 30 31 32 33 34
		/**
		 * 组件涉及的事件声明,只有声明过的事件,才能被正常发送
		 */
		emits: ['buttonClick'],
		/**
		 * 属性声明,组件的使用者会传递这些属性值到组件
		 */
lizhongyi_'s avatar
lizhongyi_ 已提交
35
		props: {
36 37 38
			/**
			 * 字符串类型 属性:buttonText  需要设置默认值
			 */
lizhongyi_'s avatar
lizhongyi_ 已提交
39 40 41 42 43
			"buttonText": {
				type: String,
				default: "点击触发"
			}
		},
44 45 46
		/**
		 * 组件内部变量声明
		 */
lizhongyi_'s avatar
lizhongyi_ 已提交
47 48 49
		data() {
			return {}
		},
50 51 52
		/**
		 * 属性变化监听器实现
		 */
lizhongyi_'s avatar
lizhongyi_ 已提交
53 54 55 56 57 58 59 60 61 62 63 64 65
		watch: {
			"buttonText": {
				/**
				 * 这里监听属性变化,并进行组件内部更新
				 */
				handler(newButtonText: string) {
					if (this.$el != null) {
						let button = this.$el!.findViewWithTag("centerButton") as Button
						if (!TextUtils.isEmpty(newButtonText)) {
							button.setText(newButtonText)
						}
					}
				},
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
				immediate: false //创建时是否通过此方法更新属性,默认值为false  
			},
		},
		/**
		 * 规则:如果没有配置expose,则methods中的方法均对外暴露,如果配置了expose,则以expose的配置为准向外暴露
		 * ['publicMethod'] 含义为:只有 `publicMethod` 在实例上可用
		 */
		expose: ['doSth'],
		methods: {
			/**
			 * 对外公开的组件方法
			 */
			doSth(paramA: string) {
				// 这是组件的自定义方法
				console.log("paramA",paramA)
lizhongyi_'s avatar
lizhongyi_ 已提交
81
			},
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
			/**
			 * 内部使用的组件方法
			 */
			privateMethod() {

			}
		},

		/**
		 * 组件被创建,组件第一个生命周期,
		 * 在内存中被占用的时候被调用,开发者可以在这里执行一些需要提前执行的初始化逻辑
		 * [可选实现]
		 */
		created() {

lizhongyi_'s avatar
lizhongyi_ 已提交
97
		},
98 99 100 101 102
		/**
		 * 对应平台的view载体即将被创建,对应前端beforeMount  
		 * [可选实现]
		 */
		NVBeforeLoad() {
lizhongyi_'s avatar
lizhongyi_ 已提交
103

104 105 106 107 108 109 110 111
		},
		/**
		 * 创建原生View,必须定义返回值类型
		 * 开发者需要重点实现这个函数,声明原生组件被创建出来的过程,以及最终生成的原生组件类型
		 * (Android需要明确知道View类型,需特殊校验) 
		 * todo 补充IOS平台限制
	  * [必须实现]
		 */
lizhongyi_'s avatar
lizhongyi_ 已提交
112 113
		NVLoad(): LinearLayout {
			//必须实现  
114 115
			let contentLayout = new LinearLayout(this.$androidContext)
			let button = new Button(this.$androidContext)
lizhongyi_'s avatar
lizhongyi_ 已提交
116 117
			button.setText("点击触发");
			button.setTag("centerButton");
118
			contentLayout.addView(button, new LinearLayout.LayoutParams(500, 500));
lizhongyi_'s avatar
lizhongyi_ 已提交
119 120
			button.setOnClickListener(new ButtonClickListsner())
			return contentLayout
121 122 123 124 125 126 127
		},

		/**
		 * 原生View已创建 
		 * [可选实现]
		 */
		NVLoaded() {
128 129 130 131
      // 组件内可以调用 UTSAndroid 内置方法
      console.log("UTSAndroid.devicePX2px(1080) : ",UTSAndroid.devicePX2px(1080))
      console.log("UTSAndroid.rpx2px(1080) : ",UTSAndroid.rpx2px(1080))
      console.log("UTSAndroid.appJSBundleUrl() : ",UTSAndroid.appJSBundleUrl())
132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
		},
		/**
		 * 原生View布局完成  
		 * [可选实现]
		 */
		NVLayouted() {

		},
		/**
		 * 原生View将释放  
		 * [可选实现]
		 */
		NVBeforeUnload() {},
		/**
		 * 原生View已释放,这里可以做释放View之后的操作  
		 * [可选实现]
		 */
		NVUnloaded() {

		},
		/**
		 * 组件销毁  
		 * [可选实现]
		 */
		unmounted() {},
		/**
		 * 自定组件布局尺寸 
		 * [可选实现]
		 */
		NVMeasure(size: UTSSize): UTSSize {
			size.width = 120.0.toFloat()
			size.height = 800.0.toFloat()
			return size
lizhongyi_'s avatar
lizhongyi_ 已提交
165 166 167 168
		}
	}
</script>
<style>
169 170
	
</style>