diff --git a/docs/plugin/_sidebar.md b/docs/plugin/_sidebar.md
index e738b6991c3d13dc53a02320bb3431459bd6d8ee..2fe9ea46b8dab3b689d73b0ba5f74b1c9cbc7b5a 100644
--- a/docs/plugin/_sidebar.md
+++ b/docs/plugin/_sidebar.md
@@ -2,8 +2,11 @@
 * [插件市场介绍](https://uniapp.dcloud.net.cn/plugin/plugin-ext-introduction.html)
 * [uni_modules](https://uniapp.dcloud.net.cn/plugin/uni_modules.html)
 * uts插件
-  * [uts插件开发入门](uts-plugin.md)
-  * [uts页面组件开发入门](uts-component.md)
+  * [uts插件开发](uts-plugin.md)
+  * uts页面组件开发
+    * [概述](uts-component.md)
+    * [标准模式组件开发](uts-component-vue.md)
+    * [uni-app兼容模式组件开发](uts-component-compatible.md)
   * [uts原生混编](uts-plugin-hybrid.md)
   * [uts中使用uni api](uts-uni-api.md)
   * [Android平台uts开发指南](uts-for-android.md)
diff --git a/docs/plugin/uts-component-compatible.md b/docs/plugin/uts-component-compatible.md
new file mode 100644
index 0000000000000000000000000000000000000000..47cb4fab58a97af54a988b815d2083f93ce16d40
--- /dev/null
+++ b/docs/plugin/uts-component-compatible.md
@@ -0,0 +1,1954 @@
+# uts插件 - uni-app兼容模式组件（原“组件插件”）开发
+
+> HBuilderX3.6.18 及以上版本支持  
+
+本文重点在于讲述如何在app-android和app-ios上，将一个原生UI封装为兼容uni-app项目的UTS组件，供使用者在nvue/uvue页面template中以组件的方式调用。
+
+## 前置条件
+
+继续阅读文档前，开发者需要了解以下前置条件：
+
+- 了解 `标准模式` 和 `uni-app兼容模式` 的差异，详情参考[uts插件开发概述](./uts-component.md)
+- 了解 [uts语法](/uts/) 和 [uts原生插件](uts-plugin.md)
+- 了解 [Vue组件](https://uniapp.dcloud.net.cn/tutorial/vue3-components.html)
+
+
+
+## UTS组件结构解析
+
+### UTS组件目录结构
+
+<pre v-pre="" data-lang="">
+	<code class="lang-" style="padding:0">
+┌─common                          // 可跨端公用的uts代码。推荐，不强制
+├─static                          // 静态资源
+├─utssdk
+│	├─app-android                 //Android平台目录
+│	│	├─assets                  //Android原生assets资源目录，可选
+│	│	├─libs                    //Android原生库目录，可选
+│	│	├─res                     //Android原生res资源目录，可选
+│	│	├─AndroidManifest.xml     //Android原生应用清单文件，可选
+│	│	├─config.json             //Android原生配置文件
+│	│	├─index.uts               //Android原生插件能力实现，可选
+|	|	└─index.vue               //Android原生组件能力实现，必选
+│	├─app-ios                     //iOS平台目录
+│	│	├─Frameworks              //iOS原生依赖的第三方 framework 依赖库存放目录，可选
+│	│	├─Resources               //iOS原生所依赖的资源文件存放目录，可选
+│	│	├─info.plist              //iOS原生所需要添加到主 info.plist 文件中的配置文件，可选
+│	│	├─UTS.entitlements        //iOS原生所需要添加到主工程 .entitlements 文件中的配置文件，可选
+│	│	├─config.json             //iOS原生配置文件
+│	│	├─index.uts               //iOS原生插件能力实现，可选
+|	|	└─index.vue               //iOS原生组件能力实现，必选
+│	├─web                         //web平台目录
+│	│	└─index.uts
+│	├─mp-alipay                   // 支付宝小程序平台，可选
+│	├─mp-baidu                    // 百度小程序平台，可选
+│	├─mp-jd                       // 京东小程序平台（仅限vue2），可选
+│	├─mp-kuaishou                 // 快手小程序平台，可选
+│	├─mp-lark                     // 飞书小程序平台，可选
+│	├─mp-qq                       // QQ小程序平台，可选
+│	├─mp-toutiao                  // 抖音小程序平台，可选
+│	├─mp-weixin                   // 微信小程序平台，可选
+│	├─mp-xhs                      // 小红书小程序平台（仅限vue2），可选
+│	└─index.uts                   // 跨平台插件能力实现，可选
+└─package.json                    // 插件清单文件
+</code>
+</pre>
+
+
+如上所示，UTS组件的目录结构与UTS插件基本相同
+
+唯一的差别在于，UTS组件入口文件有两个:
+
++ 必选的index.vue 组件入口
+
++ 可选的index.uts 函数能力入口
+
+
+用户如果在开发组件的同时，存在一些与组件无关的能力需要对外暴露，可以在index.uts中进行实现
+
+大多数情况下，我们只需要开发一个index.vue 即可，如果存在多个组件，可以新建多个 xxx.vue文件
+
+关于 index.vue 源码如何编写，我们会在下一个章节介绍
+
+
+### index.vue源码结构
+
+下面是一个组件源码 index.vue 完整示例：
+
+**注意**
+
+- 目前UTS组件仅支持`export default {}`的选项式API，vue3的组合式API暂未支持。
+
+::: preview
+
+> Android
+
+```html
+
+<template>
+  <view>
+  </view>
+</template>
+
+<script lang="uts">
+  /**
+   * 引用 Android 系统库
+   * [可选实现，按需引入]
+   */
+  import TextUtils from 'android.text.TextUtils';
+  import Button from 'android.widget.Button';
+  import View from 'android.view.View';
+
+  /**
+   * 引入三方库
+   * [可选实现，按需引入]
+   *
+   * 在 Android 平台引入三方库有以下两种方式：
+   * 1、[推荐] 通过 仓储 方式引入，将 三方库的依赖信息 配置到 config.json 文件下的 dependencies 字段下。详细配置方式[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#dependencies)
+   * 2、直接引入，将 三方库的aar或jar文件 放到libs目录下。更多信息[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#android%E5%B9%B3%E5%8F%B0%E5%8E%9F%E7%94%9F%E9%85%8D%E7%BD%AE)
+   *
+   * 在通过上述任意方式依赖三方库后，使用时需要在文件中 import
+   * import { LottieAnimationView } from 'com.airbnb.lottie.LottieAnimationView'
+   */
+
+  /**
+   * UTSAndroid 为平台内置对象，不需要 import 可直接调用其API，[详见](https://uniapp.dcloud.net.cn/uts/utsandroid.html#utsandroid)
+   */
+
+  //原生提供以下属性或方法的实现
+  export default {
+    /**
+     * 组件名称，也就是开发者使用的标签
+     */
+    name: "uts-hello-view",
+    /**
+     * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
+     */
+    emits: ['buttonclick'],
+    /**
+     * 属性声明，组件的使用者会传递这些属性值到组件
+     */
+    props: {
+      "buttontext": {
+        type: String,
+        default: "点击触发"
+      }
+    },
+    /**
+     * 组件内部变量声明
+     */
+    data() {
+      return {}
+    },
+    /**
+     * 属性变化监听器实现
+     */
+    watch: {
+      "buttontext": {
+        /**
+         * 这里监听属性变化，并进行组件内部更新
+         */
+        handler(newValue : string, oldValue : string) {
+          if (!TextUtils.isEmpty(newValue) && newValue != oldValue) {
+            this.$el?.setText(newValue);
+          }
+        },
+        immediate: false // 创建时是否通过此方法更新属性，默认值为false
+      },
+    },
+    /**
+     * 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
+     * ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
+     * 
+     * 注意：如果在data中声明了一个变量，此时组件配置了 expose字段，但未在expose字段中包含此变量。会导致该变量被标记为`private`：仅能在组件内使用，不能在组件外访问
+     */
+    expose: ['doSomething'],
+    methods: {
+      /**
+       * 对外公开的组件方法
+       *
+       * uni-app中调用示例：
+       * this.$refs["组件ref"].doSomething("uts-button");
+       *
+       * uni-app x中调用示例：
+       * 1、引入对应Element
+       * import { UtsButtonElement(组件名称以upper camel case方式命名 + Element) } from 'uts.sdk.modules.utsComponent(组件目录名称以lower camel case方式命名)';
+       * 2、(this.$refs["组件ref"] as UtsButtonElement).doSomething("uts-button");
+       * 或 (uni.getElementById("组件id") as UtsButtonElement).doSomething("uts-button");
+       */
+      doSomething(param : string) {
+        console.log(param);
+      },
+      /**
+       * 内部使用的组件方法
+       */
+      privateMethod() {
+
+      }
+    },
+    /**
+     * [可选实现] 组件被创建，组件第一个生命周期，
+     * 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
+     */
+    created() {
+
+    },
+    /**
+     * [可选实现] 对应平台的view载体即将被创建，对应前端beforeMount
+     */
+    NVBeforeLoad() {
+
+    },
+    /**
+     * [必须实现] 创建原生View，必须定义返回值类型
+     * 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
+     * （Android需要明确知道View类型，需特殊校验）
+     */
+    NVLoad() : Button {
+      let button = new Button($androidContext!);
+      button.setText("点击触发");
+      button.setOnClickListener(new ButtonClickListener(this));
+      return button;
+    },
+    /**
+     * [可选实现] 原生View已创建
+     */
+    NVLoaded() {
+
+    },
+    /**
+     * [可选实现] 原生View布局完成
+     */
+    NVLayouted() {
+
+    },
+    /**
+     * [可选实现] 原生View将释放
+     */
+    NVBeforeUnload() {
+
+    },
+    /**
+     * [可选实现] 原生View已释放，这里可以做释放View之后的操作
+     */
+    NVUnloaded() {
+
+    },
+    /**
+     * [可选实现] 组件销毁
+     */
+    unmounted() {
+
+    },
+    /**
+     * [可选实现] 自定组件布局尺寸，用于告诉排版系统，组件自身需要的宽高
+     * 一般情况下，组件的宽高应该是由终端系统的排版引擎决定，组件开发者不需要实现此函数
+     * 但是部分场景下，组件开发者需要自己维护宽高，则需要开发者重写此函数
+     */
+    NVMeasure(size : UTSSize,mode:UTSMeasureMode) : UTSSize {
+      // size.width = 300.0.toFloat();
+      // size.height = 200.0.toFloat();
+      return size;
+    }
+  }
+
+  /**
+   * 定义按钮点击后触发回调的类
+   * [可选实现]
+   */
+  class ButtonClickListener extends View.OnClickListener {
+    /**
+     * 如果需要在回调类或者代理类中对组件进行操作，比如调用组件方法，发送事件等，需要在该类中持有组件对应的原生类的对象
+     * 组件原生类的基类为 UTSComponent，该类是一个泛型类，需要接收一个类型变量，该类型变量就是原生组件的类型
+     */
+    private comp : UTSComponent<Button>;
+
+    constructor(comp : UTSComponent<Button>) {
+      super();
+      this.comp = comp;
+    }
+
+    /**
+     * 按钮点击回调方法
+     */
+    override onClick(v ?: View) {
+      console.log("按钮被点击");
+      // 发送事件
+      this.comp.$emit("buttonclick");
+    }
+  }
+</script>
+
+<style>
+
+</style>
+
+```
+
+> iOS
+
+```html
+<template>
+  <view class="defaultStyles">
+  </view>
+</template>
+<script lang="uts">
+  /**
+   * 引用 iOS 系统库
+   * [可选实现，按需引入]
+   */
+  import {
+    UIButton,
+    UIControl
+  } from "UIKit"
+
+  /**
+   * 引入三方库
+   * [可选实现，按需引入]
+   *
+   * 在 iOS 平台引入三方库有以下两种方式：
+   * 1、通过引入三方库framework 或者.a 等方式，需要将 .framework 放到 ./Frameworks 目录下，将.a 放到 ./Libs 目录下。更多信息[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#ios-平台原生配置)
+   * 2、通过 cocoaPods 方式引入，将要引入的 pod 信息配置到 config.json 文件下的 dependencies-pods 字段下。详细配置方式[详见](https://uniapp.dcloud.net.cn/plugin/uts-ios-cocoapods.html)
+   *
+   * 在通过上述任意方式依赖三方库后，使用时需要在文件中 import:
+   * 示例：import { LottieAnimationView, LottieAnimation, LottieLoopMode	} from 'Lottie'
+   */
+
+  /**
+   * UTSiOS、UTSComponent 为平台内置对象，不需要 import 可直接调用其API，[详见](https://uniapp.dcloud.net.cn/uts/utsios.html)
+   */
+  import { UTSComponent } from "DCloudUTSFoundation"
+
+  //原生提供以下属性或方法的实现
+  export default {
+    data() {
+      return {
+      };
+    },
+    /**
+     * 组件名称，也就是开发者使用的标签
+     */
+    name: "uts-hello-view",
+    /**
+     * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
+     */
+    emits: ['buttonclick'],
+    /**
+     * 属性声明，组件的使用者会传递这些属性值到组件
+     */
+    props: {
+      /**
+       * 字符串类型 属性：buttontext  需要设置默认值
+       */
+      "buttontext": {
+        type: String,
+        default: "点击触发"
+      }
+    },
+    /**
+     * 组件内部变量声明
+     */
+
+    /**
+     * 属性变化监听器实现
+     */
+    watch: {
+      "buttontext": {
+        /**
+         * 这里监听属性变化，并进行组件内部更新
+         */
+        handler(newValue : String, oldValue : String) {
+          this.$el.setTitle(newValue, for = UIControl.State.normal)
+        },
+        /**
+         * 创建时是否通过此方法更新属性，默认值为false
+         */
+        immediate: false
+      },
+    },
+    /**
+     * 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
+     * ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
+     */
+    expose: ['doSomething'],
+    methods: {
+      /**
+       * 对外公开的组件方法
+       * 在uni-app中调用组件方法，可以通过指定ref的方式，例如指定uts-button 标签的ref 为 ’button‘， 调用时使用：this.$refs["button"].doSomething('message');
+       */
+      doSomething(paramA : string) {
+        // 这是组件的自定义方法
+        console.log(paramA, 'this is in uts-button component')
+      },
+
+
+      /**
+       * 内部使用的组件方法
+       */
+    },
+
+
+    /**
+     * 组件被创建，组件第一个生命周期，
+     * 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
+     * [可选实现]
+     */
+    created() {
+
+    },
+    /**
+     * 对应平台的view载体即将被创建，对应前端beforeMount
+     * [可选实现]
+     */
+    NVBeforeLoad() {
+
+    },
+    /**
+     * 创建原生View，必须定义返回值类型
+     * 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
+     * [必须实现]
+     */
+    NVLoad() : UIButton {
+      //必须实现
+      buttonClickListsner = new ButtonClickListsner(this)
+
+      let button = new UIButton()
+      button.setTitle(this.buttontext, for = UIControl.State.normal)
+      // 在 swift target-action 对应的方法需要以OC的方式来调用，那么OC语言中用Selector来表示一个方法的名称（又称方法选择器），创建一个Selector可以使用 Selector("functionName") 的方式。
+      const method = Selector("buttonClickAction")
+      if (buttonClickListsner != null) {
+        button.addTarget(buttonClickListsner!, action = method, for = UIControl.Event.touchUpInside)
+      }
+      return button
+    },
+
+    /**
+     * 原生View已创建
+     * [可选实现]
+     */
+    NVLoaded() {
+      /**
+       * 通过 this.$el 来获取原生控件。
+       */
+      this.$el.setTitle(this.buttontext, for = UIControl.State.normal)
+    },
+    /**
+     * 原生View布局完成
+     * [可选实现]
+     */
+    NVLayouted() {
+
+    },
+    /**
+     * 原生View将释放
+     * [可选实现]
+     */
+    NVBeforeUnload() { },
+    /**
+     * 原生View已释放，这里可以做释放View之后的操作
+     * [可选实现]
+     */
+    NVUnloaded() {
+
+    },
+    /**
+     * 组件销毁
+     * [可选实现]
+     */
+    unmounted() { }
+
+    /**
+     * 更多组件开发的信息详见：https://uniapp.dcloud.net.cn/plugin/uts-component.html
+     */
+  }
+
+  /**
+   * 定义按钮点击后触发回调的类
+   * [可选实现]
+   */
+  class ButtonClickListsner {
+    /**
+     * 如果需要在回调类或者代理类中对组件进行操作，比如调用组件方法，发送事件等，需要在该类中持有组件对应的原生类的对象。
+     * 组件原生类的基类为 UTSComponent，该类是一个泛型类，需要接收一个类型变量，该类型变量就是原生组件的类型。
+     */
+    private component : UTSComponent<UIButton>
+
+    constructor(component : UTSComponent<UIButton>) {
+      this.component = component
+      super.init()
+    }
+
+    /**
+     * 按钮点击回调方法
+     * 在 swift 中，所有target-action (例如按钮的点击事件，NotificationCenter 的通知事件等)对应的 action 函数前面都要使用 @objc 进行标记。
+     * [可选实现]
+     */
+    @objc buttonClickAction() {
+      console.log("按钮被点击")
+      // 发送事件
+      this.component.__$$emit("buttonclick");
+    }
+  }
+
+  /**
+   * 定义回调类或者代理类的实例
+   * [可选实现]
+   */
+  let buttonClickListsner : ButtonClickListsner | null = null
+</script>
+
+<style>
+
+</style>
+```
+
+:::
+
+index.vue 要素可以分为以下几类：
+
++ 配置：
+
+	name：组件的使用标签，可以省略，若省略则默认为组件名称
+
+	emits：组件允许的消息事件名称，如果没有组件消息，不需要配置
+
++ 属性：
+
+	props：需要由组件的使用者提供，比如一个Image组件，会需要一个path属性作为图像路径来源
+
+	watch：属性的监听实现，用来监听属性数据更新。
+
++ 数据：
+
+	data：组件内部数据定义，用于组件内部逻辑处理，不对外暴露
+
++ 方法：
+
+	methods：组件方法定义，可以通过与expose组合使用，区分对内方法和对外方法
+
+	expose：与methods 字段配合使用，用以区分组件对内方法和对外方法
+
+
++ 生命周期：
+
+	组件需要重点处理 内存创建/销毁，View载体创建/销毁 过程中的资源管理，具体参考生命周期章节
+
++ 内置对象：
+
+	为了方便组件开发者，UTS组件内置了部分变量与函数，具体参考内置对象与函数章节
+
+
+### 生命周期
+
+组件开发者需要重点关注组件的生命周期，以便进行资源的初始化和回收
+
+```mermaid
+graph TD;
+		Create-->NVBeforeLoad;
+	subgraph View生命周期
+		NVBeforeLoad-->NVLoad;
+		NVLoad-->NVLoaded;
+		NVLoaded-->NVLayouted;
+		NVLayouted-->NVBeforeUnload;
+	end
+		NVBeforeUnload-->unmounted;
+
+```
+
+|函数名			|描述				|建议行为		|是否可选	|
+|:----			|:---				|:---			|:---		|
+|created		|组件在内存中被创建	|开发者可以在这里执行一些需要最早执行的初始化逻辑|可选|
+|NVBeforeLoad	|组件对应平台的view载体，即将被创建|开发者可以在这里执行一些需要在View创建前初始化的逻辑|可选|
+|NVLoad			|组件view载体正在被创建实现|开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型|必须实现|
+|NVLoaded			|组件view载体创建完成|需要在对应的原生view创建完成后执行的逻辑|可选|
+|NVLayouted		|组件对应平台的view载体已布局结束	|需要在view布局结束后执行的逻辑	|可选|
+|NVBeforeUnload	|view载体即将被卸载				|View卸载前，需要回收资源的逻辑	|可选|
+|NVUnloaded		|view载体已经被卸载				|View卸载后，需要回收资源的逻辑	|可选|
+|unmounted		|组件在内存被销毁				|资源回收逻辑					|可选|
+
+
+除上述生命周期外，还存在下列可选周期函数：
+
++ NVMeasure
+
+NVMeasure 用于告诉排版系统，组件自身需要的宽高，具体的调用时机由排版系统决定。
+
+一般情况下，组件的宽高应该是由终端系统的排版引擎决定，组件开发者不需要实现此函数。
+
+但是部分场景下，组件开发者需要自己维护宽高，则需要开发者重写此函数
+
+
+注意:
+
+    + 只有非容器组件生效，容器组件不应该重写此函数
+
+    + HBuilder X 4.25 版本后新增 `UTSMeasureMode` 类型入参，包含组件宽高在css中的设定： 0 代表未指定css中的宽高属性 / 1 代表已指定css中的宽高属性
+
+
++ NVUpdateStyles
+
+需要HBuilder X 3.96版本
+
+NVUpdateStyles 用来监听组件的外部style 变化，通常用来写响应外部的css样式变化从而动态更新组件内部状态场景
+
+我们可以在组件内部这样实现:
+
+```uts
+NVUpdateStyles(styles: Map<String, any>){
+	console.log("NVUpdateStyles",styles)
+}
+```
+
++ NVRecycler 
+
+HBuilderX 4.0版本起支持，仅uni-app x App-Android平台支持
+
+当UTS组件在`list-view`组件中使用时，由于[复用机制](../component/list-view.md)，UTS组件可能表现异常（UI、事件回调等），因此，组件开发者需要在此函数中进行相应的逻辑处理。
+
+比如我们使用UTS组件封装了一个Android原生的`EditText`控件（输入框），代码如下
+
+```html
+NVLoad() : EditText {
+	let editText = new EditText($androidContext!);
+	return editText;
+}
+```
+
+然后我们在`list-view`组件中使用该UTS组件，当我们在第一个输入框中随机输入几个字符后，开始滚动列表，会发现之前输入的字符又出现在下面某个`list-item`中，这就是一个典型的由于复用机制导致的UI状态异常问题。此时我们就需要在NVRecycler()函数中处理该问题，代码如下
+
+```html
+NVRecycler() {
+	// 发生复用时置空输入框内容
+	this.$el?.setText("")
+}
+```
+
+[vue3 生命周期暂不支持](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90)
+
+
+### 内置对象和函数
+
+为了方便组件开发者使用，UTS 组件内部内置了下列对象：
+
+|变量名			|类型		|简介				|平台限制	|方法&属性	|
+|:-------		|:--------	|:--------			|:---		|:---			|
+|$el			|对象		|当前View实例对象	|全部平台	|开发者在NVLoad返回的对象类型|
+|$androidContext|对象		|当前组件上下文(可为空)		|仅android	|android平台对应Context对象|
+|$emit("event",Any)|函数		|发送已注册的事件	|全部平台	|$emit(事件名称-必选,事件参数可选)|
+
+**注意**
+
+`UTSAndroid.getUniActivity()/UTSAndroid.getAppContext()` 在组件内不建议使用，请使用`$androidContext`来替代
+
+
+### 通用事件
+
+对于UTS组件来说，除了通过 $emit/emits 函数来自定义组件事件外，UTS组件还内置了下列通用事件：
+
+
+|事件名称			|简介
+|:-------			|:--------
+|click				|组件点击事件响应
+|longpress			|组件长按事件响应
+
+
+通用事件，组件的使用者无需实现，直接使用
+
+```html
+<uts-hello-view buttonClick="自定义事件处理函数" click="通用点击事件处理函数" longpress="通用长按事件处理函数"/>
+```
+
+
+
+## 简单View的示例
+
+本章节以 一个极简的组件开发为例，介绍说明UTS组件开发流程
+
+### 创建插件
+
+在HBuilder X 中选中Uni-App项目下 uni_modules目录,右键选择新建`uni_modules插件`
+
+![创建界面](https://native-res.dcloud.net.cn/images/uts/component/image0.png)
+
+
+这是创建后的目录结构
+
+![目录结构](https://native-res.dcloud.net.cn/images/uts/component/image1.jpg)
+
+
+### 编写逻辑
+
+打开index.vue，键入下面的组件源码:
+
+::: preview
+
+> Android
+
+```html
+
+<template>
+  <view>
+  </view>
+</template>
+
+<script lang="uts">
+  /**
+   * 引用 Android 系统库
+   * [可选实现，按需引入]
+   */
+  import TextUtils from 'android.text.TextUtils';
+  import Button from 'android.widget.Button';
+  import View from 'android.view.View';
+
+  /**
+   * 引入三方库
+   * [可选实现，按需引入]
+   *
+   * 在 Android 平台引入三方库有以下两种方式：
+   * 1、[推荐] 通过 仓储 方式引入，将 三方库的依赖信息 配置到 config.json 文件下的 dependencies 字段下。详细配置方式[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#dependencies)
+   * 2、直接引入，将 三方库的aar或jar文件 放到libs目录下。更多信息[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#android%E5%B9%B3%E5%8F%B0%E5%8E%9F%E7%94%9F%E9%85%8D%E7%BD%AE)
+   *
+   * 在通过上述任意方式依赖三方库后，使用时需要在文件中 import
+   * import { LottieAnimationView } from 'com.airbnb.lottie.LottieAnimationView'
+   */
+
+  /**
+   * UTSAndroid 为平台内置对象，不需要 import 可直接调用其API，[详见](https://uniapp.dcloud.net.cn/uts/utsandroid.html#utsandroid)
+   */
+
+  //原生提供以下属性或方法的实现
+  export default {
+    /**
+     * 组件名称，也就是开发者使用的标签
+     */
+    name: "uts-hello-view",
+    /**
+     * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
+     */
+    emits: ['buttonclick'],
+    /**
+     * 属性声明，组件的使用者会传递这些属性值到组件
+     */
+    props: {
+      "buttontext": {
+        type: String,
+        default: "点击触发"
+      }
+    },
+    /**
+     * 组件内部变量声明
+     */
+    data() {
+      return {}
+    },
+    /**
+     * 属性变化监听器实现
+     */
+    watch: {
+      "buttontext": {
+        /**
+         * 这里监听属性变化，并进行组件内部更新
+         */
+        handler(newValue : string, oldValue : string) {
+          if (!TextUtils.isEmpty(newValue) && newValue != oldValue) {
+            this.$el?.setText(newValue);
+          }
+        },
+        immediate: false // 创建时是否通过此方法更新属性，默认值为false
+      },
+    },
+    /**
+     * 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
+     * ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
+     */
+    expose: ['doSomething'],
+    methods: {
+      /**
+       * 对外公开的组件方法
+       *
+       * uni-app中调用示例：
+       * this.$refs["组件ref"].doSomething("uts-button");
+       *
+       * uni-app x中调用示例：
+       * 1、引入对应Element
+       * import { UtsButtonElement(组件名称以upper camel case方式命名 + Element) } from 'uts.sdk.modules.utsComponent(组件目录名称以lower camel case方式命名)';
+       * 2、(this.$refs["组件ref"] as UtsButtonElement).doSomething("uts-button");
+       * 或 (uni.getElementById("组件id") as UtsButtonElement).doSomething("uts-button");
+       */
+      doSomething(param : string) {
+        console.log(param);
+      },
+      /**
+       * 内部使用的组件方法
+       */
+      privateMethod() {
+
+      }
+    },
+    /**
+     * [可选实现] 组件被创建，组件第一个生命周期，
+     * 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
+     */
+    created() {
+
+    },
+    /**
+     * [可选实现] 对应平台的view载体即将被创建，对应前端beforeMount
+     */
+    NVBeforeLoad() {
+
+    },
+    /**
+     * [必须实现] 创建原生View，必须定义返回值类型
+     * 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
+     * （Android需要明确知道View类型，需特殊校验）
+     */
+    NVLoad() : Button {
+      let button = new Button($androidContext!);
+      button.setText("点击触发");
+      button.setOnClickListener(new ButtonClickListener(this));
+      return button;
+    },
+    /**
+     * [可选实现] 原生View已创建
+     */
+    NVLoaded() {
+
+    },
+    /**
+     * [可选实现] 原生View布局完成
+     */
+    NVLayouted() {
+
+    },
+    /**
+     * [可选实现] 原生View将释放
+     */
+    NVBeforeUnload() {
+
+    },
+    /**
+     * [可选实现] 原生View已释放，这里可以做释放View之后的操作
+     */
+    NVUnloaded() {
+
+    },
+    /**
+     * [可选实现] 组件销毁
+     */
+    unmounted() {
+
+    },
+    /**
+     * [可选实现] 自定组件布局尺寸，用于告诉排版系统，组件自身需要的宽高
+     * 一般情况下，组件的宽高应该是由终端系统的排版引擎决定，组件开发者不需要实现此函数
+     * 但是部分场景下，组件开发者需要自己维护宽高，则需要开发者重写此函数
+     * 
+     * HBuilder X 4.25 版本后新增 UTSMeasureMode 参数
+     */
+    NVMeasure(size : UTSSize,mode:UTSMeasureMode) : UTSSize {
+      // size.width = 300.0.toFloat();
+      // size.height = 200.0.toFloat();
+      return size;
+    }
+  }
+
+  /**
+   * 定义按钮点击后触发回调的类
+   * [可选实现]
+   */
+  class ButtonClickListener extends View.OnClickListener {
+    /**
+     * 如果需要在回调类或者代理类中对组件进行操作，比如调用组件方法，发送事件等，需要在该类中持有组件对应的原生类的对象
+     * 组件原生类的基类为 UTSComponent，该类是一个泛型类，需要接收一个类型变量，该类型变量就是原生组件的类型
+     */
+    private comp : UTSComponent<Button>;
+
+    constructor(comp : UTSComponent<Button>) {
+      super();
+      this.comp = comp;
+    }
+
+    /**
+     * 按钮点击回调方法
+     */
+    override onClick(v ?: View) {
+      console.log("按钮被点击");
+      // 发送事件
+      this.comp.$emit("buttonclick");
+    }
+  }
+</script>
+
+<style>
+
+</style>
+
+```
+
+> iOS
+
+```html
+<template>
+  <view class="defaultStyles">
+  </view>
+</template>
+<script lang="uts">
+  /**
+   * 引用 iOS 系统库
+   * [可选实现，按需引入]
+   */
+  import {
+    UIButton,
+    UIControl
+  } from "UIKit"
+
+  /**
+   * 引入三方库
+   * [可选实现，按需引入]
+   *
+   * 在 iOS 平台引入三方库有以下两种方式：
+   * 1、通过引入三方库framework 或者.a 等方式，需要将 .framework 放到 ./Frameworks 目录下，将.a 放到 ./Libs 目录下。更多信息[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#ios-平台原生配置)
+   * 2、通过 cocoaPods 方式引入，将要引入的 pod 信息配置到 config.json 文件下的 dependencies-pods 字段下。详细配置方式[详见](https://uniapp.dcloud.net.cn/plugin/uts-ios-cocoapods.html)
+   *
+   * 在通过上述任意方式依赖三方库后，使用时需要在文件中 import:
+   * 示例：import { LottieAnimationView, LottieAnimation, LottieLoopMode	} from 'Lottie'
+   */
+
+  /**
+   * UTSiOS、UTSComponent 为平台内置对象，不需要 import 可直接调用其API，[详见](https://uniapp.dcloud.net.cn/uts/utsios.html)
+   */
+  import { UTSComponent } from "DCloudUTSFoundation"
+
+  //原生提供以下属性或方法的实现
+  export default {
+    data() {
+      return {
+      };
+    },
+    /**
+     * 组件名称，也就是开发者使用的标签
+     */
+    name: "uts-hello-view",
+    /**
+     * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
+     */
+    emits: ['buttonclick'],
+    /**
+     * 属性声明，组件的使用者会传递这些属性值到组件
+     */
+    props: {
+      /**
+       * 字符串类型 属性：buttontext  需要设置默认值
+       */
+      "buttontext": {
+        type: String,
+        default: "点击触发"
+      }
+    },
+    /**
+     * 组件内部变量声明
+     */
+
+    /**
+     * 属性变化监听器实现
+     */
+    watch: {
+      "buttontext": {
+        /**
+         * 这里监听属性变化，并进行组件内部更新
+         */
+        handler(newValue : String, oldValue : String) {
+          this.$el.setTitle(newValue, for = UIControl.State.normal)
+        },
+        /**
+         * 创建时是否通过此方法更新属性，默认值为false
+         */
+        immediate: false
+      },
+    },
+    /**
+     * 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
+     * ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
+     */
+    expose: ['doSomething'],
+    methods: {
+      /**
+       * 对外公开的组件方法
+       * 在uni-app中调用组件方法，可以通过指定ref的方式，例如指定uts-button 标签的ref 为 ’button‘， 调用时使用：this.$refs["button"].doSomething('message');
+       */
+      doSomething(paramA : string) {
+        // 这是组件的自定义方法
+        console.log(paramA, 'this is in uts-button component')
+      },
+
+
+      /**
+       * 内部使用的组件方法
+       */
+    },
+
+
+    /**
+     * 组件被创建，组件第一个生命周期，
+     * 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
+     * [可选实现]
+     */
+    created() {
+
+    },
+    /**
+     * 对应平台的view载体即将被创建，对应前端beforeMount
+     * [可选实现]
+     */
+    NVBeforeLoad() {
+
+    },
+    /**
+     * 创建原生View，必须定义返回值类型
+     * 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
+     * [必须实现]
+     */
+    NVLoad() : UIButton {
+      //必须实现
+      buttonClickListsner = new ButtonClickListsner(this)
+
+      let button = new UIButton()
+      button.setTitle(this.buttontext, for = UIControl.State.normal)
+      // 在 swift target-action 对应的方法需要以OC的方式来调用，那么OC语言中用Selector来表示一个方法的名称（又称方法选择器），创建一个Selector可以使用 Selector("functionName") 的方式。
+      const method = Selector("buttonClickAction")
+      if (buttonClickListsner != null) {
+        button.addTarget(buttonClickListsner!, action = method, for = UIControl.Event.touchUpInside)
+      }
+      return button
+    },
+
+    /**
+     * 原生View已创建
+     * [可选实现]
+     */
+    NVLoaded() {
+      /**
+       * 通过 this.$el 来获取原生控件。
+       */
+      this.$el.setTitle(this.buttontext, for = UIControl.State.normal)
+    },
+    /**
+     * 原生View布局完成
+     * [可选实现]
+     */
+    NVLayouted() {
+
+    },
+    /**
+     * 原生View将释放
+     * [可选实现]
+     */
+    NVBeforeUnload() { },
+    /**
+     * 原生View已释放，这里可以做释放View之后的操作
+     * [可选实现]
+     */
+    NVUnloaded() {
+
+    },
+    /**
+     * 组件销毁
+     * [可选实现]
+     */
+    unmounted() { }
+
+    /**
+     * 更多组件开发的信息详见：https://uniapp.dcloud.net.cn/plugin/uts-component.html
+     */
+  }
+
+  /**
+   * 定义按钮点击后触发回调的类
+   * [可选实现]
+   */
+  class ButtonClickListsner {
+    /**
+     * 如果需要在回调类或者代理类中对组件进行操作，比如调用组件方法，发送事件等，需要在该类中持有组件对应的原生类的对象。
+     * 组件原生类的基类为 UTSComponent，该类是一个泛型类，需要接收一个类型变量，该类型变量就是原生组件的类型。
+     */
+    private component : UTSComponent<UIButton>
+
+    constructor(component : UTSComponent<UIButton>) {
+      this.component = component
+      super.init()
+    }
+
+    /**
+     * 按钮点击回调方法
+     * 在 swift 中，所有target-action (例如按钮的点击事件，NotificationCenter 的通知事件等)对应的 action 函数前面都要使用 @objc 进行标记。
+     * [可选实现]
+     */
+    @objc buttonClickAction() {
+      console.log("按钮被点击")
+      // 发送事件
+      this.component.__$$emit("buttonclick");
+    }
+  }
+
+  /**
+   * 定义回调类或者代理类的实例
+   * [可选实现]
+   */
+  let buttonClickListsner : ButtonClickListsner | null = null
+</script>
+
+<style>
+
+</style>
+```
+
+:::
+
+上面的代码，我们自定义了一个  名为 "uts-hello-view" 的UTS 组件，该组件对外提供了一个包含按钮的简单UI实现，并且对外暴露了一个名为 `buttontext`字符串属性，用来构建按钮上的文案
+
+接下来，我们介绍在uni-app项目中如何使用它
+
+### 使用组件
+
+> 注意：UTS组件默认全局注册，无需使用者手动配置
+
+我们在uni-app项目中新建 helloView.nvue 页面，
+
+![](https://native-res.dcloud.net.cn/images/uts/component/helloview_use_file.jpg)
+
+直接使用`uts-hello-view`标签，并且定义`buttontext`文本内容即可看到效果。
+
+点击组件内置按钮，可以在控制台看到组件内部实现的日志输出
+
+点击`调用组件的方法`按钮，可以看到组件内置方法被调用
+
+
+```html
+<template>
+	<div>
+		<uts-hello-view ref="helloView" buttontext="点击按钮内容" @buttonclick="onButtonClick" style="width:375px;height: 60px;background-color: aqua;"></uts-hello-view>
+		<button @tap="doSth">调用组件的方法</button>
+	</div>
+
+</template>
+
+<script>
+  export default {
+    data() {
+			return {
+
+			}
+		},
+		methods: {
+			onButtonClick() {
+			  uni.showToast({
+				title:"点击了hello view"
+			  })
+			},
+			// 调用组件内的方法
+			doSth() {
+				// nvue 页面调用方法
+				this.$refs["helloView"].doSomething("param doSomething");
+        // uvue 页面调用方法
+        //(this.$refs["helloView"] as UtsHelloViewElement).doSth("param doSomething");
+			}
+		}
+  }
+</script>
+
+<style>
+</style>
+```
+
+
+### 运行和测试
+
+在当前示例中，不涉及第三方依赖，使用标准基座直接运行即可
+
+
+
+## 包含第三方SDK的示例
+
+本章节以lottie动画组件为例，介绍包含三方SDK的UTS组件开发过程
+
+### 创建插件
+
+在HBuilder X 中选中Uni-App项目下 uni_modules目录,右键选择新建`uni_modules插件`
+
+![创建界面](https://native-res.dcloud.net.cn/images/uts/component/image0.png)
+
+
+这是创建后的目录结构
+
+![目录结构](https://native-res.dcloud.net.cn/images/uts/component/image3.jpg)
+
+
+### Android 平台引入依赖
+
+打开 ~/uni_modules/uts-animation-view/utssdk/app-android/config.json
+
+键入如下代码:
+
+```
+"dependencies": [
+	"com.airbnb.android:lottie:3.4.0"
+]
+```
+
+UTS组件建议使用远程依赖的方式集成，如果需要以AAR的形式添加SDK，可以添加到
+
+~/uni_modules/uts-animation-view/utssdk/app-android/libs目录
+
+依赖的配置原则与UTS插件一致 [UTS插件依赖说明](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-for-android.html#_3-4-%E5%A2%9E%E5%8A%A0libs%E4%BE%9D%E8%B5%96%E8%B5%84%E6%BA%90)
+
+
+### iOS 平台引入依赖库
+
+iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中
+
+
+### 编写逻辑
+
+打开index.vue，键入下面的组件源码:
+
+::: preview
+
+> Android
+
+```ts
+
+<template>
+    <view class="defaultStyles">
+
+    </view>
+</template>
+<script lang="uts">
+    import Animator from 'android.animation.Animator'
+    import TextUtils from 'android.text.TextUtils'
+    import View from 'android.view.View'
+    import LottieAnimationView from 'com.airbnb.lottie.LottieAnimationView'
+    import LottieDrawable from 'com.airbnb.lottie.LottieDrawable'
+	import FileInputStream from 'java.io.FileInputStream'
+
+    class CustomAnimListener extends Animator.AnimatorListener {
+
+        comp: UTSComponent < LottieAnimationView >
+            constructor(com: UTSComponent < LottieAnimationView > ) {
+                super();
+                this.comp = com
+            }
+
+        override onAnimationStart(animation: Animator) {}
+
+        override onAnimationEnd(animation: Animator, isReverse: Boolean) {
+            this.comp.$emit("bindended")
+        }
+
+        override onAnimationEnd(animation: Animator) {}
+
+        override onAnimationCancel(animation: Animator) {}
+
+        override onAnimationRepeat(animation: Animator) {}
+    }
+
+    //原生提供以下属性或方法的实现  
+    export default {
+        name: "uts-animation-view",
+        /**
+         * 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发）
+         */
+        emits: ['bindended'],
+        props: {
+            /**
+             * 动画资源地址，目前只支持绝对路径
+             */
+            "path": {
+                type: String,
+                default: ""
+            },
+            /**
+             * 动画是否自动播放
+             */
+            "autoplay": {
+                type: Boolean,
+                default: false
+            },
+            /**
+			 * 动画是否循环播放
+             */
+            "loop": {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * 是否隐藏动画
+             */
+            "hidden": {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * 动画操作，可取值 play、pause、stop
+             */
+            "action": {
+                type: String,
+                default: "stop"
+            }
+
+        },
+        data() {
+            return {
+
+            }
+        },
+        watch: {
+            "path": {
+                handler(newPath: string) {
+
+					if(this.$el != null){
+						let lottieAnimationView = this.$el!
+						if (!TextUtils.isEmpty(newPath)) {
+							
+						    if (newPath.startsWith("http://") || newPath.startsWith("https://")) {
+						        lottieAnimationView.setAnimationFromUrl(newPath)
+						    } else {
+                    // 正式打包会放在asset中，需要特殊处理
+                    let realJsonPath = UTSAndroid.getResourcePath(newPath)
+                    if(realJsonPath.startsWith("/android_asset")){
+                      lottieAnimationView.setAnimation(realJsonPath.substring(15))
+                    }else{
+                      lottieAnimationView.setAnimation(new FileInputStream(realJsonPath),newPath)
+                    }
+						    }
+						}
+						if (this.autoplay) {
+						    lottieAnimationView.playAnimation()
+						}
+					}
+                },
+                immediate: false
+            },
+            "loop": {
+                handler(newLoop: Boolean) {
+					if(this.$el != null){
+						if (newLoop) {
+						    this.$el!.repeatCount = Int.MAX_VALUE
+						} else {
+						    // 不循环则设置成1次
+						    this.$el!.repeatCount = 0
+						}
+						
+						if (this.autoplay) {
+						    this.$el!.playAnimation()
+						}
+					}
+                    
+                },
+                immediate: false
+            },
+
+            "autoplay": {
+                handler(newValue: boolean) {
+					if(this.$el != null){
+						if (newValue) {
+						    this.$el!.playAnimation()
+						}
+					}
+                    
+                },
+                immediate: false
+            },
+
+            "action": {
+                handler(newAction: string) {
+
+                    if (newAction == "play" || newAction == "pause" || newAction == "stop") {
+
+						if(this.$el != null){
+							if (this.action == "play") {
+							    this.$el!.playAnimation()
+							} else if (this.action == "pause") {
+							    this.$el!.pauseAnimation()
+							} else if (this.action == "stop") {
+							    this.$el!.cancelAnimation()
+							    this.$el!.clearAnimation()
+							}
+						}
+
+                    } else {
+                        // 非法入参，不管
+                    }
+                },
+                immediate: false
+            },
+
+            "hidden": {
+                handler(newValue: boolean) {
+					if(this.$el != null){
+						if (newValue) {
+						    this.$el!.visibility = View.GONE
+						} else {
+						    this.$el!.visibility = View.VISIBLE
+						}
+					}
+                },
+                immediate: false
+            },
+
+        },
+        methods: {
+            setRepeatMode(repeat: string) {
+				if(this.$el != null){
+					if ("RESTART" == repeat) {
+					    this.$el!.repeatMode = LottieDrawable.RESTART
+					} else if ("REVERSE" == repeat) {
+					    this.$el!.repeatMode = LottieDrawable.RESTART
+					}
+				}
+            },
+        },
+        
+        NVLoad(): LottieAnimationView { 
+            let lottieAnimationView = new LottieAnimationView($androidContext)
+            return lottieAnimationView
+        },
+		
+        NVLoaded() { 
+			if(this.$el != null){
+				this.$el!.repeatMode = LottieDrawable.RESTART;
+				this.$el!.visibility = View.GONE
+				this.$el!.repeatCount = 0
+				this.$el!.addAnimatorListener(new CustomAnimListener(this))
+			}
+        }
+        
+    }
+</script>
+<style>
+    /* 定义默认样式值, 组件使用者没有配置时使用 */
+    .defaultStyles {
+        width: 750rpx;
+        height: 240rpx;
+    }
+</style>
+
+
+```
+
+> iOS
+
+```ts
+<template>
+	<view>
+
+	</view>
+</template>
+<script lang="uts">
+	import {
+		LottieAnimationView,
+		LottieAnimation,
+		LottieLoopMode
+	} from 'Lottie'
+	import {
+		URL
+	} from 'Foundation'
+	import {
+		UTSiOS
+	} from "DCloudUTSFoundation"
+
+
+	//原生提供以下属性或方法的实现
+	export default {
+		/**
+		 * 组件名称，也就是开发者使用的标签
+		 */
+		name: "uts-animation-view",
+		/**
+		 * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
+		 */
+		emits: ['bindended'], // 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发）
+		/**
+		 * 属性声明，组件的使用者会传递这些属性值到组件
+		 */
+		props: {
+			/**
+			 * 动画资源地址，支持远程 URL 地址和本地绝对路径
+			 */
+			"path": {
+				type: String,
+				default: ""
+			},
+			/**
+			 * 动画是否循环播放
+			 */
+			"autoplay": {
+				type: Boolean,
+				default: false
+			},
+			/**
+			 * 动画是否自动播放
+			 */
+			"loop": {
+				type: Boolean,
+				default: false
+			},
+			/**
+			 * 是否隐藏动画
+			 */
+			"hidden": {
+				type: Boolean,
+				default: false
+			},
+			/**
+			 * 动画操作，可取值 play、pause、stop
+			 */
+			"action": {
+				type: String,
+				default: "stop"
+			}
+
+		},
+		data() {
+			return {
+
+			}
+		},
+		watch: {
+			"path": {
+				handler(newValue: string, oldValue: string) {
+					if (this.autoplay) {
+						this.playAnimation()
+					}
+				},
+				immediate: false //创建时是否通过此方法更新属性，默认值为false
+			},
+			"loop": {
+				handler(newValue: boolean, oldValue: boolean) {
+					if (newValue) {
+						this.$el.loopMode = LottieLoopMode.loop
+					} else {
+						this.$el.loopMode = LottieLoopMode.playOnce
+					}
+				},
+				immediate: false //创建时是否通过此方法更新属性，默认值为false
+			},
+			"autoplay": {
+				handler(newValue: boolean, oldValue: boolean) {
+					if (newValue) {
+						this.playAnimation()
+					}
+				},
+				immediate: false //创建时是否通过此方法更新属性，默认值为false
+			},
+			"action": {
+				handler(newValue: string, oldValue: string) {
+					const action = newValue
+					if (action == "play" || action == "pause" || action == "stop") {
+						switch (action) {
+							case "play":
+								this.playAnimation()
+								break;
+							case "pause":
+								this.$el.pause()
+								break;
+							case "stop":
+								this.$el.stop()
+								break;
+							default:
+								break;
+						}
+					} else {
+						// 非法入参，不管
+					}
+				},
+				immediate: false //创建时是否通过此方法更新属性，默认值为false
+			},
+
+			"hidden": {
+				handler(newValue: boolean, oldValue: boolean) {
+					this.$el.isHidden = this.hidden
+				},
+				immediate: false //创建时是否通过此方法更新属性，默认值为false
+			},
+
+		},
+		expose: ['setRepeatMode'],
+		methods: {
+			// 需要对外暴露的方法
+			// 设置 RepeatMode
+			setRepeatMode(repeatMode: string) {
+				if (repeatMode == "RESTART") {
+					if (this.loop) {
+						this.$el.loopMode = LottieLoopMode.loop
+					} else {
+						this.$el.loopMode = LottieLoopMode.playOnce
+					}
+				} else if (repeatMode == "REVERSE") {
+					if (this.loop) {
+						this.$el.loopMode = LottieLoopMode.autoReverse
+					} else {
+						this.$el.loopMode = LottieLoopMode.repeatBackwards(1)
+					}
+				}
+			},
+			// 不对外暴露的方法
+			// 播放动画
+			playAnimation() {
+				// 构建动画资源 url
+				var animationUrl: URL | null
+
+				if (this.path.hasPrefix("http")) {
+					animationUrl = new URL(string = this.path)
+				} else {
+					const filePath = UTSiOS.getResourcePath(this.path)
+					animationUrl = new URL(fileURLWithPath = filePath)
+				}
+
+				if (animationUrl != null) {
+					// 加载动画 LottieAnimation
+					LottieAnimation.loadedFrom(url = animationUrl!, closure = (animation: LottieAnimation | null):
+						void => {
+							if (animation != null) {
+								// 加载成功开始播放
+								this.$el.animation = animation
+								this.$el.play(completion = (isFinish: boolean): void => {
+									if (isFinish) {
+										// 播放完成回调事件
+										this.fireEvent("bindended")
+									}
+								})
+							}
+						})
+				} else {
+					console.log("url 构建失败，请检查 path 是否正确")
+				}
+			}
+		},
+		created() { //创建组件，替换created
+
+		},
+		NVBeforeLoad() { //组件将要创建，对应前端beforeMount
+			//可选实现，这里可以提前做一些操作
+		},
+		NVLoad(): LottieAnimationView { //创建原生View，必须定义返回值类型（Android需要明确知道View类型，需特殊校验）
+			// 初始化 Lottie$el
+			const animationView = new LottieAnimationView()
+			// 默认只播放一次动画
+			animationView.loopMode = LottieLoopMode.playOnce
+			return animationView
+		},
+		NVLoaded() { //原生View已创建
+
+			/// 更新 props 中定义的属性值
+
+			if (this.loop) {
+				this.$el.loopMode = LottieLoopMode.loop
+			}
+
+			this.$el.isHidden = this.hidden
+
+			if (this.autoplay) {
+				this.playAnimation()
+			}
+		},
+
+		NVLayouted() { //原生View布局完成
+			//可选实现，这里可以做布局后续操作
+		},
+
+		NVBeforeUnload() { //原生View将释放
+			//可选实现，这里可以做释放View之前的操作
+		},
+		NVUnloaded() { //原生View已释放
+			//可选实现，这里可以做释放View之后的操作
+		},
+		unmounted() { //组件销毁
+			//可选实现
+		}
+	}
+</script>
+<style>
+
+</style>
+```
+
+:::
+
+上面的代码我们实现了一个支持lottie动画播放的 UTS组件，标签名称为 `uts-animation-view`
+
+对外提供了下列属性和方法
+
+|属性		|类型	|默认值	|描述	|
+|:---		|:--	|:--	|:---	|
+|`path`		|string	||`lottie`资源路径，支持本地地址和`http`协议下的网络地址|
+|`loop`		|boolean|false	|动画是否循环播放|
+|`autoplay`	|boolean|true	|动画是否自动播放|
+|`action`	|string	|play	|动画操作，可取值 play、pause、stop|
+|`hidden`	|boolean|true	|是否隐藏动画|
+|`bindended`|event	|		|当播放到末尾时触发 ended 事件|
+|`setRepeatMode`|function|	|设置动画的重复方式，RESTART：重新开始播放，REVERSE，反向播放|
+
+
+### 使用`uts-animation-view`组件
+
+在uni-app项目中新建 lottie/index.nvue 页面
+
+![](https://native-res.dcloud.net.cn/images/uts/component/lottie_use_file.jpg)
+
+引用自定义 `uts-animation-view` 组件，并编写测试用例
+
+```
+<template>
+    <div>
+        <button @tap="changeUrl">播放本地动画资源</button>
+		<button @tap="changeServerUrl">播放远程动画资源</button>
+
+        <button @tap="changeAutoPlay">测试AutoPlay</button>
+        <button @tap="changeLoop">测试Loop</button>
+        <button @tap="changeAction(1)">测试action play</button>
+        <button @tap="changeAction(2)">测试action pause</button>
+        <button @tap="changeAction(3)">测试action stop</button>
+        <uts-animation-view ref="animView" :path="animUrl" :autoplay="autoplay" :loop="loop" :action="action"
+            :hidden="hidden" @bindended="testAnimEnd" @click="lottieClickTest" @longpress="lottieLongpressTest"
+            :style="{width:widthNum+'rpx',height:heightNum+'px',background:yanse}">
+        </uts-animation-view>
+
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                hidden: false,
+                autoplay: false,
+                action: "play",
+                loop: false,
+                yanse: "red",
+                widthNum: 750,
+                heightNum: 200,
+                comShow: true,
+                animUrl: "/static/anim_a.json"
+            }
+        },
+
+        methods: {
+
+            changeAutoPlay: function() {
+                this.autoplay = !this.autoplay
+            },
+            changeUrl: function() {
+                if (this.animUrl == "/static/anim_a.json") {
+                    this.animUrl = "/static/anim_b.json"
+                } else {
+                    this.animUrl = "/static/anim_a.json"
+                }
+            },
+
+			changeServerUrl: function() {
+                this.animUrl = "https://b.bdstatic.com/miniapp/images/lottie_example_one.json"
+            },
+            changeAction: function(type) {
+                if (type == 1) {
+                    this.action = "play"
+                } else if (type == 2) {
+                    this.action = "pause"
+                } else if (type == 3) {
+                    this.action = "stop"
+                }
+            },
+            changeLoop: function() {
+                this.loop = !this.loop
+            },
+            testAnimEnd: function(res) {
+                console.log("testAnimEnd");
+            },
+
+            changeRepeat: function(res) {
+                let repeatConfig = {
+                    count: 3,
+                    mode: "restart"
+                }
+                this.$refs["animView"].updateRepeatConfig(repeatConfig, function(res) {
+                    console.log(res);
+                });
+
+            },
+            lottieClickTest: function(res) {
+                console.log("lottieClickTest");
+                console.log(res);
+            },
+            lottieLongpressTest: function(res) {
+                console.log("lottieClickTest");
+                console.log(res);
+            },
+        }
+    }
+</script>
+
+```
+
+以上，我们完成了 `uts-animation-view`组件的集成和使用工作
+
+
+### 运行和测试
+
+在当前例子中，因为配置了额外的第三方依赖，需要自定义基座方能使用
+
+
+
+## UTS开发容器组件
+
+### 简介
+
+组件一般有两种场景，第一种是： 单标签组件
+```html
+<uts-view style="xxxx"/>
+```
+
+我们上面介绍的 `uts-hello-view`或者`uts-animation-view`都是这种类型
+
+第二种是 作为容器使用：
+
+```html
+<uts-view >
+	<text> 文字子组件</text>
+	<image src="https://xxx">
+<uts-view >
+```
+### 声明
+
+UTS组件作为容器组件与普通View组件遵循完全相同的规范，
+
+唯一的区别在于 当组件布局中包含 `<slot>` 标签时，编译器会自动将其转换为容器组件
+
+::: preview
+
+> Android
+
+```ts
+<template>
+	<view>
+		<slot/>
+	</view>
+</template>
+<script lang="uts">
+
+	import LinearLayout from 'android.widget.LinearLayout'
+
+	//原生提供以下属性或方法的实现
+	export default {
+		name: "uts-hello-container",
+
+		NVLoad(): LinearLayout {
+			let contentLayout = new LinearLayout($androidContext)
+			return contentLayout
+		}
+
+	}
+</script>
+<style>
+
+</style>
+
+```
+
+> iOS
+
+```ts
+<template>
+	<view>
+		<slot></slot>
+	</view>
+</template>
+<script lang="uts">
+	import {
+		UIView
+	} from 'UIKit'
+	//原生提供以下属性或方法的实现
+	export default {
+		name: "uts-hello-container",
+		NVLoad(): UIView {
+			let view = new UIView()
+			return view
+		}
+
+	}
+</script>
+```
+
+:::
+
+如上，我们即可到了一个最简的UTS容器组件
+
+
+### 使用容器组件
+
+UTS容器组件的使用与Vue等常见的前端容器组件一致。唯一要注意的是，目前UTS容器组件还不支持 具名插槽。
+
+如下是一个容器组件的使用示例
+
+
+```js
+<template>
+	<uts-hello-container>
+		<text>UTS contianer组件</text>
+		<button text="点击按钮内容" style="width:375px;height: 375px;background-color: aqua;"></button>
+	</uts-hello-container>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
+```
+
+### 应用程序生命周期函数监听
+ UTS 组件同样支持对应用程序生命周期函数的监听，方式和 UTS 插件中的完全一致。具体使用方法[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#hooksClass)
+
+
+
+## 快速体验
+
+开发者可以使用[Hello UTS](https://gitcode.net/dcloud/hello-uts) 快速体验UTS 组件开发
+
+Lottie动画示例,对应的源码实现：~/uni_modules/uts-animation-view
+
+`uts-animation-view`动画示例,对应的源码实现：~/uni_modules/uts-animation-view
+
+
+
+## 常见问题
+
+### 使用者需要指定 组件宽高
+
+```
+<uts-hello-view buttonText="点击按钮内容" style="width:375px;height: 375px;background-color: aqua;"></uts-hello-view>
+```
+
+如果不通过style 指定组件宽高，会导致组件不显示
+
+
+### UTS-Android 插件涉及的像素单位说明： rpx,逻辑像素px,物理像素px
+
+|单位|说明|使用场景|
+|----|---|---|
+|逻辑像素px |逻辑像素 对应到 android中的 dp| 组件使用者 在页面css中使用 举例：`width:480px` |
+|物理像素px |真实的设备像素，与dp 直接的换算关系是 dp * 屏幕密度 = 物理像素 px| android 原生api 传入和返回的单位均为物理像素，比如 设置layoutParam 参数，获取View宽高等 |
+|rpx |屏幕宽度固定750单位前提下的逻辑像素| 组件使用者 在页面css中使用 举例：`width:750rpx`,可以使用UTSAndroid.rpx2px() 函数进行rpx 和 逻辑像素 px的转换|
+
+为了让组件使用者的有更好的体验，UTS 插件 应该以 **逻辑像素 px** 作为标准的像素单位：
+
++ 1 内置的UTS插件/组件，涉及对外交互时会自动进行单位转换，抹平相关差异。比如 `swiper`等组件监听滑动距离等场景
+
++ 2 建议 插件开发者的插件在设计对外像素单位时也进行单位的转换，以逻辑像素px 作为输出结果
+
+
+
+
+
+
diff --git a/docs/plugin/uts-component-vue.md b/docs/plugin/uts-component-vue.md
new file mode 100644
index 0000000000000000000000000000000000000000..37ecf3338d93d0c352631a8f718a88a2570db0e9
--- /dev/null
+++ b/docs/plugin/uts-component-vue.md
@@ -0,0 +1,511 @@
+# uts插件 - 标准模式组件开发
+
+> HBuilderX4.31 及以上版本支持  
+
+本文重点在于讲述如何在app-android和app-ios上，使用vue组件开发规范封装原生UI封装为 uni-app x 项目使用的UTS组件，供使用者在uvue页面template中以组件的方式调用。  
+主要思路是将app平台的原生view关联内置 [native-view](../component/native-view.md) 组件，实现UTS组件的特定功能及UI展示。  
+
+
+
+## 前置条件
+
+继续阅读文档前，开发者需要了解以下前置条件：
+
+- 了解 `标准模式` 和 `uni-app兼容模式` 的差异，详情参考[uts插件开发概述](./uts-component.md)
+- 了解 [uts语法](/uts/) 和 [uts原生插件](uts-plugin.md)
+- 了解 [vue组件](https://uniapp.dcloud.net.cn/tutorial/vue3-components.html)
+- 了解 [native-view组件](../component/native-view.md)
+
+
+
+## UTS插件-标准模式组件目录结构
+
+<pre v-pre="" data-lang="">
+<code class="lang-" style="padding:0">
+┌─components                      // vue组件代码
+|   ├─xxx                      // vue组件名称文件夹  xxx代替组件名称
+|       ├─xxx.uvue             // vue组件uts代码 xxx代替组件名称
+├─static                          // 静态资源
+├─utssdk
+│	├─app-android                 //Android平台目录
+│	│	├─assets                  //Android原生assets资源目录，可选
+│	│	├─libs                    //Android原生库目录，可选
+│	│	├─res                     //Android原生res资源目录，可选
+│	│	├─AndroidManifest.xml     //Android原生应用清单文件，可选
+│	│	├─config.json             //Android原生配置文件
+│	│	├─index.uts               //Android原生插件能力实现，可选
+│	├─app-ios                     //iOS平台目录
+│	│	├─Frameworks              //iOS原生依赖的第三方 framework 依赖库存放目录，可选
+│	│	├─Resources               //iOS原生所依赖的资源文件存放目录，可选
+│	│	├─info.plist              //iOS原生所需要添加到主 info.plist 文件中的配置文件，可选
+│	│	├─UTS.entitlements        //iOS原生所需要添加到主工程 .entitlements 文件中的配置文件，可选
+│	│	├─config.json             //iOS原生配置文件
+│	│	├─index.uts               //iOS原生插件能力实现，可选
+│	├─web                         //web平台目录
+│	│	└─index.uts
+│	└─index.uts                   // 跨平台插件能力实现，可选
+└─package.json                    // 插件清单文件
+</code>
+</pre>
+
+如上所示，UTS插件-标准模式组件目录结构与UTS插件基本相同，差别在于components目录，vue组件代码存放components目录下。
+
+其他目录文件详情可参考[UTS插件文档](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html#%E6%8F%92%E4%BB%B6%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84)
+
+
+
+## 开发UTS插件-标准模式组件
+
+### 构建标准模式组件
+
+HBuilder X 选中你的项目，项目根目录选中uni_modules目录，右键选择新建uni_modules插件，弹窗后分类选择 “UTS插件-标准模式组件”，填写组件名称，以下均已 native-button 为例
+
+![](https://web-ext-storage.dcloud.net.cn/doc/uts/uts_plugin/create-uts-vue-component.png)
+
+创建完毕 HBuilder X 会自动构建模版文件，参考:`UTS插件-标准模式组件目录结构`
+
+
+### 标准模式组件功能实现
+
+#### 添加 native-view
+
+构建标准模式组件后，HBuilder X 会自动创建components/native-button/native-button.uvue文件，在该文件编写代码添加 native-view 标签
+
+```html
+<template>
+	<native-view></native-view>
+</template>
+```
+
+#### native-view 与 原生对象关联
+
+native-view 初始化会触发 @init 事件，此时创建NativeButton对象，native-button.uvue代码中用NativeButton对象调用插件相关的API。将 UniNativeViewElement 传递给NativeButton对象，进行关联绑定
+
+[NativeButton](#实现nativebutton对象)是在utssdk目录构建的原生对象。NativeButton对象内部处理原生view与native-view绑定关联业务
+
+::: preview
+
+> 组合式 API
+
+```html
+<template>
+	<native-view @init="onviewinit"></native-view>
+</template>
+<script setup lang="uts">
+	//引入 NativeButton 原生对象
+	import { NativeButton } from "@/uni_modules/native-button";
+	let button : NativeButton | null = null
+	//native-view初始化时触发此方法
+	function onviewinit(e : UniNativeViewInitEvent) {
+		//获取UniNativeViewElement 传递给NativeButton对象
+		button = new NativeButton(e.detail.element);
+	}
+</script>
+```
+
+> 选项式 API
+
+```html
+<template>
+	<native-view @init="onviewinit"></native-view>
+</template>
+<script lang="uts">
+	//引入 NativeButton 原生对象
+	import { NativeButton } from "@/uni_modules/native-button";
+	export default {
+		data() {
+			return {
+				button: null as NativeButton | null
+			}
+		},
+		methods: {
+			//native-view初始化时触发此方法
+			onviewinit(e : UniNativeViewInitEvent) {
+				//获取UniNativeViewElement 实例化NativeButton将element以构造参数传递给NativeButton对象
+				this.button = new NativeButton(e.detail.element);
+			}
+		}
+	}
+</script>
+```
+
+:::
+
+#### 组件声明方法
+
+在 methods 节点中添加updateText方法，native-button组件使用者可调用该方法更新native-button文案。 [页面调用组件方法](https://doc.dcloud.net.cn/uni-app-x/vue/component.html#page-call-component-method)
+
+::: preview
+
+> 组合式 API
+
+```ts
+<script setup lang="uts">
+	//引入 NativeButton 原生对象
+	import { NativeButton } from "@/uni_modules/native-button";
+	let button : NativeButton | null = null
+	//声明方法
+	function updateText(value : string) {
+		button?.updateText(value)
+	}
+</script>
+```
+
+> 选项式 API
+
+```ts
+methods: {
+	//对外函数
+	updateText(value: string) {
+		this.button?.updateText(value)
+	}
+}
+```
+
+:::
+
+#### 组件声明props
+
+native-button 声明props，例如native-button的文案信息text属性，按vue组件规范监听到text属性更新，通过NativeButton对象驱动更新原生view属性，在components/native-button/native-button.uvue编写如下代码，具体参考[vue组件Props规范](https://cn.vuejs.org/guide/typescript/composition-api#typing-component-props)
+
+::: preview
+
+> 组合式 API
+
+```html
+<script setup lang="uts">
+	//声明属性
+	const props = defineProps<{ text : string }>()
+	//声明方法
+	function updateText(value : string) {
+		button?.updateText(value)
+	}
+	//监听属性变化
+	watchEffect(() => {
+		// console.log("watchEffect   "+props.text)
+		const text = props.text
+		updateText(text)
+	})
+</script>
+```
+
+> 选项式 API
+
+```html
+<script lang="uts">
+	export default {
+		props: {
+			"text": {
+				type: String,
+				default: ''
+			}
+		},
+		watch: {
+			"text": {
+				handler(newValue : string, oldValue : string) {
+					this.value = newValue
+					this.button?.updateText(this.value)
+				},
+				immediate: true
+			},
+		},
+	}
+</script>
+```
+
+:::
+
+#### 组件声明事件
+
+native-button 声明事件，例如原生组件触发点击事件@buttonTap, NativeButton对象通过 UniNativeViewElement 的 dispatchEvent 函数触发native-view的 @customClick 自定义事件。native-button.uvue监听native-view的 @customClick 自定义事件实现emit触发声明事件，具体参考[vue组件事件规范](https://cn.vuejs.org/guide/typescript/composition-api#typing-component-emits)
+
+::: preview
+
+> 组合式 API
+
+```html
+<template>
+	<native-view @customClick="ontap"></native-view>
+</template>
+<script setup lang="uts">
+	//声明事件
+	const emit = defineEmits<{
+		(e : "buttonTap", event : UniNativeViewEvent) : void
+	}>()
+	
+	function ontap(e : UniNativeViewEvent) {
+		emit("buttonTap", e)
+	}
+</script>
+```
+
+> 选项式 API
+
+```html
+<template>
+	<native-view @customClick="ontap"></native-view>
+</template>
+<script lang="uts">
+	export default {
+		methods: {
+			ontap(e: UniNativeViewEvent) {
+				this.$emit("buttonTap", e)
+			}
+		}
+	}
+</script>
+```
+
+:::
+
+**注意：**
+
+目前自定义事件参数仅支持[UniNativeViewEvent](../component/native-view#uninativeviewevent)
+
+native-button/components/native-button/native-button.uvue 最终代码如下：
+
+::: preview
+
+> 组合式 API
+
+``` html
+<template>
+	<native-view @init="onviewinit" @customClick="ontap"></native-view>
+</template>
+<script setup lang="uts">
+	import { NativeButton } from "@/uni_modules/native-button";
+	let button : NativeButton | null = null
+	
+	//声明属性
+	const props = defineProps<{ text : string }>()
+	
+	//声明事件
+	const emit = defineEmits<{
+		(e : "buttonTap", event : UniNativeViewEvent) : void
+	}>()
+	
+	//声明方法
+	function updateText(value : string) {
+		button?.updateText(value)
+	}
+	
+	//监听属性变化
+	watchEffect(() => {
+		const text = props.text
+		updateText(text)
+	})
+
+	//native-view初始化时触发此方法
+	function onviewinit(e : UniNativeViewInitEvent) {
+		//获取UniNativeViewElement 传递给NativeButton对象
+		button = new NativeButton(e.detail.element);
+		updateText(props.text)
+	}
+
+	function ontap(e : UniNativeViewEvent) {
+		emit("buttonTap", e)
+	}
+
+	function onUnmounted() {
+		// iOS平台需要主动释放 uts 实例
+		button?.destroy()
+	}
+</script>
+```
+
+> 选项式 API
+
+```html
+<template>
+	<native-view @init="onviewinit" @customClick="ontap"></native-view>
+</template>
+<script lang="uts">
+	import { NativeButton } from "@/uni_modules/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.updateText(newValue)
+				},
+				immediate: true
+			},
+		},
+		methods: {
+			//native-view初始化时触发此方法
+			onviewinit(e : UniNativeViewInitEvent) {
+				//获取UniNativeViewElement 传递给NativeButton插件
+				this.button = new NativeButton(e.detail.element);
+				this.button?.updateText(this.value)
+			},
+			ontap(e: UniNativeViewEvent) {
+				this.$emit("buttonTap", e)
+			},
+			updateText(value: string) {
+				this.button?.updateText(value)
+			}
+		},
+		unmounted() {
+			// iOS平台需要主动释放 uts 实例
+			this.button?.destroy()
+		}
+	}
+</script>
+```
+
+:::
+
+#### 实现NativeButton对象
+
+utssdk目录实现不同平台的原生NativeButton对象，构造参数获取UniNativeViewElement对象与原生view绑定，封装原生view功能关联的API。
+
+::: preview
+
+> Android
+
+```uts
+import { Button } from "android.widget"
+
+export class NativeButton {
+	$element : UniNativeViewElement;
+
+	constructor(element : UniNativeViewElement) {
+		//接收传递过来的UniNativeViewElement
+		this.$element = element;
+		this.bindView();
+	}
+
+	button : Button | null = null;
+	bindView() {
+		//通过UniElement.getAndroidActivity()获取android平台activity 用于创建view的上下文
+		this.button = new Button(this.$element.getAndroidActivity()!);  //构建原生view
+		//限制原生Button 文案描述不自动大写
+		this.button?.setAllCaps(false)
+		//监听原生Button点击事件
+		this.button?.setOnClickListener(_ => {
+			const detail = {}
+			//构建自定义UniNativeViewEvent返回对象
+			const event = new UniNativeViewEvent("customClick", detail)
+			//触发原生Button的点击事件
+			this.$element.dispatchEvent(event)
+		})
+		//UniNativeViewEvent 绑定 安卓原生view
+		this.$element.bindAndroidView(this.button!);
+	}
+
+	updateText(text: string) {
+		//更新原生Button 文案描述
+		this.button?.setText(text)
+	}
+
+	destroy(){
+		//数据回收
+	}
+}
+```
+
+> iOS
+
+```uts
+import { UIButton, UIControl } from "UIKit"
+
+export class NativeButton {
+
+	element : UniNativeViewElement;
+	button : UIButton | null;
+
+	constructor(element : UniNativeViewElement) {
+    // 接收组件传递过来的UniNativeViewElement
+		this.element = element;
+		super.init()
+		this.bindView();
+	}
+
+	// element 绑定原生view
+	bindView() {
+    // 初始化原生 UIButton
+    this.button = new UIButton(type=UIButton.ButtonType.system)
+    // 构建方法选择器
+    const method = Selector("buttonClickAction")
+    // button 绑定点击回调方法
+    button?.addTarget(this, action = method, for = UIControl.Event.touchUpInside)
+    // UniNativeViewElement 绑定原生 view
+		this.element.bindIOSView(this.button!);
+	}
+
+	updateText(text : string) {
+    // 更新 button 显示文字
+		this.button?.setTitle(text, for = UIControl.State.normal)
+	}
+
+	/**
+	 * 按钮点击回调方法
+	 * 在 swift 中，所有target-action (例如按钮的点击事件，NotificationCenter 的通知事件等)对应的 action 函数前面都要使用 @objc 进行标记。
+	 */
+	@objc buttonClickAction() {
+    //构建自定义 UniNativeViewEvent 对象
+		let event = new UniNativeViewEvent("customClick")
+    //触发自定义事件
+		this.element.dispatchEvent(event)
+	}
+
+	destroy() {
+    // 释放 UTS 实例对象，避免内存泄露
+		UTSiOS.destroyInstance(this)
+	}
+}
+```
+
+:::
+
+更多实现可参考 标准模式组件 [native-button](https://gitcode.net/dcloud/hello-uni-app-x/-/tree/dev/uni_modules/native-button)
+
+此时一个简单的UTS插件-标准模式组件就完成了，
+
+**注意:**
++ UTS插件-标准模式组件的 components 目录下的代码中不能含有原生平台任何引用对象，这会导致vue原生组件无法跨平台，与原生平台关联的代码都应放在UTS插件中
++ ios平台需要vue组件主动释放 uts 实例，所以页面触发 unmounted 生命周期时需要调用 this.button?.destroy() 避免内存泄露
++ android平台 native-view 组件不支持border、background、box-shadow属性，可以使用view标签包裹native-view,在view标签设置以上属性
+
+
+### 页面引用UTS插件-标准模式组件
+
+以 native-button 为例, 创建标准模式组件的项目页面可以直接使用 native-button 标签，也可将native-button插件包放置其他项目的uni-modules文件夹中。项目页面即可使用 native-button 标签
+
+```html
+<template>
+	<view style="flex:1">
+		<native-button class="native-button" text="buttonText" @buttonTap="ontap"></native-button>
+	</view>
+</template>
+
+<script>
+	export default {
+		methods: {
+			ontap(e : UniNativeViewEvent) {
+			  console.log("ontap----------"+e.type)
+			}
+		}
+	}
+</script>
+
+<style>
+	.native-button {
+		height: 100px;
+		width: 200px;
+		margin: 25px auto 25px auto;
+	}
+</style>
+```
\ No newline at end of file
diff --git a/docs/plugin/uts-component.md b/docs/plugin/uts-component.md
index 1dbd48581ac671d5a11dcee7ef9f93d6a9c7bd8d..cf921306eb85f8dffafb918c56fcfb6dcbe7431c 100644
--- a/docs/plugin/uts-component.md
+++ b/docs/plugin/uts-component.md
@@ -1,1994 +1,64 @@
-# UTS 组件开发
+# uts插件 - 组件开发
 
-> 需HBuilderX 3.6.18 及之后版本
+uts插件的组件开发，简称`uts组件`，是uts插件的一个分支。uts插件提供了原生API的扩展，而uts组件提供了原生UI组件的开发模式。
 
-> app平台目前支持nvue/uvue，暂不支持vue
-
-UTS组件，是UTS插件的一个分支。UTS插件提供了原生API的扩展，而UTS组件提供了原生UI组件的开发模式。
-
-组件是一种独立，可复用的UI单元，用于单独封装和承担一定的代码逻辑。
+组件是一种独立、可复用的UI单元，用于单独封装和承担一定的代码逻辑。
 
 组件与插件的区别在于：前者以标签的形式，对外提供UI封装；后者则只提供API，虽然API可能涉及UI，但仍然是API，无法以标签方式在页面模板中引用。
 
 比如`<video>`是组件；`uni.showModal` 或 `uni.chooseVideo` 虽然有UI，但属于API。
 
-组件一般适用于封装非全屏的场景，即在页面中内嵌一个区域。如果需要你需要封装的UI是全屏界面，那没必要使用组件，通过UTS开发原生页面更简单。 [UTS开发原生页面示例](https://gitcode.net/dcloud/hello-uts/-/tree/master/uni_modules/uts-nativepage)
-
-当然UTS组件是多端的，一个UTS组件作为一个`uni_modules`，可同时支持app-Android、app-iOS、web、以及各家小程序组件。
-
-本文重点在于讲述如何在app-android和app-ios上，将一个原生UI封装为UTS组件，供使用者在页面template中以组件的方式调用。
-
-## 前置条件
-
-继续阅读文档前，开发者需要了解以下前置条件：
-
-- 了解 [uts语法](/uts/) 和 [uts原生插件](uts-plugin.md)
-- 了解 [Vue组件](https://uniapp.dcloud.net.cn/tutorial/vue3-components.html)
-
-
-## UTS组件简介
-
-#### 为什么使用UTS开发组件
-
-UTS组件，即：使用UTS语言在uni平台进行组件开发的技术。
-
-UTS组件的优势在于，它秉承了UTS的跨平台特性，统一的UTS语法，各终端不同的原生产出物。
-
-在Android平台会被编译渲染为Android原生View实例，IOS或其他终端平台也是如此。
-
-
-|				|uts组件					|uni原生组件				|Vue组件				|
-|:------		|:--------				|:-------- 				|:-------			|
-|开发语言		|uts					|java/object-c			|js/ts				|
-|组件载体		|App平台为系统原生View对象		|系统原生View对象		|WebView内部标签		|
-
-
-为了统一开发规范、降低使用门槛，UTS原生组件采用了Vue组件的语法，但会根据实际情况略有定制。
-
-即，您可以像写vue组件一样，使用uts语言来写一个UTS组件。
-
-## UTS组件结构解析
-
-
-#### UTS组件目录结构
-
-
-<pre v-pre="" data-lang="">
-	<code class="lang-" style="padding:0">
-┌─common                          // 可跨端公用的uts代码。推荐，不强制
-├─static                          // 静态资源
-├─utssdk
-│	├─app-android                 //Android平台目录
-│	│	├─assets                  //Android原生assets资源目录，可选
-│	│	├─libs                    //Android原生库目录，可选
-│	│	├─res                     //Android原生res资源目录，可选
-│	│	├─AndroidManifest.xml     //Android原生应用清单文件，可选
-│	│	├─config.json             //Android原生配置文件
-│	│	├─index.uts               //Android原生插件能力实现，可选
-|	|	└─index.vue               //Android原生组件能力实现，必选
-│	├─app-ios                     //iOS平台目录
-│	│	├─Frameworks              //iOS原生依赖的第三方 framework 依赖库存放目录，可选
-│	│	├─Resources               //iOS原生所依赖的资源文件存放目录，可选
-│	│	├─info.plist              //iOS原生所需要添加到主 info.plist 文件中的配置文件，可选
-│	│	├─UTS.entitlements        //iOS原生所需要添加到主工程 .entitlements 文件中的配置文件，可选
-│	│	├─config.json             //iOS原生配置文件
-│	│	├─index.uts               //iOS原生插件能力实现，可选
-|	|	└─index.vue               //iOS原生组件能力实现，必选
-│	├─web                         //web平台目录
-│	│	└─index.uts
-│	├─mp-alipay                   // 支付宝小程序平台，可选
-│	├─mp-baidu                    // 百度小程序平台，可选
-│	├─mp-jd                       // 京东小程序平台（仅限vue2），可选
-│	├─mp-kuaishou                 // 快手小程序平台，可选
-│	├─mp-lark                     // 飞书小程序平台，可选
-│	├─mp-qq                       // QQ小程序平台，可选
-│	├─mp-toutiao                  // 抖音小程序平台，可选
-│	├─mp-weixin                   // 微信小程序平台，可选
-│	├─mp-xhs                      // 小红书小程序平台（仅限vue2），可选
-│	└─index.uts                   // 跨平台插件能力实现，可选
-└─package.json                    // 插件清单文件
-</code>
-</pre>
-
-
-如上所示，UTS组件的目录结构与UTS插件基本相同
-
-唯一的差别在于，UTS组件入口文件有两个:
-
-+ 必选的index.vue 组件入口
-
-+ 可选的index.uts 函数能力入口
-
-
-用户如果在开发组件的同时，存在一些与组件无关的能力需要对外暴露，可以在index.uts中进行实现
-
-大多数情况下，我们只需要开发一个index.vue 即可，如果存在多个组件，可以新建多个 xxx.vue文件
-
-关于 index.vue 源码如何编写，我们会在下一个章节介绍
-
-
-
-#### index.vue源码结构
-
-
-下面是一个组件源码 index.vue 完整示例：
-
-**注意**
-
-- 目前UTS组件仅支持`export default {}`的选项式API，vue3的组合式API暂未支持。
-
-::: preview
-
-> Android
-
-```html
-
-<template>
-  <view>
-  </view>
-</template>
-
-<script lang="uts">
-  /**
-   * 引用 Android 系统库
-   * [可选实现，按需引入]
-   */
-  import TextUtils from 'android.text.TextUtils';
-  import Button from 'android.widget.Button';
-  import View from 'android.view.View';
-
-  /**
-   * 引入三方库
-   * [可选实现，按需引入]
-   *
-   * 在 Android 平台引入三方库有以下两种方式：
-   * 1、[推荐] 通过 仓储 方式引入，将 三方库的依赖信息 配置到 config.json 文件下的 dependencies 字段下。详细配置方式[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#dependencies)
-   * 2、直接引入，将 三方库的aar或jar文件 放到libs目录下。更多信息[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#android%E5%B9%B3%E5%8F%B0%E5%8E%9F%E7%94%9F%E9%85%8D%E7%BD%AE)
-   *
-   * 在通过上述任意方式依赖三方库后，使用时需要在文件中 import
-   * import { LottieAnimationView } from 'com.airbnb.lottie.LottieAnimationView'
-   */
-
-  /**
-   * UTSAndroid 为平台内置对象，不需要 import 可直接调用其API，[详见](https://uniapp.dcloud.net.cn/uts/utsandroid.html#utsandroid)
-   */
-
-  //原生提供以下属性或方法的实现
-  export default {
-    /**
-     * 组件名称，也就是开发者使用的标签
-     */
-    name: "uts-hello-view",
-    /**
-     * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
-     */
-    emits: ['buttonclick'],
-    /**
-     * 属性声明，组件的使用者会传递这些属性值到组件
-     */
-    props: {
-      "buttontext": {
-        type: String,
-        default: "点击触发"
-      }
-    },
-    /**
-     * 组件内部变量声明
-     */
-    data() {
-      return {}
-    },
-    /**
-     * 属性变化监听器实现
-     */
-    watch: {
-      "buttontext": {
-        /**
-         * 这里监听属性变化，并进行组件内部更新
-         */
-        handler(newValue : string, oldValue : string) {
-          if (!TextUtils.isEmpty(newValue) && newValue != oldValue) {
-            this.$el?.setText(newValue);
-          }
-        },
-        immediate: false // 创建时是否通过此方法更新属性，默认值为false
-      },
-    },
-    /**
-     * 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
-     * ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
-     * 
-     * 注意：如果在data中声明了一个变量，此时组件配置了 expose字段，但未在expose字段中包含此变量。会导致该变量被标记为`private`：仅能在组件内使用，不能在组件外访问
-     */
-    expose: ['doSomething'],
-    methods: {
-      /**
-       * 对外公开的组件方法
-       *
-       * uni-app中调用示例：
-       * this.$refs["组件ref"].doSomething("uts-button");
-       *
-       * uni-app x中调用示例：
-       * 1、引入对应Element
-       * import { UtsButtonElement(组件名称以upper camel case方式命名 + Element) } from 'uts.sdk.modules.utsComponent(组件目录名称以lower camel case方式命名)';
-       * 2、(this.$refs["组件ref"] as UtsButtonElement).doSomething("uts-button");
-       * 或 (uni.getElementById("组件id") as UtsButtonElement).doSomething("uts-button");
-       */
-      doSomething(param : string) {
-        console.log(param);
-      },
-      /**
-       * 内部使用的组件方法
-       */
-      privateMethod() {
-
-      }
-    },
-    /**
-     * [可选实现] 组件被创建，组件第一个生命周期，
-     * 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
-     */
-    created() {
-
-    },
-    /**
-     * [可选实现] 对应平台的view载体即将被创建，对应前端beforeMount
-     */
-    NVBeforeLoad() {
-
-    },
-    /**
-     * [必须实现] 创建原生View，必须定义返回值类型
-     * 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
-     * （Android需要明确知道View类型，需特殊校验）
-     */
-    NVLoad() : Button {
-      let button = new Button($androidContext!);
-      button.setText("点击触发");
-      button.setOnClickListener(new ButtonClickListener(this));
-      return button;
-    },
-    /**
-     * [可选实现] 原生View已创建
-     */
-    NVLoaded() {
-
-    },
-    /**
-     * [可选实现] 原生View布局完成
-     */
-    NVLayouted() {
-
-    },
-    /**
-     * [可选实现] 原生View将释放
-     */
-    NVBeforeUnload() {
-
-    },
-    /**
-     * [可选实现] 原生View已释放，这里可以做释放View之后的操作
-     */
-    NVUnloaded() {
-
-    },
-    /**
-     * [可选实现] 组件销毁
-     */
-    unmounted() {
-
-    },
-    /**
-     * [可选实现] 自定组件布局尺寸，用于告诉排版系统，组件自身需要的宽高
-     * 一般情况下，组件的宽高应该是由终端系统的排版引擎决定，组件开发者不需要实现此函数
-     * 但是部分场景下，组件开发者需要自己维护宽高，则需要开发者重写此函数
-     */
-    NVMeasure(size : UTSSize,mode:UTSMeasureMode) : UTSSize {
-      // size.width = 300.0.toFloat();
-      // size.height = 200.0.toFloat();
-      return size;
-    }
-  }
-
-  /**
-   * 定义按钮点击后触发回调的类
-   * [可选实现]
-   */
-  class ButtonClickListener extends View.OnClickListener {
-    /**
-     * 如果需要在回调类或者代理类中对组件进行操作，比如调用组件方法，发送事件等，需要在该类中持有组件对应的原生类的对象
-     * 组件原生类的基类为 UTSComponent，该类是一个泛型类，需要接收一个类型变量，该类型变量就是原生组件的类型
-     */
-    private comp : UTSComponent<Button>;
-
-    constructor(comp : UTSComponent<Button>) {
-      super();
-      this.comp = comp;
-    }
-
-    /**
-     * 按钮点击回调方法
-     */
-    override onClick(v ?: View) {
-      console.log("按钮被点击");
-      // 发送事件
-      this.comp.$emit("buttonclick");
-    }
-  }
-</script>
-
-<style>
-
-</style>
-
-```
-
-> iOS
-
-```html
-<template>
-  <view class="defaultStyles">
-  </view>
-</template>
-<script lang="uts">
-  /**
-   * 引用 iOS 系统库
-   * [可选实现，按需引入]
-   */
-  import {
-    UIButton,
-    UIControl
-  } from "UIKit"
-
-  /**
-   * 引入三方库
-   * [可选实现，按需引入]
-   *
-   * 在 iOS 平台引入三方库有以下两种方式：
-   * 1、通过引入三方库framework 或者.a 等方式，需要将 .framework 放到 ./Frameworks 目录下，将.a 放到 ./Libs 目录下。更多信息[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#ios-平台原生配置)
-   * 2、通过 cocoaPods 方式引入，将要引入的 pod 信息配置到 config.json 文件下的 dependencies-pods 字段下。详细配置方式[详见](https://uniapp.dcloud.net.cn/plugin/uts-ios-cocoapods.html)
-   *
-   * 在通过上述任意方式依赖三方库后，使用时需要在文件中 import:
-   * 示例：import { LottieAnimationView, LottieAnimation, LottieLoopMode	} from 'Lottie'
-   */
-
-  /**
-   * UTSiOS、UTSComponent 为平台内置对象，不需要 import 可直接调用其API，[详见](https://uniapp.dcloud.net.cn/uts/utsios.html)
-   */
-  import { UTSComponent } from "DCloudUTSFoundation"
-
-  //原生提供以下属性或方法的实现
-  export default {
-    data() {
-      return {
-      };
-    },
-    /**
-     * 组件名称，也就是开发者使用的标签
-     */
-    name: "uts-hello-view",
-    /**
-     * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
-     */
-    emits: ['buttonclick'],
-    /**
-     * 属性声明，组件的使用者会传递这些属性值到组件
-     */
-    props: {
-      /**
-       * 字符串类型 属性：buttontext  需要设置默认值
-       */
-      "buttontext": {
-        type: String,
-        default: "点击触发"
-      }
-    },
-    /**
-     * 组件内部变量声明
-     */
-
-    /**
-     * 属性变化监听器实现
-     */
-    watch: {
-      "buttontext": {
-        /**
-         * 这里监听属性变化，并进行组件内部更新
-         */
-        handler(newValue : String, oldValue : String) {
-          this.$el.setTitle(newValue, for = UIControl.State.normal)
-        },
-        /**
-         * 创建时是否通过此方法更新属性，默认值为false
-         */
-        immediate: false
-      },
-    },
-    /**
-     * 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
-     * ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
-     */
-    expose: ['doSomething'],
-    methods: {
-      /**
-       * 对外公开的组件方法
-       * 在uni-app中调用组件方法，可以通过指定ref的方式，例如指定uts-button 标签的ref 为 ’button‘， 调用时使用：this.$refs["button"].doSomething('message');
-       */
-      doSomething(paramA : string) {
-        // 这是组件的自定义方法
-        console.log(paramA, 'this is in uts-button component')
-      },
-
-
-      /**
-       * 内部使用的组件方法
-       */
-    },
-
-
-    /**
-     * 组件被创建，组件第一个生命周期，
-     * 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
-     * [可选实现]
-     */
-    created() {
-
-    },
-    /**
-     * 对应平台的view载体即将被创建，对应前端beforeMount
-     * [可选实现]
-     */
-    NVBeforeLoad() {
-
-    },
-    /**
-     * 创建原生View，必须定义返回值类型
-     * 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
-     * [必须实现]
-     */
-    NVLoad() : UIButton {
-      //必须实现
-      buttonClickListsner = new ButtonClickListsner(this)
-
-      let button = new UIButton()
-      button.setTitle(this.buttontext, for = UIControl.State.normal)
-      // 在 swift target-action 对应的方法需要以OC的方式来调用，那么OC语言中用Selector来表示一个方法的名称（又称方法选择器），创建一个Selector可以使用 Selector("functionName") 的方式。
-      const method = Selector("buttonClickAction")
-      if (buttonClickListsner != null) {
-        button.addTarget(buttonClickListsner!, action = method, for = UIControl.Event.touchUpInside)
-      }
-      return button
-    },
-
-    /**
-     * 原生View已创建
-     * [可选实现]
-     */
-    NVLoaded() {
-      /**
-       * 通过 this.$el 来获取原生控件。
-       */
-      this.$el.setTitle(this.buttontext, for = UIControl.State.normal)
-    },
-    /**
-     * 原生View布局完成
-     * [可选实现]
-     */
-    NVLayouted() {
-
-    },
-    /**
-     * 原生View将释放
-     * [可选实现]
-     */
-    NVBeforeUnload() { },
-    /**
-     * 原生View已释放，这里可以做释放View之后的操作
-     * [可选实现]
-     */
-    NVUnloaded() {
-
-    },
-    /**
-     * 组件销毁
-     * [可选实现]
-     */
-    unmounted() { }
-
-    /**
-     * 更多组件开发的信息详见：https://uniapp.dcloud.net.cn/plugin/uts-component.html
-     */
-  }
-
-  /**
-   * 定义按钮点击后触发回调的类
-   * [可选实现]
-   */
-  class ButtonClickListsner {
-    /**
-     * 如果需要在回调类或者代理类中对组件进行操作，比如调用组件方法，发送事件等，需要在该类中持有组件对应的原生类的对象。
-     * 组件原生类的基类为 UTSComponent，该类是一个泛型类，需要接收一个类型变量，该类型变量就是原生组件的类型。
-     */
-    private component : UTSComponent<UIButton>
-
-    constructor(component : UTSComponent<UIButton>) {
-      this.component = component
-      super.init()
-    }
-
-    /**
-     * 按钮点击回调方法
-     * 在 swift 中，所有target-action (例如按钮的点击事件，NotificationCenter 的通知事件等)对应的 action 函数前面都要使用 @objc 进行标记。
-     * [可选实现]
-     */
-    @objc buttonClickAction() {
-      console.log("按钮被点击")
-      // 发送事件
-      this.component.__$$emit("buttonclick");
-    }
-  }
-
-  /**
-   * 定义回调类或者代理类的实例
-   * [可选实现]
-   */
-  let buttonClickListsner : ButtonClickListsner | null = null
-</script>
-
-<style>
-
-</style>
-```
-
-:::
-
-index.vue 要素可以分为以下几类：
-
-+ 配置：
-
-	name：组件的使用标签，可以省略，若省略则默认为组件名称
-
-	emits：组件允许的消息事件名称，如果没有组件消息，不需要配置
-
-+ 属性：
-
-	props：需要由组件的使用者提供，比如一个Image组件，会需要一个path属性作为图像路径来源
-
-	watch：属性的监听实现，用来监听属性数据更新。
-
-+ 数据：
-
-	data：组件内部数据定义，用于组件内部逻辑处理，不对外暴露
-
-+ 方法：
-
-	methods：组件方法定义，可以通过与expose组合使用，区分对内方法和对外方法
-
-	expose：与methods 字段配合使用，用以区分组件对内方法和对外方法
-
-
-+ 生命周期：
-
-	组件需要重点处理 内存创建/销毁，View载体创建/销毁 过程中的资源管理，具体参考生命周期章节
-
-+ 内置对象：
-
-	为了方便组件开发者，UTS组件内置了部分变量与函数，具体参考内置对象与函数章节
-
-
-#### 生命周期
-
-组件开发者需要重点关注组件的生命周期，以便进行资源的初始化和回收
-
-```mermaid
-graph TD;
-		Create-->NVBeforeLoad;
-	subgraph View生命周期
-		NVBeforeLoad-->NVLoad;
-		NVLoad-->NVLoaded;
-		NVLoaded-->NVLayouted;
-		NVLayouted-->NVBeforeUnload;
-	end
-		NVBeforeUnload-->unmounted;
-
-```
-
-|函数名			|描述				|建议行为		|是否可选	|
-|:----			|:---				|:---			|:---		|
-|created		|组件在内存中被创建	|开发者可以在这里执行一些需要最早执行的初始化逻辑|可选|
-|NVBeforeLoad	|组件对应平台的view载体，即将被创建|开发者可以在这里执行一些需要在View创建前初始化的逻辑|可选|
-|NVLoad			|组件view载体正在被创建实现|开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型|必须实现|
-|NVLoaded			|组件view载体创建完成|需要在对应的原生view创建完成后执行的逻辑|可选|
-|NVLayouted		|组件对应平台的view载体已布局结束	|需要在view布局结束后执行的逻辑	|可选|
-|NVBeforeUnload	|view载体即将被卸载				|View卸载前，需要回收资源的逻辑	|可选|
-|NVUnloaded		|view载体已经被卸载				|View卸载后，需要回收资源的逻辑	|可选|
-|unmounted		|组件在内存被销毁				|资源回收逻辑					|可选|
-
-
-除上述生命周期外，还存在下列可选周期函数：
-
-+ NVMeasure
-
-NVMeasure 用于告诉排版系统，组件自身需要的宽高，具体的调用时机由排版系统决定。
-
-一般情况下，组件的宽高应该是由终端系统的排版引擎决定，组件开发者不需要实现此函数。
-
-但是部分场景下，组件开发者需要自己维护宽高，则需要开发者重写此函数
-
-
-注意:
-
-    + 只有非容器组件生效，容器组件不应该重写此函数
-
-    + HBuilder X 4.25 版本后新增 `UTSMeasureMode` 类型入参，包含组件宽高在css中的设定： 0 代表未指定css中的宽高属性 / 1 代表已指定css中的宽高属性
-
-
-+ NVUpdateStyles
-
-需要HBuilder X 3.96版本
-
-NVUpdateStyles 用来监听组件的外部style 变化，通常用来写响应外部的css样式变化从而动态更新组件内部状态场景
-
-我们可以在组件内部这样实现:
-
-```uts
-NVUpdateStyles(styles: Map<String, any>){
-	console.log("NVUpdateStyles",styles)
-}
-```
-
-+ NVRecycler 
-
-HBuilderX 4.0版本起支持，仅uni-app x App-Android平台支持
-
-当UTS组件在`list-view`组件中使用时，由于[复用机制](../component/list-view.md)，UTS组件可能表现异常（UI、事件回调等），因此，组件开发者需要在此函数中进行相应的逻辑处理。
-
-比如我们使用UTS组件封装了一个Android原生的`EditText`控件（输入框），代码如下
-
-```html
-NVLoad() : EditText {
-	let editText = new EditText($androidContext!);
-	return editText;
-}
-```
-
-然后我们在`list-view`组件中使用该UTS组件，当我们在第一个输入框中随机输入几个字符后，开始滚动列表，会发现之前输入的字符又出现在下面某个`list-item`中，这就是一个典型的由于复用机制导致的UI状态异常问题。此时我们就需要在NVRecycler()函数中处理该问题，代码如下
-
-```html
-NVRecycler() {
-	// 发生复用时置空输入框内容
-	this.$el?.setText("")
-}
-```
-
-[vue3 生命周期暂不支持](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90)
-
-
-#### 内置对象和函数
-
-为了方便组件开发者使用，UTS 组件内部内置了下列对象：
-
-|变量名			|类型		|简介				|平台限制	|方法&属性	|
-|:-------		|:--------	|:--------			|:---		|:---			|
-|$el			|对象		|当前View实例对象	|全部平台	|开发者在NVLoad返回的对象类型|
-|$androidContext|对象		|当前组件上下文(可为空)		|仅android	|android平台对应Context对象|
-|$emit("event",Any)|函数		|发送已注册的事件	|全部平台	|$emit(事件名称-必选,事件参数可选)|
-
-**注意**
-
-`UTSAndroid.getUniActivity()/UTSAndroid.getAppContext()` 在组件内不建议使用，请使用`$androidContext`来替代
-
-#### 通用事件
-
-对于UTS组件来说，除了通过 $emit/emits 函数来自定义组件事件外，UTS组件还内置了下列通用事件：
-
-
-|事件名称			|简介
-|:-------			|:--------
-|click				|组件点击事件响应
-|longpress			|组件长按事件响应
-
-
-通用事件，组件的使用者无需实现，直接使用
-
-```html
-<uts-hello-view buttonClick="自定义事件处理函数" click="通用点击事件处理函数" longpress="通用长按事件处理函数"/>
-```
-
-
-## 简单View的示例
-
-
-本章节以 一个极简的组件开发为例，介绍说明UTS组件开发流程
-
-
-#### 创建插件
-
-在HBuilder X 中选中Uni-App项目下 uni_modules目录,右键选择新建`uni_modules插件`
-
-![创建界面](https://native-res.dcloud.net.cn/images/uts/component/image0.png)
-
-
-这是创建后的目录结构
-
-![目录结构](https://native-res.dcloud.net.cn/images/uts/component/image1.jpg)
-
-
-#### 编写逻辑
-
-打开index.vue，键入下面的组件源码:
-
-::: preview
-
-> Android
-
-```html
-
-<template>
-  <view>
-  </view>
-</template>
-
-<script lang="uts">
-  /**
-   * 引用 Android 系统库
-   * [可选实现，按需引入]
-   */
-  import TextUtils from 'android.text.TextUtils';
-  import Button from 'android.widget.Button';
-  import View from 'android.view.View';
-
-  /**
-   * 引入三方库
-   * [可选实现，按需引入]
-   *
-   * 在 Android 平台引入三方库有以下两种方式：
-   * 1、[推荐] 通过 仓储 方式引入，将 三方库的依赖信息 配置到 config.json 文件下的 dependencies 字段下。详细配置方式[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#dependencies)
-   * 2、直接引入，将 三方库的aar或jar文件 放到libs目录下。更多信息[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#android%E5%B9%B3%E5%8F%B0%E5%8E%9F%E7%94%9F%E9%85%8D%E7%BD%AE)
-   *
-   * 在通过上述任意方式依赖三方库后，使用时需要在文件中 import
-   * import { LottieAnimationView } from 'com.airbnb.lottie.LottieAnimationView'
-   */
-
-  /**
-   * UTSAndroid 为平台内置对象，不需要 import 可直接调用其API，[详见](https://uniapp.dcloud.net.cn/uts/utsandroid.html#utsandroid)
-   */
-
-  //原生提供以下属性或方法的实现
-  export default {
-    /**
-     * 组件名称，也就是开发者使用的标签
-     */
-    name: "uts-hello-view",
-    /**
-     * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
-     */
-    emits: ['buttonclick'],
-    /**
-     * 属性声明，组件的使用者会传递这些属性值到组件
-     */
-    props: {
-      "buttontext": {
-        type: String,
-        default: "点击触发"
-      }
-    },
-    /**
-     * 组件内部变量声明
-     */
-    data() {
-      return {}
-    },
-    /**
-     * 属性变化监听器实现
-     */
-    watch: {
-      "buttontext": {
-        /**
-         * 这里监听属性变化，并进行组件内部更新
-         */
-        handler(newValue : string, oldValue : string) {
-          if (!TextUtils.isEmpty(newValue) && newValue != oldValue) {
-            this.$el?.setText(newValue);
-          }
-        },
-        immediate: false // 创建时是否通过此方法更新属性，默认值为false
-      },
-    },
-    /**
-     * 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
-     * ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
-     */
-    expose: ['doSomething'],
-    methods: {
-      /**
-       * 对外公开的组件方法
-       *
-       * uni-app中调用示例：
-       * this.$refs["组件ref"].doSomething("uts-button");
-       *
-       * uni-app x中调用示例：
-       * 1、引入对应Element
-       * import { UtsButtonElement(组件名称以upper camel case方式命名 + Element) } from 'uts.sdk.modules.utsComponent(组件目录名称以lower camel case方式命名)';
-       * 2、(this.$refs["组件ref"] as UtsButtonElement).doSomething("uts-button");
-       * 或 (uni.getElementById("组件id") as UtsButtonElement).doSomething("uts-button");
-       */
-      doSomething(param : string) {
-        console.log(param);
-      },
-      /**
-       * 内部使用的组件方法
-       */
-      privateMethod() {
-
-      }
-    },
-    /**
-     * [可选实现] 组件被创建，组件第一个生命周期，
-     * 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
-     */
-    created() {
-
-    },
-    /**
-     * [可选实现] 对应平台的view载体即将被创建，对应前端beforeMount
-     */
-    NVBeforeLoad() {
-
-    },
-    /**
-     * [必须实现] 创建原生View，必须定义返回值类型
-     * 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
-     * （Android需要明确知道View类型，需特殊校验）
-     */
-    NVLoad() : Button {
-      let button = new Button($androidContext!);
-      button.setText("点击触发");
-      button.setOnClickListener(new ButtonClickListener(this));
-      return button;
-    },
-    /**
-     * [可选实现] 原生View已创建
-     */
-    NVLoaded() {
-
-    },
-    /**
-     * [可选实现] 原生View布局完成
-     */
-    NVLayouted() {
-
-    },
-    /**
-     * [可选实现] 原生View将释放
-     */
-    NVBeforeUnload() {
-
-    },
-    /**
-     * [可选实现] 原生View已释放，这里可以做释放View之后的操作
-     */
-    NVUnloaded() {
-
-    },
-    /**
-     * [可选实现] 组件销毁
-     */
-    unmounted() {
-
-    },
-    /**
-     * [可选实现] 自定组件布局尺寸，用于告诉排版系统，组件自身需要的宽高
-     * 一般情况下，组件的宽高应该是由终端系统的排版引擎决定，组件开发者不需要实现此函数
-     * 但是部分场景下，组件开发者需要自己维护宽高，则需要开发者重写此函数
-     * 
-     * HBuilder X 4.25 版本后新增 UTSMeasureMode 参数
-     */
-    NVMeasure(size : UTSSize,mode:UTSMeasureMode) : UTSSize {
-      // size.width = 300.0.toFloat();
-      // size.height = 200.0.toFloat();
-      return size;
-    }
-  }
-
-  /**
-   * 定义按钮点击后触发回调的类
-   * [可选实现]
-   */
-  class ButtonClickListener extends View.OnClickListener {
-    /**
-     * 如果需要在回调类或者代理类中对组件进行操作，比如调用组件方法，发送事件等，需要在该类中持有组件对应的原生类的对象
-     * 组件原生类的基类为 UTSComponent，该类是一个泛型类，需要接收一个类型变量，该类型变量就是原生组件的类型
-     */
-    private comp : UTSComponent<Button>;
-
-    constructor(comp : UTSComponent<Button>) {
-      super();
-      this.comp = comp;
-    }
-
-    /**
-     * 按钮点击回调方法
-     */
-    override onClick(v ?: View) {
-      console.log("按钮被点击");
-      // 发送事件
-      this.comp.$emit("buttonclick");
-    }
-  }
-</script>
-
-<style>
-
-</style>
-
-```
-
-> iOS
-
-```html
-<template>
-  <view class="defaultStyles">
-  </view>
-</template>
-<script lang="uts">
-  /**
-   * 引用 iOS 系统库
-   * [可选实现，按需引入]
-   */
-  import {
-    UIButton,
-    UIControl
-  } from "UIKit"
-
-  /**
-   * 引入三方库
-   * [可选实现，按需引入]
-   *
-   * 在 iOS 平台引入三方库有以下两种方式：
-   * 1、通过引入三方库framework 或者.a 等方式，需要将 .framework 放到 ./Frameworks 目录下，将.a 放到 ./Libs 目录下。更多信息[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#ios-平台原生配置)
-   * 2、通过 cocoaPods 方式引入，将要引入的 pod 信息配置到 config.json 文件下的 dependencies-pods 字段下。详细配置方式[详见](https://uniapp.dcloud.net.cn/plugin/uts-ios-cocoapods.html)
-   *
-   * 在通过上述任意方式依赖三方库后，使用时需要在文件中 import:
-   * 示例：import { LottieAnimationView, LottieAnimation, LottieLoopMode	} from 'Lottie'
-   */
-
-  /**
-   * UTSiOS、UTSComponent 为平台内置对象，不需要 import 可直接调用其API，[详见](https://uniapp.dcloud.net.cn/uts/utsios.html)
-   */
-  import { UTSComponent } from "DCloudUTSFoundation"
-
-  //原生提供以下属性或方法的实现
-  export default {
-    data() {
-      return {
-      };
-    },
-    /**
-     * 组件名称，也就是开发者使用的标签
-     */
-    name: "uts-hello-view",
-    /**
-     * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
-     */
-    emits: ['buttonclick'],
-    /**
-     * 属性声明，组件的使用者会传递这些属性值到组件
-     */
-    props: {
-      /**
-       * 字符串类型 属性：buttontext  需要设置默认值
-       */
-      "buttontext": {
-        type: String,
-        default: "点击触发"
-      }
-    },
-    /**
-     * 组件内部变量声明
-     */
-
-    /**
-     * 属性变化监听器实现
-     */
-    watch: {
-      "buttontext": {
-        /**
-         * 这里监听属性变化，并进行组件内部更新
-         */
-        handler(newValue : String, oldValue : String) {
-          this.$el.setTitle(newValue, for = UIControl.State.normal)
-        },
-        /**
-         * 创建时是否通过此方法更新属性，默认值为false
-         */
-        immediate: false
-      },
-    },
-    /**
-     * 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
-     * ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
-     */
-    expose: ['doSomething'],
-    methods: {
-      /**
-       * 对外公开的组件方法
-       * 在uni-app中调用组件方法，可以通过指定ref的方式，例如指定uts-button 标签的ref 为 ’button‘， 调用时使用：this.$refs["button"].doSomething('message');
-       */
-      doSomething(paramA : string) {
-        // 这是组件的自定义方法
-        console.log(paramA, 'this is in uts-button component')
-      },
-
-
-      /**
-       * 内部使用的组件方法
-       */
-    },
-
-
-    /**
-     * 组件被创建，组件第一个生命周期，
-     * 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
-     * [可选实现]
-     */
-    created() {
-
-    },
-    /**
-     * 对应平台的view载体即将被创建，对应前端beforeMount
-     * [可选实现]
-     */
-    NVBeforeLoad() {
-
-    },
-    /**
-     * 创建原生View，必须定义返回值类型
-     * 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
-     * [必须实现]
-     */
-    NVLoad() : UIButton {
-      //必须实现
-      buttonClickListsner = new ButtonClickListsner(this)
-
-      let button = new UIButton()
-      button.setTitle(this.buttontext, for = UIControl.State.normal)
-      // 在 swift target-action 对应的方法需要以OC的方式来调用，那么OC语言中用Selector来表示一个方法的名称（又称方法选择器），创建一个Selector可以使用 Selector("functionName") 的方式。
-      const method = Selector("buttonClickAction")
-      if (buttonClickListsner != null) {
-        button.addTarget(buttonClickListsner!, action = method, for = UIControl.Event.touchUpInside)
-      }
-      return button
-    },
-
-    /**
-     * 原生View已创建
-     * [可选实现]
-     */
-    NVLoaded() {
-      /**
-       * 通过 this.$el 来获取原生控件。
-       */
-      this.$el.setTitle(this.buttontext, for = UIControl.State.normal)
-    },
-    /**
-     * 原生View布局完成
-     * [可选实现]
-     */
-    NVLayouted() {
-
-    },
-    /**
-     * 原生View将释放
-     * [可选实现]
-     */
-    NVBeforeUnload() { },
-    /**
-     * 原生View已释放，这里可以做释放View之后的操作
-     * [可选实现]
-     */
-    NVUnloaded() {
-
-    },
-    /**
-     * 组件销毁
-     * [可选实现]
-     */
-    unmounted() { }
-
-    /**
-     * 更多组件开发的信息详见：https://uniapp.dcloud.net.cn/plugin/uts-component.html
-     */
-  }
-
-  /**
-   * 定义按钮点击后触发回调的类
-   * [可选实现]
-   */
-  class ButtonClickListsner {
-    /**
-     * 如果需要在回调类或者代理类中对组件进行操作，比如调用组件方法，发送事件等，需要在该类中持有组件对应的原生类的对象。
-     * 组件原生类的基类为 UTSComponent，该类是一个泛型类，需要接收一个类型变量，该类型变量就是原生组件的类型。
-     */
-    private component : UTSComponent<UIButton>
-
-    constructor(component : UTSComponent<UIButton>) {
-      this.component = component
-      super.init()
-    }
-
-    /**
-     * 按钮点击回调方法
-     * 在 swift 中，所有target-action (例如按钮的点击事件，NotificationCenter 的通知事件等)对应的 action 函数前面都要使用 @objc 进行标记。
-     * [可选实现]
-     */
-    @objc buttonClickAction() {
-      console.log("按钮被点击")
-      // 发送事件
-      this.component.__$$emit("buttonclick");
-    }
-  }
-
-  /**
-   * 定义回调类或者代理类的实例
-   * [可选实现]
-   */
-  let buttonClickListsner : ButtonClickListsner | null = null
-</script>
-
-<style>
-
-</style>
-```
-
-:::
-
-上面的代码，我们自定义了一个  名为 "uts-hello-view" 的UTS 组件，该组件对外提供了一个包含按钮的简单UI实现，并且对外暴露了一个名为 `buttontext`字符串属性，用来构建按钮上的文案
-
-接下来，我们介绍在uni-app项目中如何使用它
-
-#### 使用组件
-
-> 注意：UTS组件默认全局注册，无需使用者手动配置
-
-我们在uni-app项目中新建 helloView.nvue 页面，
-
-![](https://native-res.dcloud.net.cn/images/uts/component/helloview_use_file.jpg)
-
-直接使用`uts-hello-view`标签，并且定义`buttontext`文本内容即可看到效果。
-
-点击组件内置按钮，可以在控制台看到组件内部实现的日志输出
-
-点击`调用组件的方法`按钮，可以看到组件内置方法被调用
-
-
-```html
-<template>
-	<div>
-		<uts-hello-view ref="helloView" buttontext="点击按钮内容" @buttonclick="onButtonClick" style="width:375px;height: 60px;background-color: aqua;"></uts-hello-view>
-		<button @tap="doSth">调用组件的方法</button>
-	</div>
-
-</template>
-
-<script>
-  export default {
-    data() {
-			return {
-
-			}
-		},
-		methods: {
-			onButtonClick() {
-			  uni.showToast({
-				title:"点击了hello view"
-			  })
-			},
-			// 调用组件内的方法
-			doSth() {
-				// nvue 页面调用方法
-				this.$refs["helloView"].doSomething("param doSomething");
-        // uvue 页面调用方法
-        //(this.$refs["helloView"] as UtsHelloViewElement).doSth("param doSomething");
-			}
-		}
-  }
-</script>
-
-<style>
-</style>
-```
-
-
-
-#### 运行和测试
-
-在当前示例中，不涉及第三方依赖，使用标准基座直接运行即可
-
-
-
-## 包含第三方SDK的示例
-
-本章节以lottie动画组件为例，介绍包含三方SDK的UTS组件开发过程
-
-#### 创建插件
-
-
-在HBuilder X 中选中Uni-App项目下 uni_modules目录,右键选择新建`uni_modules插件`
-
-![创建界面](https://native-res.dcloud.net.cn/images/uts/component/image0.png)
-
-
-这是创建后的目录结构
-
-![目录结构](https://native-res.dcloud.net.cn/images/uts/component/image3.jpg)
-
-
-#### Android 平台引入依赖
-
-打开 ~/uni_modules/uts-animation-view/utssdk/app-android/config.json
-
-键入如下代码:
-
-```
-"dependencies": [
-	"com.airbnb.android:lottie:3.4.0"
-]
-```
-
-UTS组件建议使用远程依赖的方式集成，如果需要以AAR的形式添加SDK，可以添加到
-
-~/uni_modules/uts-animation-view/utssdk/app-android/libs目录
-
-依赖的配置原则与UTS插件一致 [UTS插件依赖说明](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-for-android.html#_3-4-%E5%A2%9E%E5%8A%A0libs%E4%BE%9D%E8%B5%96%E8%B5%84%E6%BA%90)
-
-#### iOS 平台引入依赖库
-
-iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中
-
-#### 编写逻辑
-
-
-打开index.vue，键入下面的组件源码:
-
-::: preview
-
-> Android
-
-```ts
-
-<template>
-    <view class="defaultStyles">
-
-    </view>
-</template>
-<script lang="uts">
-    import Animator from 'android.animation.Animator'
-    import TextUtils from 'android.text.TextUtils'
-    import View from 'android.view.View'
-    import LottieAnimationView from 'com.airbnb.lottie.LottieAnimationView'
-    import LottieDrawable from 'com.airbnb.lottie.LottieDrawable'
-	import FileInputStream from 'java.io.FileInputStream'
-
-    class CustomAnimListener extends Animator.AnimatorListener {
-
-        comp: UTSComponent < LottieAnimationView >
-            constructor(com: UTSComponent < LottieAnimationView > ) {
-                super();
-                this.comp = com
-            }
-
-        override onAnimationStart(animation: Animator) {}
-
-        override onAnimationEnd(animation: Animator, isReverse: Boolean) {
-            this.comp.$emit("bindended")
-        }
-
-        override onAnimationEnd(animation: Animator) {}
-
-        override onAnimationCancel(animation: Animator) {}
-
-        override onAnimationRepeat(animation: Animator) {}
-    }
-
-    //原生提供以下属性或方法的实现  
-    export default {
-        name: "uts-animation-view",
-        /**
-         * 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发）
-         */
-        emits: ['bindended'],
-        props: {
-            /**
-             * 动画资源地址，目前只支持绝对路径
-             */
-            "path": {
-                type: String,
-                default: ""
-            },
-            /**
-             * 动画是否自动播放
-             */
-            "autoplay": {
-                type: Boolean,
-                default: false
-            },
-            /**
-			 * 动画是否循环播放
-             */
-            "loop": {
-                type: Boolean,
-                default: false
-            },
-            /**
-             * 是否隐藏动画
-             */
-            "hidden": {
-                type: Boolean,
-                default: false
-            },
-            /**
-             * 动画操作，可取值 play、pause、stop
-             */
-            "action": {
-                type: String,
-                default: "stop"
-            }
-
-        },
-        data() {
-            return {
-
-            }
-        },
-        watch: {
-            "path": {
-                handler(newPath: string) {
-
-					if(this.$el != null){
-						let lottieAnimationView = this.$el!
-						if (!TextUtils.isEmpty(newPath)) {
-							
-						    if (newPath.startsWith("http://") || newPath.startsWith("https://")) {
-						        lottieAnimationView.setAnimationFromUrl(newPath)
-						    } else {
-                    // 正式打包会放在asset中，需要特殊处理
-                    let realJsonPath = UTSAndroid.getResourcePath(newPath)
-                    if(realJsonPath.startsWith("/android_asset")){
-                      lottieAnimationView.setAnimation(realJsonPath.substring(15))
-                    }else{
-                      lottieAnimationView.setAnimation(new FileInputStream(realJsonPath),newPath)
-                    }
-						    }
-						}
-						if (this.autoplay) {
-						    lottieAnimationView.playAnimation()
-						}
-					}
-                },
-                immediate: false
-            },
-            "loop": {
-                handler(newLoop: Boolean) {
-					if(this.$el != null){
-						if (newLoop) {
-						    this.$el!.repeatCount = Int.MAX_VALUE
-						} else {
-						    // 不循环则设置成1次
-						    this.$el!.repeatCount = 0
-						}
-						
-						if (this.autoplay) {
-						    this.$el!.playAnimation()
-						}
-					}
-                    
-                },
-                immediate: false
-            },
-
-            "autoplay": {
-                handler(newValue: boolean) {
-					if(this.$el != null){
-						if (newValue) {
-						    this.$el!.playAnimation()
-						}
-					}
-                    
-                },
-                immediate: false
-            },
-
-            "action": {
-                handler(newAction: string) {
-
-                    if (newAction == "play" || newAction == "pause" || newAction == "stop") {
-
-						if(this.$el != null){
-							if (this.action == "play") {
-							    this.$el!.playAnimation()
-							} else if (this.action == "pause") {
-							    this.$el!.pauseAnimation()
-							} else if (this.action == "stop") {
-							    this.$el!.cancelAnimation()
-							    this.$el!.clearAnimation()
-							}
-						}
-
-                    } else {
-                        // 非法入参，不管
-                    }
-                },
-                immediate: false
-            },
-
-            "hidden": {
-                handler(newValue: boolean) {
-					if(this.$el != null){
-						if (newValue) {
-						    this.$el!.visibility = View.GONE
-						} else {
-						    this.$el!.visibility = View.VISIBLE
-						}
-					}
-                },
-                immediate: false
-            },
-
-        },
-        methods: {
-            setRepeatMode(repeat: string) {
-				if(this.$el != null){
-					if ("RESTART" == repeat) {
-					    this.$el!.repeatMode = LottieDrawable.RESTART
-					} else if ("REVERSE" == repeat) {
-					    this.$el!.repeatMode = LottieDrawable.RESTART
-					}
-				}
-            },
-        },
-        
-        NVLoad(): LottieAnimationView { 
-            let lottieAnimationView = new LottieAnimationView($androidContext)
-            return lottieAnimationView
-        },
-		
-        NVLoaded() { 
-			if(this.$el != null){
-				this.$el!.repeatMode = LottieDrawable.RESTART;
-				this.$el!.visibility = View.GONE
-				this.$el!.repeatCount = 0
-				this.$el!.addAnimatorListener(new CustomAnimListener(this))
-			}
-        }
-        
-    }
-</script>
-<style>
-    /* 定义默认样式值, 组件使用者没有配置时使用 */
-    .defaultStyles {
-        width: 750rpx;
-        height: 240rpx;
-    }
-</style>
-
-
-```
-
-> iOS
-
-```ts
-<template>
-	<view>
-
-	</view>
-</template>
-<script lang="uts">
-	import {
-		LottieAnimationView,
-		LottieAnimation,
-		LottieLoopMode
-	} from 'Lottie'
-	import {
-		URL
-	} from 'Foundation'
-	import {
-		UTSiOS
-	} from "DCloudUTSFoundation"
-
-
-	//原生提供以下属性或方法的实现
-	export default {
-		/**
-		 * 组件名称，也就是开发者使用的标签
-		 */
-		name: "uts-animation-view",
-		/**
-		 * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
-		 */
-		emits: ['bindended'], // 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发）
-		/**
-		 * 属性声明，组件的使用者会传递这些属性值到组件
-		 */
-		props: {
-			/**
-			 * 动画资源地址，支持远程 URL 地址和本地绝对路径
-			 */
-			"path": {
-				type: String,
-				default: ""
-			},
-			/**
-			 * 动画是否循环播放
-			 */
-			"autoplay": {
-				type: Boolean,
-				default: false
-			},
-			/**
-			 * 动画是否自动播放
-			 */
-			"loop": {
-				type: Boolean,
-				default: false
-			},
-			/**
-			 * 是否隐藏动画
-			 */
-			"hidden": {
-				type: Boolean,
-				default: false
-			},
-			/**
-			 * 动画操作，可取值 play、pause、stop
-			 */
-			"action": {
-				type: String,
-				default: "stop"
-			}
-
-		},
-		data() {
-			return {
-
-			}
-		},
-		watch: {
-			"path": {
-				handler(newValue: string, oldValue: string) {
-					if (this.autoplay) {
-						this.playAnimation()
-					}
-				},
-				immediate: false //创建时是否通过此方法更新属性，默认值为false
-			},
-			"loop": {
-				handler(newValue: boolean, oldValue: boolean) {
-					if (newValue) {
-						this.$el.loopMode = LottieLoopMode.loop
-					} else {
-						this.$el.loopMode = LottieLoopMode.playOnce
-					}
-				},
-				immediate: false //创建时是否通过此方法更新属性，默认值为false
-			},
-			"autoplay": {
-				handler(newValue: boolean, oldValue: boolean) {
-					if (newValue) {
-						this.playAnimation()
-					}
-				},
-				immediate: false //创建时是否通过此方法更新属性，默认值为false
-			},
-			"action": {
-				handler(newValue: string, oldValue: string) {
-					const action = newValue
-					if (action == "play" || action == "pause" || action == "stop") {
-						switch (action) {
-							case "play":
-								this.playAnimation()
-								break;
-							case "pause":
-								this.$el.pause()
-								break;
-							case "stop":
-								this.$el.stop()
-								break;
-							default:
-								break;
-						}
-					} else {
-						// 非法入参，不管
-					}
-				},
-				immediate: false //创建时是否通过此方法更新属性，默认值为false
-			},
-
-			"hidden": {
-				handler(newValue: boolean, oldValue: boolean) {
-					this.$el.isHidden = this.hidden
-				},
-				immediate: false //创建时是否通过此方法更新属性，默认值为false
-			},
-
-		},
-		expose: ['setRepeatMode'],
-		methods: {
-			// 需要对外暴露的方法
-			// 设置 RepeatMode
-			setRepeatMode(repeatMode: string) {
-				if (repeatMode == "RESTART") {
-					if (this.loop) {
-						this.$el.loopMode = LottieLoopMode.loop
-					} else {
-						this.$el.loopMode = LottieLoopMode.playOnce
-					}
-				} else if (repeatMode == "REVERSE") {
-					if (this.loop) {
-						this.$el.loopMode = LottieLoopMode.autoReverse
-					} else {
-						this.$el.loopMode = LottieLoopMode.repeatBackwards(1)
-					}
-				}
-			},
-			// 不对外暴露的方法
-			// 播放动画
-			playAnimation() {
-				// 构建动画资源 url
-				var animationUrl: URL | null
-
-				if (this.path.hasPrefix("http")) {
-					animationUrl = new URL(string = this.path)
-				} else {
-					const filePath = UTSiOS.getResourcePath(this.path)
-					animationUrl = new URL(fileURLWithPath = filePath)
-				}
-
-				if (animationUrl != null) {
-					// 加载动画 LottieAnimation
-					LottieAnimation.loadedFrom(url = animationUrl!, closure = (animation: LottieAnimation | null):
-						void => {
-							if (animation != null) {
-								// 加载成功开始播放
-								this.$el.animation = animation
-								this.$el.play(completion = (isFinish: boolean): void => {
-									if (isFinish) {
-										// 播放完成回调事件
-										this.fireEvent("bindended")
-									}
-								})
-							}
-						})
-				} else {
-					console.log("url 构建失败，请检查 path 是否正确")
-				}
-			}
-		},
-		created() { //创建组件，替换created
-
-		},
-		NVBeforeLoad() { //组件将要创建，对应前端beforeMount
-			//可选实现，这里可以提前做一些操作
-		},
-		NVLoad(): LottieAnimationView { //创建原生View，必须定义返回值类型（Android需要明确知道View类型，需特殊校验）
-			// 初始化 Lottie$el
-			const animationView = new LottieAnimationView()
-			// 默认只播放一次动画
-			animationView.loopMode = LottieLoopMode.playOnce
-			return animationView
-		},
-		NVLoaded() { //原生View已创建
-
-			/// 更新 props 中定义的属性值
-
-			if (this.loop) {
-				this.$el.loopMode = LottieLoopMode.loop
-			}
-
-			this.$el.isHidden = this.hidden
-
-			if (this.autoplay) {
-				this.playAnimation()
-			}
-		},
-
-		NVLayouted() { //原生View布局完成
-			//可选实现，这里可以做布局后续操作
-		},
-
-		NVBeforeUnload() { //原生View将释放
-			//可选实现，这里可以做释放View之前的操作
-		},
-		NVUnloaded() { //原生View已释放
-			//可选实现，这里可以做释放View之后的操作
-		},
-		unmounted() { //组件销毁
-			//可选实现
-		}
-	}
-</script>
-<style>
-
-</style>
-```
-
-:::
-
-上面的代码我们实现了一个支持lottie动画播放的 UTS组件，标签名称为 `uts-animation-view`
-
-对外提供了下列属性和方法
-
-|属性		|类型	|默认值	|描述	|
-|:---		|:--	|:--	|:---	|
-|`path`		|string	||`lottie`资源路径，支持本地地址和`http`协议下的网络地址|
-|`loop`		|boolean|false	|动画是否循环播放|
-|`autoplay`	|boolean|true	|动画是否自动播放|
-|`action`	|string	|play	|动画操作，可取值 play、pause、stop|
-|`hidden`	|boolean|true	|是否隐藏动画|
-|`bindended`|event	|		|当播放到末尾时触发 ended 事件|
-|`setRepeatMode`|function|	|设置动画的重复方式，RESTART：重新开始播放，REVERSE，反向播放|
-
-
-#### 使用`uts-animation-view`组件
-
-在uni-app项目中新建 lottie/index.nvue 页面
-
-![](https://native-res.dcloud.net.cn/images/uts/component/lottie_use_file.jpg)
-
-引用自定义 `uts-animation-view` 组件，并编写测试用例
-
-```
-<template>
-    <div>
-        <button @tap="changeUrl">播放本地动画资源</button>
-		<button @tap="changeServerUrl">播放远程动画资源</button>
-
-        <button @tap="changeAutoPlay">测试AutoPlay</button>
-        <button @tap="changeLoop">测试Loop</button>
-        <button @tap="changeAction(1)">测试action play</button>
-        <button @tap="changeAction(2)">测试action pause</button>
-        <button @tap="changeAction(3)">测试action stop</button>
-        <uts-animation-view ref="animView" :path="animUrl" :autoplay="autoplay" :loop="loop" :action="action"
-            :hidden="hidden" @bindended="testAnimEnd" @click="lottieClickTest" @longpress="lottieLongpressTest"
-            :style="{width:widthNum+'rpx',height:heightNum+'px',background:yanse}">
-        </uts-animation-view>
-
-    </div>
-</template>
-
-<script>
-
-    export default {
-        data() {
-            return {
-                hidden: false,
-                autoplay: false,
-                action: "play",
-                loop: false,
-                yanse: "red",
-                widthNum: 750,
-                heightNum: 200,
-                comShow: true,
-                animUrl: "/static/anim_a.json"
-            }
-        },
-
-        methods: {
-
-            changeAutoPlay: function() {
-                this.autoplay = !this.autoplay
-            },
-            changeUrl: function() {
-                if (this.animUrl == "/static/anim_a.json") {
-                    this.animUrl = "/static/anim_b.json"
-                } else {
-                    this.animUrl = "/static/anim_a.json"
-                }
-            },
-
-			changeServerUrl: function() {
-                this.animUrl = "https://b.bdstatic.com/miniapp/images/lottie_example_one.json"
-            },
-            changeAction: function(type) {
-                if (type == 1) {
-                    this.action = "play"
-                } else if (type == 2) {
-                    this.action = "pause"
-                } else if (type == 3) {
-                    this.action = "stop"
-                }
-            },
-            changeLoop: function() {
-                this.loop = !this.loop
-            },
-            testAnimEnd: function(res) {
-                console.log("testAnimEnd");
-            },
-
-            changeRepeat: function(res) {
-                let repeatConfig = {
-                    count: 3,
-                    mode: "restart"
-                }
-                this.$refs["animView"].updateRepeatConfig(repeatConfig, function(res) {
-                    console.log(res);
-                });
-
-            },
-            lottieClickTest: function(res) {
-                console.log("lottieClickTest");
-                console.log(res);
-            },
-            lottieLongpressTest: function(res) {
-                console.log("lottieClickTest");
-                console.log(res);
-            },
-        }
-    }
-</script>
-
-```
-
-以上，我们完成了 `uts-animation-view`组件的集成和使用工作
-
-
-#### 运行和测试
-
-在当前例子中，因为配置了额外的第三方依赖，需要自定义基座方能使用
-
-
-## UTS开发容器组件
-
-## 简介
-
-组件一般有两种场景，第一种是： 单标签组件
-```html
-<uts-view style="xxxx"/>
-```
-
-我们上面介绍的 `uts-hello-view`或者`uts-animation-view`都是这种类型
-
-第二种是 作为容器使用：
-
-```html
-<uts-view >
-	<text> 文字子组件</text>
-	<image src="https://xxx">
-<uts-view >
-```
-## 声明
-
-UTS组件作为容器组件与普通View组件遵循完全相同的规范，
-
-唯一的区别在于 当组件布局中包含 `<slot>` 标签时，编译器会自动将其转换为容器组件
-
-::: preview
-
-> Android
-
-```ts
-<template>
-	<view>
-		<slot/>
-	</view>
-</template>
-<script lang="uts">
-
-	import LinearLayout from 'android.widget.LinearLayout'
-
-	//原生提供以下属性或方法的实现
-	export default {
-		name: "uts-hello-container",
-
-		NVLoad(): LinearLayout {
-			let contentLayout = new LinearLayout($androidContext)
-			return contentLayout
-		}
-
-	}
-</script>
-<style>
-
-</style>
-
-```
-
-> iOS
-
-```ts
-<template>
-	<view>
-		<slot></slot>
-	</view>
-</template>
-<script lang="uts">
-	import {
-		UIView
-	} from 'UIKit'
-	//原生提供以下属性或方法的实现
-	export default {
-		name: "uts-hello-container",
-		NVLoad(): UIView {
-			let view = new UIView()
-			return view
-		}
-
-	}
-</script>
-```
-
-:::
-
-如上，我们即可到了一个最简的UTS容器组件
-
-
-## 使用容器组件
-
-UTS容器组件的使用与Vue等常见的前端容器组件一致。唯一要注意的是，目前UTS容器组件还不支持 具名插槽。
-
-如下是一个容器组件的使用示例
-
-
-```js
-<template>
-	<uts-hello-container>
-		<text>UTS contianer组件</text>
-		<button text="点击按钮内容" style="width:375px;height: 375px;background-color: aqua;"></button>
-	</uts-hello-container>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>
-```
-
-## 应用程序生命周期函数监听
- UTS 组件同样支持对应用程序生命周期函数的监听，方式和 UTS 插件中的完全一致。具体使用方法[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#hooksClass)
-
-
-## 快速体验
-
-
-开发者可以使用[Hello UTS](https://gitcode.net/dcloud/hello-uts) 快速体验UTS 组件开发
-
-
-Lottie动画示例,对应的源码实现：~/uni_modules/uts-animation-view
-
-`uts-animation-view`动画示例,对应的源码实现：~/uni_modules/uts-animation-view
-
-
-
-## 常见问题
-
-#### 1 使用者需要指定 组件宽高
-
-```
-<uts-hello-view buttonText="点击按钮内容" style="width:375px;height: 375px;background-color: aqua;"></uts-hello-view>
-```
-
-如果不通过style 指定组件宽高，会导致组件不显示
-
-
-#### 2 UTS-Android 插件涉及的像素单位说明： rpx,逻辑像素px,物理像素px
-
-|单位|说明|使用场景|
-|----|---|---|
-|逻辑像素px |逻辑像素 对应到 android中的 dp| 组件使用者 在页面css中使用 举例：`width:480px` |
-|物理像素px |真实的设备像素，与dp 直接的换算关系是 dp * 屏幕密度 = 物理像素 px| android 原生api 传入和返回的单位均为物理像素，比如 设置layoutParam 参数，获取View宽高等 |
-|rpx |屏幕宽度固定750单位前提下的逻辑像素| 组件使用者 在页面css中使用 举例：`width:750rpx`,可以使用UTSAndroid.rpx2px() 函数进行rpx 和 逻辑像素 px的转换|
-
-
-
-为了让组件使用者的有更好的体验，UTS 插件 应该以 **逻辑像素 px** 作为标准的像素单位：
-
-+ 1 内置的UTS插件/组件，涉及对外交互时会自动进行单位转换，抹平相关差异。比如 `swiper`等组件监听滑动距离等场景
-
-+ 2 建议 插件开发者的插件在设计对外像素单位时也进行单位的转换，以逻辑像素px 作为输出结果
-
-
-
-
-
+组件一般适用于封装非全屏的场景，即在页面中内嵌一个区域。如果需要你需要封装的UI是全屏界面，那没必要使用组件，通过uts开发原生页面更简单。 [uts开发原生页面示例](https://gitcode.net/dcloud/hello-uts/-/tree/master/uni_modules/uts-nativepage)
+
+当然uts组件是多端的，一个uts组件作为一个`uni_modules`，可同时支持app-Android、app-iOS、web、以及各家小程序组件。
+
+## uts组件开发模式
+
+app平台如何将原生UI扩展成一个组件，嵌入在页面中？有以下开发模式：
+- 标准模式（HBuilderX4.31 及以上版本支持）  
+- uni-app兼容模式（HBuilderX3.6.18 及以上版本支持）  
+
+**开发模式对比表** 
+
+|								|uni-app兼容模式													|标准模式																		|
+|--							|--																			|--																				|
+|支持平台				|uni-app的app-nvue和uni-app x的app-uvue	|仅支持uni-app x，但uni-app x中app、web、小程序全平台支持	|
+|组件规范				|参考vue的模仿，是子集、也有扩充定制，不支持组合式API	|完全vue组件规范，标准easycom	|
+|使用native-view|否																			|是																				|
+|学习成本				|低																			|无																				|
+
+一般来讲，我们推荐开发者使用`标准模式`。这种模式就是写一个标准的vue组件，没有学习和认知门槛。
+
+因为uni-app下只有nvue页面才能放置原生扩展的组件，而nvue已经不再维护，我们推荐开发者在uni-app上使用web组件。除非你的组件无法使用web实现，可以接受在uni-app的app-nvue中使用，才需要使用`uni-app兼容模式`。
+
+
+
+## 标准模式组件介绍  
+
+从HBuilderX4.31起，uni-app x内置组件里新增了 [native-view](../component/native-view.md) 组件，它就是为了扩展原生组件而提供的一个内置组件。
+
+首先在页面或组件中，放置 native-view 组件，它作为内置组件，可以正常的参与排版布局。
+
+在uts插件中，可以通过 [uni.getElementById](../api/get-element-by-id.md) 方法获取到 native-view 的 [UniElement](../dom/unielement.md) 对象，再通过 [UniElement](../dom/unielement.md) 的 [getAndroidView](../dom/unielement.md#getandroidview)/[getIOSView](../dom/unielement.md#getiosview)方法，可以获取到 uvue 界面上的一个 native-view 组件的原生view。
+
+当插件开发者拿到一个原生的Android或iOS的view后，就可以使用UTS或原生混编代码随意操作这个原生view。比如绘制地图、绘制摄像头内容。
+
+如果开发者想要对外封装为一个组件，暴露组件的属性、方法、事件，只需要按照标准vue组件的做法，使用easycom的方式，把 native-view 组件包在一个vue组件中。
+
+完整开发教程参考[uts组件 - 标准模式组件开发](./uts-component-vue.md)。
+
+
+## uni-app兼容模式组件介绍  
+
+uni-app x x项目是HBuilderX4.31起才新增了 [native-view](../component/native-view.md) 组件，且 uni-app 项目不支持 native-view 组件。
+
+在没有 native-view 组件的情况下，uts提供了另一种uts组件的开发模式，即`uni-app兼容模式`。
+
+为了让原生开发的ui组件可以在页面上作为一个组件来嵌入，DCloud参考vue规范定义了一个特殊组件规范，部分实现了vue组件规范、且又扩充了一些规范（如生命周期NVBeforeLoad、NVLoad、NVLoaded、NVLayouted、NVBeforeUnload、NVUnloaded等）。
+
+`uni-app兼容模式`的好处是即可以在uni-app的nvue页面使用，也可以在uni-app x的uvue页面使用。
+
+如果您的插件仅服务uni-app x，那么没必要使用`uni-app兼容模式`。
+
+如果您确定需要使用`uni-app兼容模式`来开发uts组件，那么需要了解这种模式的开发规范，详情参考[uts组件 - uni-app兼容模式组件开发](./uts-component-compatible.md)。