From 2dcaac8af8f0d976b2aa8a26bbeac0e6df513c7e Mon Sep 17 00:00:00 2001
From: shutao <shutao@dcloud.io>
Date: Tue, 24 Sep 2024 15:11:46 +0800
Subject: [PATCH] add uts-vue-component.md

---
 ...-vue-component.md => uts-vue-component.md} | 72 ++++++++++---------
 1 file changed, 37 insertions(+), 35 deletions(-)
 rename docs/plugin/{native-vue-component.md => uts-vue-component.md} (69%)

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 be13c86f..e0ec1201 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组件-标准模式目录结构
 
 <pre v-pre="" data-lang="">
 <code class="lang-" style="padding:0">
-┌─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 @@
 </code>
 </pre>
 
-如上所示，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
 <template>
 	<native-view></native-view>
 </template>
 ```
 
-#### 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
 <template>
 	<native-view @init="onviewinit"></native-view>
 </template>
 ... ...
-	//引入 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
 <script lang="uts">
@@ -132,9 +134,9 @@ native-button 声明props，例如native-button的文案信息text属性，按vu
 </script>
 ```
 
-#### 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
 <template>
@@ -203,9 +205,9 @@ native-button/components/native-button/native-button.uvue 最终代码如下：
 </script>
 ```
 
-#### 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
 <template>
-- 
GitLab