tmui-cli 2.0.2 → 2.0.4

package/data/uniappx/collocation/themejson.md

@@ -0,0 +1,176 @@
+# theme.json
+
+> HBuilder X 4.18+ 支持
+
+完整的主题适配教程 [另见](../api/theme-change.md)。
+
+本文仅讲解theme.json的用法，用于解决pages.json的主题适配问题。
+
+当app需要暗黑主题时，开发者虽然可以自行决定自己的界面样式，但缺少合适的设置pages.json中样式的时机。
+
+在页面的onLoad中设置当前页面的style会来不及，因为某些平台页面早于onLoad就可以创建和进行窗体转场动画，\
+这会造成新页面动画刚开始页面的背景色、navigationBar背景色是一个风格，而在onLoad后颜色发生变化。\
+也就是俗称的 转场闪白 或 闪黑。
+
+小程序提供了theme.json来给解决这个问题。在theme.json里配置light和dark的颜色，然后在pages.json中引用。
+
+新页面创建时是根据pages.json的设置来初始化页面的，这样就可以在第一时间对页面样式进行适配，避免闪白闪黑。
+
+考虑到全端兼容，uni-app x的web和app也支持theme.json设置。
+
+但需要注意：**theme.json，仅负责pages.json的页面样式、tabbar样式的控制。不负责开发者自己的页面css样式控制。**
+
+适配暗黑模式，除通过theme.json控制pages.json的样式外，还需要了解更多API：
+- 获取OS/Host主题：[uni.getSystemInfo](../api/get-system-info.md)、[uni.getDeviceInfo](../api/get-device-info.md)，返回的osTheme、hostTheme属性
+- 监听OS主题切换：[uni.onOsThemeChange](../api/theme-change.md#onosthemechange)、[uni.offOsThemeChange](../api/theme-change.md#offosthemechange)、
+- 监听host主题切换：[uni.onHostThemeChange](../api/theme-change.md#onhostthemechange)、[uni.offHostThemeChange](../api/theme-change.md#offhostthemechange)、
+- 获取App主题：[uni.getSystemInfo](../api/get-system-info.md)、[uni.getAppBaseInfo](../api/get-app-base-info.md)，返回的appTheme属性
+- 设置App主题：[uni.setAppTheme](../api/theme-change.md#setapptheme)
+- 监听App主题切换：[uni.onAppThemeChange](../api/theme-change.md#onappthemechange)、[uni.offAppThemeChange](../api/theme-change.md#offappthemechange)、
+- manifest.json中设置App默认主题：[defaultAppTheme](../collocation/manifest.md#manifest-app)
+
+## theme.json使用步骤
+
+1. 在项目根目录下创建theme.json
+2. 在 `theme.json` 中定义相关变量
+3. 在 `pages.json` 中以@开头引用变量
+4. 可选在 `manifest.json -> app` 中配置主题默认值 `"defaultAppTheme": "light"`, 支持通过[主题API](https://doc.dcloud.net.cn/uni-app-x/api/theme.html)动态设置
+
+## theme.json内容描述 @themejson
+
+`theme.json` 用于颜色主题相关的变量定义，包含以下属性：
+
+| 属性  | 类型   | 必填 | 描述                 |
+| :---- | :----- | :--- | :------------------- |
+| light | Object | 是   | 浅色模式下的变量定义 |
+| dark  | Object | 是   | 深色模式下的变量定义 |
+
+示例如下：
+
+```json
+{
+	"light": {
+		"navBgColor": "#f8f8f8",
+		"navTxtStyle": "black"
+	},
+	"dark": {
+		"navBgColor": "#292929",
+		"navTxtStyle": "white"
+	}
+}
+```
+
+完成定义后，可在 `pages.json` 中全局配置或页面配置的相关属性中以 `@` 开头引用，例如：
+
+```json
+// 全局配置
+{
+  "globalStyle": {
+    "navigationBarBackgroundColor": "@navBgColor",
+    "navigationBarTextStyle": "@navTxtStyle"
+  }
+}
+// 页面配置
+{
+	"path": "pages/index/index",
+	"style":{
+		"navigationBarBackgroundColor": "@navBgColor",
+		"navigationBarTextStyle": "@navTxtStyle"
+	}
+}
+```
+
+配置完成后，调用相应 api 框架会自动所设属性，展示对应主题下的颜色。
+
+pages.json中并非所有配置项均支持使用theme.json中的变量，支持通过变量配置的属性如下所示：
+
+- 全局配置 globalStyle 与页面 style 支持：
+
+  - navigationBarBackgroundColor
+  - navigationBarTextStyle
+  - backgroundColor
+  - backgroundTextStyle
+
+- 全局配置 tabbar 属性：
+  - color
+  - selectedColor
+  - backgroundColor
+  - borderStyle
+  - list
+    - iconPath
+    - selectedIconPath
+
+## 配置示例@themeconfig
+
+pages.json（示例省略了主题相关以外的配置项）
+
+```json
+{
+	"globalStyle": {
+		"navigationBarBackgroundColor": "@navBgColor",
+		"navigationBarTextStyle": "@navTxtStyle",
+		"backgroundColor": "@bgColor",
+		"backgroundTextStyle": "@bgTxtStyle"
+	},
+	"tabBar": {
+		"color": "@tabFontColor",
+		"selectedColor": "@tabSelectedColor",
+		"backgroundColor": "@tabBgColor",
+		"borderStyle": "@tabBorderStyle",
+		"list": [
+			{
+				"iconPath": "@iconPath1",
+				"selectedIconPath": "@selectedIconPath1"
+			},
+			{
+				"iconPath": "@iconPath2",
+				"selectedIconPath": "@selectedIconPath2"
+			}
+		]
+	}
+}
+```
+
+theme.json
+
+```json
+{
+	"light": {
+		"navBgColor": "#f8f8f8",
+		"navTxtStyle": "black",
+		"bgColor": "#ffffff",
+		"bgTxtStyle": "light",
+		"bgColorTop": "#eeeeee",
+		"bgColorBottom": "#efefef",
+		"tabFontColor": "#000000",
+		"tabSelectedColor": "#3cc51f",
+		"tabBgColor": "#ffffff",
+		"tabBorderStyle": "black",
+		"iconPath1": "/static/icon1_light.png",
+		"selectedIconPath1": "/static/selected_icon1_light.png",
+		"iconPath2": "/static/icon2_light.png",
+		"selectedIconPath2": "/static/selected_icon2_light.png"
+	},
+	"dark": {
+		"navBgColor": "#292929",
+		"navTxtStyle": "white",
+		"bgColor": "#1f1f1f",
+		"bgTxtStyle": "dark",
+		"bgColorTop": "#292929",
+		"bgColorBottom": "#1f1f1f",
+		"tabFontColor": "#ffffff",
+		"tabSelectedColor": "#51a937",
+		"tabBgColor": "#292929",
+		"tabBorderStyle": "white",
+		"iconPath1": "/static/icon1_dark.png",
+		"selectedIconPath1": "/static/selected_icon1_dark.png",
+		"iconPath2": "/static/icon2_dark.png",
+		"selectedIconPath2": "/static/selected_icon2_dark.png"
+	}
+}
+```
+
+在[hello uni-app x](https://hellouniappx.dcloud.net.cn/)中，已经配置了theme.json，在 api 的主题切换示例中，可以体验。
+
+**注意：**
+- `iOS 13+`、`Android 10+`设备上才支持暗黑模式

package/data/uniappx/compiler/README.md

@@ -0,0 +1,121 @@
+## 什么是 uni-app x 编译器
+
+`uni-app x`的编译器由uts语言编译器、uvue编译器共同组成，其中uts编译器还调用了kotlin、swift编译器。
+
+编译器把开发者书写的uvue和uts代码进行编译，配合运行时实现了跨平台。
+
+uvue编译器是在Vite基础上进行扩展开发的。
+
+它的大部分特性（如条件编译）和配置项（如环境变量）与`uni-app`的vue3编译器一致，[详见](https://uniapp.dcloud.net.cn/tutorial/compiler.html)
+
+支持less、sass、scss等css预编译。
+
+## 条件编译
+
+多端框架，离不开条件编译。
+
+uni-app发明了完善的条件编译，帮助开发者处理平台差异。即保证了大部分通用逻辑的开发效率和复用，又保证了平台特色的充分利用。
+
+在uni-app x中，进一步新增了APP-ANDROID、APP-IOS的条件编译。
+
+因与uni-app的条件编译大部分相同，请详见[uni-app的条件编译文档](https://uniapp.dcloud.net.cn/tutorial/platform.html)
+
+## 编译缓存@cache
+
+`uni-app x`编译器引入了编译缓存机制，以优化开发体验。
+
+在App端，`uni-app x`首先将uts和uvue编译为平台原生语言（如Kotlin），然后经过平台配套的编译器进行打包运行。
+
+编译过程耗时较长，因此编译器引入了缓存机制来加快开发过程。
+
+在编译时，开发者的uts和uvue代码的编译结果会被持久化为缓存，包括所有uts、uvue文件（无论是插件还是项目内的）的编译结果缓存，存在项目的unpackage目录下。
+
+包括uni-app-x iOS平台js引擎驱动下编译的js产物也会产生缓存。
+
+当下次运行时，如果代码没有发生变动，编译器会优先使用缓存中的编译结果，从而加快编译速度。
+
+但升级HBuilderX或编译器版本后，会重新编译。
+
+缓存有可能失效，如果你修改代码后保存发现手机端没有更新，可以在HBuilderX运行窗口勾选`清理构建缓存`试下。
+
+这个机制类似于传统强类型语言开发中的Build和clean。
+
+![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-x/clean-up-the-build-cache.jpg)#{.zooming width="400px"}
+
+### 注意@tips
+
+- `uni-app x`编译器编译Android平台时会在磁盘很多产生kt、class等临时文件。安全软件（如360、微软）会对其进行木马扫描，消耗电脑性能。建议将项目的unpackage目录设置为信任，以提升编译性能。
+
+> 360设置方式
+
+![](https://web-assets.dcloud.net.cn/hbuilderx-doc/360/360_1.png)#{.zooming width="400px"}
+
+![](https://web-assets.dcloud.net.cn/hbuilderx-doc/360/360_2.png)#{.zooming width="400px"}
+
+> 微软设置方式
+
+![](https://web-assets.dcloud.net.cn/hbuilderx-doc/360/win_1.png)#{.zooming width="400px"}
+
+![](https://web-assets.dcloud.net.cn/hbuilderx-doc/360/win_2.png)#{.zooming width="400px"}
+
+- HBuilderX 4.02 以下版本，运行到自定义基座时，报错：uts插件[xxx]不存在，请重新打包自定义基座。 [解决方案](https://issues.dcloud.net.cn/pages/issues/detail?id=781)
+
+- 为优化开发体验减少运行时页面跳转等待时间，HBuilderX 4.28起，运行到web端浏览器打开后会自动触发剩余页面编译。
+
+## 静态资源文件的处理逻辑@static
+
+编译器首先会扫描全局文件和pages.json，根据pages.json扫描每一个页面，再分析每个页面引用的外部资源，比如uts文件、css文件、uvue组件、图片字体等本地静态资源。
+
+**静态资源文件**，分2类：
+1. 本地的图片、字体、音视频文件。存放在工程的/static目录（或uni_modules的/static目录）
+2. web-view组件加载的本地html文件及配套资源，存放在工程的/hybrid目录
+
+通常，您只需记住：
+1. **所有静态资源图片字体音视频文件，都放置在项目根目录下的static目录**。如果是`uni_modules`，放置在`uni_modules`根下的static目录。
+2. **所有参与编译的、不是静态资源的文件，比如css、js，都不能放在static目录**
+
+但是你会发现，有时候不放在static下的文件也有机会被访问到。如果您好奇这块的细节，可以继续阅读本节。如果觉得繁琐，只需记住上一条。
+
+编译器在扫描页面文件时，对于页面里import的静态资源文件、以及非变量的静态资源，识别比较容易，
+这些静态资源文件会被识别然后复制到编译后的assets目录（不是Android apk的assets目录，是uni-app x编译后和static平级的一个目录），
+
+并且为了防止不同目录的重名文件，assets目录下的文件名末尾会补充hash值。但不确定的文件名也会导致无法使用[file manager](../api/get-file-system-manager.md)的api来访问这些文件。
+
+而对于变量路径的静态资源，因为可能涉及拼接运算等复杂情况，这样的静态资源编译器无法识别，打包后会**丢失这个静态资源文件**。
+
+所以，强烈建议把静态资源都存放在static目录（含uni_modules下的static目录），这个目录下的文件会整体copy到编译产物目录。
+
+当然，由于这个目录是整体copy，所以目录下若存在废弃文件，也会被打包进去。所以要记得清理static目录下的废文件，以减少包体积。
+
+```html
+<template>
+	<image src="./1.png"/> 
+	<image :src="logo"/> 
+	<image :src="imga"/> 
+	<image src="/static/3.png"/> 
+</template>
+
+```
+
+以上代码被编译为apk后，解压apk可以看到如下目录结构：
+
+在`assets\apps\%APPID%\www`目录下，有4个目录：
+
+<pre v-pre="" data-lang="">
+	<code class="lang-" style="padding:0">
+┌─assets
+│  ├─1.ab33ac77.png
+|  └─logo.abb6eead.png
+├─hybrid                App端存放web-view加载的本地html文件的目录
+├─static                本地静态资源（如图片、字体、音视频等文件）的目录
+|  └─3.png
+└─uni_modules           
+   ├─hybrid							uni_modules下的web-view加载的本地html文件的目录
+	 └─static             uni_modules下的本地静态资源（如图片、字体、音视频等文件）的目录
+	</code>
+</pre>
+
+**注意**
+- `uni_modules`下的非static资源引用，也是编译到根目录的assets下，不会编译到`uni_modules`中
+- uts、css等代码文件不是静态资源，它们会被编译为新的代码格式（如Android上会被编译为kt）。
+请不要把这些文件放到static目录中，因为会导致代码里已经编进去了，又copy了一份相同文件到发行包中，重复增加了包体积，并且在开发期间会导致2次热更新。

package/data/uniappx/compiler/_sidebar.md

@@ -0,0 +1,4 @@
+* [概述](README.md)
+* [条件编译](platform.md)
+* [编译运行环境](../worktile/running-env.md)
+* [编译静态资源](page-static-assets.md)

package/data/uniappx/component/README.md

@@ -0,0 +1,206 @@
+# 组件概述
+
+## 组件定义
+
+- 组件是视图层的基本组成单元。
+- 组件是一个单独且可复用的UI及配套功能模块的封装。
+
+我们知道js逻辑可以封装为函数或类库。而对于页面上可视的元素，则可以将ui、样式、逻辑一起封装为组件。
+
+组件涉及较多的概念，包括组件名称、开头和闭合标签、组件属性、组件属性值、组件事件、组件vue指令、组件text内容、子组件。
+
+我们先看一个简单的例子：
+```vue
+<component-name property1="value" property2="value">
+	content
+</component-name>
+```
+
+上面的代码，是一个组件，组件名为component-name，这个组件有2个属性，property1和property2，这2个属性的属性值都是"value"，组件的text内容为"content"
+
+然后我们看一个全面但有些复杂的示例，这段示例融合了组件的各种概念：
+
+```vue
+<template>
+  <view></view>
+	<view>
+		<text v-if="titleShow" :style="'color:' + titleColor">{{title}}</text> 
+	</view>
+	<image src="http://www.noexit.jpg" @error="imgerror"/>
+	<scroll-view >
+		<button type="primary" @click="buttonClick_changeText">修改文字内容</button>
+		<button @click="buttonClick_showHide">点击让文字组件显示或消失</button>
+		<button @click="buttonClick_changeColor">修改文字颜色</button>
+	</scroll-view>
+</template>
+
+```
+
+所有组件，都写在template标签下面。
+
+- 组件的名称和开始/结束标签
+每个组件，都有开始和结束标签。\
+标签由尖括号包裹，它有开始标签和结束标签。结束标签的`<`后面用`/`来表示结束。结束标签也称为闭合标签。
+比如上面例子中template节点下第一个子节点 <view></view> ，view 表示这个组件的名称，<view>为开始标签，</view>为闭合标签。这是一个空的view视图组件。
+
+如果标签没有text内容或子组件，可以写成 自闭合标签，即只写 开始标签，并且 开始标签 以 `/>` 结尾。\
+比如上面例子中的 `<image src="http://www.noexit.jpg" @error="imgerror"/>`
+
+- 组件内容text
+指组件的内容区，即组件的开始标签和闭合标签之间的文字内容。\
+比如上面例子中button组件中的“修改文字内容”。\
+uni-app x中只有button、text组件等少数组件支持内容区，具体需查阅每个组件文档。
+
+- 子组件
+组件的内容区可以不是文字，而是下级组件。\
+比如上面例子中view组件的子组件是text组件，而scroll-view组件下面有3个button子组件。\
+并非所有组件都支持子组件，一般视图组件肯定是支持子组件的，其他组件需要查阅组件的文档说明。
+
+- 组件属性
+组件开始标签的组件名称后面，以空格分割的、以等号赋值的，不以v-或@开头的普通属性。\
+比如上面例子中button组件的[type属性](../component/button.md)，它定义了组件的一些控制参数，这是由组件作者给使用者提供的自定义参数。\
+
+- 组件属性值
+在属性名后面用=号赋值的内容。\
+比如上面例子中button组件的type属性，其属性值为primary，`type="primary"`，即表示一个主按钮。\
+
+- 事件
+组件在发生某些事件后触发的函数。\
+比如上面例子中button组件的click事件。`@click="buttonClick_changeText"`。\
+buttonClick_changeText 是script里定义的一个函数。\
+事件区别于普通属性名的特征是以@开头，事件值指向一个函数（选项式指向一个method）。\
+很多事件还有event参数。\
+比如上面例子中image组件的error事件，绑定到imgerror函数，它有一个参数event对象，类型是ImageErrorEvent。接下来的代码打印了event对象的2个属性。
+
+- vue指令
+vue提供的一批特殊写法的属性，它们以v-开头，比如上面例子中text组件的v-if指令，绑定了一个titleShow的响应式变量，根据变量的true或false可以决定text组件是否显示。详见[vue指令](../vue/built-in.md)\
+有一种特殊指令`v-bind`，一种把属性值变成script以便绑定响应式变量的写法，它的完整写法是 v-bind:普通属性名 = "属性值"，
+但它更常见的写法是简写为在普通属性前面加个冒号，比如上面例子中text组件的:style，`:style="'color:' + titleColor"`。\
+这个写法的意思是，text组件的style样式中，color属性的值绑定到了script定义的响应式变量titleColor上，修改这个响应式变量的值，text组件的文字颜色就会跟着变化。\
+绑定后属性值的内容变成了script，而不再是普通字符串。所以在属性值里写字符串需要再加单引号。
+
+组件们，有公共的属性和事件，[详见](../component/common.md)，也有组件特有的属性和事件，详见每个组件的文档。
+
+每个组件可以有多个属性、指令、事件，用空格分割。它们赋值的=号，前后可以允许0个或1个空格。
+
+所有组件与属性名都是**小写**，单词之间以连字符`-`连接。
+
+## 组件的分类
+
+uni-app x文档规范中有一批标准组件，同时也支持扩展自定义组件。
+
+### 1. 标准组件
+- 1.1 内置组件
+内置在uni-app x引擎中，开发者无需在代码中引用和注册的，可以直接使用。比如view、text、button...
+- 1.2 ext组件
+在app平台，对于不太常用、体积又大的官方基础组件，虽然其文档在uni-app x的官方文档中，但并没有内置到uni-app x引擎中。需要开发者下载ext组件到项目下才能使用。\
+出现这种情况一般是由于小程序规范里内置了该组件，而App端又不常用。（为了多端兼容，uni的组件规范是参考小程序组件规范制定的）\
+比如[animation-view组件](./animation-view.md)。\
+除了ext组件，还有ext api，它们情况类似，详细介绍：[ext插件](https://uniapp.dcloud.net.cn/api/extapi.html)
+
+### 2. 自定义组件
+
+标准组件只是一些基础组件。开发者还可以自行扩展组件，封装UI和逻辑，称为自定义组件。
+
+这类组件需要手动下载到项目中，或者自行在项目下编写。
+
+自定义组件，按开发方式分类，又有2种：前端uvue组件 和 原生uts组件
+
+- 2.1 前端uvue组件
+即开发者自己按照vue组件规范编写的uvue文件。这种组件一般由前端工程师编写。详见[uvue组件模型介绍](../vue/component.md)
+- 2.2 原生uts组件
+这是一种App平台专用的扩展机制。
+由Android或iOS的原生开发者，按照uts插件的组件规范编写，把原生的view嵌入到uvue页面上，它在编写时贴近但不完全是vue组件开发规范。\
+不过对于组件的使用者来讲，用法就是标准的uvue组件了。详见[uts组件开发指南](../plugin/uts-component.md)\
+uts原生组件，下载组件到项目后（或自己按规范编写），在页面template里直接引用即可。无需导入注册组件。
+
+对于前端uvue组件，又有2种引用方式。
+1. 传统vue组件：
+需要先import、注册，然后再在页面template中使用。[详见](../vue/component.md#manual-import-component)
+2. easycom组件
+easycom组件是uni-app(x)提供的一种易用方式，它通过一个路径规范让编译器知道组件的位置，实现自动的import和注册。详见[easycom组件规范](../vue/component.md#easycom)
+
+在uni插件市场（[https://ext.dcloud.net.cn/](https://ext.dcloud.net.cn/)），下载的组件基本都是easycom组件规范或uts原生组件规范，都是在页面里可以直接引用的。
+
+插件市场的功能较多，可以看介绍了解：[详见](https://doc.dcloud.net.cn/uni-app-x/plugin/plugin-ext-introduction.html)
+
+## 其他组件概念
+- datacom
+`datacom`是一种数据驱动的组件，只需要给出符合格式的数据就可以使用。它是uvue组件的子类，尤其适合云端一体组件。详见：[datacom介绍](https://uniapp.dcloud.net.cn/component/datacom.html)
+
+- uni_modules
+`uni_modules`是uni-app生态的包管理方案。非内置组件，可以放在项目下任意位置，也可以封装在`uni_modules`下。一般对外提供的成熟组件都应该封装在`uni_modules`下。\
+如果还不了解`uni_modules`，那务必需要阅读：[uni_modules介绍](https://doc.dcloud.net.cn/uni-app-x/plugin/uni_modules.html)
+
+## 组件的编写
+- 前端uvue组件的开发指南：[详见](../vue/component.md)
+- uts原生组件的开发指南：[详见](../plugin/uts-component.md)
+
+组件开发完毕后可发布到插件市场，插件作者指南：[详见](https://doc.dcloud.net.cn/uni-app-x/plugin/publish.html)
+
+## 调用组件方法@methods
+
+需要把组件分为 内置组件、easycom组件、非easycom组件，这3种组件有不同的方法调用方式。[详情](../vue/component.md#page-call-component-method)
+
+### 内置组件的方法调用或设置属性
+
+> 3.93+ 支持
+
+使用 `this.$refs` 获取组件并as转换为组件对应的element类型，通过 `.`操作符 调用组件方法或设置属性。[详情](../vue/component.md#call-builtin-component-method)
+
+### easycom组件调用方法或设置属性@method_easycom
+
+> 3.97+ 支持 uni_modules 目录下的组件
+
+easycom组件，用法和内置组件一样。也是使用 `this.$refs` 获取组件并转换为组件的类型，通过 `.`操作符 调用组件方法或设置属性。[详情](../vue/component.md#call-easycom-component-method)
+
+### 其它自定义组件的方法调用使用callMethod@$callMethod
+
+如果不是内置组件，也不是easycom组件，那么在Android VDOM模式下，由于是强类型，无法使用`.`操作符了。
+
+此时需使用 `this.$refs` 获取组件实例，然后通过 `$callMethod` 调用组件的方法。也就是把组件的方法名、参数，当做callMethod的参数来传递。此时也就没有`.`操作符那样的代码提示和校验了。[详情](../vue/component.md#call-component-method)。注意：`$callMethod` 调用性能低于easycom组件的强类型调用，如果遇到高频调用场景，建议使用easycom组件的强类型调用方法。
+
+## 如何开发同时兼容 uni-app x 和 uni-app 的组件
+
+### uni-app x 蒸汽模式
+
+uni-app x蒸汽模式的组件支持js/ts/uts。只要不使用uts特殊语法（如UTSJSONObject）、不使用ucss不支持的css，那么一个组件就可以同时兼容uni-app和uni-app x。
+
+### uni-app x vdom模式
+
+有两种方案：
+
+- 目录下同时提供uvue，vue文件，分别适配 uni-app x 和 uni-app
+
+组件作者在 uvue 和 vue 文件中可以自由使用各自的特性，比如 vue 中可以任意使用 js 或 ts 来书写代码，
+
+如果部分组件逻辑被抽离为单独的文件，需要分别命名为各自环境支持的文件类型，导入时不同平台支持的文件类型也不同，
+
+比如 uvue 文件VDOM模式不支持引入js或ts；在 uni-app 项目中 vue 文件不能直接引入单独的 uts 文件，如果有需求，应该封装为uts插件来引入使用。
+
+对于现有的 uni-app 组件，通过新建 uvue 文件来渐进式支持 uni-app x，可以避免对已有 uni-app 项目造成影响
+
+- 仅提供一个vue文件，同时适配 uni-app x 和 uni-app
+
+该方案，需要script节点配置lang="ts"，这样才可以在 uni-app 项目中正常书写带有类型的代码，而在 uni-app x 项目中，则会忽略 lang="ts"，当做 uts 代码编译。
+
+当需要区分平台或项目类型时，可以使用对应的条件编译。
+
+比如通过 UNI-APP-X 来区分项目类型，更多条件编译见：[详情](https://uniapp.dcloud.net.cn/tutorial/platform.html)
+
+### vue 与 uvue 不同文件后缀的优先级 @priority
+
+新建组件时(注意不是新建页面)，默认组件的后缀名为.uvue，但也支持.vue。
+
+.vue里面写uvue的语法，可以正常被.uvue页面引用和编译。
+
+.vue里写条件编译，可以制作同时满足uni-app和uni-app x的组件。
+
+.vue中适用于uni-app x的条件编译区域内的代码，必须符合uni-app x的规范。如果使用uni-app x不支持的、uni-app js引擎版特有的功能，会报错。
+
+当你手动import或easycom手动配置规则，可以指定文件名后缀。比如`import PageHead from '@/components/page-head.uvue'`
+
+但如果未明确指定组件后缀名的情况，且同一个组件目录下即存在.vue文件、又存在.uvue文件，
+此时 `vue` 组件和 `uvue` 组件的优先级如下：
+- 在 `uni-app x` 中，优先使用 `uvue` 组件，如果不存在 `uvue` 组件，则使用 `vue` 组件。
+- 在 `uni-app` 中，只支持使用 `vue` 组件。

package/data/uniappx/component/_sidebar.md

@@ -0,0 +1,118 @@
+* [概述](README.md)
+* [全局属性和事件](common.md)
+* 内置组件```{"collapsable": false}```
+  * 视图容器
+    * [view | 基本视图容器](view.md)
+    * [glass-effect-view | 玻璃效果视图容器](glass-effect-view.md)
+    * [scroll-view | 可滚动视图容器](scroll-view.md)
+    * [swiper | 滑块视图容器](swiper.md)
+    * [list-view | 列表容器](list-view.md)
+    * [waterflow | 瀑布流容器](waterflow.md)
+    * nested-scroll | 嵌套滚动
+      * [nested-scroll-header](nested-scroll-header.md)
+      * [nested-scroll-body](nested-scroll-body.md)
+    * sticky | 粘性布局组件
+      * [sticky-header | 吸顶布局容器](sticky-header.md)
+      * [sticky-section | 吸顶布局容器](sticky-section.md)
+		* [page-container | 弹层容器](page-container.md)
+		* [match-media | 匹配检测节点](match-media.md)
+    * [share-element | 共享元素视图容器](share-element.md)
+    * movable | 可拖动组件
+      * [movable-area | 可拖动区域](movable-area.md)
+      * [movable-view | 可拖动视图容器](movable-view.md)
+    * cover
+      * [~~cover-view~~](cover-view.md)
+      * [~~cover-image~~](cover-image.md)
+  * 基础内容
+    * [icon | 图标](icon.md)
+    * [text | 文本](text.md)
+    * [rich-text | 富文本](rich-text.md)
+    * [progress | 进度条](progress.md)
+    * [loading | 加载组件](loading.md)
+    * [native-view](native-view.md)
+  * 表单组件
+    * [button | 按钮](button.md)
+    * checkbox | 多选框
+      * [checkbox | 多选框](checkbox.md)
+      * [checkbox-group | 多选框组](checkbox-group.md)
+    * [form | 表单](form.md)
+    * [input | 输入框](input.md)
+    * [editor | 富文本编辑器](editor.md)
+    * [label](label.md)
+    * [picker | 底部弹出滚动选择器](picker.md)
+    * [picker-view | 嵌入页面的滚动选择器](picker-view.md)
+    * radio | 单选框
+      * [radio | 单选框](radio.md)
+      * [radio-group | 单选框组](radio-group.md)
+    * [slider | 滑动选择器](slider.md)
+    * [switch | 开关选择器](switch.md)
+    * [textarea | 多行输入框](textarea.md)
+  * 导航
+    * [navigator | 页面链接](navigator.md)
+  * 媒体组件
+    * [image | 图片](image.md)
+    * [video | 视频](video.md)
+    * [camera | 相机](camera.md)
+    * [live-player | 拉流](live-player.md)
+    * [live-pusher | 推流](live-pusher.md)
+    * [animation-view | Lottie动画](animation-view.md)
+  * 地图
+    * [map | 地图](map.md)
+  * 画布
+    * [canvas | 画布](canvas.md)
+  * 广告
+    * [ad | 信息流广告](ad.md)
+  * 网页
+    * [web-view](web-view.md)
+  * 页面属性配置节点
+    * [custom-tab-bar](custom-tab-bar.md)
+    * [navigation-bar](navigation-bar.md)
+    * [page-meta](page-meta.md)
+  * unicloud
+    * [unicloud-db](unicloud-db.md)
+* [uni-ui x 扩展组件](./uni-ui-x/README.md)
+  * [uni-badge-view | 数字角标](./uni-ui-x/uni-badge-view.md)
+  * [uni-collapse | 折叠面板容器](./uni-ui-x/uni-collapse.md)
+  * [uni-drag-cell | 可拖拽排序](./uni-ui-x/uni-drag-cell.md)
+  * [uni-fab-button | 悬浮按钮](./uni-ui-x/uni-fab-button.md)
+  * [uni-index-bar | 索引条](./uni-ui-x/uni-index-bar.md)
+  * [uni-link | 链接](./uni-ui-x/uni-link.md)
+  * [uni-number-box | 数字输入框](./uni-ui-x/uni-number-box.md)
+  * [uni-nav-bar | 自定义导航栏](./uni-ui-x/uni-nav-bar.md)
+  * [uni-rate | 评分](./uni-ui-x/uni-rate.md)
+  * [uni-time-format | 时间格式化](./uni-ui-x/uni-time-format.md)
+  * [uni-tab-bar | 选项卡容器](./uni-ui-x/uni-tab.md)
+  * [uni-refresh-box | 自定义下拉刷新](./uni-ui-x/uni-refresh-box.md)
+* 微信专用组件
+  * Skyline
+    * 手势系统
+      * [double-tap-gesture-handler](double-tap-gesture-handler.md)
+      * [force-press-gesture-handler](force-press-gesture-handler.md)
+      * [horizontal-drag-gesture-handler](horizontal-drag-gesture-handler.md)
+      * [long-press-gesture-handler](long-press-gesture-handler.md)
+      * [pan-gesture-handler](pan-gesture-handler.md)
+      * [scale-gesture-handler](scale-gesture-handler.md)
+      * [tap-gesture-handler](tap-gesture-handler.md)
+      * [vertical-drag-gesture-handler](vertical-drag-gesture-handler.md)
+    * [draggable-sheet](draggable-sheet.md)
+    * [grid-builder](grid-builder.md)
+    * [grid-view](grid-view.md)
+    * [list-builder](list-builder.md)
+    * [open-container](open-container.md)
+    * [snapshot](snapshot.md)
+    * [span](span.md)
+  * 开放能力
+    * [ad-custom](ad-custom.md)
+    * [official-account](official-account.md)
+    * [store-home](store-home.md)
+    * [store-product](store-product.md)
+  * 其他
+    * [block](block.md)
+    * [aria-component](aria-component.md)
+    * [native-component](native-component.md)
+    * [channel-live](channel-live.md)
+    * [channel-video](channel-video.md)
+    * [voip-room](voip-room.md)
+    * [keyboard-accessory](keyboard-accessory.md)
+    * [root-portal](root-portal.md)
+    * [functional-page-navigator](functional-page-navigator.md)

package/data/uniappx/component/ad-custom.md

@@ -0,0 +1,29 @@
+::: sourceCode
+## ad-custom
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| unit-id | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>广告单元id，可在[小程序管理后台](https://mp.weixin.qq.com)的流量主模块新建 |
+| ad-intervals | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 模板 广告不会自动刷新） |
+| @load | eventhandle | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>广告加载成功的回调 |
+| @error | eventhandle | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>广告加载失败的回调，event.detail = {errCode: 1002} |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.open-ability.ad-custom)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/ad-custom.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=ad-custom&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=ad-custom&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=ad-custom&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=ad-custom&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=ad-custom)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=ad-custom&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)