提交 643b638f 编写于 作者: W wanganxp

完善文档

上级 9ace50b6
#### 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 可以解析的有 `&nbsp;` `&lt;` `&gt;` `&amp;` `&apos;` `&ensp;` `&emsp;`
- 各个操作系统的空格标准并不一致。
- 除了文本节点以外的其他节点都无法长按选中。
- 支持 `\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,500万开发者选择的IDE',
'HBuilder,900万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀',
'HBuilderX,轻巧、极速,极客编辑器',
'uni-app,终极跨平台方案',
'HBuilder,500万开发者选择的IDE',
'HBuilder,900万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀',
......@@ -99,8 +110,3 @@ export default {
</script>
```
:::
**注意事项**
- nvue 样式 `word-wrap` 在 Android 平台暂不支持
# 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模块
|模块 |支持情况 |备注 |
......
......@@ -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.
先完成此消息的编辑!
想要评论请 注册