更新文档

docs/component/button.md

@@ -56,6 +56,8 @@
 |default|默认大小|
 |mini|小尺寸|
 
+button组件也支持style中通过css定义文字大小。
+
 ### type 有效值
 
 |值|说明|
@@ -64,6 +66,8 @@
 |default|白色|
 |warn|红色|
 
+button组件也支持style中通过css定义颜色。
+
 ### form-type 有效值
 
 |值|说明|
@@ -112,6 +116,9 @@ open-type 为 feedback时：
 - 在 App 中，开发者登录 [DCloud开发者中心](https://dev.dcloud.net.cn/) 后点击应用名称，进入左侧菜单“用户反馈”页面获取反馈内容。
 - 但推荐使用全端的、开源的、云端一体的意见反馈功能，[前端部分](https://ext.dcloud.net.cn/plugin?id=50)、[管理端部分](https://ext.dcloud.net.cn/plugin?id=4992)
 
+**注意**
+
+- button组件支持style中通过css定义文字大小、颜色
 
 ### button点击
 

docs/component/image.md

-#### image
-
-图片。
-
-|属性名|类型|默认值|说明|平台差异说明|
-|:-|:-|:-|:-|:-|
-|src|String||图片资源地址||
-|mode|String|'scaleToFill'|图片裁剪、缩放的模式|<div style="width:68px;"></div>|
-|lazy-load|Boolean|false|图片懒加载。只针对page与scroll-view下的image有效|微信小程序、百度小程序、抖音小程序、飞书小程序|
-|fade-show|Boolean|true|图片显示动画效果|仅App-nvue 2.3.4+ Android有效|
-|webp|boolean|false|在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。webp支持详见下面说明|微信小程序2.9.0|
-|show-menu-by-longpress|boolean|false|开启长按图片显示识别小程序码菜单|微信小程序2.7.0|
-|draggable|boolean|true|是否能拖动图片|H5 3.1.1+、App（iOS15+）|
-|@error|HandleEvent||当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}||
-|@load|HandleEvent||当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}|&nbsp;|
+# image
+
+图片组件。
+
+|属性名					|类型		|默认值			|说明																											|平台差异说明									|
+|:-						|:-			|:-				|:-																												|:-												|
+|src					|String		|				|图片资源地址																									|												|
+|mode					|String		|'scaleToFill'	|图片裁剪、缩放的模式																							|<div style="width:68px;"></div>				|
+|lazy-load				|Boolean	|false			|图片懒加载。只针对page与scroll-view下的image有效																|微信小程序、百度小程序、抖音小程序、飞书小程序	|
+|fade-show				|Boolean	|true			|图片显示动画效果																								|仅App-nvue 2.3.4+ Android有效					|
+|webp					|boolean	|false			|在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。webp支持详见下面说明						|微信小程序2.9.0								|
+|show-menu-by-longpress	|boolean	|false			|开启长按图片显示识别小程序码菜单																				|微信小程序2.7.0								|
+|draggable				|boolean	|true			|是否能拖动图片																									|H5 3.1.1+、App（iOS15+）						|
+|@error					|HandleEvent|				|当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}					|												|
+|@load					|HandleEvent|				|当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}	|&nbsp;											|
+
+
+## 图片格式说明：
+- 当使用浏览器/webview渲染时，支持哪些图片格式由webview决定，[详见](https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types#webp_image)
+- 当使用uvue原生渲染时支持的格式如下
+	* [x] bmp
+	* [x] gif
+	* [x] ico
+	* [x] jpg
+	* [x] png
+	* [x] webp
+	* [x] heic（Android10+支持）
+	* [ ] avif
+	* [ ] tif
+	* [ ] svg
+- 可以通过插件来扩展app平台nvue/uvue的图片支持，比如插件市场搜索[svg插件](https://ext.dcloud.net.cn/search?q=svg)
+- 小程序上只支持网络地址的svg图
+- webp图片支持详解
+  * Android4以上（含）、iOS14以上（含）系统内置支持webp，此时，不管web、小程序、app，也不管vue/nvue/uvue都可以直接使用webp；
+  * iOS14以下，app-vue下，iOS不支持；app-nvue/uvue下，iOS支持；微信小程序2.9.0起，配置属性webp为true时iOS支持；
+  * pc浏览器上，webp在不同浏览器的支持详见：[https://caniuse.com/?search=webp](https://caniuse.com/?search=webp)
 
 **Tips**
 
-- `<image>` 组件默认宽度 320px、高度 240px；`app-nvue平台，暂时默认为屏幕宽度、高度 240px；`
+- `<image>` 组件未设置宽高时，默认宽度320px、高度240px。尤其注意当图片加载失败时，widthFix模式指定宽度的图片，虽然图片空白，但其高度会变成240px；`app-nvue平台，暂时默认为屏幕宽度、高度 240px；`
 - `src` 仅支持相对路径、绝对路径，支持 base64 码；
-- 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 `image{will-change: transform}` ,可优化此问题。
+- 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 `image{will-change: transform}`，可优化此问题。
 - 自定义组件里面使用 `<image>`时，若 `src` 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。
-- svg 格式的图片在不同的平台支持情况不同。具体为：app-nvue 不支持 svg 格式的图片，小程序上只支持网络地址。
 
-- webp图片支持详解
-  * Android4以上（含）、iOS14以上（含）系统内置支持webp，此时，不管web、小程序、app，也不管vue还是nvue都可以直接使用webp；
-  * iOS14以下，app-vue下，iOS不支持；app-nvue下，iOS支持；微信小程序2.9.0起，配置属性webp为true时iOS支持；
-  * pc浏览器上，webp在不同浏览器的支持详见：[https://caniuse.com/?search=webp](https://caniuse.com/?search=webp)
-
-
-**mode 有效值：**
+## mode 有效值
 
 mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。
 
@@ -49,7 +63,8 @@ mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。
 |裁剪|bottom left|不缩放图片，只显示图片的左下边区域|
 |裁剪|bottom right|不缩放图片，只显示图片的右下边区域|
 
-**示例：** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/image/image)
+## 示例
+[查看示例](https://hellouniapp.dcloud.net.cn/pages/component/image/image)
  
 ::: preview
 > Template
@@ -176,3 +191,25 @@ bottom left：不缩放图片，只显示图片的左下边区域
 bottom right：不缩放图片，只显示图片的右下边区域
 
 ![uniapp](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/cat-12.png)
+
+
+
+<!-- 
+- 默认的图片加载失败，是空白。如需自定义，可监听error事件进行重定义，如下
+```html
+<template>
+	<image src="xxx" @error="imageErrorEvent"></image><!--当图片加载失败时，会触发error事件-->
+</template>
+<script lang="uts">
+	export default {
+		methods: {
+			imageErrorEvent(e : ImageErrorEvent) { //本示例为uts，如使用js则无需通过冒号定义类型
+				console.log("图片加载错误", e.detail);
+				// 图片加载失败，加载本地占位图
+				e.target?.setAttribute('src', '/static/404.png') //本示例为uts，如使用js则无需加问号
+			}
+		}
+	}
+</script>
+```
+-->
\ No newline at end of file

docs/uni-app-x/_sidebar.md

-<!-- * [概述](README.md) -->
+* [概述](README.md)
+* [性能](performance.md)
+* [编译器](compiler/README.md)
 * CSS
   * [概述](css/README.md)
   * [align-content](css/align-content.md)

docs/uni-app-x/css/background-image.md

 ## background-image
 
+注意App平台并不支持背景图。仅支持通过background-image设定背景渐变色
 
 <!-- CSSJSON.background-image.description -->
 

docs/uni-app-x/performance.md

 # uni-app x 性能优化
 
-Android开发，其性能优化和web开发有几处不同，需要注意：
+uni-app x 本质就是原生应用，性能达到了原生水平。
+
+但即便是原生开发者，使用传统的Android开发，如果代码写不好，也一样性能很差。
+
+uni-app x 的Android开发，其性能优化和web开发有几处不同，需要注意：
 
 ## Android对dom的数量和层次更苛刻
 
@@ -28,10 +32,12 @@ uni-app x还提供了工具帮助开发者监控页面的dom数量。
 
 HBuilderX真机运行到Android时，每个页面进入时会都打印页面初始化的数据：dom数量、排版次数、渲染耗时等。
 
-![]()
+![](/static/uni-app-x/hxconsolepageperformance.png)
 
 当然耗时数据不能以真机运行为准，调试基座因为热更新和sourcemap追踪等很多调试功能，导致性能比真实打包差。正式打包后性能更优。
 
+国内应用都不会采用google的Material Design组件，大多公司自己做组件。但这些组件库的质量层次不齐。可以说大部分国内原生应用的组件库，没有uni-app x的组件性能高。
+
 ## 界面元素动画
 
 动画，分不跟随手势的固定动画，和跟随手势的动效两种。
@@ -73,9 +79,16 @@ uvue页面模板里，list-view组件使用v-for来循环添加list-item，自
 
 
 ## 优化排版效率
-1. 排版性能的高低和dom元素多少层级样式有直接关系优化dom层级结构可以提高排版性能
-2. 明确的宽高的可以提高排版性能
+
+HBuilderX真机运行到Android时，每个页面进入时会都打印页面初始化的数据：dom数量、排版次数、渲染耗时等。
+
+![](/static/uni-app-x/hxconsolepageperformance.png)
+
+dom数量优化前文已经讲了，那么如何优化排版效率？
+
+1. 首先还是dom元素数量和层级，直接影响排版
+2. 给dom元素指定明确的宽高，而不是很多自适应计算，可以提高排版效率。比如父节点未指定宽高，需要等所有子节点计算好宽高后把父节点撑开，这样就会比较低效。
 3. 指定主轴方向的尺寸可以减少递归的深度
-4. 文字测量属于耗时操作指定宽高可以减少测量耗时
-5. 使用百分比时父亲节点有明确宽高或者不依赖子节点确定宽高可以减少测量耗时
-6. 指定图片的尺寸信息可以减少排版次数
+4. 文字测量属于耗时操作，给text组件指定宽高可以提升排版效率
+5. 指定图片的尺寸信息可以减少排版次数
+6. css单位尺寸中，百分比的性能不如px，使用百分比时父节点有明确宽高或者不依赖子节点确定宽高可以提升排版效率

docs/uni-app-x/web2native.md

@@ -16,4 +16,6 @@ let a:number = "abc" //报错，无法编译
 
 这是原生开发和web开发非常大的不同。
 
-uvue框架内部做了一些错误拦截，减少崩溃，但开发者还是需要注意，在可能不安全的地方要try。
+uvue框架内部做了一些错误拦截，减少崩溃，在export default里的代码相对安全，报错会触发app的onError。但在export外以及main.uts的代码，如果写不对就会崩溃。
+
+开发者还是需要注意，在可能不安全的地方要try。