Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
enjoyphenix
unidocs-zh
提交
8c798912
unidocs-zh
项目概览
enjoyphenix
/
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,发现更多精彩内容 >>
提交
8c798912
编写于
9月 04, 2023
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: assert path
上级
dc4b6d90
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
2 addition
and
288 deletion
+2
-288
docs/uni-app-x/codegap.md
docs/uni-app-x/codegap.md
+0
-286
docs/uni-app-x/tutorial/codegap.md
docs/uni-app-x/tutorial/codegap.md
+2
-2
未找到文件。
docs/uni-app-x/codegap.md
已删除
100644 → 0
浏览文件 @
dc4b6d90
# uni-app x 开发注意
与web开发相比,uni-app x最大的变化有2个:
-
弱类型的js改为了强类型的uts
-
不再使用webview渲染,导致css有变化
重视,并把握好这两点,就可以很快上手。
## 类型系统注意
强类型语言中,变量、方法、参数、返回值、data数据,都必须有类型。
基础类型包括:boolean|string|number|Array|Date|UTSJSONObject|any|null...
开发者需阅读
[
uts
](
https://uniapp.dcloud.net.cn/uts/
)
文档,了解类型的定义和使用。
如下代码比较典型的说明了uni-app x中uts类型的要求。
可以看出template和css的代码和以前的uni-app相同,但script区域有变化。
不管是data、自定义变量,甚至是组件事件参数(TouchEvent),都必须有类型。
有的没有通过
`:`
定义类型,其实是因为编译器具备一定的自动推导能力,可以帮开发者自动补类型。
data里
`:`
的用途是赋值,无法通过
`:`
定义类型,所以data的数据有2种处理方式:1、通过字面量自动推导;2、通过
`as`
声明
```
html
<template>
<view
@
touchstart=
"touchstart"
>
<text
class=
"red"
>
{{s1}}
</text>
</view>
<button
@
click=
"buttonClick"
:disabled=
"buttonEnable"
>
按钮
</button>
</template>
<script
lang=
"uts"
>
type
User
=
{
name
:
string
}
//定义一个User类型
export
default
{
data
()
{
const
date
=
new
Date
()
//自动推导类型为Date
const
v
=
1
;
//自动推导为number
return
{
buttonEnable
:
false
,
//自动推导为boolean
s1
:
"
hello
"
,
// 根据字面量推导为string
n1
:
0
as
number
,
// 这里其实可以根据字面量自动推导,as number写不写都行
n2
,
// 不合法,必须指定类型。真实运行时请删掉本行
n3
as
number
,
// 不合法,uts不支持undefined,必须初始化。真实运行时请删掉本行
n4
:
null
as
number
|
null
// 合法。定义为可为null的数字,初始值是null,但在使用n4前必须为其赋值数字
year
:
date
.
getFullYear
()
as
number
,
// 在data里,目前无法通过变量类型推导data项的类型,需使用 as 显式声明
t
:
``
,
// 模板字面量,推导为 string
o
:
{
id
:
1
,
name
:
"
DCloud
"
},
// 对象字面量,推导为 UTSJSONObject,注意:访问 data 中定义的UTSJSONObject属性时,需要使用索引访问,如 this.o["id"]
an
:
[
1
,
2
],
// 数组字面量,如果元素均为纯数字字面量,则推导为 Array
<
number
>
as
:
[
'
1
'
,
'
2
'
,
`3`
],
// 数组字面量,如果元素均为纯字符串或模板字符串字面量,则推导为 Array
<
string
>
ab
:
[
true
,
false
],
// 数组字面量,如果元素均为boolean字面量,则推导为 Array
<
boolean
>
ao
:
[{
id
:
1
},
{
id
:
2
}],
// 数组字面量,如果元素均为对象字面量,则推导为 Array
<
UTSJSONObject
>
am
:
[[
1
,
2
],
[
2
,
3
],
[
3
,
4
]],
// 数组字面量,支持嵌套推导,推导为 Array
<
Array
<
number
>>
aa
:
[
1
,
'
2
'
],
// 数组字面量,如果元素类型不一致,则推导为 Array
<
any
|
null
>
u
:
{
name
:
'
DCloud
'
}
as
User
,
// 类型断言,如果主动指定了类型,则不做自动推导,使用指定的类型,注意:自定义type,需要定义在 export default 外部或通过其他文件导入
au
:
[{
name
:
'
DCloud
'
}]
as
User
[],
// 类型断言,支持数组类型断言
v
:
v
,
// 非字面量类型,目前未指定类型断言,推导为 any | null,建议此情况,均通过as手动指定类型
}
}
methods
:
{
touchstart
(
e
:
TouchEvent
)
{
// e必须有类型
let
sX
:
number
=
e
.
touches
[
0
].
screenX
;
let
sY
:
number
=
e
.
touches
[
0
].
screenY
;
},
buttonClick
:
function
()
{
// 如果不需要 event 参数,可以省略
this
.
buttonEnable
=
true
this
.
s1
=
"
点过按钮了
"
},
}
}
</script>
<style>
.red
{
color
:
red
}
</style>
```
## template
-
App 端,如需页面级滚动,根节点必须是
`scroll-view`
标签。
### 函数 event 参数的类型
上面的例子中,touchstart事件中必须对
`e`
指定类型,才能使用
`e.touches[0].screenX`
。下面再举一个例子,加深下记忆:
```
vue
<
template
>
<switch
@
change=
"switchChange"
/>
</
template
>
<
script
lang=
"uts"
>
export
default
{
methods
:
{
switchChange
:
function
(
e
:
SwitchChangeEvent
)
{
// 这里必须声明e的类型为SwitchChangeEvent
console
.
log
(
'
switch 发生 change 事件,携带值为
'
,
e
.
detail
.
value
)
}
}
}
</
script
>
```
那event参数的类型从哪里获取呢?
1.
组件的文档中有介绍,比如
[
switch的组件
](
component/switch.md
)
2.
ide中有提示,比如鼠标移到switch组件的
`@change`
上,悬浮出现hover,会显示:
`(property) 'change': (event: SwitchChangeEvent) => void`
```
html
<view
@
click=
"(e: any) => foo(e)"
>
event must has type
</view>
<view
@
click=
"foo($event as MouseEvent)"
>
event must has type
</view>
```
## script
-
仅支持
`export default {}`
。
-
`data`
仅支持函数返回对象字面量方式。
```
ts
<
script
lang
=
"
uts
"
>
export
default
{
data
()
{
return
{
}
}
}
<
/script>
```
## 组件
## props
-
仅支持对象声明方式
-
暂不支持验证函数
### 作用域插槽的类型
作用域插槽需在组件中指定插槽数据类型
```
ts
// components/Foo.uvue
<
view
>
<
slot
msg
=
"
test msg
"
/>
<
/view
>
import
{
SlotsType
}
from
'
vue
'
export
default
{
slots
:
Object
as
SlotsType
<
{
default
:
{
msg
:
string
}
}
>
}
// page.uvue
<
view
>
<
Foo
>
<
template
v
-
slot
=
"
slotProps
"
>
<
text
>
{{
slotProps
.
msg
}}
<
/text
>
<
/template
>
<
/Foo
>
<
/view>
```
## JSON的类型
JSON数据在强类型语言中使用时,不能像js那样随意。
js中可以这么写:
```
js
var
p
=
{
"
name
"
:
"
zhangsan
"
,
"
age
"
:
12
}
p
.
age
//12
```
但是在强类型语言中,如果想要使用
`p.age`
,那么p必须是一个对象,而age则是这个对象的属性。然后必须为p对象、name属性、age属性,都定义类型,比如name是string,age是number。
uts中有2种方式使用json数据:
1.
把json数据转为type,自定义一个类型,声明json数据内容中每个属性的类型。然后就可以使用对象属性的方式来使用json数据。
[
详见
](
../uts/data-type.md#type
)
2.
使用UTSJSONObject,不为json定义类型,然后通过下标和方法来使用json数据。
[
详见
](
../uts/data-type.md#ustjsonobject
)
## 函数参数类型
如果函数参数为基础数据类型,函数调用时,参数类型可以省略,编译器会自动推导。
\
如果函数参数为自定义数据类型,则必须指定类型。
```
ts
// 基础数据类型
function
foo1
(
a
:
string
,
b
:
number
)
{
console
.
log
(
a
,
b
)
}
foo1
(
'
hello
'
,
1
)
// 自定义数据类型
type
Person
=
{
name
:
string
age
:
number
}
function
foo2
(
p
:
Person
)
{
console
.
log
(
p
.
name
,
p
.
age
)
}
foo2
({
name
:
'
name
'
,
age
:
18
}
as
Person
)
// 或者
const
person
:
Person
=
{
name
:
'
name
'
,
age
:
18
}
foo2
(
person
)
```
## 编译器的类型优化
-
生命周期的参数及参数类型均可省略。以
`onLoad`
为例:
```
ts
// 省略参数
onLoad
()
{
console
.
log
(
'
onLoad
'
)
}
// 省略参数类型
onLoad
(
options
)
{
console
.
log
(
'
onLoad
'
)
}
```
-
模板函数的 event 参数可以省略,但如果参数存在,则必须有类型。
```
html
<template>
<view
@
touchstart=
"onTouchstart"
@
click=
"onClick"
>
<text>
text
</text>
</view>
</template>
<script
lang=
"uts"
>
export
default
{
methods
:
{
onTouchstart
()
{
// event 参数可以省略
console
.
log
(
'
onTouchstart
'
)
},
onClick
:
function
(
event
:
MouseEvent
)
{
// event 参数存在,必须指定类型
console
.
log
(
event
)
}
}
}
</script>
```
-
uni 及 uniCloud API, {} 字面量参数可以省略类型,success、fail 和 complete 回调函数及其参数类型也可以省略。以
`uni.navigateTo`
为例:
```
ts
// 省略 {} 字面量参数类型
uni
.
navigateTo
({
url
:
'
test
'
// 省略回调函数
})
uni
.
navigateTo
({
url
:
'
test
'
,
// 省略回调函数参数类型
success
(
res
){
console
.
log
(
res
)
}
})
```
如需获取 API 的参数类型信息,可通过鼠标悬浮查看,
![](
./static/view-API-type-info.png
)
比如封装
`uni.request`
时,如果参数从函数外部传入,则需要指定参数类型,否则无法获取参数类型信息。
```
ts
// 封装
function
request
(
options
:
RequestOptions
)
{
uni
.
request
(
options
)
}
// 调用
request
({
url
:
'
https://www.example.com/request
'
}
as
RequestOptions
)
```
如果需要查看更详细的参数类型信息,可通过鼠标右键点击转到定义,跳转 d.ts 文件进行查看,如下图所示:
![](
./static/go-to-definition.png
)
## uts不支持js的一些功能和特性
-
不支持undefined。任何变量被定义后,都需要赋值
-
不支持promise、async、await,仅支持callback回调
-
函数声明方式不支持
[
作为值传递
](
../uts/function.md#作为值传递
)
-
函数表达式方式不支持
[
默认参数
](
../uts/function.md#默认参数
)
## 组件监听页面生命周期
目前暂不支持在组件内监听页面生命周期,待后续支持组合式 API 后,可通过组合式 API 实现。
## 与uni-app js引擎版的其他差异
-
uni-app x 新增了onLastPageBackPress和onExit等应用级生命周期,Android退出应用逻辑写在app.uvue里,新建项目的模板自动包含相关代码。如需修改退出逻辑,请直接修改相关代码。
## css使用注意
[
详见
](
css/readme.md
)
docs/uni-app-x/tutorial/codegap.md
浏览文件 @
8c798912
...
@@ -254,7 +254,7 @@ uni.navigateTo({
...
@@ -254,7 +254,7 @@ uni.navigateTo({
```
```
如需获取 API 的参数类型信息,可通过鼠标悬浮查看,
如需获取 API 的参数类型信息,可通过鼠标悬浮查看,
![](
./static/view-API-type-info.png
)
![](
.
.
/static/view-API-type-info.png
)
比如封装
`uni.request`
时,如果参数从函数外部传入,则需要指定参数类型,否则无法获取参数类型信息。
比如封装
`uni.request`
时,如果参数从函数外部传入,则需要指定参数类型,否则无法获取参数类型信息。
```
ts
```
ts
...
@@ -267,7 +267,7 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
...
@@ -267,7 +267,7 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
```
```
如果需要查看更详细的参数类型信息,可通过鼠标右键点击转到定义,跳转 d.ts 文件进行查看,如下图所示:
如果需要查看更详细的参数类型信息,可通过鼠标右键点击转到定义,跳转 d.ts 文件进行查看,如下图所示:
![](
./static/go-to-definition.png
)
![](
.
.
/static/go-to-definition.png
)
## uts不支持js的一些功能和特性
## uts不支持js的一些功能和特性
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录