提交 12490270 编写于 作者: D DCloud_LXH

chore: 更新文档

上级 78207f6a
...@@ -9,7 +9,7 @@ uni-app x项目的uts代码中可以使用很多API。包括: ...@@ -9,7 +9,7 @@ uni-app x项目的uts代码中可以使用很多API。包括:
- dom的api [详见](dom/README.md) - dom的api [详见](dom/README.md)
- vue的api [详见](../../tutorial/vue3-api.md) - vue的api [详见](../../tutorial/vue3-api.md)
- 原生api - 原生api
由于uts可以直接调用Android和iOS的api,所以os和三方sdk的能力都可以在uts中调用。如下: 由于uts可以直接调用Android和iOS的api,所以os和三方sdk的能力都可以在uts中调用。如下:
```vue ```vue
...@@ -39,7 +39,7 @@ uni-app x项目的uts代码中可以使用很多API。包括: ...@@ -39,7 +39,7 @@ uni-app x项目的uts代码中可以使用很多API。包括:
插件市场也有很多做好的uts插件,方便开发者拿来即用。[uts插件](https://ext.dcloud.net.cn/?cat1=8&type=UpdatedDate) 插件市场也有很多做好的uts插件,方便开发者拿来即用。[uts插件](https://ext.dcloud.net.cn/?cat1=8&type=UpdatedDate)
虽然上述页面可以直接调用原生能力,但一般原生能力建议封装为[uni_modules](https://uniapp.dcloud.net.cn/uni_modules.html)形式的[uts插件](https://uniapp.dcloud.net.cn/uts-plugin.html)。这样方便共享、方便跨平台。 虽然上述页面可以直接调用原生能力,但一般原生能力建议封装为[uni_modules](../../plugin/uni_modules.md)形式的[uts插件](../../plugin/uts-plugin.md)。这样方便共享、方便跨平台。
uni-app x 中不再支持plus和weex的API。过于plus api中一些常用的api,在uni-app x中进行了替换增补。 uni-app x 中不再支持plus和weex的API。过于plus api中一些常用的api,在uni-app x中进行了替换增补。
- plus.runtime.quit => [uni.exit](./exit.md) - plus.runtime.quit => [uni.exit](./exit.md)
...@@ -72,3 +72,4 @@ uni-app x 中不再支持plus和weex的API。过于plus api中一些常用的api ...@@ -72,3 +72,4 @@ uni-app x 中不再支持plus和weex的API。过于plus api中一些常用的api
} }
</script> </script>
``` ```
\ No newline at end of file
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
- [拨打电话](https://ext.dcloud.net.cn/plugin?id=15235)`uni.makePhoneCall` - [拨打电话](https://ext.dcloud.net.cn/plugin?id=15235)`uni.makePhoneCall`
- [打开三方应用](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/dev/pages/template/schema/schema.uvue):打开浏览器、应用商店、地图并传参。`plus.openUrl` - [打开三方应用](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/dev/pages/template/schema/schema.uvue):打开浏览器、应用商店、地图并传参。`plus.openUrl`
- [分享](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/dev/pages/template/share/share.uvue)`uni.shareWithSystem` - [分享](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/dev/pages/template/share/share.uvue)`uni.shareWithSystem`
- 打开文件:`uni.openDocument`[hello uts示例](https://gitcode.net/dcloud/hello-uts/-/blob/dev/uni_modules/uts-nativepage/utssdk/app-android/index.uts))、[插件市场](https://ext.dcloud.net.cn/plugin?id=12731) - 打开文件:`uni.openDocument`[hello uts示例](](https://gitcode.net/dcloud/hello-uts/-/blob/dev/uni_modules/uts-nativepage/utssdk/app-android/index.uts))、[插件市场](https://ext.dcloud.net.cn/plugin?id=12731)
- [扫码](https://ext.dcloud.net.cn/search?q=%E6%89%AB%E7%A0%81&cat1=8&type=UpdatedDate)`uni.scanCode` - [扫码](https://ext.dcloud.net.cn/search?q=%E6%89%AB%E7%A0%81&cat1=8&type=UpdatedDate)`uni.scanCode`
- [文件选择](https://ext.dcloud.net.cn/search?q=%E6%96%87%E4%BB%B6%E9%80%89%E6%8B%A9&cat1=8&cat2=81)`uni.chooseFile` - [文件选择](https://ext.dcloud.net.cn/search?q=%E6%96%87%E4%BB%B6%E9%80%89%E6%8B%A9&cat1=8&cat2=81)`uni.chooseFile`
- [蓝牙](https://ext.dcloud.net.cn/search?q=%E8%93%9D%E7%89%99&orderBy=Relevance&cat1=8&cat2=81) - [蓝牙](https://ext.dcloud.net.cn/search?q=%E8%93%9D%E7%89%99&orderBy=Relevance&cat1=8&cat2=81)
......
# 文件系统
文件系统提供一套跨平台操作文件的管理接口,包括文件和目录的增删改名、获取信息、读写文件等常用功能。
通过[uni.getFileSystemManager](filemanager.md)可以获取到文件系统管理器,所有文件系统的管理操作通过 [FileSystemManager](filemanager.md#FileSystemManager) 来调用。
```uts
const fs = uni.getFileSystemManager()
```
文件主要分两大类:
- 项目包文件:指 uni-app x 项目目录中添加的文件,比如static目录下的文件。Android发行后存放在assets目录下。
- 本地文件:指 uni-app x 应用在手机端运行时可访问的磁盘文件。又分以下目录:
+ 应用沙盒目录:App平台原生应用的沙盒目录,其中包括缓存文件目录和用户文件目录
* 缓存文件目录:App平台运行过程中框架保存缓存文件的目录
* 用户文件目录:App平台提供给开发者操作的本地文件目录
## 项目包文件
项目包文件放置应用首次加载时需要的文件,对于内容较大或需要动态更新的文件,不推荐添加到项目包文件中,可以在应用启动后联网将文件下载到本地。
推荐将文件放到static目录(uni_modules下也有static目录),详情参考[工程目录结构](https://uniapp.dcloud.net.cn/tutorial/project.html#static)
没有在static目录的静态文件(比如image src指定静态路径或import),发行后会变编译到与static同级的assets目录,其中的文件名会加入随机数以避免重名。
因为随机数的存在,导致很难使用FileSystemManager访问。所以还是推荐使用static目录。
**通过FileSystemManager访问项目包文件**
通过路径访问项目包文件需从项目根目录开始写文件路径,如:/static/uni.png、/uni_modules/xxx/static/clear.png。
>注意:项目包文件仅可读取和复制,无法动态修改或删除。修改项目包文件需要重新发布新版本。
**真机运行注意**
App端真机运行期间会做特殊处理,将项目包文件同步到`应用沙盒目录`下的特定目录:
- Android平台
保存在应用专属存储空间的外置存储空间根目录下的apps目录,通常为“/sdcard/Android/data/%应用包名%/apps/%应用AppID%/www/”
- iOS平台
保存在应用沙盒目录下的Documents/uni-app-x目录,通常为“/%应用沙盒目录%/Documents/uni-app-x/apps/%应用AppID%/www/”
## 本地文件
本地文件是指应用安装到设备(通常指手机)后,系统会提供一块独立的文件存储区域。在App端将会以应用维度隔离,即在同一台设备,不同应用间的本地文件不能直接相互访问。
本地文件路径格式为:
```
{{协议名}}://文件路径
```
> App端,协议名为"unifile",不应该直接拼写协议名路径访问本地文件,推荐使用uni.env中的目录常量获取本地文件目录的路径。
本地文件沙盒目录,分内置和外置。外置可以在Android手机自带的系统文件管理器里看到,并且用户可以改动。内置的保护级别更高,无法在系统文件管理器中看到。
**通过uni.env的目录常量访问本地文件**
以下示例为在`用户文件目录`下写入hello.txt文件:
```ts
const fs = uni.getFileSystemManager();
fs.writeFile({
filePath: `${uni.env.USER_DATA_PATH}/hello.txt`,
data: 'hello uni-app x!',
encoding: 'utf-8'
} as WriteFileOptions);
```
### 外置应用沙盒目录
目录常量名称:`uni.env.SANDBOX_PATH`
App端专有目录,为应用沙盒根目录,其下包含了`缓存文件目录``用户文件目录`。此目录在不同平台差异较大,不建议直接使用此目录,需开发者根据平台特性谨慎操作。
实际保存的目录在不同平台存在差异:
- Android平台
应用专属存储空间的外置存储空间根目录,通常为“/sdcard/Android/data/%应用包名%/”,其下的cache目录为`缓存文件目录`,其下的files目录为`用户文件目录`
- iOS平台
应用沙盒虚拟目录,其下包括Document、Library、tmp目录,此目录只可读,不可创建其它目录
本目录可以在Android系统的文件管理器中看到。用户在文件管理器中可以查阅删改。手机被root后的沙盒机制也会失效,可以被其他app操作。
#### 缓存文件目录
目录常量名称:`uni.env.CACHE_PATH`
App端本地缓存文件目录保存应用运行过程中产生的缓存文件,操作系统会在存储空间不足时清除缓存文件,因此不要在此目录中保存应用的关键业务数据文件。
实际保存的目录在不同平台存在差异:
- Android平台
应用专属存储空间的外置存储空间根目录下的cache目录,通常为“/sdcard/Android/data/%应用包名%/cache/”
- iOS平台
应用沙盒目录下的Library/Caches目录
uni-app x的部分内置API会产生临时文件会放置在本cache目录,如:
- uni.downloadFile下载的文件
- uni.uploadFile上传的文件
- uni.chooseImage的拍照或选择的相册文件
<!-- - 录音的文件 -->
- dom element的截图API
#### 用户文件目录
目录常量名称:`uni.env.USER_DATA_PATH `
App端用户文件目录提供给开发者在应用运行期保存业务逻辑文件,此目录不会被操作系统自动清除,由开发者完全自由管理。
实际保存的目录在不同平台存在差异:
- Android平台
应用专属存储空间的外置存储空间根目录下的files目录,通常为“/sdcard/Android/data/%应用包名%/files/”
- iOS平台
应用沙盒目录下的Document目录
### 内置应用沙盒目录
目录常量名称:`uni.env.ANDROID_INTERNAL_SANDBOX_PATH`
uni-app x框架的一些内置组件和API会涉及缓存文件,存放到本目录,如:
- image/video组件的网络图片缓存
<!-- - 网络字体缓存? -->
\ No newline at end of file
## uni.getFileSystemManager() @getfilesystemmanager
<!-- UTSAPIJSON.getFileSystemManager.description -->
文件管理器对象,用于操作应用可访问的本地文件空间,在app-Android上是沙盒目录。
可实现目录和文件的创建、删除、改名或改路径、遍历目录、获取文件信息、读写文件。
<!-- UTSAPIJSON.getFileSystemManager.param -->
<!-- UTSAPIJSON.getFileSystemManager.returnValue -->
<!-- UTSAPIJSON.getFileSystemManager.compatibility -->
<!-- UTSAPIJSON.getFileSystemManager.tutorial -->
<!-- UTSAPIJSON.getFileSystemManager.example -->
<!-- UTSAPIJSON.general_type.name -->
<!-- UTSAPIJSON.general_type.param -->
\ No newline at end of file
...@@ -22,7 +22,7 @@ system的定位仅支持wgs84坐标系、不支持逆地址解析、且某些老 ...@@ -22,7 +22,7 @@ system的定位仅支持wgs84坐标系、不支持逆地址解析、且某些老
可下载[腾讯定位插件](https://ext.dcloud.net.cn/plugin?id=14569),在插件中配置key打包后生效。 可下载[腾讯定位插件](https://ext.dcloud.net.cn/plugin?id=14569),在插件中配置key打包后生效。
上述腾讯定位插件属于[ext api插件](https://uniapp.dcloud.net.cn/api/extapi.html),引用到工程后,会覆盖uni.getLocation的实现,替换掉系统定位。 上述腾讯定位插件属于[ext api插件](../../api/extapi.md),引用到工程后,会覆盖uni.getLocation的实现,替换掉系统定位。
如需其他定位,请在插件市场搜索定位相关的uts插件。 如需其他定位,请在插件市场搜索定位相关的uts插件。
......
## uni.getUniverifyManager() @getuniverifymanager
<!-- UTSAPIJSON.getUniverifyManager.description -->
App一键登陆,封装了个推的一键登陆sdk,其内部再次封装了中国三大电信运营商提供的sdk。通过运营商提供的服务,可以在手机sim卡信号正常的情况下,通过云端接口获取到当前用户的手机号。
App一键登陆是替代短信验证码登录的更优选择:对开发者而言更便宜、对用户而言体验更好。
一键登陆涉及业务开通和付费,涉及客户端和服务器交互,有较多文档:
1. 业务介绍:介绍业务流程、开通和付费。[详见](https://uniapp.dcloud.net.cn/univerify.html)
2. 客户端API,即本文
3. 服务器API,[详见](https://uniapp.dcloud.net.cn/uniCloud/uni-login/dev.html)
<!-- UTSAPIJSON.getUniverifyManager.param -->
<!-- UTSAPIJSON.getUniverifyManager.returnValue -->
<!-- UTSAPIJSON.getUniverifyManager.compatibility -->
<!-- UTSAPIJSON.getUniverifyManager.tutorial -->
<!-- UTSAPIJSON.getUniverifyManager.example -->
## Tips
- 运营商对一键登陆给用户呈现的ui有强制要求。(需补充细节)
- 目前一键登陆的UI可自定义性有限。仅支持配置登录页全屏/半屏、登录页背景色、登录按钮文案以及登录页logo。
<!-- UTSAPIJSON.general_type.name -->
<!-- UTSAPIJSON.general_type.param -->
\ No newline at end of file
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
<!-- UTSAPIJSON.installApk.tutorial --> <!-- UTSAPIJSON.installApk.tutorial -->
<!-- UTSAPIJSON.install-apk.example -->
<!-- UTSAPIJSON.general_type.name --> <!-- UTSAPIJSON.general_type.name -->
<!-- UTSAPIJSON.general_type.param --> <!-- UTSAPIJSON.general_type.param -->
\ No newline at end of file
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
## 注意事项 ## 注意事项
* request 接口内部通过[特殊方式读取了泛型类型](/uts/generics.md#使用限制),不支持传入动态的泛型:比如将外层方法的普通泛型参数传入 request。 * request 接口内部通过[特殊方式读取了泛型类型](../../uts/generics.md#使用限制),不支持传入动态的泛型:比如将外层方法的普通泛型参数传入 request。
* 如果使用泛型先创建RequestOptions实例,再传入uni.request(),此时请务必确保request要显式指定泛型,例: * 如果使用泛型先创建RequestOptions实例,再传入uni.request(),此时请务必确保request要显式指定泛型,例:
```typescript ```typescript
const options: RequestOptions<Person> = ... const options: RequestOptions<Person> = ...
......
* [pages.json](pagesjson.md) * [pages.json](pagesjson.md)
* [main.uts](https://uniapp.dcloud.net.cn/collocation/main.html) * [main.uts](https://uniapp.dcloud.net.cn/collocation/main.html)
* [app.uvue](https://uniapp.dcloud.net.cn/collocation/App.html) * [app.uvue](app.md)
* [manifest.json](manifest.md) * manifest.json
* [概述](manifest.md)
* [模块配置](manifest-modules.md)
* [启动界面](manifest-splashscreen.md)
* [AndroidManifest.xml](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android.html) * [AndroidManifest.xml](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android.html)
* [uni.scss](https://uniapp.dcloud.net.cn/collocation/uni-scss.html) * [uni.scss](https://uniapp.dcloud.net.cn/collocation/uni-scss.html)
\ No newline at end of file
# App.uvue
`App.uvue`是uni-app-x的主组件。
所有页面都是在`App.uvue`下进行切换的,是应用入口文件。但`App.uvue`本身不是页面,这里不能编写视图元素,也就是没有`<template>`
这个文件的作用包括:监听应用生命周期、配置全局样式、配置全局的存储globalData
应用生命周期仅可在`App.uvue`中监听,在页面监听无效。
## 应用生命周期@applifecycle
`uni-app-x` 支持如下应用生命周期函数:
|函数名|说明|平台兼容|
|:-|:-|:-|
|onLaunch|当`uni-app-x` 初始化完成时触发(全局只触发一次),参数为应用启动参数,同 [uni.getLaunchOptionsSync](https://uniapp.dcloud.net.cn/api/getLaunchOptionsSync.html#getlaunchoptionssync) 的返回值||
|onShow|当 `uni-app-x` 启动,或从后台进入前台显示,参数为应用启动参数,同 [uni.getLaunchOptionsSync](https://uniapp.dcloud.net.cn/api/getLaunchOptionsSync.html#getlaunchoptionssync) 的返回值||
|onHide|当 `uni-app-x` 从前台进入后台||
|onLastPageBackPress|最后一个页面按下Android back键,常用于自定义退出|app-uvue-android 3.9+|
|onExit|监听应用退出|app-uvue-android 3.9+|
**示例代码**
```html
<script lang="uts">
// 只能在App.vue里监听应用的生命周期
export default {
onLaunch: function(options) {
console.log('App Launch')
console.log('应用启动路径:', options.path)
},
onShow: function(options) {
console.log('App Show')
console.log('应用启动路径:', options.path)
},
onHide: function() {
console.log('App Hide')
},
onLastPageBackPress: function () {
console.log('App LastPageBackPress')
}
}
</script>
```
**注意**
- **应用生命周期仅可在`App.uvue`中监听,在其它页面监听无效**
- 应用启动参数,可以在API `uni.getLaunchOptionsSync`获取,[详见](https://uniapp.dcloud.net.cn/api/getLaunchOptionsSync.html#getlaunchoptionssync)
<!-- - onPageNotFound 页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo) -->
## globalData
小程序有 globalData,这是一种简单的全局变量机制。这套机制在 uni-app-x 里也可以使用,并且全端通用。
当然 vue 框架的全局变量,另有其他方式定义。
**以下是 App.uvue 中定义globalData的相关配置:**
```ts
<script lang="uts">
export default {
globalData: {
str: 'global data str',
num: 123,
bool: true
}
}
</script>
```
页面或组件中通过 `getApp().globalData` 访问。
```ts
<script lang="uts">
export default {
methods: {
getGlobalData() {
const app = getApp()
this.globalDataStr = app.globalData.str
this.globalDataNum = app.globalData.num
this.globalDataBool = app.globalData.bool
}
}
}
</script>
```
**注意:** `uni-app x``globalData` 的数据结构与类型通过 `App.uvue` 中的 `globalData` 初始值定义,后续只能读取或修改,不能新增或删除。
globalData是简单的全局变量,其他状态管理方式,可参考文档[全局变量和状态管理](/uni-app-x/tutorial/store.md)
## 全局样式
`App.uvue`中,可以定义一些全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.uvue中。
# modules
## 模块的摇树@treeShaking
uni-app x的Android基础库体积是7M,打包后的apk体积是基础库的体积加上开发者的代码及代码引用的模块的体积。有些模块涉及so库,覆盖的cpu指令越多,包体积越大。
在uni-app js引擎版中,内置模块如video,是开发者在manifest.json中手动勾选配置的。
但在uni-app x中,不需要手动配置。
HBuilderX3.93版本起,编译器支持扫描代码,摇树treeShaking,自动引入或剔除不需要的内置模块。
如应用中没有使用video组件相关功能,将不再包含video内置模块,减少安装包体积。
**摇树注意事项:**
当你打包自定义基座时,如果你的工程代码没有使用video、定位、相册、摄像头等涉及三方sdk或敏感权限的api,打出的自定义基座包就不会包含这些组件和api的功能,那么在这些自定义基座上运行时,调用相关的组件和api就会报错。\
此时您需要在工程中写相关的代码,如引用video组件或调用定位api,保存代码后重新打包自定义基座,才会包含相关模块。
您在工程中下载的ext api、三方uts插件也同理,没有引用就不会打进去。
### App端支持摇树的内置模块列表@utsmodules
- uni-network
网络请求(文件上传/下载)模块,包括API:[uni.downloadFile](./api/download-file.md)[uni.request](./api/request.md)[uni.uploadFile](./api/upload-file.md)
依赖的模块:无
- uni-getLocation-system
系统定位模块,包括API:[uni.getLocation](./api/get-location.md)
依赖的模块:无
- uni-video
[video视频组件](./component/video.md)模块,包括内置组件:[video](./component/video.md);包括API:[uni.createVideoContext](./api/create-video-context.md)
- uni-media
多媒体相关API模块,包括API:[uni.chooseImage](./api/choose-image.md)[uni.previewImage](./api/preview-image.md)[uni.saveImageToPhotosAlbum](./api/save-image-to-photos-album.md)
依赖的模块:无
- uni-cloud-client
调用uniCloud[云函数/云对象](../uniCloud/cf-functions.md)模块,包括API:[uniCloud.importObject](../uniCloud/cloud-obj.md#%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%B0%83%E7%94%A8)[uniCloud.callFunction](../uniCloud/cf-callfunction.md#callfunction%E6%96%B9%E6%B3%95)
依赖的模块:uni-media、uni-network
- uni-push
[uni-push统一推送](../unipush-v2.md)模块(`HBuilderX3.97+`),包括API:[uni.createPushMessage](../api/plugins/push.md#createpushmessage)[uni.getPushClientId](../api/plugins/push.md#getpushclientid)[uni.offPushMessage](../api/plugins/push.md#offpushmessage)[uni.onPushMessage](../api/plugins/push.md#onpushmessage)
依赖的模块:无
- uni-facialRecognitionVerify
[uni实人认证](../uniCloud/frv/intro.md)模块,包括API:[uni.getFacialRecognitionMetaInfo](../api/plugins/facialRecognitionVerify.md#getfacialrecognitionmetainfo)[uni.startFacialRecognitionVerify](../api/plugins/facialRecognitionVerify.md#startfacialrecognitionverify)
依赖的模块:无
再次强调,以上模块不属于ext组件或api,是内置模块。但如果你的代码中没有使用这些组件和api,打正式包或自定义基座时会被摇掉。
App启动时,系统加载应用渲染首页需要一定的时间,为了避免用户等待,手机操作系统提供了特殊的启动界面设计,让用户先看到一个简单的界面,等应用加载完成后正式进入应用首页。
这个界面,即被称为启动界面,也成称为 splash 或 lauch screen。
>HBuilderX3.99+版本支持App启动界面配置
### Android平台启动界面配置
打开项目的manifest.json文件,在“App启动界面配置”中的“Android启动界面设置”项下配置各设备分辨率启动图:
![](http://dcloud-chjh-native.oss-cn-hangzhou.aliyuncs.com/uni-app-x/doc/splash/splash_screen_android_1.png)
> 提示:启动界面设置需提交云端打包后才能生效
#### Android平台splash关闭时机
splash关闭时机可控制,打开项目的manifest.json文件,选择源码视图,在app->splashScreen节点下设置autoClose值域,控制splash关闭时机,默认onShow
**autoClose取值范围:**
|值域|说明|
|--|--|
|onShow|首页页面生命周期触发onShow时关闭splash|
|onReady|首页页面生命周期触发onReady时关闭splash|
配置示例:
```
"app" : {
"splashScreen" : {
"autoClose" : "onReady"
}
}
```
#### Android平台splash注意事项
1. splash关闭时机中描述的`首页`,指的是第一个真正显示的页面,如项目中pages.json第一个页面A在onLoad生命周期被关闭重新跳转了一个新页面B并显示,则B页面就是`首页`,原因是显示的是页面B,A页面并未显示,
如果是在页面A的onShow或更晚的生命周期关闭在跳转或直接跳转,则页面A是`首页`,因为页面A已经显示符合第一个真正显示的页面。
2. 应用冷启动与热启动的splash展示时间是有区别的。应用冷启动指首次启动或被kill掉进程后的启动,冷启动时初始化环境,数据加载等会占用一些启动时间,所以splash展示时间长一些。热启动指应用已启动后未kill进程再次的启动,由于不会再初始化环境,加载数据等操作,所以相对启动时间较少,splash展示时间也会缩短。
#### Android平台使用.9.png启动图@9png
目前HBuilderX中仅定义几种标准分辨率的启动图配置,而实际上存在很多不同分辨率的手机,导致启动图在一些不常见的设备会进行拉伸或压缩引起变形,Android平台为了解决此问题就出现了可以适配各种尺寸的一种图片格式“.9.png”。这是一种特殊的图片格式,它可以指定特定的区域进行拉伸而不失真。
**使用.9.png的优点**
1. 避免在非标准分辨率手机上缩放变形
2. 可以只配置1张或多张图片适配更多分辨率,减少apk的体积(推荐至少配置1080P高分屏启动图片)
**.9.png图片和普通png图片的差异**
1. .9.png图片和一般图片的区别在于.9.png图片有四条黑边,而一般的图片没有,这四条黑边就是用来拉伸和指定显示位置的
2. 使用.9.png图片后,整个图片应该是包裹着你想要显示的内容的,而没有使用的话整个图片将会被拉伸
**制作.9.png图片**
1. 在Android sdk目录下的tools目录下,有一个叫做draw9patch.bat的文件,双击打开就可以使用(最新android SDK该文件已经不存在,若电脑不没有安装android studio,可下载附件工具编辑.9.png图片)
2. 使用android studio,因为android studio已经集成.9.png制作工具,只需选中需要生成的png文件,然后右键,点击create 9-patch file 选项
详细制作步骤可参考链接:[Android中.9图片的含义及制作教程](https://www.jianshu.com/p/3fd048644e3f?tdsourcetag=s_pctim_aiomsg)
可以使用在线.9.png生成工具:[http://inloop.github.io/shadow4android/](http://inloop.github.io/shadow4android/)
**.9.png配置使用**
打开项目的manifest.json文件,在“App启动界面配置”中的“Android启动界面设置”项下,在各分辨率启动图设置框选择需要使用的.9.png图片(图片尺寸请按照提示尺寸对应上传),保存后提交云端打包即可。
> 不同尺寸的启动图是为了适配不同分辨率的手机,所以提交打包时请务必上传不同尺寸的启动图,切忌上传多张同尺寸启动图
可以参考开发者在[插件市场](https://ext.dcloud.net.cn/search?q=.9)做好的.9样例工程
...@@ -134,53 +134,5 @@ HBuilderX3.97+版本标准基座已经包含了所有Android权限,在 uvue ...@@ -134,53 +134,5 @@ HBuilderX3.97+版本标准基座已经包含了所有Android权限,在 uvue
} }
``` ```
## 模块的摇树@treeShaking
uni-app x的Android基础库体积是7M,打包后的apk体积是基础库的体积加上开发者的代码及代码引用的模块的体积。有些模块涉及so库,覆盖的cpu指令越多,包体积越大。
在uni-app js引擎版中,内置模块如video,是开发者在manifest.json中手动勾选配置的。
但在uni-app x中,不需要手动配置。
HBuilderX3.93版本起,编译器支持扫描代码,摇树treeShaking,自动引入或剔除不需要的内置模块。
如应用中没有使用video组件相关功能,将不再包含video内置模块,减少安装包体积。
**摇树注意事项:**
当你打包自定义基座时,如果你的工程代码没有使用video、定位、相册、摄像头等涉及三方sdk或敏感权限的api,打出的自定义基座包就不会包含这些组件和api的功能,那么在这些自定义基座上运行时,调用相关的组件和api就会报错。\
此时您需要在工程中写相关的代码,如引用video组件或调用定位api,保存代码后重新打包自定义基座,才会包含相关模块。
您在工程中下载的ext api、三方uts插件也同理,没有引用就不会打进去。
### App端支持摇树的内置模块列表@utsmodules
- uni-network
网络请求(文件上传/下载)模块,包括API:[uni.downloadFile](./api/download-file.md)[uni.request](./api/request.md)[uni.uploadFile](./api/upload-file.md)
依赖的模块:无
- uni-getLocation-system
系统定位模块,包括API:[uni.getLocation](./api/get-location.md)
依赖的模块:无
- uni-video
[video视频组件](./component/video.md)模块,包括内置组件:[video](./component/video.md);包括API:[uni.createVideoContext](./api/create-video-context.md)
- uni-media
多媒体相关API模块,包括API:[uni.chooseImage](./api/choose-image.md)[uni.previewImage](./api/preview-image.md)[uni.saveImageToPhotosAlbum](./api/save-image-to-photos-album.md)
依赖的模块:无
- uni-cloud-client
调用uniCloud[云函数/云对象](../uniCloud/cf-functions.md)模块,包括API:[uniCloud.importObject](../uniCloud/cloud-obj.md#%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%B0%83%E7%94%A8)[uniCloud.callFunction](../uniCloud/cf-callfunction.md#callfunction%E6%96%B9%E6%B3%95)
依赖的模块:uni-media、uni-network
- uni-push
[uni-push统一推送](../unipush-v2.md)模块(`HBuilderX3.97+`),包括API:[uni.createPushMessage](../api/plugins/push.md#createpushmessage)[uni.getPushClientId](../api/plugins/push.md#getpushclientid)[uni.offPushMessage](../api/plugins/push.md#offpushmessage)[uni.onPushMessage](../api/plugins/push.md#onpushmessage)
依赖的模块:无
- uni-facialRecognitionVerify
[uni实人认证](../uniCloud/frv/intro.md)模块,包括API:[uni.getFacialRecognitionMetaInfo](../api/plugins/facialRecognitionVerify.md#getfacialrecognitionmetainfo)[uni.startFacialRecognitionVerify](../api/plugins/facialRecognitionVerify.md#startfacialrecognitionverify)
依赖的模块:无
再次强调,以上模块不属于ext组件或api,是内置模块。但如果你的代码中没有使用这些组件和api,打正式包或自定义基座时会被摇掉。
<!-- MANIFESTJSON.tutorial --> <!-- MANIFESTJSON.tutorial -->
\ No newline at end of file
# pages.json # pages.json
`pages.json` 文件是 uni-app x 的页面管理配置文件,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 `pages.json` 文件是 uni-app x 的页面管理配置文件,决定**应用的首页**页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
所有页面,均需在pages.json中注册,否则不会被打包到应用中。 **所有页面,均需在pages.json中注册,否则不会被打包到应用中。**
在HBuilderX中新建页面,默认会在pages.json中自动注册。在HBuilderX中删除页面文件,也会在状态栏提示从pages.json中移除注册。 在HBuilderX中新建页面,默认会在pages.json中自动注册。在HBuilderX中删除页面文件,也会在状态栏提示从pages.json中移除注册。
...@@ -17,6 +17,7 @@ uni-app x的app平台,页面不再由webview渲染,其实不需要原生提 ...@@ -17,6 +17,7 @@ uni-app x的app平台,页面不再由webview渲染,其实不需要原生提
hello uni-app x有相关示例,参考: hello uni-app x有相关示例,参考:
- 自定义导航栏:[插件地址](https://ext.dcloud.net.cn/plugin?id=14618) - 自定义导航栏:[插件地址](https://ext.dcloud.net.cn/plugin?id=14618)
- 自定义tabbar:[源码参考](https://gitcode.net/dcloud/hello-uni-app-x/-/tree/master/pages/template/custom-tab-bar) - 自定义tabbar:[源码参考](https://gitcode.net/dcloud/hello-uni-app-x/-/tree/master/pages/template/custom-tab-bar)
插件市场也有其他封装好的插件,请自行搜索。
> 本文只包括 uni-app x 对 pages.json 支持情况。完整配置项详见 [pages.json 页面路由](https://uniapp.dcloud.net.cn/collocation/pages.html) > 本文只包括 uni-app x 对 pages.json 支持情况。完整配置项详见 [pages.json 页面路由](https://uniapp.dcloud.net.cn/collocation/pages.html)
......
* [概述](README.md) * [概述](README.md)
* [条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html) * [条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html)
* [编译运行环境](https://uniapp.dcloud.net.cn/worktile/running-env.html) * [编译运行环境](https://uniapp.dcloud.net.cn/worktile/running-env.html)
\ No newline at end of file * [编译静态资源](https://uniapp.dcloud.net.cn/tutorial/page-static-assets)
\ No newline at end of file
...@@ -8,35 +8,35 @@ uni-app x支持的组件包括: ...@@ -8,35 +8,35 @@ uni-app x支持的组件包括:
不支持的组件包括: 不支持的组件包括:
- 小程序wxml组件 - 小程序wxml组件
支持[easycom](https://uniapp.dcloud.net.cn/component/README.html#easycom) 支持[easycom](/component/README.md#easycom)
内置组件比较简单,扩展组件的2种方式详细介绍下 内置组件比较简单,扩展组件的2种方式详细介绍下
- 自定义vue组件 - 自定义vue组件
在components目录新建一个uvue/vue文件,按vue组件规范编写代码。 在components目录新建一个uvue/vue文件,按vue组件规范编写代码。
组件界面通过uvue构造,script使用uts编写。 组件界面通过uvue构造,script使用uts编写。
返回的类型是组件实例[ComponentPublicInstance](../vue/api.md#ComponentPublicInstance) 返回的类型是组件实例[ComponentPublicInstance](../vue/api.md#ComponentPublicInstance)
- uts组件插件 - uts组件插件
`uts组件插件`的名称可能有点拗口,这是因为是相对于另一个分类`uts api插件` `uts组件插件`的名称可能有点拗口,这是因为是相对于另一个分类`uts api插件`
它们同属于`uts插件`,是[uni_modules](https://uniapp.dcloud.net.cn/uni_modules.html)。api插件指能力扩展,比如蓝牙api。而组件插件指界面元素扩展,比如video、map、lottie动画等。 它们同属于`uts插件`,是[uni_modules](../../plugin/uni_modules.md)。api插件指能力扩展,比如蓝牙api。而组件插件指界面元素扩展,比如video、map、lottie动画等。
uts组件插件,指把原生的、需要在界面上显示的、内嵌于页面中整体排版的组件,编写uts代码调用原生sdk,通过uni_modules插件的方式集成到uni-app项目中。比如 uts组件插件,指把原生的、需要在界面上显示的、内嵌于页面中整体排版的组件,编写uts代码调用原生sdk,通过uni_modules插件的方式集成到uni-app项目中。比如
* lottie组件,使用uts调用原生的lottie sdk来开发组件,再引入页面中。[详见](https://ext.dcloud.net.cn/plugin?name=uni-animation-view) * lottie组件,使用uts调用原生的lottie sdk来开发组件,再引入页面中。[详见](https://ext.dcloud.net.cn/plugin?name=uni-animation-view)
* video组件,其实官方的video,也是用uts组件插件实现的。[详见](https://gitcode.net/dcloud/uni-component/-/tree/master/uni_modules/uni-video) * video组件,其实官方的video,也是用uts组件插件实现的。[详见](https://gitcode.net/dcloud/uni-component/-/tree/master/uni_modules/uni-video)
uts组件插件,主要用于原生sdk涉及界面时,将其封装为界面组件。当然uts组件也是全端支持的。上述lottie组件也支持web端。 uts组件插件,主要用于原生sdk涉及界面时,将其封装为界面组件。当然uts组件也是全端支持的。上述lottie组件也支持web端。
在app端,它的内部界面是由原生sdk绘制的,而不是uvue代码绘制的。通过封装嵌入到uvue/nvue页面中。 在app端,它的内部界面是由原生sdk绘制的,而不是uvue代码绘制的。通过封装嵌入到uvue/nvue页面中。
一个uts插件都是可以同时兼容uni-app x和uni-app js引擎版的。目前js引擎版仅支持内嵌于nvue页面中。所以上述lottie组件也是可以在app-nvue页面中使用的。 一个uts插件都是可以同时兼容uni-app x和uni-app js引擎版的。目前js引擎版仅支持内嵌于nvue页面中。所以上述lottie组件也是可以在app-nvue页面中使用的。
uts组件的返回类型是dom元素[Element](../dom/element.md) uts组件的返回类型是dom元素[Element](../dom/element.md)
uts组件插件的开发教程,[详见](https://uniapp.dcloud.net.cn/plugin/uts-component.html) uts组件插件的开发教程,[详见](/plugin/uts-component.md)
**vue组件兼容性及注意事项:** **vue组件兼容性及注意事项:**
...@@ -332,8 +332,8 @@ component1组件符合[easycom规范](https://uniapp.dcloud.net.cn/component/#ea ...@@ -332,8 +332,8 @@ component1组件符合[easycom规范](https://uniapp.dcloud.net.cn/component/#ea
}, },
onReady() { onReady() {
let c1 = (this.$refs["component1"] as Component1ComponentPublicInstance) //注意组件必须存在,注意类型首字母大写 let c1 = (this.$refs["component1"] as Component1ComponentPublicInstance) //注意组件必须存在,注意类型首字母大写
c1.foo1(); c1.foo1();
c1.foo2(1); c1.foo2(1);
} }
} }
</script> </script>
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
- [x] webm - [x] webm
- [x] 3gp - [x] 3gp
- [x] flv - [x] flv
- [x] m3u8 - [x] m3u8 (本地m3u8文件需3.99+)
<!-- UTSCOMJSON.video.example --> <!-- UTSCOMJSON.video.example -->
......
...@@ -25,8 +25,10 @@ linear-gradient(<direction>, <color-start>, <color-stop>) ...@@ -25,8 +25,10 @@ linear-gradient(<direction>, <color-start>, <color-stop>)
+ to left:从右向左渐变 + to left:从右向左渐变
+ to bottom:从上到下渐变 + to bottom:从上到下渐变
+ to top:从下到上渐变 + to top:从下到上渐变
+ to bottom right:从左上角到右下角 + to bottom left:从右上角到左下角(3.99开始支持)
+ to top left:从右下角到左上角 + to bottom right:从左上角到右下角
+ to top left:从右下角到左上角
+ to top right: 从左下角到右上角(3.99开始支持)
- color-start - color-start
渐变起始点颜色值,支持RGB(rgb(255, 0, 0));RGBA(rgba(255, 0, 0, 0.5));十六进制(#ff0000);精简写法的十六进制(#f00);色值关键字(red) 渐变起始点颜色值,支持RGB(rgb(255, 0, 0));RGBA(rgba(255, 0, 0, 0.5));十六进制(#ff0000);精简写法的十六进制(#f00);色值关键字(red)
- color-stop - color-stop
......
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<!-- CSSJSON.overflow.reference --> <!-- CSSJSON.overflow.reference -->
### Bug ### Bug & Tips
- uni-app x 父元素设置 overflow = visible,子元素超出父元素的区域,无法正常响应touch、click事件 - Android平台 当元素设置 overflow = visible 后会扩大元素的渲染区域,元素渲染及内存占用存在性能消耗,应尽量避免设置 overflow = visible
\ No newline at end of file - Android平台 uni-app x 父元素设置 overflow = visible,子元素超出父元素的区域,无法正常响应touch、click事件
\ No newline at end of file
...@@ -97,7 +97,7 @@ uvue的策略是:在新建页面时,提供一个选项,让开发者选择 ...@@ -97,7 +97,7 @@ uvue的策略是:在新建页面时,提供一个选项,让开发者选择
</template> </template>
``` ```
考虑到未来web平台和基于webview的小程序的兼容,自动套在页面顶层的scroll-view写在了[条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.md)里。 考虑到未来web平台和基于webview的小程序的兼容,自动套在页面顶层的scroll-view写在了[条件编译](../../tutorial/platform.md)里。
这样在web浏览器里就无需多套一层scroll-view,自然的使用浏览器的页面滚动就好了。 这样在web浏览器里就无需多套一层scroll-view,自然的使用浏览器的页面滚动就好了。
......
...@@ -214,6 +214,7 @@ uvue组件、uts sdk、uni-app x前端页面/项目模板。这些前端代码 ...@@ -214,6 +214,7 @@ uvue组件、uts sdk、uni-app x前端页面/项目模板。这些前端代码
目前插件市场适配uni-app x的插件已有数百款,包括ui组件库: 目前插件市场适配uni-app x的插件已有数百款,包括ui组件库:
- [t-uvue-ui](https://ext.dcloud.net.cn/plugin?id=15571):丰富的组件库 - [t-uvue-ui](https://ext.dcloud.net.cn/plugin?id=15571):丰富的组件库
- [uxui](https://ext.dcloud.net.cn/plugin?id=15726):graceui作者的免费开源组件库 - [uxui](https://ext.dcloud.net.cn/plugin?id=15726):graceui作者的免费开源组件库
- [ux-front-ui](https://ext.dcloud.net.cn/plugin?id=15774):持续更新的组件库
- [easyX电商组件库](https://ext.dcloud.net.cn/plugin?id=15602):电商业务常见的各种组件库 - [easyX电商组件库](https://ext.dcloud.net.cn/plugin?id=15602):电商业务常见的各种组件库
## 一期范围及路线图 ## 一期范围及路线图
...@@ -274,7 +275,7 @@ uni-app x 毕竟是原生应用,内嵌flutter、rn这些没有任何问题, ...@@ -274,7 +275,7 @@ uni-app x 毕竟是原生应用,内嵌flutter、rn这些没有任何问题,
初期不能,后期会提供 初期不能,后期会提供
- uni-app x 能热更新吗? - uni-app x 能热更新吗?
开发期间可以热刷,但打包后不能热更新。开发者可自行封装原生的插件动态加载方案。 开发期间可以热刷,但打包后不能热更新。开发者可自行封装原生的插件动态加载方案或使用uni小程序sdk
- uni-app x 会搞插件大赛吗? - uni-app x 会搞插件大赛吗?
已经启动。欢迎大家做基于uts和uvue的插件。[详情](https://ask.dcloud.net.cn/article/40812) 已经启动。欢迎大家做基于uts和uvue的插件。[详情](https://ask.dcloud.net.cn/article/40812)
...@@ -308,4 +309,7 @@ uni-app x 毕竟是原生应用,内嵌flutter、rn这些没有任何问题, ...@@ -308,4 +309,7 @@ uni-app x 毕竟是原生应用,内嵌flutter、rn这些没有任何问题,
包括官方的组件和API也会复用,比如电量API [uni.getbatteryinfo](https://ext.dcloud.net.cn/plugin?id=9295),和[lottie组件](https://ext.dcloud.net.cn/plugin?id=10674),它们使用uts开发,在 uni-app js引擎版和x版上,调用的都是一套代码。 包括官方的组件和API也会复用,比如电量API [uni.getbatteryinfo](https://ext.dcloud.net.cn/plugin?id=9295),和[lottie组件](https://ext.dcloud.net.cn/plugin?id=10674),它们使用uts开发,在 uni-app js引擎版和x版上,调用的都是一套代码。
所以不必担心官方精力不足,顾此失彼。 所以不必担心官方精力不足,顾此失彼。
欢迎加入 uni-app x 专用QQ群 485089465 进行交流。 欢迎加入 uni-app x 专用群交流
- QQ群485089465(已满)
- 钉钉群二维码
![](static/uaxding.png)
App启动时,系统加载应用渲染首页需要一定的时间,为了避免用户等待,手机操作系统提供了特殊的启动界面设计,让用户先看到一个简单的界面,等应用加载完成后正式进入应用首页。
这个界面,即被称为启动界面,也成称为 splash 或 lauch screen。
### Android启动图设置
打开项目的manifest.json文件,在“App启动界面配置”中的“Android启动界面设置”项下配置各设备分辨率启动图:
![](http://dcloud-chjh-native.oss-cn-hangzhou.aliyuncs.com/uni-app-x/doc/splash/splash_screen_android_1.png)
> 提示:启动界面设置需提交云端打包后才能生效
#### Android平台splash关闭时机
splash关闭时机可控制,打开项目的manifest.json文件,选择源码视图,在app->splashScreen节点下设置autoClose值域,控制splash关闭时机,默认onShow
**autoClose取值范围:**
|值域|说明|
|--|--|
|onShow|首页页面生命周期触发onShow时关闭splash|
|onReady|首页页面生命周期触发onReady时关闭splash|
配置示例:
```
"app" : {
"splashScreen" : {
"autoClose" : "onReady"
}
}
```
#### Android平台splash注意事项
1. splash关闭时机中描述的`首页`,指的是第一个真正显示的页面,如项目中pages.json第一个页面A在onLoad生命周期被关闭重新跳转了一个新页面B并显示,则B页面就是`首页`,原因是显示的是页面B,A页面并未显示,
如果是在页面A的onShow或更晚的生命周期关闭在跳转或直接跳转,则页面A是`首页`,因为页面A已经显示符合第一个真正显示的页面。
2. 应用冷启动与热启动的splash展示时间是有区别的。应用冷启动指首次启动或被kill掉进程后的启动,冷启动时初始化环境,数据加载等会占用一些启动时间,所以splash展示时间长一些。热启动指应用已启动后未kill进程再次的启动,由于不会再初始化环境,加载数据等操作,所以相对启动时间较少,splash展示时间也会缩短。
#### Android平台使用.9.png启动图@9png
目前HBuilderX中仅定义几种标准分辨率的启动图配置,而实际上存在很多不同分辨率的手机,导致启动图在一些不常见的设备会进行拉伸或压缩引起变形,Android平台为了解决此问题就出现了可以适配各种尺寸的一种图片格式“.9.png”。这是一种特殊的图片格式,它可以指定特定的区域进行拉伸而不失真。
**使用.9.png的优点**
1. 避免在非标准分辨率手机上缩放变形
2. 可以只配置1张或多张图片适配更多分辨率,减少apk的体积(推荐至少配置1080P高分屏启动图片)
**.9.png图片和普通png图片的差异**
1. .9.png图片和一般图片的区别在于.9.png图片有四条黑边,而一般的图片没有,这四条黑边就是用来拉伸和指定显示位置的
2. 使用.9.png图片后,整个图片应该是包裹着你想要显示的内容的,而没有使用的话整个图片将会被拉伸
**制作.9.png图片**
1. 在Android sdk目录下的tools目录下,有一个叫做draw9patch.bat的文件,双击打开就可以使用(最新android SDK该文件已经不存在,若电脑不没有安装android studio,可下载附件工具编辑.9.png图片)
2. 使用android studio,因为android studio已经集成.9.png制作工具,只需选中需要生成的png文件,然后右键,点击create 9-patch file 选项
详细制作步骤可参考链接:[Android中.9图片的含义及制作教程](https://www.jianshu.com/p/3fd048644e3f?tdsourcetag=s_pctim_aiomsg)
可以使用在线.9.png生成工具:[http://inloop.github.io/shadow4android/](http://inloop.github.io/shadow4android/)
**.9.png配置使用**
打开项目的manifest.json文件,在“App启动界面配置”中的“Android启动界面设置”项下,在各分辨率启动图设置框选择需要使用的.9.png图片(图片尺寸请按照提示尺寸对应上传),保存后提交云端打包即可。
> 不同尺寸的启动图是为了适配不同分辨率的手机,所以提交打包时请务必上传不同尺寸的启动图,切忌上传多张同尺寸启动图
可以参考开发者在[插件市场](https://ext.dcloud.net.cn/search?q=.9)做好的.9样例工程
...@@ -192,8 +192,8 @@ p.age //12 ...@@ -192,8 +192,8 @@ p.age //12
但是在强类型语言中,如果想要使用`p.age`,那么p必须是一个对象,而age则是这个对象的属性。然后必须为p对象、name属性、age属性,都定义类型,比如name是string,age是number。 但是在强类型语言中,如果想要使用`p.age`,那么p必须是一个对象,而age则是这个对象的属性。然后必须为p对象、name属性、age属性,都定义类型,比如name是string,age是number。
uts中有2种方式使用json数据: uts中有2种方式使用json数据:
1. 把json数据转为type,自定义一个类型,声明json数据内容中每个属性的类型。然后就可以使用对象属性的方式来使用json数据。[详见](/uts/data-type.md#type) 1. 把json数据转为type,自定义一个类型,声明json数据内容中每个属性的类型。然后就可以使用对象属性的方式来使用json数据。[详见](../../uts/data-type.md#type)
2. 使用UTSJSONObject,不为json定义类型,然后通过下标和方法来使用json数据。[详见](/uts/data-type.md#ustjsonobject) 2. 使用UTSJSONObject,不为json定义类型,然后通过下标和方法来使用json数据。[详见](../../uts/data-type.md#ustjsonobject)
如果是联网获取服务器发下的json数据,那么**务必需要读教程**[request](request.md) 如果是联网获取服务器发下的json数据,那么**务必需要读教程**[request](request.md)
...@@ -267,8 +267,8 @@ request({url: 'https://www.example.com/request'} as RequestOptions) ...@@ -267,8 +267,8 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
- 不支持undefined。任何变量被定义后,都需要赋值 - 不支持undefined。任何变量被定义后,都需要赋值
- App-iOS平台暂不支持async、await - App-iOS平台暂不支持async、await
- 函数声明方式不支持[作为值传递](/uts/function.md#作为值传递) - 函数声明方式不支持[作为值传递](../../uts/function.md#作为值传递)
- 函数表达式方式不支持[默认参数](/uts/function.md#默认参数) - 函数表达式方式不支持[默认参数](../../uts/function.md#默认参数)
## 调用组件方法@methods ## 调用组件方法@methods
......
...@@ -293,7 +293,7 @@ hx的json转type工具,会对一些敏感符合和关键字自动转义。但 ...@@ -293,7 +293,7 @@ hx的json转type工具,会对一些敏感符合和关键字自动转义。但
} }
//...是展开运算符,本句用于把联网获取的数组合并到data数组里。当第一次执行时,dataList为空,push进去了第一页的数据,后续页面也同理 //...是展开运算符,本句用于把联网获取的数组合并到data数组里。当第一次执行时,dataList为空,push进去了第一页的数据,后续页面也同理
this.dataList.push(...responseData.data) this.dataList.push(...responseData.data)
if (responseData.data.length == 0) { if (responseData.data.length == 0) {
this.isEnded = true this.isEnded = true
...@@ -317,4 +317,4 @@ hx的json转type工具,会对一些敏感符合和关键字自动转义。但 ...@@ -317,4 +317,4 @@ hx的json转type工具,会对一些敏感符合和关键字自动转义。但
## 注意事项 ## 注意事项
* request 接口内部通过[特殊方式读取了范型类型](/uts/generics.md#使用限制),不支持传入动态的范型:比如将外层方法的普通范型参数传入 request。所以目前尽量直接使用uni.request而不是封装。如确需封装,可不使用type,改用UTSJSONObject。 * request 接口内部通过[特殊方式读取了范型类型](../../uts/generics.md#使用限制),不支持传入动态的范型:比如将外层方法的普通范型参数传入 request。所以目前尽量直接使用uni.request而不是封装。如确需封装,可不使用type,改用UTSJSONObject。
\ No newline at end of file \ No newline at end of file
# 全局变量与状态管理 # 全局变量与状态管理
`uni-app x` 目前不支持 `pinia``vuex`。可通过 `globalData(3.99+)` 或一个专用模块组织和管理全局变量与状态。 `uni-app x` 目前不支持 `pinia``vuex`。可通过 [globalData(3.99+)](/uni-app-x/collocation/app.md#globalData) 或一个专用模块组织和管理全局变量与状态。
## globalData
`App.uvue` 中定义 `globalData`
```ts
<script lang="uts">
export default {
globalData: {
str: 'global data str',
num: 123,
bool: true
}
}
</script>
```
页面或组件中通过 `getApp().globalData` 访问。
```ts
<script lang="uts">
export default {
methods: {
getGlobalData() {
const app = getApp()
this.globalDataStr = app.globalData.str
this.globalDataNum = app.globalData.num
this.globalDataBool = app.globalData.bool
}
}
}
</script>
```
**注意:** `uni-app x``globalData` 的数据结构与类型通过 `App.uvue` 中的 `globalData` 初始值定义,后续只能读取或修改,不能新增或删除。
## 专用模块 ## 专用模块
定义一个模块,编写一个单独的uts文件,比如 /store/index.uts,在里面设一个全局变量,比如globalNum。 定义一个模块,编写一个单独的uts文件,比如 /store/index.uts,在里面设一个全局变量,比如globalNum。
......
...@@ -27,6 +27,26 @@ console.log(financial(0.004)); ...@@ -27,6 +27,26 @@ console.log(financial(0.004));
<!-- UTSJSON.Number.toFixed.compatibility --> <!-- UTSJSON.Number.toFixed.compatibility -->
### toString()
<!-- UTSJSON.Number.toString.description -->
<!-- UTSJSON.Number.toString.param -->
<!-- UTSJSON.Number.toString.returnValue -->
<!-- UTSJSON.Number.toString.compatibility -->
### valueOf()
<!-- UTSJSON.Number.valueOf.description -->
<!-- UTSJSON.Number.valueOf.param -->
<!-- UTSJSON.Number.valueOf.returnValue -->
<!-- UTSJSON.Number.valueOf.compatibility -->
### toInt() ### toInt()
<!-- UTSJSON.Number.toInt.description --> <!-- UTSJSON.Number.toInt.description -->
......
...@@ -294,6 +294,32 @@ console.log(p.replace(regex, 'ferret')); ...@@ -294,6 +294,32 @@ console.log(p.replace(regex, 'ferret'));
<!-- UTSJSON.String.replace_1.compatibility --> <!-- UTSJSON.String.replace_1.compatibility -->
```ts
// 不包含捕捉组的示例
let a = "The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?"
let b = a.replace(RegExp("fox"),function(match: string, offset: number, string: string):string{
console.log("match",match)
console.log("offset",offset)
console.log("string",string)
return "cat"
})
console.log("b:",b)
// 包含一个捕获组的示例。注意,目前android仅支持最多五个捕获组
let a1 = "The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?"
let b1 = a1.replace(RegExp("(fox)"),function(match: string,p1: string, offset: number, string: string):string{
console.log("match",match)
console.log("p1",p1)
console.log("offset",offset)
console.log("string",string)
return "cat"
})
console.log("b1",b1)
```
### search(regexp) ### search(regexp)
<!-- UTSJSON.String.search.description --> <!-- UTSJSON.String.search.description -->
......
...@@ -92,9 +92,9 @@ function add(x: string, y: string): void { ...@@ -92,9 +92,9 @@ function add(x: string, y: string): void {
使用 async 关键字来声明一个异步函数,异步函数返回一个 [Promise](./buildin-object-api/promise.md) 对象。 使用 async 关键字来声明一个异步函数,异步函数返回一个 [Promise](./buildin-object-api/promise.md) 对象。
注意:在 HBuilderX 3.93 以下的版本或者 iOS 平台,异步函数返回的不是 [Promise](./buildin-object-api/promise.md) 对象,请分别参考:[安卓 异步函数](../plugin/uts-for-android.md#_6-11-synchronized-lock-等线程同步概念-在uts里怎么写)[iOS 异步函数](../plugin/uts-for-ios.md#_5-1-13-异步方法) 注意:在 HBuilderX 3.93 以下的版本或者 iOS 平台,异步函数返回的不是 [Promise](./buildin-object-api/promise.md) 对象,请分别参考:[安卓 异步函数](../../plugin/uts-for-android.md#_6-11-synchronized-lock-等线程同步概念-在uts里怎么写)[iOS 异步函数](../../plugin/uts-for-ios.md#_5-1-13-异步方法)
注意:异步函数在底层使用协程实现,异步函数内与异步函数外同时操作同一个对象时,由于其能并发执行,**其操作顺序可能与预期不一致**,会产生竞态条件与线程安全性问题。 注意:异步函数在底层使用协程实现,异步函数内与异步函数外同时操作同一个对象时,由于其能并发执行,**其操作顺序可能与预期不一致**,会产生竞态条件与线程安全性问题。HBuilderX 3.98 版本的 uni-app x 中已进行优化,默认与框架运行在同一线程。
```ts ```ts
async function foo(): Promise<void> { async function foo(): Promise<void> {
...@@ -346,4 +346,4 @@ fn('a', 'b', 'c') // 'a' ['b', 'c'] ...@@ -346,4 +346,4 @@ fn('a', 'b', 'c') // 'a' ['b', 'c']
fn('a', ...['b', 'c']) // 'a' ['b', 'c'] fn('a', ...['b', 'c']) // 'a' ['b', 'c']
``` ```
注意:当用在 uni-app x 中时,在 uvue 页面的 methods 中定义的方法不支持剩余参数。 注意:当用在 uni-app x 中时,在 uvue 页面的 methods 中定义的方法不支持剩余参数。
\ No newline at end of file
...@@ -382,5 +382,15 @@ ...@@ -382,5 +382,15 @@
<!-- UTSJSON.UTSAndroid.convert2AbsFullPath.compatibility --> <!-- UTSJSON.UTSAndroid.convert2AbsFullPath.compatibility -->
### getFileProviderUri
<!-- UTSJSON.UTSAndroid.getFileProviderUri.description -->
<!-- UTSJSON.UTSAndroid.getFileProviderUri.param -->
<!-- UTSJSON.UTSAndroid.getFileProviderUri.returnValue -->
<!-- UTSJSON.UTSAndroid.getFileProviderUri.compatibility -->
<!-- UTSJSON.UTSAndroid.tutorial --> <!-- UTSJSON.UTSAndroid.tutorial -->
...@@ -11,6 +11,51 @@ uni-app x中vue的用法,有单独的示例应用:[hello uvue](https://gitco ...@@ -11,6 +11,51 @@ uni-app x中vue的用法,有单独的示例应用:[hello uvue](https://gitco
### 应用实例 @app-instance ### 应用实例 @app-instance
<!-- VUEJSON.application.compatibility --> <!-- VUEJSON.application.compatibility -->
**注意:**
- **app.use:** `app.use` 支持通过对象字面量、函数及 `definePlugin` 方式定义插件。\
支持传递插件参数,当传递插件参数时,`app` 的类型需要指定为 `VueApp`
```ts
// main.uts
export function createApp() {
const app = createSSRApp(App)
// 通过对象字面量方式注册插件
app.use({
install(app) {
app.config.globalProperties.plugin1 = "plugin1"
}
})
// 通过函数方式注册插件
app.use(function (app) {
app.config.globalProperties.plugin2 = "plugin2"
})
// 通过 definePlugin + 对象字面量方式注册插件
const plugin3= definePlugin({
install(app) {
app.config.globalProperties.plugin3 = "plugin3"
}
})
app.use(plugin3)
// 通过 definePlugin + 函数方式注册插件
const plugin4= definePlugin(function (app) {
app.config.globalProperties.plugin4 = "plugin4"
})
app.use(plugin4)
// 注册插件时传递参数
// 注意:当传递插件参数时,app 的类型需要指定为 VueApp
app.use(function (app: VueApp, arg1:string, arg2:string) {
app.config.globalProperties.plugin5 = `${arg1}-${arg2}`
}, "arg1", "arg2");
}
```
- **app.config.globalProperties:** 请注意,`globalProperties` 是一个保留关键字,因此在项目中请勿声明名为 `globalProperties` 的变量。\
在向 `globalProperties` 注册方法时,请使用直接函数表达式方式进行赋值。不支持先声明函数,再将其注册到 `globalProperties` 上的方式。同时,注册的函数一旦被赋值,不允许进行修改。
### 通用 ### 通用
<!-- VUEJSON.general.compatibility --> <!-- VUEJSON.general.compatibility -->
...@@ -32,6 +77,11 @@ uni-app x中vue的用法,有单独的示例应用:[hello uvue](https://gitco ...@@ -32,6 +77,11 @@ uni-app x中vue的用法,有单独的示例应用:[hello uvue](https://gitco
<!-- VUEJSON.directives.compatibility --> <!-- VUEJSON.directives.compatibility -->
**注意:**
- **v-html:**`App-android` 平台,`v-html` 指令通过编译为 [rich-text](uni-app-x/component/rich-text.md) 组件实现。因此,`v-html` 指令的内容必须是 `rich-text` 支持的格式, 并且要遵循标签嵌套规则,例如, `swiper` 标签内只允许嵌套 `swiper-item` 标签。\
同时,受限于 `rich-text` 组件不支持 `class` 样式,`v-html` 指令中同样不支持 `class` 样式。\
绑定 `v-html` 的标签内的内容会被忽略,`v-html` 指令的内容会编译为 `rich-text` 组件渲染为该标签的子节点。
### 事件处理 ### 事件处理
- [事件修饰符](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6) 只支持 `stop``once` - [事件修饰符](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6) 只支持 `stop``once`
...@@ -94,10 +144,66 @@ uni-app x 新增了 [onLastPageBackPress](collocation/App.md#applifecycle) 和 [ ...@@ -94,10 +144,66 @@ uni-app x 新增了 [onLastPageBackPress](collocation/App.md#applifecycle) 和 [
<!-- VUEJSON.options_rendering.compatibility --> <!-- VUEJSON.options_rendering.compatibility -->
### 组合选项 ### 组合选项 @composition-options
<!-- VUEJSON.options_composition.compatibility --> <!-- VUEJSON.options_composition.compatibility -->
**注意:**
- **inject:** 当使用 `inject` 声明从上层提供方注入的属性时,支持两种写法:字符串数组和对象。推荐使用对象写法,因为当使用数组方法时,类型会被推导为 `any | null` 类型。\
使用对象写法时,额外增加 `type` 属性用于标记类型。如果注入的属性类型不是基础数据类型,需要通过 `PropType` 来标记类型。
```ts
export default {
inject: {
provideString: {
type: String,
default: 'default provide string value'
},
provideObject: {
type: Object as PropType<UTSJSONObject>
},
provideMap: {
type: Object as PropType<Map<string, string>>,
default: (): Map<string, string> => {
return new Map<string, string>([['key', 'default provide map value']])
}
}
}
}
```
- **mixins:** `mixins` 仅支持通过字面量对象方式和 `defineMixin` 函数方式定义。
```ts
const mixin1 = defineMixin({
onLoad() {
console.log('mixin1 onLoad')
}
})
export default {
mixins: [
mixin1,
{
data() {
return {
mixin2: 'mixin2'
}
}
}
]
}
```
同名属性会被覆盖,同名生命周期会依次执行。
同名属性的优先级如下:
-`app.mixin` 内嵌入的 mixin < 在 `app.mixin` 中声明的 mixin < 在 `page.mixin` 内嵌入的 mixin < 在 `page.mixin` 中声明的 mixin < 在 `component.mixin` 内嵌入的 mixin < 在 `component.mixin` 中声明的 mixin
同名生命周期的执行顺序如下:
1.`app.mixin` 内嵌入的 mixin
2.`app.mixin` 中声明的 mixin
3.`page.mixin` 内嵌入的 mixin
4.`page.mixin` 中声明的 mixin
5.`component.mixin` 内嵌入的 mixin
6.`component.mixin` 中声明的 mixin
### 其他杂项 ### 其他杂项
......
* [概述](README.md) * [概述](/uni-app-x/worktile/)
* [Git/SVN](https://uniapp.dcloud.net.cn/worktile/git-svn.html) * [Git/SVN](https://uniapp.dcloud.net.cn/worktile/git-svn.html)
* [编译运行环境](https://uniapp.dcloud.net.cn/worktile/running-env.html) * [编译运行环境](https://uniapp.dcloud.net.cn/worktile/running-env.html)
* [自动化测试](https://uniapp.dcloud.net.cn/worktile/auto/quick-start.html) * [自动化测试](https://uniapp.dcloud.net.cn/worktile/auto/quick-start.html)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册