Skip to content

U
unidocs-uni-app-x-zh

DCloud / unidocs-uni-app-x-zh

通知 144
Star 2
Fork 33
U
unidocs-uni-app-x-zh
提交 72e4d2b6 编写于 作者: D DCloud_LXH
浏览文件
操作

chore: 处理链接

上级 28ccd0d7
隐藏空白更改
内联 并排
Showing with 47 addition and 47 deletion
docs/api/page-scroll-to.md
浏览文件 @ 72e4d2b6
......@@ -31,10 +31,10 @@ selector类似于 CSS 的选择器，但仅支持下列语法。
## uni-app x 注意事项
1. app-uvue支持的选择器较少，不支持ID选择器，[详见](uni-app-x/css/README.md#选择器)
2. app-uvue的页面滚动，是由页面最外层的scroll-view模拟的，如果页面最外层不是scroll-view，无法使用本api。[详见](uni-app-x/css/README.md#pagescroll)
3. app-uvue的scroll-view滚动时，如需动画，则需要在scroll-view的属性中配置 `scroll-with-animation="true"`，[详见](component/scroll-view.md)
4. scroll-view的滚动，设置其scrollTop即可。[详见](component/scroll-view.md)
1. app-uvue支持的选择器较少，不支持ID选择器，[详见](../css/README.md#选择器)
2. app-uvue的页面滚动，是由页面最外层的scroll-view模拟的，如果页面最外层不是scroll-view，无法使用本api。[详见](../css/README.md#pagescroll)
3. app-uvue的scroll-view滚动时，如需动画，则需要在scroll-view的属性中配置 `scroll-with-animation="true"`，[详见](../component/scroll-view.md)
4. scroll-view的滚动，设置其scrollTop即可。[详见](../component/scroll-view.md)
**示例**
......
docs/collocation/manifest.md
浏览文件 @ 72e4d2b6
......@@ -37,7 +37,7 @@ uni-app x 的权限配置，移入了[AndroidManifest.xml](https://uniapp.dcloud
使用[uni内置模块](#utsmodules)时，云端打包会自动添加模块需要的Android权限，不需要在[AndroidManifest.xml](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android.md#permissions)中配置。
HBuilderX3.97+版本标准基座已经包含了所有Android权限，在 uvue 页面中直接通过 uts 调用需要权限的 Android 系统 API 时，使用标准基座真机运行可直接通过[UTSAndroid.requestSystemPermission](../uts/utsandroid.md#requestSystemPermission)申请；使用自定义基座则需要在项目的[AndroidManifest.xml](../tutorial/app-nativeresource-android.md#permissions)中配置要使用的权限，重新提交云端打包。
HBuilderX3.97+版本标准基座已经包含了所有Android权限，在 uvue 页面中直接通过 uts 调用需要权限的 Android 系统 API 时，使用标准基座真机运行可直接通过[UTSAndroid.requestSystemPermission](../uts/utsandroid.md#requestSystemPermission)申请；使用自定义基座则需要在项目的[AndroidManifest.xml](https://uniapp.dcloud.io/tutorial/app-nativeresource-android.md#permissions)中配置要使用的权限，重新提交云端打包。
#### DISTRIBUTE配置 @app-distribute
......
docs/component/README.md
浏览文件 @ 72e4d2b6
......@@ -100,7 +100,7 @@ export default {
## 自定义事件
- [v-model](tutorial/vue3-components.html#v-model-modifiers) 暂不支持 `capitalize` 修饰符。
- [v-model](https://uniapp.dcloud.io/tutorial/vue3-components.html#v-model-modifiers) 暂不支持 `capitalize` 修饰符。
## 计算属性和侦听器
......
docs/component/text.md
浏览文件 @ 72e4d2b6
......@@ -4,7 +4,7 @@
在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。文本样式的控制也应该在text组件上写style，而不是在view的样式里写。
虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式，详见uvue的[样式不继承](uni-app-x/css/README.md#stylenoextends)章节。
虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式，详见uvue的[样式不继承](../css/README.md#stylenoextends)章节。
<!-- UTSCOMJSON.text.attrubute -->
......
docs/component/unsupport.md
浏览文件 @ 72e4d2b6
......@@ -7,7 +7,7 @@ uni-app x在App端还有一批组件未与uni-app js引擎版拉齐。有的在
- picker：可改用[picker-view](picker-view.md)
- canvas：目前没有完整的canvas组件，但
* 每个view，都提供了[draw API](../dom/drawablecontext.md)，可以高性能的画各种形状、写字。
* 关于截图，无需像webview那样通过canvas中转，view直接提供截图方案，[takesnapshot](dom/element.md#takesnapshot)。
* 关于截图，无需像webview那样通过canvas中转，view直接提供截图方案，[takesnapshot](../dom/element.md#takesnapshot)。
* 使用web-view中的canvas也是一种方案，uvue页面里的web-view组件可以和uvue页面里的uts代码双向通信。比如生成二维码，可以由web-view组件来渲染，复用web生态的库。
* 当然二维码在插件市场也有现成的[插件](https://ext.dcloud.net.cn/search?q=%E4%BA%8C%E7%BB%B4%E7%A0%81&uni-appx=1)
* 后期uvue中也会补充正式的canvas组件
......
docs/css/font-family.md
浏览文件 @ 72e4d2b6
......@@ -13,12 +13,12 @@
<!-- CSSJSON.font-family.compatibility -->
#### App平台差异
#### App平台差异
- font-family 样式不支持继承
#### 字体图标
支持ttf和otf字体图标。
- 可在css里直接加载，[参考](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/CSS/text/font-family.uvue)
- 也可以使用API [uni.loadFontface](../api/loadFontFace.md)
- 也可以使用API [uni.loadFontface](../api/load-font-face.md)
<!-- CSSJSON.font-family.reference -->
\ No newline at end of file
docs/css/font-size.md
浏览文件 @ 72e4d2b6
......@@ -13,11 +13,11 @@
<!-- CSSJSON.font-size.compatibility -->
#### App平台差异
App平台仅支持以像素值（px）设置字体大小，默认值为16px。
font-size 样式不支持继承，仅对[text](uni-app-x/component/text.md)组件生效。
> 不支持百分比的值
> 不支持基于用户默认字体大小的绝对大小关键字，如small、medium、large等
> 不支持em、rem、ex等单位
#### App平台差异
App平台仅支持以像素值（px）设置字体大小，默认值为16px。
font-size 样式不支持继承，仅对[text](../component/text.md)组件生效。
> 不支持百分比的值
> 不支持基于用户默认字体大小的绝对大小关键字，如small、medium、large等
> 不支持em、rem、ex等单位
<!-- CSSJSON.font-size.reference -->
\ No newline at end of file
docs/css/line-height.md
浏览文件 @ 72e4d2b6
......@@ -13,15 +13,15 @@
<!-- CSSJSON.line-height.compatibility -->
#### App平台
App平台仅支持以像素值（px）和相对长度单位（em）相对当前元素字体字体单位（em），em单位表示数字值乘以该元素的字体大小，无单位值时使用em，默认值为1.2em。
line-height 样式不支持继承，仅对 [text](uni-app-x/component/text.md) 组件生效。
#### App平台
App平台仅支持以像素值（px）和相对长度单位（em）相对当前元素字体字体单位（em），em单位表示数字值乘以该元素的字体大小，无单位值时使用em，默认值为1.2em。
line-height 样式不支持继承，仅对 [text](../component/text.md) 组件生效。
建议设置大于15%字号大小的值，以避免出现渲染异常。
> 不支持百分比的值
> 不支持设置关键字 normal 值
> 不支持ch、rem、ex等单位
> 不支持百分比的值
> 不支持设置关键字 normal 值
> 不支持ch、rem、ex等单位
#### Web规范
#### Web规范
line-height 样式支持继承，默认值为normal（大约为1.2em，取决于 font-family 样式）
<!-- CSSJSON.line-height.reference -->
\ No newline at end of file
docs/css/readme.md
浏览文件 @ 72e4d2b6
......@@ -311,7 +311,7 @@ uni-app x的css的样式不继承规则，虽然与web有差异，其实只是
目前仅支持url()、rgb()、rgba()。
暂不支持css变量val()。--status-bar-height、--window-top、--window-bottom，也暂时无法使用，有相关需求可使用[uni.getWindowInfo()](../api/getwindowinfo.md)方式获取。
暂不支持css变量val()。--status-bar-height、--window-top、--window-bottom，也暂时无法使用，有相关需求可使用[uni.getWindowInfo()](../api/get-window-info.md)方式获取。
## At-rules
|类别 |支持情况 |备注 |
......
docs/dom/README.md
浏览文件 @ 72e4d2b6
# UVUE DOM
# UVUE DOM
App-uvue的每个页面，在内存中都有一个 DOM（文档对象模型）。它和浏览器的 [DOM规范](https://www.w3.org/DOM/?spm=a2c7j.-zh-docs-api-weex-variable.0.0.2a5537c6FrgbYp) 类似。
......@@ -19,9 +19,9 @@ DOM 是页面元素内容的结构数据。DOM 模型用一个逻辑树来表示
1. 跟手动效
响应触屏事件更新组件的位置，要想不掉帧，需要保证16毫秒绘制一帧。
uvue的data更新，有一套diff机制，每次触发data更新，会多几毫秒的耗时。
此时推荐通过 DOM API 跳过 vue 框架直接操作组件的样式。
2. Draw API
......@@ -31,13 +31,13 @@ DOM 是页面元素内容的结构数据。DOM 模型用一个逻辑树来表示
在[性能](../performance.md)章节，对这2个场景有详细的阐述。
## DOM元素对象@getDomNode
## DOM元素对象@getDomNode
在操作DOM元素对象前，需要先获取 `Element` 对象，可通过 `uni.getElementById` 或 `this.$refs` 获取。
### 通过uni.getElementById获取DOM元素
### 通过uni.getElementById获取DOM元素
app-uvue 页面中可以为页面元素节点设置 id 属性，然后通过 [uni.getElementById](../api/get-element-by-id.md#getelementbyid) 获取 DOM 元素对象。
app-uvue 页面中可以为页面元素节点设置 id 属性，然后通过 [uni.getElementById](../api/get-element.md#getelementbyid) 获取 DOM 元素对象。
首先需要为组件设置 id 属性值：
```vue
......@@ -57,14 +57,14 @@ app-uvue 页面中可以为页面元素节点设置 id 属性，然后通过 [un
}
},
onReady() {
// 获取组件对象并保存在 this.myView 中
// 获取组件对象并保存在 this.myView 中
this.myView = uni.getElementById('myView');
},
}
```
### 通过this.$refs获取DOM元素
app-uvue页面中可以通过 vue 框架中的组件实例对象 [this.$refs](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B-property) 获取 DOM 元素对象。
app-uvue页面中可以通过 vue 框架中的组件实例对象 [this.$refs](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B-property) 获取 DOM 元素对象。
首先需要为组件设置 ref 属性值，它类似于id：
```vue
......@@ -84,7 +84,7 @@ app-uvue页面中可以通过 vue 框架中的组件实例对象 [this.$refs](ht
}
},
onReady() {
// 获取组件对象并保存在 this.myView 中
// 获取组件对象并保存在 this.myView 中
this.myView = this.$refs['myView'] as Element; //需要使用 as 转换
},
}
......@@ -98,9 +98,9 @@ app-uvue页面中可以通过 vue 框架中的组件实例对象 [this.$refs](ht
this.myView?.style?.setProperty('background-color', 'red');
```
### 示例
以下是完整的操作示例：
```vue
### 示例
以下是完整的操作示例：
```vue
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1;align-items: center;">
......@@ -152,7 +152,7 @@ this.myView?.style?.setProperty('background-color', 'red');
>以上例子仅为演示DOM API的使用，实际上点击按钮修改背景色这种简单场景，使用数据绑定更简单，class绑定到一个data上，动态修改data即可。
## 通过DrawableContext绘制View
## 通过DrawableContext绘制View
uni-app x 在 app 端提供 DrawableContext 绘制内容到 uvue 页面的`view`标签上。可用于绘制文本、形状等内容。
......
docs/tutorial/codegap.md
浏览文件 @ 72e4d2b6
......@@ -81,8 +81,8 @@ data里`:`的用途是赋值，无法通过`:`定义类型，所以data的数据
## 全局属性
`uni-app x` 中，`uni` 对象不支持动态绑定自定义属性，[app.config.globalProperties](uni-app-x/vue/README.md#app-instance) 暂时不支持。\
如有`全局属性`的需求，可通过[全局变量与状态管理](uni-app-x/tutorial/store.md)实现。
`uni-app x` 中，`uni` 对象不支持动态绑定自定义属性，[app.config.globalProperties](../vue/README.md#app-instance) 暂时不支持。\
如有`全局属性`的需求，可通过[全局变量与状态管理](../tutorial/store.md)实现。
## 函数 event 参数的类型 @function-event-argument-type
......@@ -104,7 +104,7 @@ data里`:`的用途是赋值，无法通过`:`定义类型，所以data的数据
```
那event参数的类型从哪里获取呢？
1. 组件的文档中有介绍，比如[switch的组件](component/switch.md)
1. 组件的文档中有介绍，比如[switch的组件](../component/switch.md)
2. ide中有提示，比如鼠标移到switch组件的`@change`上，悬浮出现hover，会显示：`(property) 'change': (event: SwitchChangeEvent) => void`
```html
......@@ -272,12 +272,12 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
## 调用组件方法@methods
js中refs拿到一个组件后，可以直接`.`出它的方法。但uts中只有easycom组件可以使用`.`操作符，非easycom组件需要使用callMethod()。[详见](uni-app-x/component/README.md#methods)
js中refs拿到一个组件后，可以直接`.`出它的方法。但uts中只有easycom组件可以使用`.`操作符，非easycom组件需要使用callMethod()。[详见](../component/README.md#methods)
## vue使用注意
[详见](uni-app-x/vue/README.md)
[详见](../vue/README.md)
## css使用注意
[详见](uni-app-x/css/README.md)
[详见](../css/README.md)
docs/tutorial/stickynestlist.md
浏览文件 @ 72e4d2b6
......@@ -48,7 +48,7 @@ Android App常见的一种列表效果，是顶部有一个tab，可以左右滑
上面那种始终固定top的做法，在scroll-view里可以实现，但在list-view里有问题。因为list-view底层是Android的recycle-view，有一些特殊限制。
在list-view中，吸顶需要使用[sticky-header组件](../component/sticky-header.md)。
在list-view中，吸顶需要使用[sticky-header组件](../component/sticky.md)。
sticky-header组件是list-view的一级子组件，在这个吸顶组件中放入内容，该组件滚动到列表顶部时将不再继续向上滚动、固定在列表顶端；但向下滚动时可以自由滚动，甚至滚动出屏幕之外。
......
docs/vue/README.md
浏览文件 @ 72e4d2b6
......@@ -71,14 +71,14 @@ export function createApp() {
<!-- VUEJSON.reactivity_advanced.compatibility -->
### [函数 event 参数的类型](uni-app-x/tutorial/codegap.md#function-event-argument-type)
### [函数 event 参数的类型](../tutorial/codegap.md#function-event-argument-type)
### 指令 @directives
<!-- VUEJSON.directives.compatibility -->
**注意：**
- **v-html:** 在 `App-android` 平台，`v-html` 指令通过编译为 [rich-text](uni-app-x/component/rich-text.md) 组件实现。因此，`v-html` 指令的内容必须是 `rich-text` 支持的格式, 并且要遵循标签嵌套规则，例如， `swiper` 标签内只允许嵌套 `swiper-item` 标签。\
- **v-html:** 在 `App-android` 平台，`v-html` 指令通过编译为 [rich-text](../component/rich-text.md) 组件实现。因此，`v-html` 指令的内容必须是 `rich-text` 支持的格式, 并且要遵循标签嵌套规则，例如， `swiper` 标签内只允许嵌套 `swiper-item` 标签。\
同时，受限于 `rich-text` 组件不支持 `class` 样式，`v-html` 指令中同样不支持 `class` 样式。\
绑定 `v-html` 的标签内的内容会被忽略，`v-html` 指令的内容会编译为 `rich-text` 组件渲染为该标签的子节点。
......@@ -103,7 +103,7 @@ export function createApp() {
```
## 应用生命周期
uni-app x 新增了 [onLastPageBackPress](collocation/App.md#applifecycle) 和 [onExit](collocation/App.md#applifecycle) 应用级生命周期，Android退出应用逻辑写在app.uvue里，新建项目的模板自动包含相关代码。如需修改退出逻辑，请直接修改相关代码。
uni-app x 新增了 [onLastPageBackPress](../collocation/App.md#applifecycle) 和 [onExit](../collocation/App.md#applifecycle) 应用级生命周期，Android退出应用逻辑写在app.uvue里，新建项目的模板自动包含相关代码。如需修改退出逻辑，请直接修改相关代码。
## 组件
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或