Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
sss宋
unidocs-zh
提交
643b638f
unidocs-zh
项目概览
sss宋
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
643b638f
编写于
8月 15, 2023
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
完善文档
上级
9ace50b6
变更
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 平台暂不支持
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模块
|模块 |支持情况 |备注 |
...
...
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`来进行获取
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录