Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
643b638f
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3277
Star
107
Fork
831
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
99
列表
看板
标记
里程碑
合并请求
76
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
99
Issue
99
列表
看板
标记
里程碑
合并请求
76
合并请求
76
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
643b638f
编写于
1年前
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
完善文档
上级
9ace50b6
master
auto-translate
dev
docs/merge-docs
feat-renderjs
fix-title_By_HRK
无相关合并请求
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
138 addition
and
35 deletion
+138
-35
docs/component/text.md
docs/component/text.md
+21
-15
docs/uni-app-x/css/readme.md
docs/uni-app-x/css/readme.md
+62
-4
docs/uts/data-type.md
docs/uts/data-type.md
+55
-16
未找到文件。
docs/component/text.md
浏览文件 @
643b638f
#### text
文本组件。
# text组件
用于包裹文本内容。
文本组件。
用于包裹文本内容。
**属性说明**
在app-uvue和app-nvue中,文本只能写在text中,而不能写在view的text区域。
虽然app-uvue中写在view的text区域的文字,也会被编译器自动包裹一层text组件,看起来也可以使用。但这样会造成无法修改该text文字的样式,详见uvue的
[
样式不继承
](
../uni-app-x/css/readme.md#stylenoextends
)
章节
## 属性说明
|属性名 |类型 |默认值 |说明 |平台差异说明 |
|:-|:- |:- |:- |:- |
...
...
@@ -20,17 +23,25 @@
|emsp|中文字符空格大小|
|nbsp|根据字体设置的空格大小|
**Tips**
## 子组件
text组件在web浏览器渲染(含浏览器、小程序webview渲染模式、app-vue)和uvue中,可以并只能嵌套text组件。
在nvue中,text组件不能嵌套。
-
`<text>`
组件内只支持嵌套
`<text>`
(app-nvue 暂不支持),不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异。
## Tips
-
支持
`\n`
方式换行。
-
在app-nvue下,只有
`<text>`
才能包裹文本内容。无法在
`<view>`
组件包裹文本。
-
decode 可以解析的有
` `
`<`
`>`
`&`
`'`
` `
` `
。
-
各个操作系统的空格标准并不一致。
-
除了文本节点以外的其他节点都无法长按选中。
-
支持
`\n`
方式换行。
-
如果使用
`<span>`
组件编译时会被转换为
`<text>`
。
-
nvue 样式
`word-wrap`
在 Android 平台暂不支持
## 示例
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/text/text
)
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/text/text
)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
...
...
@@ -59,13 +70,13 @@ export default {
data
()
{
return
{
texts
:
[
'
HBuilder,
5
00万开发者选择的IDE
'
,
'
HBuilder,
9
00万开发者选择的IDE
'
,
'
MUI,轻巧、漂亮的前端开源框架
'
,
'
wap2app,M站快速转换原生体验的App
'
,
'
5+Runtime,为HTML5插上原生的翅膀
'
,
'
HBuilderX,轻巧、极速,极客编辑器
'
,
'
uni-app,终极跨平台方案
'
,
'
HBuilder,
5
00万开发者选择的IDE
'
,
'
HBuilder,
9
00万开发者选择的IDE
'
,
'
MUI,轻巧、漂亮的前端开源框架
'
,
'
wap2app,M站快速转换原生体验的App
'
,
'
5+Runtime,为HTML5插上原生的翅膀
'
,
...
...
@@ -99,8 +110,3 @@ export default {
</
script
>
```
:::
**注意事项**
-
nvue 样式
`word-wrap`
在 Android 平台暂不支持
This diff is collapsed.
Click to expand it.
docs/uni-app-x/css/readme.md
浏览文件 @
643b638f
# uvue css使用
uni-app x 在 app平台实现了 web css的子集。
开发所需的界面均可排布编写出来。
uni-app x 在 app平台实现了 web css的子集。
uni-app x 推荐使用flex布局。这是一种清晰易用、全平台支持的布局。不管web、Android、iOS、微信skyline、快应用,均支持flex布局。
这个子集并不影响开发者开发出所需的界面,仅是写法上没有那么丰富。
App端与web常见的区别是:
1.
仅支持flex布局
2.
选择器只能用class,不能用tag、#id、[attr]等选择器
3.
不支持样式继承,即父元素样式不影响子元素
App端仅支持flex布局
。
但以上仅是常见的区别,并非所有,需开发者继续阅读全文
。
## 页面布局
uni-app x 推荐使用flex布局。这是一种清晰易用、全平台支持的布局。不管web、Android、iOS、微信skyline、快应用,均支持flex布局。
页面布局有2个注意事项,flex方向和页面级滚动。
### flex方向
...
...
@@ -23,7 +30,7 @@ App端仅支持flex布局。
</view>
```
一般在
app.uvue
的style里编写全局样式,在页面里使用class引用更为方便。
一般在
`app.uvue`
的style里编写全局样式,在页面里使用class引用更为方便。
```
html
<style>
.uni-row
{
...
...
@@ -125,6 +132,57 @@ uvue的策略是,在新建页面时,提供一个选项,让开发者选择
*
如果是,页面滚动相关的生命周期和API继续生效,效果如前。
*
如果不是scroll-view,全部失效。
## 样式不继承@stylenoextends
如下代码,在web浏览器渲染时,父view的style会影响子text,所以123是红色。
但是在uvue中,样式不继承,123的颜色仍然是默认颜色黑色。
```
html
<template>
<view
style=
"color:red"
>
<text>
123
</text>
</view>
</template>
```
所以在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>
```
## css模块
|模块 |支持情况 |备注 |
...
...
This diff is collapsed.
Click to expand it.
docs/uts/data-type.md
浏览文件 @
643b638f
...
...
@@ -560,7 +560,7 @@ let jr: UTSJSONObject[] = [
let
jo
:
UTSJSONObject
=
[{
"
x
"
:
1
,
"
y
"
:
2
}]
//类型不匹配
}]
//
错误,
类型不匹配
```
#### 定义 UTSJSONObject
...
...
@@ -572,9 +572,16 @@ let jo = {
x
:
1
,
y
:
2
}
let
jo2
=
{
"
a-b
"
:
1
,
// 如果属性名包括-,则必须两侧加引号包围
"
y
"
:
2
}
```
严谨的json,x和y属性是需要两侧加引号的,uts编译器发现不加会自动补,但建议开发者默认加上引号。
严谨的json,x和y属性是需要两侧加引号包围的。uts编译器发现不加引号时会自动补,但建议开发者默认加上引号。
如果属性名包括
`-`
,则必须两侧加引号包围。
对于纯字面量,jo 后面的
`:UTSJSONObject`
可以省略,这些类型比较简单。包括下面的多层嵌套,类型也不会推导出错。
...
...
@@ -628,7 +635,35 @@ jo = JSON.parse({"result":true, "count":42})
有关字面量定义 UTSJSONObject 对象的信息,
[
详见
](
literal.md#object
)
除了字面量定义JSON,经常用到的是通过
`JSON.parse()`
,把一个字符串转成json。这方面
[
详见
](
buildin-object-api/json.md
)
除了字面量定义JSON,经常用到的是通过
`JSON.parse()`
,把一个字符串转成json。
```
ts
let
s
=
`{"result":true, "count":42}`
// 常见场景中,这个字符串更多来自于网络或其他应用传输。
let
jo
=
JSON
.
parse
(
s
)
// 这个代码适用于HBuilderX 3.9以前
```
在 HBuilderX 3.9以前,
`JSON.parse()`
返回的
`UTSJSONObject`
。但因为有时网络或其他应用传入的是json数组,而不是对象,会导致崩溃。
所以从 HBuilderX 3.9起,
`JSON.parse()`
返回的类型改为
`any`
,即可能返回对象、也可能返回数组。这样就需要开发者自行再
`as`
一下来指定具体类型了。
新的写法是这样:
```
ts
let
s
=
`{"result":true, "count":42}`
// 常见场景中,这个字符串更多来自于网络或其他应用传输。
let
jo
=
JSON
.
parse
(
s
)
as
UTSJSONObject
let
sr
=
`[{"x":1, "y":2},{"x":3, "y":4}]`
// 常见场景中,这个字符串更多来自于网络或其他应用传输。
let
jr
=
JSON
.
parse
(
s
)
as
UTSJSONObject
[]
```
当然,还有更简短的写法,使用JSON的parseObject()和parseArray()方法:
```
ts
let
s
=
`{"result":true, "count":42}`
// 常见场景中,这个字符串更多来自于网络或其他应用传输。
let
jo
=
JSON
.
parseObject
(
s
)
let
sr
=
`[{"x":1, "y":2},{"x":3, "y":4}]`
// 常见场景中,这个字符串更多来自于网络或其他应用传输。
let
jr
=
JSON
.
parseArray
(
s
)
```
全局对象JSON,除了parse()、parseObject()、parseArray()外,还有stringify()来把json转为字符串。
[
详见
](
buildin-object-api/json.md
)
#### 访问 UTSJSONObject 对象中的属性
...
...
@@ -643,20 +678,21 @@ let rect = {
}
```
以上述 rect 为例,访问JSON中的数据,有如下方式:
1.
.操作符
以上述 rect 为例,访问JSON中的数据,有如下3种方式:
1.
`.`
操作符
即
`rect.x`
、
`rect.size.width`
。
这种写法比较简单,
但仅限于使用字面量。如果是
`JSON.parse()`
转换的,则不能使用。
因为字面量是uts编译器推导补充类型的,
`JSON.parse()`
无法在编译时识别类型
。
这种写法比较简单,
和js习惯一致,但在uts中限制较多。它的使用有如下前提:
-
通过type声明了JSON的数据结构,也就是需要单独定义一个type再使用。详见type章节。这也是大多数强类型使用json的方式。
-
如未定义type,则仅限于web和Android,在iOS上,swift不不支持
`.`
操作符。在Android上也只支持字面量定义json。如果是
`JSON.parse()`
转换的,则不能使用
。
2.
[""]下标属性
即
`rect["x"]`
。
不管通过字面量定义的json,还是通过
`JSON.parse()`
,都可以使用下标方式访问json属性。
这是一种通用的方式,不管通过字面量定义的json,还是通过
`JSON.parse()`
,不管是web、Android、iOS哪个平台
,都可以使用下标方式访问json属性。
但下标返回
的
嵌套的json时,用起来比较麻烦,因为无法判断嵌套节点是对象还是数组,需要再`as`才能继续使用下一层数据。
但下标返回嵌套的json时,用起来比较麻烦,因为无法判断嵌套节点是对象还是数组,需要再`as`才能继续使用下一层数据。
```
ts
let
rect
=
{
...
...
@@ -674,16 +710,16 @@ let rect = {
]
}
console
.
log
(
rect
.
x
)
//20
console
.
log
(
rect
.
x
)
//20
但iOS无法使用.操作符
console
.
log
(
rect
[
"
x
"
])
//20
console
.
log
(
rect
.
size
.
width
)
//80
console
.
log
(
rect
.
size
.
width
)
//80
但iOS无法使用.操作符
console
.
log
((
rect
[
"
size
"
]
as
UTSJSONObject
)[
"
width
"
])
//80
// 如果存在嵌套,那么需要先把第一层转成 UTSJSONObject对象或数组,之后再用下标访问下一层
console
.
log
(
rect
.
border
[
0
].
color
);
//报错,一旦使用了下标访问数组,后面就无法使用.操作符了
console
.
log
(
rect
.
border
[
0
][
"
color
"
]);
// red
console
.
log
(
rect
.
border
[
0
][
"
color
"
]);
// red
但iOS无法使用.操作符
console
.
log
((
rect
[
"
border
"
]
as
UTSJSONObject
[])[
0
][
"
color
"
]);
// red
```
...
...
@@ -705,10 +741,11 @@ var j = {"test":{
console
.
log
((
j
[
'
test
'
]
as
UTSJSONObject
)[
'
a-b
'
]);
```
3.
通过keyPath访问
类型属性
3.
通过keyPath访问
json数据
在
`HBuilderX`
3.9.0 之后的版本,UTSJSONObject提供了另外一种属性访问方式
在
`HBuilderX`
3.9.0 之后的版本,UTSJSONObject提供了另外一种属性访问方式
,keypath。如果你了解xmlPath的话,这个概念类似。
以下面的json为例
```
ts
let
utsObj
=
{
"
username
"
:
"
zhangsan
"
,
...
...
@@ -751,7 +788,9 @@ console.log(utsObj.getString("age"))
```
在所有的getXXX函数中
`getAny`
是一个特殊的存在,他可以获取属性,而不要求限制类型,他的返回值是Any类型。需要注意的是在 强类型语言中使用Any是一件危险的事情,如果你需要使用
`getAny`
请确保你一件已经充分了解了可能遇到的问题。
在所有的getXXX函数中
`getAny`
是一个特殊的存在,它可以获取属性,而不要求限制类型,他的返回值是Any类型。
需要注意的是在 强类型语言中使用Any是一件危险的事情,如果你需要使用
`getAny`
请确保你已经充分了解了可能遇到的问题。
```
ts
// 如果我们不确定属性类型,可以使用`getAny`来进行获取
...
...
This diff is collapsed.
Click to expand it.
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录
反馈
建议
客服
返回
顶部