Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3216
Star 106
Fork 815
unidocs-zh
unidocs-zh
提交 3cbb2581 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

docs: uni-app x compatibility

上级 4f6c66b3
隐藏空白更改
内联 并排
Showing with 109 addition and 97 deletion
docs/tutorial/vue3-components.md
浏览文件 @ 3cbb2581
......@@ -251,14 +251,11 @@
<script lang="uts">
export default {
props: {
// 检测类型 + 其他验证
// 检测类型 + 其他验证（uni-app x 暂不支持 validator 校验函数）
age: {
type: Number,
default: 0,
required: true,
validator: function(value): boolean {
return value >= 0
}
required: true
}
}
}
......@@ -613,13 +610,8 @@
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function(value): boolean {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
},
// uni-app x 暂不支持 validator 校验函数
// 具有默认值的函数
propG: {
type: Function,
......@@ -1135,7 +1127,7 @@
```
### 处理 v-model 修饰符
### 处理 v-model 修饰符 @v-model-modifiers
让我们创建一个示例自定义修饰符 `capitalize`，它将 `v-model` 绑定提供的字符串的第一个字母大写。
......
docs/uni-app-x/component/readme.md
浏览文件 @ 3cbb2581
......@@ -15,6 +15,51 @@ uvue的组件，可以使用前端技术编写，也可以使用原生技术编
uts组件插件的开发教程，[详见](/plugin/uts-component.md)
**兼容性及注意事项：**
## props
- 仅支持[对象方式](https://cn.vuejs.org/guide/components/props.html#props-declaration)声明。
- 暂不支持[自定义类型校验函数](https://cn.vuejs.org/guide/components/props.html#prop-validation)。
## 自定义事件
- [v-model](tutorial/vue3-components.html#v-model-modifiers) 暂不支持 `capitalize` 修饰符。
## 计算属性和侦听器
- [watch deep](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E9%80%89%E9%A1%B9-deep) 不支持
- [监听对象中单个属性](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E7%9B%91%E5%90%AC%E5%AF%B9%E8%B1%A1%E4%B8%AD%E5%8D%95%E4%B8%AA%E5%B1%9E%E6%80%A7) 不支持
## 作用域插槽的类型
作用域插槽需在组件中指定插槽数据类型
```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>
```
## 监听页面生命周期
目前暂不支持在组件内监听页面生命周期，待后续支持组合式 API 后，可通过组合式 API 实现。
## vue 与 uvue 不同文件后缀的优先级 @priority
新建组件时，默认组件的后缀名为.vue。而不是.uvue。
......
docs/uni-app-x/tutorial/codegap.md
浏览文件 @ 3cbb2581
......@@ -79,11 +79,7 @@ data里`:`的用途是赋值，无法通过`:`定义类型，所以data的数据
</style>
```
## template
- App 端，如需页面级滚动，根节点必须是 `scroll-view` 标签。
### 函数 event 参数的类型
## 函数 event 参数的类型 @function-event-argument-type
上面的例子中，touchstart事件中必须对`e`指定类型，才能使用`e.touches[0].screenX`。下面再举一个例子，加深下记忆：
......@@ -111,76 +107,6 @@ data里`:`的用途是赋值，无法通过`:`定义类型，所以data的数据
<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>
```
### 监听页面生命周期
目前暂不支持在组件内监听页面生命周期，待后续支持组合式 API 后，可通过组合式 API 实现。
## 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)
如果是联网获取服务器发下的json数据，那么**务必需要读教程**[request](tutorial/request.md)
## 函数参数类型
如果函数参数为基础数据类型，函数调用时，参数类型可以省略，编译器会自动推导。\
......@@ -207,6 +133,24 @@ const person: Person = { name: 'name', age: 18 }
foo2(person)
```
## 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)
如果是联网获取服务器发下的json数据，那么**务必需要读教程**[request](tutorial/request.md)
## 编译器的类型优化
- 生命周期的参数及参数类型均可省略。以 `onLoad` 为例：
......@@ -273,9 +217,7 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
![](../static/go-to-definition.png)
## 插件
- uni-app x 暂不支持 i18n、Vuex、Pinia 等插件。
## [vue 注意事项](uni-app-x/vue/readme.md)
## uts不支持js的一些功能和特性
......@@ -284,9 +226,6 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
- 函数声明方式不支持[作为值传递](../uts/function.md#作为值传递)
- 函数表达式方式不支持[默认参数](../uts/function.md#默认参数)
## 与uni-app js引擎版的其他差异
- uni-app x 新增了onLastPageBackPress和onExit等应用级生命周期，Android退出应用逻辑写在app.uvue里，新建项目的模板自动包含相关代码。如需修改退出逻辑，请直接修改相关代码。
## css使用注意
[详见](css/readme.md)
[详见](uni-app-x/css/readme.md)
docs/uni-app-x/vue/readme.md
浏览文件 @ 3cbb2581
# vue
uni-app x的vue语法，是按vue3规范实现的，但一期uvue不支持setup，只支持选项式。
## template
目前也不支持vue插件，比如pinia、vuex、i18n、router。简单的状态管理可以参考文档[全局变量和状态管理](uni-app-x/tutorial/store.md)
- App 端，如需页面级滚动，根节点必须是 `scroll-view` 标签。
### [函数 event 参数的类型](uni-app-x/tutorial/codegap.md#function-event-argument-type)
### 指令
- [v-once](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#v-once) 不支持
- [v-html](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#v-html) 不支持
### 事件处理
- [事件修饰符](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6) 不支持
## script
- 仅支持 `export default {}`。
- `data` 仅支持函数返回对象字面量方式。
```ts
<script lang="uts">
export default {
data() {
return {
// 必须写这里
}
}
}
</script>
```
## [组件](uni-app-x/component/readme.md)
## 应用生命周期
uni-app x 新增了 [onLastPageBackPress](collocation/App.md#applifecycle) 和 [onExit](collocation/App.md#applifecycle) 应用级生命周期，Android退出应用逻辑写在app.uvue里，新建项目的模板自动包含相关代码。如需修改退出逻辑，请直接修改相关代码。
## 插件
暂不支持vue插件，比如pinia、vuex、i18n、router。简单的状态管理可以参考文档[全局变量和状态管理](uni-app-x/tutorial/store.md)。
还有一些支持差异，在左侧文档点开后搜索“uni-app x”可见。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或