提交 64c7f561 编写于 作者: W wanganxp

补充开发注意

* [概述](README.md)
* [开发注意](codegap.md)
* [性能](performance.md)
* [编译器](compiler/README.md)
* CSS
......
# 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
}
export default {
data() {
const date = new Date() //自动推导类型为Date
const v = 1;
return {
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 显式声明
buttonEnable: false,
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 () {
this.buttonEnable = true
this.s1 = "点过按钮了"
},
}
}
</script>
<style>
.red{
color:red
}
</style>
```
## 函数 event 参数需显式指定类型
```html
<view @click="(e: any) => foo(e)">event must has type</view>
<view @click="foo($event as MouseEvent)">event must has type</view>
```
## JSON的类型注意
JSON在强类型语言中使用时,不能像js那样随意。这部分内容较长,[详见](../uts/data-type.md#JSON)
## 作用域插槽数据类型
作用域插槽需在组件中指定插槽数据类型
```ts
// components/Foo.uvue
<view>
<slot name="test name" />
</view>
import { SlotsType } from 'vue'
export default {
slots: Object as SlotsType<{
default: { name: string }
}>
}
// page.uvue
<view>
<Foo>
<template v-slot="slotProps">
<text>{{ slotProps.name }}</text>
</template>
</Foo>
</view>
```
## uts不支持undefined
任何变量被定义后,都需要赋值。
## css使用注意
[详见](css/readme.md)
\ No newline at end of file
......@@ -130,23 +130,6 @@ uni-app x 一期,只包括基本的组件和API。
- form
- label
需要注意:uts作为强类型语言,组件的事件参数,也必须有类型。这和js不同。例如:
```html
<template>
<view @touchstart="touchstart"></view>
<script lang="ts">
export default {
methods: {
touchstart(e : TouchEvent) { // e必须有类型
sX = e.touches[0].screenX;
sY = e.touches[0].screenY;
}
}
}
</script>
```
详细的组件事件类型清单,[详见]()
## 4. uni的API
......@@ -233,7 +216,12 @@ uni自带API,如下为目前支持的清单。
### 性能
* [x] uni.getPerformance
## 5. 插件兼容
## 5. 全局文件
- manifest.json 仅支持基本的名称图标配置,暂未支持splash
- AndroidManifest.xml 与原生开发相同
- pages.json 不支持app-plus的内容
## 6. 插件兼容
插件市场的uts插件,不管是API插件还是组件,均可同时在 uni-app js引擎版 和 uni-app x 上运行。
......
......@@ -61,9 +61,9 @@ let d = 3.14159 //注意:目前版本推导d为float类型,新版本
|Long |64bit |-9223372036854775808 |9223372036854775807 |整型|
|ULong |64bit |0 |9223372036854775807 * 2 + 1 |整型|
|Float |32bit |1.4E-45F |3.4028235E38 |[浮点型](https://kotlinlang.org/docs/numbers.html#floating-point-types)|
|Double |64bit |4.9E-324 | 1.7976931348623157E308 |[浮点型](https://kotlinlang.org/docs/numbers.html#floating-point-types)|
|Double |64bit |4.9E-324 |1.7976931348623157E308 |[浮点型](https://kotlinlang.org/docs/numbers.html#floating-point-types)|
基本数据类型会有jvm编译魔法加持,kotlin 会把 Int / Double 等非空类型编译为 基本数据类型,Int? / Double? 等可为空的类型编译为 Integer等包装类型,享受不到编译优化加持。
基本数据类型会有jvm编译魔法加持,kotlin 会把 Int / Double 等非空类型编译为 基本数据类型,Int? / Double? 等可为空的类型编译为 Integer等包装类型,享受不到编译优化加持。
如果涉及大量运算,建议开发者不要使用 number、Int? ,要明确使用 Int等类型 [详情](https://kotlinlang.org/docs/numbers.html#numbers-representation-on-the-jvm)
......@@ -268,8 +268,11 @@ let str5 = nstr3 as string // 类型为string
日期对象表示日期,包括年月日时分秒等各种日期。
它的类型名称是首字母大写`:Date`。但通过new Date()赋值时,可以省略`:Date`
```ts
const myDate = new Date()
const myDate = new Date() // 通过new Date赋值时,可以省略:Date
const myDate1:Date = new Date()
console.log(myDate instanceof Date) // Date用typeof会返回object,需使用instanceof判断
const year:number = myDate.getFullYear()
```
......@@ -307,23 +310,23 @@ let a2 = [1,'2',3];//支持
let a3 = [1,,2,3];//不支持
```
2. 创建数组对象
2. 使用:Array<>定义数组项的类型
```ts
let a1 = new Array(1,2,3);//支持
let a2 = new Array(1,'2',3);//支持
let a3 = Array(1,2,3);//支持
let a4 = Array(1,'2','3');//支持
const a1:Array<string> = ["uni-app", "uniCloud", "HBuilder"] //表示数组内容都是string。如不能确定可以写Array<any>
```
3. 使用[]定义数组项的类型
```ts
const a1: string[] = ['a', 'b', 'c'];
const a1: string[] = ['a', 'b', 'c']; //表示数组内容都是string
```
4. 使用Array<>定义数组项的类型
4. 创建数组对象
```ts
const a1:Array<string> = ["uni-app", "uniCloud", "HBuilder"]
let a1 = new Array(1,2,3);//支持
let a2 = new Array(1,'2',3);//支持
let a3 = Array(1,2,3);//支持
let a4 = Array(1,'2','3');//支持
```
字面量创建的数组,在uts的老版本上,kotlin自动推导数组类型,可能会推导成intArray,而不是uts的array。建议显式声明类型。
......@@ -689,7 +692,7 @@ let rect = {
这种写法比较简单,和js习惯一致,但在 UTS 中限制较多。它的使用有如下前提:
- 通过type声明了对象的数据结构,也就是需要单独定义一个type再使用。详见type章节。这也是大多数强类型使用对象字面量初始化的方式。
- 如未定义type,则仅限于web和Android,在iOS上,swift不不支持`.`操作符。在Android上也只支持字面量定义json。如果是`JSON.parse()`转换的,则不能使用。
- 如未定义type,则仅限于web和Android,在iOS上swift不支持`.`操作符。在Android上也只支持字面量定义json。如果是`JSON.parse()`转换的,则不能使用。
2. [""]下标属性
`rect["x"]`
......@@ -737,7 +740,7 @@ console.log(listData["count"]); //42
console.log(listArr[0]["title"]); //第一组
```
多层级下标访问需要使用 as 转换为 UTSJSONObject
多层级下标访问需要使用 as 转换为 UTSJSONObject
```ts
var j = {"test":{
"a-b": 1
......@@ -794,7 +797,7 @@ console.log(utsObj.getString("age"))
在所有的getXXX函数中 `getAny` 是一个特殊的存在,它可以获取属性,而不要求限制类型,他的返回值是 any 类型。
需要注意的是强类型语言中使用 any 是一件危险的事情,如果你需要使用`getAny`请确保你已经充分了解了可能遇到的问题。
需要注意的是强类型语言中使用 any 是一件危险的事情,如果你需要使用`getAny`请确保你已经充分了解了可能遇到的问题。
```ts
// 如果我们不确定属性类型,可以使用`getAny`来进行获取
......@@ -814,7 +817,7 @@ let detailInfoObj = utsObj["detailInfo"] as UTSJSONObject
let street = utsObj["street"] as String
```
上面的写法,啰嗦且容易出错。因此,我们提供了更高级的 keypath 写法,帮助开发者摆脱复杂的对象嵌套关系:
上面的写法,啰嗦且容易出错。因此,我们提供了更易用的 keypath 写法,帮助开发者摆脱复杂的对象嵌套关系:
```ts
// 结果:the wall street
let street = utsObj.getString("address.detailInfo.street")
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册
新手
引导
客服 返回
顶部