Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
8c798912
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3200
Star
106
Fork
813
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
94
列表
看板
标记
里程碑
合并请求
70
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
94
Issue
94
列表
看板
标记
里程碑
合并请求
70
合并请求
70
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
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({
```
如需获取 API 的参数类型信息,可通过鼠标悬浮查看,
![](
./static/view-API-type-info.png
)
![](
.
.
/static/view-API-type-info.png
)
比如封装
`uni.request`
时,如果参数从函数外部传入,则需要指定参数类型,否则无法获取参数类型信息。
```
ts
...
...
@@ -267,7 +267,7 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
```
如果需要查看更详细的参数类型信息,可通过鼠标右键点击转到定义,跳转 d.ts 文件进行查看,如下图所示:
![](
./static/go-to-definition.png
)
![](
.
.
/static/go-to-definition.png
)
## uts不支持js的一些功能和特性
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录