tmui-cli 2.0.2 → 2.0.4

package/data/uni-app-x-docs/component/view.md

@@ -0,0 +1,86 @@
+<!-- ## view -->
+
+<!-- UTSCOMJSON.view.name -->
+
+<!-- UTSCOMJSON.view.description -->
+
+view组件是 uni-app x 最基本的视图容器，它的作用类似于HTML中的div标签。
+
+<!-- UTSCOMJSON.view.compatibility -->
+
+<!-- UTSCOMJSON.view.attribute -->
+
+#### hover-class说明@hover-class
+
+- 为什么使用`hover-class`？使用 css :active伪类来实现点击态，很容易触发，并且滚动或滑动时点击态不会消失，体验较差。小程序平台均给view引入了`hover-class`，考虑到跨端兼容和体验，建议使用 `hover-class` 属性来实现点击态效果。并且App平台目前暂不支持css伪类。
+
+
+<!-- UTSCOMJSON.view.event -->
+
+<!-- UTSCOMJSON.view.component_type-->
+
+#### App平台@app
+- HBuilder4.0以下版本`hover-class`属性App端与微信小程序效果一样，手指按下进入`hover-class`状态后，手指移动就会取消`hover-class`状态
+- HBuilder4.0及以上版本App端调整为手指在view范围内移动不会取消`hover-class`状态，手指移动到view范围之外才会取消`hover-class`状态
+
+
+#### 获取原生view对象@nativeview
+
+为增强uni-app x组件的开放性，从 `HBuilderX 4.25` 起，UniElement对象提供了 [getAndroidView](../dom/unielement.md#getandroidview) 和 [getIOSView](../dom/unielement.md#getiosview) 方法。
+
+该方法可以获取到 view 组件对应的原生对象，即Android的`ViewGroup`对象、iOS的`UIView`对象。
+
+进而可以调用原生对象提供的方法，这极大的扩展了组件的能力。
+
+**Android 平台：**
+
+获取view组件对应的UniElement对象，通过UniElement对象的[getAndroidView](../dom/unielement.md#getandroidview-2)函数获取组件原生ViewGroup对象
+
+```uts
+//导入安卓原生ViewGroup对象
+import ViewGroup from "android.view.ViewGroup"
+
+//通过view组件定义的id属性值，获取view标签的UniElement对象
+const viewElement = uni.getElementById(id)
+//UniElement.getAndroidView设置泛型为安卓底层ViewGroup对象, 直接获取ViewGroup 如果泛型不匹配会返回null
+if(viewElement != null) {
+	//viewGroup就是view组件对应的原生view对象
+	const viewGroup = viewElement.getAndroidView<ViewGroup>()
+	if(viewGroup != null) {
+		// viewGroup.xx 即可使用ViewGroup的方法
+	}
+}
+```
+
++ getAndroidView 方法需要在 uts 插件中使用。
+
+**iOS 平台：**
+
+获取view组件对应的UniElement对象，通过UniElement对象的[getIOSView](../dom/unielement.md#getiosview)函数获取组件原生UIView对象
+
+```uts
+//通过 view 组件定义的 id 属性值，获取 view 标签的 UniElement 对象
+const viewElement = uni.getElementById(id)
+//获取原生 view
+const view = viewElement?.getIOSView();
+if (view != null && view instanceof UIView) {
+    // view.xx 即可使用UIView的方法
+}
+
+```
+
++ getIOSView 方法需要在 uts 插件中使用。
+
+更多示例请参考 uts 插件 [uts-get-native-view](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/uni_modules/uts-get-native-view/utssdk/app-ios/index.uts)
+
+注意：
+- 鸿蒙平台蒸汽模式无法获取到原生view对象
+- 设置flatten属性后，无法获取原生view对象
+
+<!-- UTSCOMJSON.view.children -->
+
+<!-- UTSCOMJSON.view.example -->
+
+<!-- UTSCOMJSON.view.reference -->
+
+view是Drawable的组件，也就是可以在view上调用绘制API自绘内容。它类似canvas，但不需要单独的canvas组件，在view上就可以直接draw。[详见](../dom/drawablecontext.md)

package/data/uni-app-x-docs/component/voip-room.md

@@ -0,0 +1,19 @@
+<!-- ## voip-room -->
+
+<!-- UTSCOMJSON.voip-room.name -->
+
+<!-- UTSCOMJSON.voip-room.description -->
+
+<!-- UTSCOMJSON.voip-room.compatibility -->
+
+<!-- UTSCOMJSON.voip-room.attribute -->
+
+<!-- UTSCOMJSON.voip-room.event -->
+
+<!-- UTSCOMJSON.voip-room.component_type -->
+
+<!-- UTSCOMJSON.voip-room.children -->
+
+<!-- UTSCOMJSON.voip-room.example -->
+
+<!-- UTSCOMJSON.voip-room.reference -->

package/data/uni-app-x-docs/component/waterflow.md

@@ -0,0 +1,122 @@
+<!-- ## waterflow -->
+
+<!-- UTSCOMJSON.waterflow.name -->
+
+<!-- UTSCOMJSON.waterflow.description -->
+
+<!-- UTSCOMJSON.waterflow.compatibility -->
+
+在App中，waterflow 底层实现与list-view底层实现方式基本一致，仅子组件排列方式存在差异，适用于多元素瀑布流长列表场景，子组件滑动出屏幕会及时回收复用。性能优于 scroll-view
+
+> waterflow 暂时只支持 flow-item 组件为子组件，其他组件不可见
+
+> waterflow 只支持竖向滚动，不支持横向滚动
+
+> 鸿蒙平台api 20及以上版本支持滚动相关事件，api 18及以上版本支持load-more插槽
+
+<!-- UTSCOMJSON.waterflow.attribute -->
+
+<!-- UTSCOMJSON.waterflow.event -->
+
+<!-- UTSCOMJSON.waterflow.component_type -->
+
+### 自定义下拉刷新样式
+
+waterflow组件有默认的下拉刷新样式，使用方式与scroll-view的自定义下拉刷新相同。[详见](./scroll-view.md#customrefresh)
+
+uni-ui x 提供了开源的自定义下拉刷新组件，可以体验：[uni-refresh-box](https://doc.dcloud.net.cn/uni-app-x/component/uni-ui-x/uni-refresh-box.html)
+
+1. 设置`refresher-default-style`属性为 none 不使用默认样式
+2. 设置 flow-item 定义自定义下拉刷新元素并声明为 `slot="refresher"`，需要设置刷新元素宽高信息否则可能无法正常显示！
+   ```html
+   <template>
+   	<waterflow refresher-default-style="none" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
+   			 @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"
+   			 @refresherrestore="onRefresherrestore" style="flex:1" >
+
+   		<flow-item v-for="i in 10" class="content-item" type=1>
+   			<text class="text">item-{{i}}</text>
+   		</flow-item>
+
+   		<!-- 自定义下拉刷新元素 -->
+   		<flow-item slot="refresher" class="refresh-box" type=2>
+   			<text class="tip-text">{{text[state]}}</text>
+   		</flow-item>
+   	</waterflow>
+   </template>
+   ```
+3. 通过组件提供的refresherpulling、refresherrefresh、refresherrestore、refresherabort下拉刷新事件调整自定义下拉刷新元素！实现预期效果
+
+**注意：**
++ 目前自定义下拉刷新元素不支持放在waterflow的首个子元素位置上。可能无法正常显示
+
+### 加载更多(load-more)
+
+由于 waterflow 组件是多列的，单个 flow-item 组件无法占用一整行，加载更多展示不太友好，所以我们提供了slot="load-more"属性配置，waterflow 组件会特殊处理最后一个 flow-item 子组件，如果配置了slot="load-more"则显示一整行
+
+   ```html
+   <template>
+   	<waterflow style="flex:1" >
+
+   		<flow-item v-for="i in 10" class="content-item" type=1>
+   			<text class="text">item-{{i}}</text>
+   		</flow-item>
+
+   		<flow-item slot="load-more" id="loadmore" type=3 class="load-more-box">
+            <text>加载更多</text>
+        </flow-item>
+   	</waterflow>
+   </template>
+   ```
+
+**注意：**
++ slot="load-more"仅对 waterflow 最后一个 flow-item 子组件生效
+
+### 嵌套模式
+
+scroll-view开启嵌套模式后，waterflow 可作为内层滚动视图与外层 scroll-view 实现嵌套滚动
+
+设置内层 waterflow 的 `associative-container` 属性为 "nested-scroll-view"，开启内层 waterflow 支持与外层 scroll-view 嵌套滚动
+
+<!-- UTSCOMJSON.waterflow.children -->
+
+<!-- UTSCOMJSON.waterflow.example -->
+
+<!-- UTSCOMJSON.waterflow.reference -->
+
+### App平台
+
+- waterflow的性能优化，与list-view相同，详见[列表性能优化](./list-view.md#performance)
+- waterflow 组件默认高度是计算后瀑布流高度，无法滚动，如需要滚动要设置高度小于瀑布流高度，推荐配置 "flex:1"
+- waterflow 组件在排版完毕UI展示后，如果子组件高度发生变化，则会重新排版，flow-item 组件的UI会出现短暂的错乱和位置位移，建议控制子元素高度固定避免动态修改高度
+	+ 场景一 image组件设置mode=widthFix，加载的网络图片会出现异步图片下载动态修改高度的情况，容易出现上述问题
+	+ 场景二 rich-text组件nodes节点内容存在网络图片，出现异步加载情况，会出现动态修改高度导致出现上述问题
+- waterflow 组件的 overflow 属性不支持配置 visible
+
+<!-- ## flow-item -->
+
+<!-- UTSCOMJSON.flow-item.name -->
+
+<!-- UTSCOMJSON.flow-item.description -->
+
+<!-- UTSCOMJSON.flow-item.compatibility -->
+
+waterflow 的子组件，配合 waterflow 内部业务实现 flow-item 回收复用，实现高性能的瀑布流长列表组件。flow-item 组件宽度由 waterflow 的 cross-axis-count 属性决定，所以设置与宽度相关的style样式都不生效。
+
+flow-item 宽度计算公式：((waterflow的width - waterflow的左右的padding值域 - waterflow的border-width的值域) - (cross-axis-count - 1) * cross-axis-gap) / cross-axis-count
+
+<!-- UTSCOMJSON.flow-item.attribute -->
+
+### flow-item复用机制
+
+waterflow 与 list-view 实现机制几乎一致，所以 flow-item 与 list-item 组件复用机制是一样的，请参考：[list-item复用机制](list-item.md#list-item复用机制)
+
+<!-- UTSCOMJSON.flow-item.event -->
+
+<!-- UTSCOMJSON.flow-item.component_type -->
+
+<!-- UTSCOMJSON.flow-item.children -->
+
+<!-- UTSCOMJSON.flow-item.example -->
+
+<!-- UTSCOMJSON.flow-item.reference -->

package/data/uni-app-x-docs/component/web-view.md

@@ -0,0 +1,160 @@
+<!-- ## web-view -->
+
+<!-- UTSCOMJSON.web-view.name -->
+
+<!-- UTSCOMJSON.web-view.description -->
+
+<!-- UTSCOMJSON.web-view.compatibility -->
+
+<!-- UTSCOMJSON.web-view.attribute -->
+
+<!-- UTSCOMJSON.web-view.event -->
+
+<!-- UTSCOMJSON.web-view.component_type -->
+
+
+### 组件宽高说明
+- web和小程序平台上，web-view是全屏的，即页面只能显示一个铺满的web-view。
+- app平台的web-view组件可以自由调整大小和位置。在uni-app x 4.0以前，默认宽、高为0px，页面中使用时需设置相应的 css 属性控制组件宽高才能正常显示。从4.0起改为默认宽高100%。
+
+### 嵌套滚动说明
+App平台 web-view 组件可在 scroll-view、list-view/list-item 等可滚动容器中使用，如果 web-view 中的内容可以滚动，则会出现嵌套滚动的问题，细节如下：
+- app-android平台，默认开启嵌套滚动，在web-view区域操作时，会优先滚动web页面内容（web页面的body内容），web页面内容无法滚动了再滚动外层嵌套滚动容器。如果web页面使用了区域滚动，嵌套滚动逻辑不会受页面中touch事件的默认行为（[Event：preventDefault](https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault)）影响，仅判断web页面内容是否可滚动，web页面内容无法滚动则触发外层嵌套滚动容器，如需配置外层嵌套容器不处理滚动需配置 android-nested-scroll 属性为 none。
+- app-ios平台，在web-view区域操作时，会优先滚动web-view内容（web页面的body内容），web页面内容无法滚动并且滚动条消失后才能操作滚动外层嵌套滚动容器。如果web页面使用了区域滚动，则受页面中touch事件的默认行为（[Event：preventDefault](https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault)）逻辑控制，即阻止了默认行为则不滚动外层嵌套滚动容器，不阻止默认行为则滚动外层嵌套滚动容器。
+
+### src路径支持说明
+
+- 本地路径/static方式
+	由于uni-app/uni-app x编译时，只把/static目录下的静态资源copy到app中，所以src均需指向/static目录下。
+	其他目录的html文件由于不会被打包进去，所以无法访问。
+	app平台文件路径会存在大小写敏感问题，为了有更好的兼容性，建议统一按大小写敏感原则处理 [详情](../api/file-system-spec.md#casesensitive)
+
+- 支持网络路径
+	支持http、https。
+	app平台使用系统Webview组件，由系统Webview管理缓存。
+
+<!-- UTSCOMJSON.web-view.children -->
+
+<!-- UTSCOMJSON.web-view.example -->
+
+<!-- UTSCOMJSON.web-view.reference -->
+
+### 上下文对象API
+
+web-view的操作api为[uni.createWebViewContext()](../api/create-webview-context.md)。
+
+给web-view组件设一个id属性，将id的值传入uni.createWebViewContext()，即可得到web-view组件的上下文对象，进一步可使用`.evalJS()`、`.reload()`等封装好的跨平台方法。
+
+#### 获取原生WebView对象@nativeview
+
+为增强uni-app x组件的开放性，从 `HBuilderX 4.25` 起，UniElement对象提供了 [getAndroidView](../dom/unielement.md#getandroidview) 和 [getIOSView](../dom/unielement.md#getiosview) 方法。
+
+该方法可以获取到 web-view 组件对应的原生 `WebView` 对象，从而可以调用原生 API 以扩展当前 web-view 组件和上下文对象未提供的能力。
+
+比如：Android 平台和 iOS 平台的原生 WebView 都提供了 canGoBack 和 canGoForward 两个 API，用来判断当前网页是否可以回退和前进。但 uni-app x 的 web-view 组件上下文对象没有封装上述 API。
+
+下面则举例说明在 Android 平台如何通过获取原生 WebView 对象来实现上述能力（iOS 平台写法类似）。
+
+```js
+import WebView from 'android.webkit.WebView';
+
+function canGoBack() : boolean {
+	// 第一步获取web-view组件的UniElement对象
+	const element = uni.getElementById(elementId); //elementId为页面上web-view组件的id。不过一般建议从uvue页面给uts插件传入指定的UniElement对象，而不是在uts插件中直接获取页面组件的id。
+	// 第二步通过UniElement的getAndroidView方法，通过泛型指定的方式，获取Android原生的WebView对象。泛型参数即为原生对象的类型名称
+  const webview = element?.getAndroidView<WebView>();
+	// 然后就可以调用原生WebView的各种方法，比如 canGoBack 方法
+  return webview == null ? false : webview.canGoBack();
+}
+
+function canGoForward() : boolean {
+  const element = uni.getElementById(elementId); //elementId为页面上web-view组件的id
+  const webview = element?.getAndroidView<WebView>();
+  return webview == null ? false : webview.canGoForward();
+}
+```
+
+详细的示例源码，在 hello uni-app x 的 组件 -> [web-view 示例](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/pages/component/web-view/web-view.uvue) 中，
+获取原生WebView对象，然后进一步使用了可否前进后退的方法，封装代码如下：
+- [Android](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/uni_modules/uts-get-native-view/utssdk/app-android/index.uts)
+- [iOS](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/uni_modules/uts-get-native-view/utssdk/app-ios/index.uts)
+
+
+### web-view组件的内外通信
+- uts向web-view的网页发消息
+
+	使用`evalJS()`方法，详见上方示例代码
+
+- web-view里的网页向uts发消息
+
+	在网页中引入[uni.webview.1.5.5.js](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/hybrid/html/uni.webview.1.5.5.js)。即可在网页中调用一批uni的api，包括：
+
+|方法名|说明|平台差异说明|
+|:-|:-|:-|
+|uni.webView.navigateTo|[navigateTo](../api/navigator.md#navigateto)|Web平台暂不支持|
+|uni.webView.redirectTo|[redirectTo](../api/navigator#redirectto)|Web平台暂不支持|
+|uni.webView.reLaunch|[reLaunch](../api/navigator#relaunch)|Web平台暂不支持|
+|uni.webView.switchTab|[switchTab](../api/navigator#switchtab)|Web平台暂不支持|
+|uni.webView.navigateBack|[navigateBack](../api/navigator#navigateback)|Web平台暂不支持|
+|uni.webView.getEnv|获取当前webView环境|uvue/nvue/plus/h5|
+|uni.webView.postMessage|向应用发送消息|Web平台暂不支持|
+
+在网页中使用`uni.webView.postMessage()`即可向uts发送消息。
+
+uts端在 `<web-view>` 组件的 `message` 事件回调 `event.detail.data` 中接收消息。
+
+示例代码详见[hello uni-app x 的 /hybrid/html/local.html](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/hybrid/html/local.html)
+
+**Tips**
+
+- 传递的消息信息，必须写在 data 对象中。
+- `event.detail.data` 中的数据，以数组的形式接收每次 post 的消息。（注：支付宝小程序除外，支付宝小程序中以对象形式接受）
+- web平台web-view组件底层使用iframe实现，会有浏览器安全策略限制。一般不推荐在web平台使用web-view组件，如确需使用，且需要通信，请自行根据iframe的浏览器规范进行通信。
+
+### 本地网页跨域@cors
+web-view组件有跨域问题，服务器网页的跨域问题属于常规web开发范畴，请自行查阅文档。\
+但当App平台加载本地磁盘的html文件时，跨域问题需要单独说明。
+
+各App平台的webview对本地网页跨域的策略不同，Android、iOS、鸿蒙，要求依次严格。
+
+#### 鸿蒙
+鸿蒙其自身有设计问题，在同一时间，web-view只能配置允许访问下列2种本地目录中的一种。
+1. App 包资源（如项目 static 文件夹内容）
+2. 沙盒文件（如使用 uni.downloadFile 下载的文件等，[详见](../api/file-system-spec.md)）
+
+uni-app x中，web-view组件在鸿蒙上**默认**配置为允许跨域访问 App包资源。
+
+所以，默认情况下，**web-view访问应用沙盒文件会报不允许访问**。
+
+- 如果开发者需要访问应用沙盒，需要用如下代码对web-view切换设置：
+
+```ts
+// 获取web-view组件对应的鸿蒙原生Controller
+const webviewController = uni.getElementById(elementId)?.getHarmonyController() as webview.WebviewController | null
+// 修改跨域设置
+webviewController?.setPathAllowingUniversalAccess([])
+```
+
+- 上述修改将允许该web-view访问应用沙箱目录，但会造成该web-view无法再访问 App包资源。如需再访问 App 资源（如项目 static 文件夹内容），需要再调用如下代码切换：
+```ts
+const webviewController = uni.getElementById(elementId)?.getHarmonyController() as webview.WebviewController | null
+
+webviewController?.setPathAllowingUniversalAccess([
+	getContext()!.filesDir,
+	getContext()!.getApplicationContext().filesDir,
+	getContext()!.resourceDir,
+	getContext()!.getApplicationContext().resourceDir
+].filter(item => !!item).map(item => item + '/uni-app-x/apps'))
+```
+
+鸿蒙的安全团队认为过多开放目录访问会造成安全漏洞，但同时也限制了开发者需求的实现。DCloud正在与华为交涉，[详见](https://issuereporter.developer.huawei.com/detail/250515172631027/comment?ha_source=Dcloud&ha_sourceId=89000448)
+
+## 注意
+- app平台web-view组件为系统Webview组件，内核版本号不由uni-app x框架控制。
+- app-android平台，web-view版本不一定是手机默认浏览器的版本。在部分手机上系统web-view的升级需要升级rom，部分手机则可以单独升级Android System Webview包。如需x5等三方webview，需使用uts插件，[见插件市场](https://ext.dcloud.net.cn/search?q=x5)。使用三方webview可减少系统webview的碎片化问题。
+- app-ios平台，web-view的版本与iOS的版本绑定，也即是手机Safari浏览器的版本。WKWebview的限制比Android要多一些，比如无法使用跨域cookie，具体见Apple开发者文档。
+- app-ios平台不支持padding style（padding-top、padding-left、padding-right、padding-bottom）
+- 页面中的web-view组件数量不宜太多，每个web-view都会占用不少内存。
+- uni.postMessage已不推荐使用（将废弃），功能与uni.webView.postMessage一致，推荐使用uni.webView.postMessage。
+
+<md-hperm :permissions="[{ name: 'ohos.permission.APPROXIMATELY_LOCATION', desc: '网页触发地理位置授权时请求该权限。' }, { name: 'ohos.permission.LOCATION', desc: '网页触发地理位置授权时请求该权限。' }, { name: 'ohos.permission.CAMERA', desc: 'Web 内容请求相关受保护资源时涉及该权限。' }, { name: 'ohos.permission.MICROPHONE', desc: 'Web 内容请求 ProtectedResourceType.AUDIO_CAPTURE 时，会请求该权限。' }]" />

package/data/uni-app-x-docs/css/README.md

@@ -0,0 +1,274 @@
+# uvue css使用
+
+uni-app x 在 app平台实现了 web css 的子集。
+
+这个子集有时也被称为 ucss，但工程文件仍然是 css、less、scss 等后缀，style 节点的 lang 属性也没有特殊之处。
+
+子集并不影响开发者开发出所需的界面，仅是写法上没有那么丰富。
+
+当 uni-app x 编译到 web、小程序等平台时，可以支持 web 的全部 css。同时，**编译器会进行 css 重置**，保证 ucss 这个子集在各端效果的一致性。这也意味着使用uni-app x的web端，和直接在浏览器里写html在默认值处理上有一定的差异。[见下](#css-reset)
+
+浏览器、Android原生、iOS原生，都有自己的布局和样式设置系统。
+
+ucss这个子集，是抽取了web和app的共同能力，并通过web的css写法来设置原生布局和样式。
+
+原生App的组件样式都是通过组件的属性设置的。父子组件的属性隔离，样式不会继承。
+
+App端与web常见的区别是：
+1. 仅支持**flex 布局**和绝对定位：这是web、iOS、Android均支持的布局方式
+2. 选择器**只能用 class 选择器**，不能用tag、#id、[attr]等选择器，目前class选择器不支持除A-Z、a-z、0-9、_、- 之外的字符
+3. **样式不继承**，即父元素样式不影响子元素
+
+> 但以上仅是常见的区别，并非所有，需开发者继续阅读全文。
+
+## 页面布局
+
+uni-app x 使用flex布局，即弹性盒布局。
+
+flex是一种清晰易用、高性能、全平台支持的布局。不管web、Android、iOS、微信skyline、快应用，均支持flex布局。
+
+web浏览器默认排版是block。block更适合布局文档，比如论文、新闻、blog文章。而web app，使用flex布局会性能更好。
+
+为了跨平台一致性和性能，uni-app x编译到web和小程序时，默认的布局也重置为了flex，且默认为竖向，即`flex-direction: column;`。
+
+如果不了解flex可以参考：[MDN的flex教程](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+
+虽然uni-app x的页面布局默认为Flex，但一些组件的内部也有其他布局。
+- text组件内部为inline
+- rich-text组件内部为block，适于文档、图文显示
+- waterflow组件内部为grid
+
+web和小程序平台虽然默认是flex布局，但通过高权重的样式写`display:block`也可以生效。
+
+### flex方向 @flex-direction
+
+在W3C规范中，flex 默认是`横向`的，但uni-app x里全平台的flex方向默认值都是`纵向`的。
+
+因为W3C规范中，起初布局是block，后来推出flex时更高频率是用它的横排能力。而在flex是第一布局模型的手机端，大量布局都是竖排的，此时要求开发者大量编写`style="flex-direction:column"`很不友好。
+
+所以在uni-app x中默认是竖排（之前nvue也默认是竖排）。
+
+```html
+<view style="flex-direction:row">
+	<!-- 这里的组件们都是横排 -->
+</view>
+<view style="flex-direction:column">
+	<!-- 这里的组件们都是竖排 -->
+</view>
+<view>
+	<!-- 这里的组件们在uni-app x里全平台都是竖排。而W3C的规范中这里是横排 -->
+</view>
+```
+
+一般在`app.uvue`的style里编写全局样式，在页面里使用class引用更为方便。
+```html
+<style>
+.uni-row{
+	flex-direction: row;
+}
+.uni-column{
+	flex-direction: column;
+}
+</style>
+```
+
+```vue
+<template>
+	<scroll-view class="uni-column" style="flex:1">
+		<view class="uni-row">
+			<text>左</text>
+			<text>右</text>
+			<!-- 2个text组件横排 -->
+		</view>
+		<view class="uni-column">
+			<text>上</text>
+			<text>下</text>
+			<!-- 2个text组件竖排 -->
+		</view>
+	</scroll-view>
+</template>
+```
+
+::: info 其实flex布局概念非常简单清晰。解释下上面的代码。
+
+1. 页面根节点是一个纵向的（class="uni-column"）、全屏的（style="flex:1"）scroll-view，那么它的子view们就是纵向。
+2. 二级view里的第一个view，设为横向，里面又放了2个三级组件text，那么这2个三级组件text是横向，即左右2个字。
+:::
+
+### 页面级滚动@pagescroll
+
+App平台vdom模式下，页面不可滚动。蒸汽模式，以及其他平台，页面均可滚动。[详见](../page.md#disablescroll)
+
+## 样式不继承@stylenoextends
+
+web的样式继承，主要是文字样式继承。web的css属性众多，规范比较松散，随便一个div都可以写文字相关的样式。这样其实不严谨、性能也不好。
+
+在原生等严谨的应用开发方案中，均是组件搭配该组件的专有属性。容器组件和文本组件分离，属性各自隔离，不可能在容器组件里写文本组件的样式。
+
+在uni-app x中也是，文本必须使用`<text>`组件，`<view>`组件就是容器组件，`<view>`的style里不应使用与文本修饰相关的样式，比如文字颜色、大小等。
+
+如下代码，在web浏览器渲染时，父view的style会影响子text，所以123是红色。
+
+但是在app-uvue中，样式不继承，123的颜色仍然是默认颜色黑色。
+```html
+<template>
+	<view style="color:red">
+		<text>123</text>
+	</view>
+</template>
+```
+
+在app-uvue中，如需修改123的样式，需写在text组件中
+```html
+<template>
+	<view>
+		<text style="color:red">123</text>
+	</view>
+</template>
+```
+
+uvue中文字都是要使用text组件的。
+
+虽然把文字直接写在view的text区也能运行，其实是因为编译器自动套了一层text组件。
+```html
+<template>
+	<view>123</view>
+</template>
+```
+
+上述代码，在编译后其实变成了：
+```html
+<template>
+	<view>
+		<text>123</text>
+	</view>
+</template>
+```
+
+那么，就意味着直接写在view的text区，虽然可以用，但将无法修改文字的样式。因为被自动套一层的text组件上没有任何样式。
+
+也就是下面的代码是不能改变文字颜色的。
+```html
+<template>
+	<view style="color:red">123</view> <!-- 文字颜色不会变，因为被套了一层text组件后，父view的样式并不能被新套的text组件继承-->
+</template>
+```
+
+app-uvue的css的“样式不继承”规则，虽然与web有差异，其实只是更严谨。而且排错也更容易，继承样式方案经常出现子非预期的被某个父干扰样式。
+
+一般情况下，开发者遵循仅在text组件下写文字有关的样式，就可以编译到全端而保持界面正常。
+
+由于app平台样式不继承，那么在web中继承相关的关键字`inherit`、`unset`在app中也不支持。
+
+由于web的css中某些属性的默认值就是`inherit`，即继承父，此时在ucss中会修改为一个独立而具体的默认值。
+
+## 样式冲突、优先级@css-specificity
+
+在web中，因为有多种样式的设置方式、父子样式也有继承关系，这导致很多样式冲突。既然有冲突，就需要明确优先级规则。
+
+实际上web的样式优先级规则非常非常复杂，可参考[MDN文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity)
+
+app中，设置样式只有内联样式即style属性和class属性这两种方式。它们遵循以下规则：
+
+
+- 内联样式(即style属性)优先级高于class选择器
+
+- 单class选择器以组件class属性中的书写顺序确定优先级，后边的优先级高（与web有差异，web是按class定义顺序确定优先级）
+
+	```vue
+	<template>
+		<!--如果希望a的优先级高于b,为了各端一致，需要确保在<style>中a的定义顺序在b的后边，且组件class属性中也保证a在b的后边-->
+			<text class="b a">hello world</text>
+	</template>
+	<style>
+			.b {
+					color: blue
+			}
+
+			.a {
+					color: red
+			}
+	</style>
+	```
+
+- class复合选择器之间的优先级遵循web规范，但需要规范写法
+
+	```vue
+	<template>
+			<!--如果希望.a.c的优先级高于.a.b，需要确保在<style>中.a.c的定义顺序在.a.b的后边，且确保复合选择器写的时候，统一使用同一个前缀.a，如果换成.c.a在App端优先级会有差异-->
+			<text class="c b a">hello world</text>
+	</template>
+	<style>
+			.a.b {
+					color: blue
+			}
+
+			/* 重要：需要确保也是用.a开头做复合，.c.a 在App端的优先级并不等同于 .a.c  */
+			.a.c {
+					color: red
+			}
+	</style>
+	```
+
+- class关系选择器之间的优先级遵循web规范
+> 注意：目前App端蒸汽模式不支持关系选择器
+
+在web中，还存在`!important`例外规则，可参考[MDN文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity#!important_%E4%BE%8B%E5%A4%96%E8%A7%84%E5%88%99)
+
+在app中，`!important`仅支持在class选择器（可以覆盖内联style中的样式）中书写，style内联属性不支持。
+
+除了`!important`外，后设的样式总是覆盖先设的样式。如果通过响应式变量绑定或DOM API操作时，要注意这一点。
+
+## 样式作用范围 @scoped
+
+在 `uni-app x` 中，非web平台不支持 `css scoped`。
+
+在HBuilderX 5.0以前，不同平台的样式隔离策略有差异。
+
+HBuilderX 5+ 已统一策略，页面是否被全局样式影响、组件是否被全局和页面样式影响，均可配置。
+
+详见[样式隔离策略2.0](./common/style-isolation.md)
+
+## 层级
+
+app平台仅对`同层的兄弟节点`之间支持`z-index`来调节层级。不支持脱离dom树任意调节层级。
+
+## css方法 @css-function
+
+app平台目前支持url()、rgb()、rgba()、var()、env()。[详见](./common/function.md)
+
+## 字体图标注意
+
+app平台由于暂不支持伪元素，字体图标需使用unicode直显方式。[详见](./common/at-rules.md)
+
+## css样式重置 @css-reset
+
+浏览器和小程序中，有一些样式，在uni-app x中被重置了默认值，即 css reset。
+- 有的重置是因为使用习惯和便利性
+	* 例如flex方向，flex-direction，在W3C规范中默认是横排。在uni-app x中都是竖排。
+	* 例如box-sizing，在W3C规范中默认是content-box。在uni-app x中是border-box。（很多css框架都会重置浏览器这个css）
+- 有的是因为浏览器的默认值比较复杂
+
+	比如auto、normal、medium，这些值内部逻辑很复杂，在不同情况有不同表现。很多是历史兼容造成的包袱。
+	在uni-app x中，倾向于让值明确。
+
+虽然css有reset，但并不是重置前的css无法在web和小程序上使用，在webview中，仍然可以使用所有的css，包括单独写了`display:block`也是可以使用的。
+
+如下是uni-app x的css重置清单，需要开发者注意。
+
+<!-- CSSJSON.style_reset_list.compatibility -->
+
+
+<!-- CSSJSON.style_list.name -->
+
+<!-- CSSJSON.style_list.compatibility -->
+
+
+## 不支持拍平的 CSS 属性@css_no_flatten_list
+
+<!-- CSSJSON.css_no_flatten_list.compatibility -->
+
+
+## Bug
+
+css相关bug[详见](https://issues.dcloud.net.cn/?mid=css)