Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3216
Star 106
Fork 815
unidocs-zh
unidocs-zh
提交 f74b266b 编写于 作者: W wanganxp
浏览文件
操作

x

上级 fcba9fad
隐藏空白更改
内联 并排
Showing with 157 addition and 567 deletion
docs/uni-app-x/_sidebar.md
浏览文件 @ f74b266b
......@@ -3,7 +3,9 @@
* [与js开发的差别](tutorial/codegap.md)
* [request联网教程](tutorial/request.md)
* [全局变量与状态管理](tutorial/store.md)
* [编译器](compiler/README.md)
* [编译器]
* [概述](compiler/README.md)
* [条件编译](/tutorial/platform.md)
* 全局文件
* [main.uts](/collocation/main.md)
* [app.uvue](/collocation/App.md)
......@@ -11,6 +13,12 @@
* [AndroidManifest.xml](/tutorial/app-nativeresource-android.md)
* [pages.json](/collocation/pages.md)
* [uni.scss](/collocation/uni-scss.md)
* [页面](/tutorial/page.md)
* vue语法
* [概述](vue/README.md)
* [基础](/tutorial/vue3-basics.md)
* [组件](/tutorial/vue3-components.md)
* [API](/tutorial/vue3-api.md)
* 组件
* [公共属性和事件](component/common.md)
* [view](component/view.md)
......
docs/uni-app-x/api.md
浏览文件 @ f74b266b
# 基础
# API概述
uni-app x支持的API包括：
- uts的api [详见](/uts/buildin-object-api/global.md)
- uni.xxx的内置api。见左侧
- uniCloud.xxx的内置api。见左侧
## uni.exit(options?) @exit
由于uts可以直接调用Android和iOS的API，所以os和三方sdk的能力都可以在uts中调用。
<!-- UTSAPIJSON.exit.description -->
<!-- UTSAPIJSON.exit.param -->
<!-- UTSAPIJSON.exit.returnValue -->
<!-- UTSAPIJSON.exit.compatibility -->
<!-- UTSAPIJSON.exit.tutorial -->
# 界面
## uni.previewImage(options) @previewimage
<!-- UTSAPIJSON.previewImage.description -->
<!-- UTSAPIJSON.previewImage.param -->
<!-- UTSAPIJSON.previewImage.returnValue -->
<!-- UTSAPIJSON.previewImage.compatibility -->
<!-- UTSAPIJSON.previewImage.tutorial -->
## uni.closePreviewImage(options) @closepreviewimage
<!-- UTSAPIJSON.closePreviewImage.description -->
<!-- UTSAPIJSON.closePreviewImage.param -->
<!-- UTSAPIJSON.closePreviewImage.returnValue -->
<!-- UTSAPIJSON.closePreviewImage.compatibility -->
<!-- UTSAPIJSON.closePreviewImage.tutorial -->
## uni.showToast(options) @showtoast
<!-- UTSAPIJSON.showToast.description -->
<!-- UTSAPIJSON.showToast.param -->
<!-- UTSAPIJSON.showToast.returnValue -->
<!-- UTSAPIJSON.showToast.compatibility -->
<!-- UTSAPIJSON.showToast.tutorial -->
## uni.hideToast() @hidetoast
<!-- UTSAPIJSON.hideToast.description -->
<!-- UTSAPIJSON.hideToast.param -->
<!-- UTSAPIJSON.hideToast.returnValue -->
<!-- UTSAPIJSON.hideToast.compatibility -->
<!-- UTSAPIJSON.hideToast.tutorial -->
## uni.showLoading(options) @showloading
<!-- UTSAPIJSON.showLoading.description -->
<!-- UTSAPIJSON.showLoading.param -->
<!-- UTSAPIJSON.showLoading.returnValue -->
<!-- UTSAPIJSON.showLoading.compatibility -->
<!-- UTSAPIJSON.showLoading.tutorial -->
## uni.hideLoading() @hideloading
<!-- UTSAPIJSON.hideLoading.description -->
<!-- UTSAPIJSON.hideLoading.param -->
<!-- UTSAPIJSON.hideLoading.returnValue -->
<!-- UTSAPIJSON.hideLoading.compatibility -->
<!-- UTSAPIJSON.hideLoading.tutorial -->
## uni.showModal(options) @showmodal
<!-- UTSAPIJSON.showModal.description -->
<!-- UTSAPIJSON.showModal.param -->
<!-- UTSAPIJSON.showModal.returnValue -->
<!-- UTSAPIJSON.showModal.compatibility -->
<!-- UTSAPIJSON.showModal.tutorial -->
## uni.showActionSheet(options) @showactionsheet
<!-- UTSAPIJSON.showActionSheet.description -->
<!-- UTSAPIJSON.showActionSheet.param -->
<!-- UTSAPIJSON.showActionSheet.returnValue -->
<!-- UTSAPIJSON.showActionSheet.compatibility -->
<!-- UTSAPIJSON.showActionSheet.tutorial -->
# 网络
## uni.getNetworkType(options) @getnetworktype
<!-- UTSAPIJSON.getNetworkType.description -->
<!-- UTSAPIJSON.getNetworkType.param -->
<!-- UTSAPIJSON.getNetworkType.returnValue -->
<!-- UTSAPIJSON.getNetworkType.compatibility -->
<!-- UTSAPIJSON.getNetworkType.tutorial -->
## uni.request(param) @request
<!-- UTSAPIJSON.request.description -->
<!-- UTSAPIJSON.request.param -->
<!-- UTSAPIJSON.request.returnValue -->
<!-- UTSAPIJSON.request.compatibility -->
<!-- UTSAPIJSON.request.tutorial -->
## uni.downloadFile(options) @downloadfile
<!-- UTSAPIJSON.downloadFile.description -->
<!-- UTSAPIJSON.downloadFile.param -->
<!-- UTSAPIJSON.downloadFile.returnValue -->
<!-- UTSAPIJSON.downloadFile.compatibility -->
<!-- UTSAPIJSON.downloadFile.tutorial -->
## uni.connectSocket(options) @connectsocket
<!-- UTSAPIJSON.connectSocket.description -->
<!-- UTSAPIJSON.connectSocket.param -->
<!-- UTSAPIJSON.connectSocket.returnValue -->
<!-- UTSAPIJSON.connectSocket.compatibility -->
<!-- UTSAPIJSON.connectSocket.tutorial -->
## uni.onSocketOpen(options) @onsocketopen
<!-- UTSAPIJSON.onSocketOpen.description -->
<!-- UTSAPIJSON.onSocketOpen.param -->
<!-- UTSAPIJSON.onSocketOpen.returnValue -->
<!-- UTSAPIJSON.onSocketOpen.compatibility -->
<!-- UTSAPIJSON.onSocketOpen.tutorial -->
## uni.onSocketError(callback) @onsocketerror
<!-- UTSAPIJSON.onSocketError.description -->
<!-- UTSAPIJSON.onSocketError.param -->
<!-- UTSAPIJSON.onSocketError.returnValue -->
<!-- UTSAPIJSON.onSocketError.compatibility -->
<!-- UTSAPIJSON.onSocketError.tutorial -->
## uni.sendSocketMessage(options) @sendsocketmessage
<!-- UTSAPIJSON.sendSocketMessage.description -->
<!-- UTSAPIJSON.sendSocketMessage.param -->
<!-- UTSAPIJSON.sendSocketMessage.returnValue -->
<!-- UTSAPIJSON.sendSocketMessage.compatibility -->
<!-- UTSAPIJSON.sendSocketMessage.tutorial -->
## uni.onSocketMessage(callback) @onsocketmessage
<!-- UTSAPIJSON.onSocketMessage.description -->
<!-- UTSAPIJSON.onSocketMessage.param -->
<!-- UTSAPIJSON.onSocketMessage.returnValue -->
<!-- UTSAPIJSON.onSocketMessage.compatibility -->
<!-- UTSAPIJSON.onSocketMessage.tutorial -->
## uni.closeSocket(options) @closesocket
<!-- UTSAPIJSON.closeSocket.description -->
<!-- UTSAPIJSON.closeSocket.param -->
<!-- UTSAPIJSON.closeSocket.returnValue -->
<!-- UTSAPIJSON.closeSocket.compatibility -->
<!-- UTSAPIJSON.closeSocket.tutorial -->
## uni.onSocketClose(callback) @onsocketclose
<!-- UTSAPIJSON.onSocketClose.description -->
<!-- UTSAPIJSON.onSocketClose.param -->
<!-- UTSAPIJSON.onSocketClose.returnValue -->
<!-- UTSAPIJSON.onSocketClose.compatibility -->
<!-- UTSAPIJSON.onSocketClose.tutorial -->
# 存储
## uni.setStorage(options) @setstorage
<!-- UTSAPIJSON.setStorage.description -->
<!-- UTSAPIJSON.setStorage.param -->
<!-- UTSAPIJSON.setStorage.returnValue -->
<!-- UTSAPIJSON.setStorage.compatibility -->
<!-- UTSAPIJSON.setStorage.tutorial -->
## uni.setStorageSync(key, data) @setstoragesync
<!-- UTSAPIJSON.setStorageSync.description -->
<!-- UTSAPIJSON.setStorageSync.param -->
<!-- UTSAPIJSON.setStorageSync.returnValue -->
<!-- UTSAPIJSON.setStorageSync.compatibility -->
<!-- UTSAPIJSON.setStorageSync.tutorial -->
## uni.getStorage(options) @getstorage
<!-- UTSAPIJSON.getStorage.description -->
<!-- UTSAPIJSON.getStorage.param -->
<!-- UTSAPIJSON.getStorage.returnValue -->
<!-- UTSAPIJSON.getStorage.compatibility -->
<!-- UTSAPIJSON.getStorage.tutorial -->
## uni.getStorageSync(key) @getstoragesync
<!-- UTSAPIJSON.getStorageSync.description -->
<!-- UTSAPIJSON.getStorageSync.param -->
<!-- UTSAPIJSON.getStorageSync.returnValue -->
<!-- UTSAPIJSON.getStorageSync.compatibility -->
<!-- UTSAPIJSON.getStorageSync.tutorial -->
## uni.getStorageInfo(options) @getstorageinfo
<!-- UTSAPIJSON.getStorageInfo.description -->
<!-- UTSAPIJSON.getStorageInfo.param -->
<!-- UTSAPIJSON.getStorageInfo.returnValue -->
<!-- UTSAPIJSON.getStorageInfo.compatibility -->
<!-- UTSAPIJSON.getStorageInfo.tutorial -->
## uni.getStorageInfoSync() @getstorageinfosync
<!-- UTSAPIJSON.getStorageInfoSync.description -->
<!-- UTSAPIJSON.getStorageInfoSync.param -->
<!-- UTSAPIJSON.getStorageInfoSync.returnValue -->
<!-- UTSAPIJSON.getStorageInfoSync.compatibility -->
<!-- UTSAPIJSON.getStorageInfoSync.tutorial -->
## uni.removeStorage(options) @removestorage
<!-- UTSAPIJSON.removeStorage.description -->
<!-- UTSAPIJSON.removeStorage.param -->
<!-- UTSAPIJSON.removeStorage.returnValue -->
<!-- UTSAPIJSON.removeStorage.compatibility -->
<!-- UTSAPIJSON.removeStorage.tutorial -->
## uni.removeStorageSync(key) @removestoragesync
<!-- UTSAPIJSON.removeStorageSync.description -->
<!-- UTSAPIJSON.removeStorageSync.param -->
<!-- UTSAPIJSON.removeStorageSync.returnValue -->
<!-- UTSAPIJSON.removeStorageSync.compatibility -->
<!-- UTSAPIJSON.removeStorageSync.tutorial -->
## uni.clearStorage(option) @clearstorage
<!-- UTSAPIJSON.clearStorage.description -->
<!-- UTSAPIJSON.clearStorage.param -->
<!-- UTSAPIJSON.clearStorage.returnValue -->
<!-- UTSAPIJSON.clearStorage.compatibility -->
<!-- UTSAPIJSON.clearStorage.tutorial -->
## uni.clearStorageSync() @clearstoragesync
<!-- UTSAPIJSON.clearStorageSync.description -->
<!-- UTSAPIJSON.clearStorageSync.param -->
<!-- UTSAPIJSON.clearStorageSync.returnValue -->
<!-- UTSAPIJSON.clearStorageSync.compatibility -->
<!-- UTSAPIJSON.clearStorageSync.tutorial -->
# 定位
## uni.getLocation(options) @getlocation
<!-- UTSAPIJSON.getLocation.description -->
<!-- UTSAPIJSON.getLocation.param -->
<!-- UTSAPIJSON.getLocation.returnValue -->
<!-- UTSAPIJSON.getLocation.compatibility -->
<!-- UTSAPIJSON.getLocation.tutorial -->
## uni.getLocation(options) @getlocation
<!-- UTSAPIJSON.getLocation.description -->
<!-- UTSAPIJSON.getLocation.param -->
<!-- UTSAPIJSON.getLocation.returnValue -->
<!-- UTSAPIJSON.getLocation.compatibility -->
<!-- UTSAPIJSON.getLocation.tutorial -->
# 媒体
## uni.chooseImage(options) @chooseimage
<!-- UTSAPIJSON.chooseImage.description -->
<!-- UTSAPIJSON.chooseImage.param -->
<!-- UTSAPIJSON.chooseImage.returnValue -->
<!-- UTSAPIJSON.chooseImage.compatibility -->
<!-- UTSAPIJSON.chooseImage.tutorial -->
## uni.saveImageToPhotosAlbum(options) @saveimagetophotosalbum
<!-- UTSAPIJSON.saveImageToPhotosAlbum.description -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.param -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.returnValue -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.compatibility -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.tutorial -->
# 设备
## uni.getAppAuthorizeSetting() @getappauthorizesetting
<!-- UTSAPIJSON.getAppAuthorizeSetting.description -->
<!-- UTSAPIJSON.getAppAuthorizeSetting.param -->
<!-- UTSAPIJSON.getAppAuthorizeSetting.returnValue -->
<!-- UTSAPIJSON.getAppAuthorizeSetting.compatibility -->
<!-- UTSAPIJSON.getAppAuthorizeSetting.tutorial -->
## uni.getAppBaseInfo(config) @getappbaseinfo
<!-- UTSAPIJSON.getAppBaseInfo.description -->
<!-- UTSAPIJSON.getAppBaseInfo.param -->
<!-- UTSAPIJSON.getAppBaseInfo.returnValue -->
<!-- UTSAPIJSON.getAppBaseInfo.compatibility -->
<!-- UTSAPIJSON.getAppBaseInfo.tutorial -->
## uni.getDeviceInfo(config) @getdeviceinfo
<!-- UTSAPIJSON.getDeviceInfo.description -->
<!-- UTSAPIJSON.getDeviceInfo.param -->
<!-- UTSAPIJSON.getDeviceInfo.returnValue -->
<!-- UTSAPIJSON.getDeviceInfo.compatibility -->
<!-- UTSAPIJSON.getDeviceInfo.tutorial -->
## uni.getSystemInfo(options) @getsysteminfo
<!-- UTSAPIJSON.getSystemInfo.description -->
<!-- UTSAPIJSON.getSystemInfo.param -->
<!-- UTSAPIJSON.getSystemInfo.returnValue -->
<!-- UTSAPIJSON.getSystemInfo.compatibility -->
<!-- UTSAPIJSON.getSystemInfo.tutorial -->
## uni.getSystemInfoSync() @getsysteminfosync
<!-- UTSAPIJSON.getSystemInfoSync.description -->
<!-- UTSAPIJSON.getSystemInfoSync.param -->
<!-- UTSAPIJSON.getSystemInfoSync.returnValue -->
<!-- UTSAPIJSON.getSystemInfoSync.compatibility -->
<!-- UTSAPIJSON.getSystemInfoSync.tutorial -->
## uni.getWindowInfo() @getwindowinfo
<!-- UTSAPIJSON.getWindowInfo.description -->
<!-- UTSAPIJSON.getWindowInfo.param -->
<!-- UTSAPIJSON.getWindowInfo.returnValue -->
<!-- UTSAPIJSON.getWindowInfo.compatibility -->
<!-- UTSAPIJSON.getWindowInfo.tutorial -->
## uni.getSystemSetting() @getsystemsetting
<!-- UTSAPIJSON.getSystemSetting.description -->
<!-- UTSAPIJSON.getSystemSetting.param -->
<!-- UTSAPIJSON.getSystemSetting.returnValue -->
<!-- UTSAPIJSON.getSystemSetting.compatibility -->
<!-- UTSAPIJSON.getSystemSetting.tutorial -->
<!-- UTSAPIJSON.general_type.name -->
<!-- UTSAPIJSON.general_type.param -->
\ No newline at end of file
一般原生能力建议封装为[uni_modules](/plugin/uni_modules.md)
\ No newline at end of file
docs/uni-app-x/api/getLocation.md
浏览文件 @ f74b266b
......@@ -8,6 +8,16 @@
<!-- UTSAPIJSON.getLocation.compatibility -->
### 注意
uni-app x的定位，默认是系统定位，system。真机运行基座不包含三方定位sdk。
三方定位sdk方面，暂不支持高德、百度，但支持腾讯定位。可下载腾讯定位插件，在插件中配置key打包后生效。
如需其他定位，请在插件市场搜索定位相关的uts插件。
不管系统定位、还是三方sdk定位，都有很多注意事项，包括gms、坐标系、隐私和权限等，请仔细阅读下面的参考链接。
<!-- UTSAPIJSON.getLocation.tutorial -->
<!-- UTSAPIJSON.general_type.name -->
......
docs/uni-app-x/api/getSystemInfo.md
浏览文件 @ f74b266b
......@@ -2,6 +2,18 @@
<!-- UTSAPIJSON.getSystemInfo.description -->
uni-app 提供了异步(`uni.getSystemInfo`)和同步(`uni.getSystemInfoSync`)的2个API获取系统信息。
按照运行环境层级排序，从底层向上，systemInfo有6个概念：
- `device`：运行应用的设备，如iphone、huawei
- `os`：设备的操作系统，如 ios、andriod、windows、mac、linux
- `rom`：基于操作系统的定制，Android系统特有概念，如miui、鸿蒙
- `host`：运行应用的宿主程序，即OS和应用之间的运行环境，如浏览器、微信等小程序宿主、集成uniMPSDK的App。uni-app直接开发的app没有host概念
- `uni`：uni-app框架相关的信息，如uni-app框架的编译器版本、运行时版本
- `app`：开发者的应用相关的信息，如应用名称、版本
[详见](https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfo)
<!-- UTSAPIJSON.getSystemInfo.param -->
<!-- UTSAPIJSON.getSystemInfo.returnValue -->
......
docs/uni-app-x/css/font-family.md
浏览文件 @ f74b266b
......@@ -10,6 +10,11 @@
<!-- CSSJSON.font-family.compatibility -->
#### App平台差异
font-family 样式不支持继承，仅对 [text](uni-app-x/component/text.md) 组件生效。
- font-family 样式不支持继承，仅对 [text](uni-app-x/component/text.md) 组件生效。
#### 字体图标
支持ttf和otf字体图标。
- 可在css里直接加载，[参考](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/CSS/text/font-family.uvue)
- 也可以使用API [uni.loadFontface](../api/loadFontFace.md)
<!-- CSSJSON.font-family.reference -->
docs/uni-app-x/css/readme.md
浏览文件 @ f74b266b
......@@ -218,6 +218,8 @@ uni-app x的css的样式不继承规则，虽然与web有差异，其实只是
|CSS Variable |√ | |
|媒体查询 |√ | |
字体图标[详见](font-family.md)
## 选择器
|类别 |示例 |支持情况 |备注 |
|:-: |:-: |:-: |:-: |
......@@ -261,6 +263,7 @@ uni-app x的css的样式不继承规则，虽然与web有差异，其实只是
|hsl | | |
|hsla | | |
## At-rules
|类别 |支持情况 |备注 |
|:-: |:-: |:-: |
......
docs/uni-app-x/readme.md
浏览文件 @ f74b266b
......@@ -225,13 +225,23 @@ uni自带API，如下为目前支持的清单。
### 性能
* [x] uni.getPerformance
## 5. 全局文件
- manifest.json 仅支持基本的名称图标配置，暂未支持splash。支持CPU类型abiFilters、Android版本minSdkVersion、targetSdkVersion。
### uniCloud
* [x] uniCloud.callFunction
云对象和clientDB还不支持。
## 5. vue语法
- uvue是按vue3规范实现的，但一期uvue不支持setup，只支持选项式
- 目前也不支持vue插件，比如pinia、vuex、i18n、router。简单的状态管理可以参考文档[全局变量和状态管理](tutorial/store.md)
## 6. 全局文件
- manifest.json 仅支持基本的名称图标配置，暂未支持splash。支持CPU类型abiFilters、Android版本minSdkVersion、targetSdkVersion。[详见](manifest.md)
- AndroidManifest.xml 与原生开发相同。注意Android权限配置在这里配置，而不是在manifest.json中 [详见](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android.html)
- pages.json 不支持app-plus的内容
- app.uvue 不支持globaldata。[详见](/docs/collocation/App.md)
- pages.json 不支持app-plus的内容。[详见](/docs/collocation/pages.md)
- uni.scss 正常支持。但注意uvue仅能使用[css子集](css/README.md)
## 6. 插件兼容
## 7. 插件兼容
插件市场的uts插件，不管是API插件还是组件，均可同时在 uni-app js引擎版 和 uni-app x 上运行。
......@@ -246,9 +256,8 @@ uni-app js版的“App原生语言插件”无法在 uni-app x 中运行。
除上述文档中声明已经完成的，还有如下需要注意：
- 全端支持：一期只有Android。虽然uts语言支持swift，可以写原生插件，但iOS版的uvue还未开发完毕。对于iOS或其他小程序、web平台，开发者可将uvue文件后缀改为vue或nvue，如果没有写Android专有代码，那么也可以使用uni-app js引擎版编译到其他平台，包括iOS App、web及各家小程序。尤其在app-iOS上，由于设备性能本就优秀，所以nvue的方案的性能也足够满足挑剔的开发者。后期官方会提供更完善的 uni-app x的全端支持。
- uvue语法：虽然uvue是按vue3实现的，但一期uvue不支持setup，只支持选项式。
- 一期不支持：横屏切换、暗黑模式、自定义转场、多语言、无障碍
- 一期不支持：云开发（已在开发中）、uni-ad。另外包括微信、支付宝、个推等三方sdk封装一期均未启动
- 一期不支持：横屏切换、暗黑模式、自定义路由、多语言、无障碍
- 一期不支持：uni-ad。另外包括微信、支付宝、个推、地图等三方sdk封装官方均未启动
- 一期不支持国际区账户创建和打包uni-app x，仅大陆区开发者账户可用。
欢迎去[需求墙](https://vote.dcloud.net.cn/#/?name=uni-app%20x)投票，告诉我们你的需求优先级。
......
docs/uni-app-x/tutorial/request.md
浏览文件 @ f74b266b
......@@ -49,19 +49,22 @@ uni.request({
为json数据定义一个type的自定义类型，明确好对象的属性名称及类型，然后把这个type通过泛型传给request方法，res拿出来的就是转换好的类型，就可以直接`.操作符`获取属性了。。
先不讲原理，先给个使用范例，然后再解读原理。
- 第一步：用HBuilderX自带的工具，给服务器数据定义类型
把服务器端返回的json数据，复制黏贴到HBuilderX的json编辑器里，点右键，转type。
把服务器端返回的data里的json数据，复制黏贴到HBuilderX的json编辑器里，点右键，转type。
![](../static/json2type.png)
> 转换功能需要HBuilderX 3.9+、安装了uni-app x真机运行插件、且打开的标签卡是json编辑器。（在ctrl+t新建空白md标签卡，粘贴json数据，会自动切换成json编辑器）
上面的截图是复用了其他图片，如果我们使用这个服务器接口，服务器返回的数据内容，也就是res.data的数据是这样：
上面的截图是复用了其他图片，如果我们使用`https://ext.dcloud.net.cn/plugin/uniappx-plugin-list`这个服务器接口，服务器返回的数据内容，也就是`res.data`的数据是这样：
```json
{code:200,desc:"",data:[{"plugin_name":"插件名称A","plugin_id":123}]}
```
**注意：** 不要把res和res.data搞错了，要看`res.data`的数据格式，而不是`res`的格式。`res`的格式是不变的。
观察返回的数据，`res.data`返回一个对象，拥有code、desc、data这3个子属性，code是number类型，desc是string类型，而data的类型又是一个数组。
该数组内又是若干子对象，子对象有属性`plugin_id`和`plugin_name`等。
那么使用转换工具，生成的类型定义是这样：
```ts
type Data = {
......@@ -75,8 +78,12 @@ type IRootType = {
}
```
因type不可嵌套，生成了2个type。注意顺序，Data这个type需写在前面，因为后面要引用它。引用代码执行时如未定义该类型，会报错。
- 第二步：把这段类型定义，放在`<script>`根下，也就是export default{}之前。然后给uni.request传入泛型参数`<IRootType>`，返回的res自动转换好了类型，可以直接`.`属性了。
**注意：** 因为`res.data`是对象，所以泛型那里直接使用`<IRootType>`。有的服务器接口返回的`res.data`是数组，就需要在泛型那里写成`<IRootType[]>`
```vue
<script>
type Data = {
......@@ -94,7 +101,7 @@ type IRootType = {
url: "https://ext.dcloud.net.cn/plugin/uniappx-plugin-list",
success: (res) => {
console.log(res.data)
console.log(res.data instanceof IRootType) //true
console.log(res.data instanceof IRootType) //true res.data已经被转换为type了
console.log(res.data?.data) //因为联网数据不可控，转换可能失败，所以这里需要用?.的方式做安全访问
let resData = res.data?.data
if(resData!=null && resData.length>0){ //判断一下数组不为空
......@@ -107,12 +114,16 @@ type IRootType = {
</script>
```
与UTSJSONObject方式相比，不用使用as做很多转换，虽然需要定义type，但由于有工具可以自动生成type，所以整体使用体验，比UTSJSONObject方式更方便。
与UTSJSONObject方式相比，不用使用as做很多转换，虽然需要定义type，但由于有工具可以自动生成type，所以整体使用体验，比UTSJSONObject方式方便一点。
type+泛型这个方式，也是ts开发者惯用的方式。
但不熟悉ts的开发者，可能不了解type和泛型。下面讲解下。
### type和泛型详解
- 什么是type和泛型？
type就是自定义一个类型。下面定义了一个数据类型DataType，该类型有2个属性，`plugin_id`和`plugin_name`，这2个属性的类型分别是number和string。
```ts
type DataType = {
......@@ -127,50 +138,22 @@ type DataType = {
而泛型，是一个对方法参数进行通用的类型描述。它告诉一个支持泛型的方法，给方法传入什么类型，方法就会返回什么类型。
详见[泛型](../../uts/generics.md)
不过uts的泛型支持还没有达到ts的泛型完善度，详见[泛型](../../uts/generics.md)
uni.request方法是支持泛型的，这意味着返回结果可以有很多种类型。
所以可以把你定义的DataType类型通过<T>的方式传给uni.request方法，尖括号要写在方法名和左圆括号中间。
这个方法就会把返回的res转换为你传入的DataType类型。
下面来举例：
所以可以把你定义的DataType类型通过`<T>`的方式传给uni.request方法，尖括号要写在方法名和左圆括号中间。
这个方法就会把返回的`res.data`转换为你传入的DataType类型。
服务器返回的数据内容，也就是res.data的数据是这样：
```json
{code:200,desc:"",data:[{"plugin_name":"插件名称A","plugin_id":123}]}
```
观察数据，这是一个对象，拥有code、desc、data这3个子属性，code是number类型，desc是string类型，而data的类型又是一个数组。
该数组内又是若干子对象，子对象有属性`plugin_id`和`plugin_name`等。
- 为何type要定义在export default{}之前？
对于这种父子结构，我们需要定义2个类型才能描述，因为每一层都需要一个type。
其实如果type不用于vue data数据的类型，那么type只需要定义在执行前就可以。
- IRootType是一级的类型，它有3个属性，其中有一个data属性，类型是另一个type data的数组方式。
- 而Data是二级数组中对象的类型，有2个属性`plugin_id`和`plugin_name`
但实际开发中，type大多用于data的类型定义，而想给data定义类型，那就得写在data的前面，也就是export default{}之前了。
注意顺序，Data这个type需写在前面，因为后面要引用它。引用代码执行时如未定义该类型，会报错。
- 网络数据缺少一些属性怎么办？
```ts
// uts中为json数据定义类型
type DataType = {
plugin_id : number,
plugin_name : string
} //定义一个DataType类型，含有number类型的plugin_id属性，和string类型的plugin_name属性
type IRootType = {
code : number;
desc : string;
data : Data[];
}
```
那为何type一定要定义在export default{}之前？
其实上面的代码，type只需要定义在uni.request方法执行前就可以。但实际开发中，type大多用于data的类型定义，
而想给data定义类型，那就得写在data的前面，也就是export default{}之前了。
还有一个问题，网络返回的数据，有可能缺少某些属性，该怎么写？ 把类型声明为"或null"，或者使用`?:`
网络返回的数据，有可能缺少某些属性，导致报错。测试需要把可为空的属性类型声明为"或null"，或者使用`?:`
```ts
type DataType = {
plugin_id : number,
......@@ -181,9 +164,28 @@ type DataType = {
如您不了解null的安全使用，[详见](../../uts/data-type.md#null)
再举一个实际中更常见的例子。
- 务必注意res.data返回的是对象还是数组
如果res.data返回的是对象，那么泛型调用时直接`uni.request<IRootType>(`
如果res.data返回的是数组，那么传泛型时必须传入数组格式`uni.request<IRootType[]>(`
- type的敏感词转义
服务器返回的json数据，其属性键名有可能存在一些type不支持的字符。
比如`{"a:b":"123","a-b":"456"}`，这些键名对于type来讲都是非法的。转换type就会失败。
如果你的服务器数据涉及这类问题且数据格式不可改，那只能改用UTSJSONObject方式。
特殊词清单详见：[type](../../uts/data-type.md#type)
### 完整实例
再举一个实际中更常见的例子。联网获取插件市场的插件列表数据，并绑定在模板上，还可以翻页。
联网获取插件市场的插件列表数据，并绑定在模板上，还可以翻页。
翻页需要用到[...展开操作符](../../uts/operator.md#展开语法...)
```vue
<template>
......
docs/uni-app-x/tutorial/store.md
浏览文件 @ f74b266b
# 全局变量与状态管理
`uni-app x` 可通过一个专用模块组织和管理全局变量与状态。示例：
`uni-app x` 不支持globaldata，目前也不支持pinia和vuex。但可通过一个专用模块组织和管理全局变量与状态。
定义一个模块，编写一个单独的uts文件，比如 /store/index.uts，在里面设一个全局变量，比如globalNum。
```ts
// store/index.uts
//定义一个大写的State类型
export type State = {
globalNum: number
// 如有需要，可增加更多属性
}
// 实例化为state
export const state = reactive({ globalNum: 0 } as State)
// 定义修改属性值的方法
export const setGlobalNum = (num: number) => {
state.globalNum = num
}
```
```ts
// pages/index/index.uvue
在需要的页面和uts文件里，import上面的/store/index.uts，通过如下方式读和写globalNum。
```vue
<template>
<text @click="plus">{{ globalNum }}</text>
</template>
<script lang="uts">
import { state, setGlobalNum } from '@/store/index.uts'
import { state, setGlobalNum } from '@/store/index.uts' //导出state和修改其属性值的方法，如不需要修改值，则不需要导出修改方法
export default {
computed: {
globalNum(): number {
globalNum(): number { //定义可绑定在界面上的globalNum
return state.globalNum
}
},
......@@ -36,4 +40,6 @@ export const setGlobalNum = (num: number) => {
}
}
</script>
```
\ No newline at end of file
```
不管在哪里修改了globalNum的值，界面上都会自动更新。
\ No newline at end of file
docs/uni-app-x/vue/readme.md 0 → 100644
浏览文件 @ f74b266b
# vue
uni-app x的vue语法，是按vue3规范实现的，但一期uvue不支持setup，只支持选项式。
目前也不支持vue插件，比如pinia、vuex、i18n、router。简单的状态管理可以参考文档[全局变量和状态管理](tutorial/store.md)
还有一些支持差异，在左侧文档点开后搜索“uni-app x”可见。
- 组件使用注意
默认组件的后缀名为.vue。而不是.uvue。
.vue里面写uvue的语法，可以正常被.uvue页面引用和编译。
如果使用.uvue的组件，则需要手动import，包括easycom也必须配规则才能识别。
docs/uts/data-type.md
浏览文件 @ f74b266b
......@@ -450,9 +450,23 @@ const l = b.length // 错误：变量“b”可能为空
我们要庆幸编译器的报错，因为如果编译器放过后，在线上运行时万一真的为空，那会导致崩溃。
如何正确访问可能为null的对象的属性和方法？有几种方式可以做到。
除了变量，类型的属性也可以为null。此时可以和变量一样使用` | null`，还可以用`?:`来代表可选
```ts
type obj = {
id : number,
name : string,
age : number | null,
sex ?: boolean
}
```
方法参数的可为空，也就是可选参数，其实意思是该参数有默认值，你可以不填，不填就使用默认值，具体见[function](function.md#默认参数)
### 安全的访问null
定义可为空后，如何安全访问？
#### 1. 代码中判空后再使用
如果你的代码已经判空，则编译器不会再告警。你可以显式检测 b 是否为 null，在不为 null 的情况下调用 b 的属性和方法。
......@@ -507,10 +521,10 @@ console.log(baz);
```ts
const l = b!.length
```
<!--
### vue data中null的用法
很多时候，data的数据需要通过script获取，而 uts 不支持 undefined，初始化时就只能赋null。
很多时候，data的数据需要通过script获取，而 uts 不支持 undefined，初始化时就只能赋null。一旦定义可为null后，调用时就需要用`?.`操作可选属性。
```html
<script lang=uts>
......@@ -537,7 +551,7 @@ const l = b!.length
}
</script>
```
-->
## 日期（Date）@date
日期对象表示日期，包括年月日时分秒等各种日期。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或