diff --git a/docs/plugin/native-vue-component.md b/docs/plugin/uts-vue-component.md
similarity index 69%
rename from docs/plugin/native-vue-component.md
rename to docs/plugin/uts-vue-component.md
index be13c86f8dfbcc715abe0991f21e0bf126a87765..e0ec120186e77c8e03d6c4f2acabdb48152c8189 100644
--- a/docs/plugin/native-vue-component.md
+++ b/docs/plugin/uts-vue-component.md
@@ -1,22 +1,22 @@
-## vue原生组件是什么
+## uts组件标准模式
-使用vue组件开发规范,通过uts插件封装原生平台view提供给vue组件,实现组件特定功能及UI展示。
+使用vue组件开发规范,通过uts插件封装原生平台view提供给native-view组件,实现组件特定功能及UI展示。
## 前置条件
继续阅读文档前,开发者需要了解以下前置条件:
+ 了解 [uts语法](https://doc.dcloud.net.cn/uni-app-x/uts/) 和 [uts原生插件](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html)
-+ 了解 [Vue组件](https://uniapp.dcloud.net.cn/tutorial/vue3-components.html)
-+ 了解 [native-view组件](xxx)
++ 了解 [vue组件](https://uniapp.dcloud.net.cn/tutorial/vue3-components.html)
++ 了解 [native-view组件](https://doc.dcloud.net.cn/uni-app-x/component/native-view.html)
-## vue原生组件结构解析
+## uts组件-标准模式目录结构
-┌─components // 可跨端公用的vue组件代码,该文件夹不强制放在此处, 可选
+┌─components // vue组件代码,该文件夹不强制放在此处, 可选
| ├─xxxxxx // vue组件名称文件夹 xxxxxx代替组件名称
-| ├─xxxxxx.uvue // vue组件uts代码
+| ├─xxxxxx.uvue // vue组件uts代码 xxxxxx代替组件名称
├─static // 静态资源
├─utssdk
│ ├─app-android //Android平台目录
@@ -40,42 +40,44 @@
-如上所示,vue原生组件的目录结构与UTS插件基本相同,差别在于components目录,vue组件代码存放于此,当前该目录并非一定要放置于此,但对于vue原生组件的完整性建议将vue组件代码与关联的uts插件放在一起。
+如上所示,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)
-## 开发vue原生组件
+## 开发uts组件
-### 构建vue原生组件
+### 构建uts组件-标准模式模版
-HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键选择新建uni_modules插件,弹窗后分类选择 “vue原生组件”,填写组件名称,以下均已 native-button 为例
+HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键选择新建uni_modules插件,弹窗后分类选择 “uts组件-标准模式”,填写组件名称,以下均已 native-button 为例
-//创建vue原生组件HX截图
+//截图
-创建完毕 HBuilder X 会自动构建模版文件,参考:`vue原生组件结构`
+创建完毕 HBuilder X 会自动构建模版文件,参考:`uts组件-标准模式目录结构`
-### vue原生组件代码编写
+### uts组件-标准模式代码编写
-#### vue组件添加 native-view
+#### 添加 native-view
-构建vue原生组件后,HBuilder X 会自动创建components/native-button/native-button.uvue文件,在该文件编写代码添加 native-view 标签
+构建uts组件后,HBuilder X 会自动创建components/native-button/native-button.uvue文件,在该文件编写代码添加 native-view 标签
-```html
+```ts
```
-#### native-view 与 UTS插件关联
+#### native-view 与 原生对象关联
+
+native-view 初始化会触发 @init 事件,此时创建NativeButton对象,native-button.uvue代码中用NativeButton对象调用插件相关的API。将 UniNativeViewElement 传递给NativeButton对象对象,进行关联绑定
-引入 native-button 插件, native-view 初始化时会触发 @init 事件,此时创建UTS插件实例button对象,vue组件用button调用UTS插件相关的API。将 UniNativeViewElement 通过button对象传递给UTS插件,进行view关联绑定
+[NativeButton](#NativeButton对象)是在utssdk目录构建的原生对象。NativeButton对象内部处理原生view与native-view绑定关联业务
```ts
... ...
- //引入 native-button 插件
+ //引入 NativeButton 原生对象
import { NativeButton } from "@/uni_modules/native-button";
export default {
data() {
@@ -86,14 +88,14 @@ HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键
methods: {
//native-view初始化时触发此方法
onviewinit(e : UniNativeViewInitEvent) {
- //获取UniNativeViewElement 实例化NativeButton将element以构造参数传递给NativeButton插件
+ //获取UniNativeViewElement 实例化NativeButton将element以构造参数传递给NativeButton对象
this.button = new NativeButton(e.detail.element);
}
}
}
```
-#### vue原生组件声明方法
+#### 组件声明方法
在 methods 节点中添加updateText方法,native-button组件使用者可调用该方法更新native-button文案。 [页面调用组件方法](https://doc.dcloud.net.cn/uni-app-x/vue/component.html#page-call-component-method)
@@ -106,9 +108,9 @@ methods: {
}
```
-#### vue原生组件声明props
+#### 组件声明props
-native-button 声明props,例如native-button的文案信息text属性,按vue规范监听到text属性更新,通过this.button驱动UTS插件更新原生view属性,在components/native-button/native-button.uvue编写如下代码,具体参考[vue组件Props规范](https://cn.vuejs.org/guide/components/props.html)
+native-button 声明props,例如native-button的文案信息text属性,按vue规范监听到text属性更新,通过NativeButton对象驱动更新原生view属性,在components/native-button/native-button.uvue编写如下代码,具体参考[vue组件Props规范](https://cn.vuejs.org/guide/components/props.html)
```html
```
-#### vue原生组件声明事件
+#### 组件声明事件
-native-button 声明事件,例如原生组件触发点击事件@buttonTap, UTS插件通过 UniNativeViewElement 的 dispatchEvent 函数触发native-view的 @customClick 自定义事件。vue组件监听native-view的 @customClick 自定义事件实现this.$emit触发声明事件,具体参考[vue组件事件规范](https://cn.vuejs.org/guide/components/events.html)
+native-button 声明事件,例如原生组件触发点击事件@buttonTap, NativeButton对象通过 UniNativeViewElement 的 dispatchEvent 函数触发native-view的 @customClick 自定义事件。native-button.uvue监听native-view的 @customClick 自定义事件实现this.$emit触发声明事件,具体参考[vue组件事件规范](https://cn.vuejs.org/guide/components/events.html)
```html
@@ -203,9 +205,9 @@ native-button/components/native-button/native-button.uvue 最终代码如下:
```
-#### UTS插件功能实现
+#### 实现NativeButton对象
-UTS插件中通过传递过来的UniNativeViewElement实现view关联绑定
+utssdk目录实现不同平台的原生NativeButton对象,构造参数获取UniNativeViewElement对象与原生view绑定,封装原生view功能关联的API。
::: preview
@@ -218,7 +220,7 @@ export class NativeButton {
$element : UniNativeViewElement;
constructor(element : UniNativeViewElement) {
- //接收组件传递过来的UniNativeViewElement
+ //接收传递过来的UniNativeViewElement
this.$element = element;
this.bindView();
}
@@ -306,18 +308,18 @@ export class NativeButton {
:::
-更多实现可参考 UTS 插件 [native-button](https://gitcode.net/dcloud/hello-uni-app-x/-/tree/dev/uni_modules/native-button)
+更多实现可参考 UTS组件 [native-button](https://gitcode.net/dcloud/hello-uni-app-x/-/tree/dev/uni_modules/native-button)
-此时一个简单的vue原生组件就完成了,
+此时一个简单的标准模式UTS组件就完成了,
**注意:**
-+ vue原生组件的 components 目录下的代码中不能含有原生平台任何引用对象,这会导致vue原生组件无法跨平台,与原生平台关联的代码都应放在UTS插件中
++ UTS组件的 components 目录下的代码中不能含有原生平台任何引用对象,这会导致vue原生组件无法跨平台,与原生平台关联的代码都应放在UTS插件中
+ ios平台需要vue组件主动释放 uts 实例,所以页面触发 unmounted 生命周期时需要调用 this.button?.destroy() 避免内存泄露
-+ android平台 native-view 组件不支持border、background、box-shadow属性,如需以上效果可以使用view标签包裹native-view,在view标签设置以上属性
++ android平台 native-view 组件不支持border、background、box-shadow属性,可以使用view标签包裹native-view,在view标签设置以上属性
-### vue原生插件使用
+### 页面引用uts组件
-以 native-button 为例, 创建插件的项目页面可以直接使用 native-button 标签,也可将native-button插件包放置其他项目的uni-modules文件夹中。项目页面即可使用 native-button 标签
+以 native-button 为例, 创建uts组件的项目页面可以直接使用 native-button 标签,也可将native-button插件包放置其他项目的uni-modules文件夹中。项目页面即可使用 native-button 标签
```html