提交 a4453908 编写于 作者: L lvqing

Merge branch 'master' of https://gitcode.net/dcloud/unidocs-zh into dev_LQ

......@@ -60,6 +60,32 @@
```html
<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-multiport.jpg" class="zooming" data="abc" width="100" height="100" />
```
12. md 表格支持行、列合并,支持无表头表格
- 行列合并
```md
|Stage | Direct Products | ATP Yields|
|----: | --------------: | ---------:|
|Glycolysis | 2 ATP ||
|^^ | 2 NADH | 3--5 ATP |
|Pyruvaye oxidation | 2 NADH | 5 ATP |
|Citric acid cycle | 2 ATP ||
|^^ | 6 NADH | 15 ATP |
|^^ | 2 FADH2 | 3 ATP |
|**30--32** ATP |||
```
- 无表头表格
```md
|--|--|--|--|--|--|--|--|
|♜| |♝|♛|♚|♝|♞|♜|
| |♟|♟|♟| |♟|♟|♟|
|♟| |♞| | | | | |
| |♗| | |♟| | | |
| | | | |♙| | | |
| | | | | |♘| | |
|♙|♙|♙|♙| |♙|♙|♙|
|♖|♘|♗|♕|♔| | |♖|
```
## 文档 Algolia 使用限额
Included Quota:
- Records: 1,000,000
......
......@@ -96,6 +96,17 @@ const config = {
.end()
.plugin('inject-json-to-md')
.use(require('./markdown/inject-json-to-md'))
.end()
.plugin('multimd-table')
.use(require('markdown-it-multimd-table'), [
{
multiline: false,
rowspan: true,
headerless: true,
multibody: false,
aotolabel: false,
},
])
}
},
chainWebpack (config, isServer) {
......
let cssJson = {};
let utsJson = {};
let utsApiJson = {};
let utsComJson = {};
let utsUnicloudApiJson = {};
try {
cssJson = require('../utils/cssJson.json');
} catch (error) {}
......@@ -10,6 +12,13 @@ try {
try {
utsApiJson = require('../utils/utsApiJson.json');
} catch (error) {}
try {
utsComJson = require('../utils/utsComJson.json');
} catch (error) {}
try {
utsUnicloudApiJson = require('../utils/utsUnicloudApiJson.json');
} catch (error) {}
function getRegExp(key) {
return new RegExp(`<!--\\s*${key}.([\\w\\W]+[^\\s])\\s*-->`)
......@@ -40,6 +49,22 @@ const getJSON = text => {
};
}
match = text.match(getRegExp('UTSCOMJSON'));
if (match) {
return {
match,
json: utsComJson,
};
}
match = text.match(getRegExp('UTSUNICLOUDAPIJSON'));
if (match) {
return {
match,
json: utsUnicloudApiJson,
};
}
return {
match: null,
json: {},
......
此差异已折叠。
此差异已折叠。
{"uniCloud_props":{"name":"## UniCloud","description":"new UniCloud(config)","param":"## 参数 \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| config | [UniCloudInitOptions](#unicloudinitoptions) | 是 | - |\n### UniCloudInitOptions \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| provider | string | 是 | 服务商,目前支持 aliyun、tencent |\n| spaceName | string | 否 | 服务空间名 |\n| spaceId | string | 是 | 服务空间id |\n| clientSecret | string | 否 | 阿里云clientSecret |\n| endpoint | string | 否 | 阿里云endpoint |\n","returnValue":"","compatibility":"","tutorial":""},"Constructor":{"name":"## Constructor(options)","description":"","param":"### 参数 \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| options | [UniCloudInitOptions](#unicloudinitoptions) | 是 | - |","returnValue":"","compatibility":"","tutorial":""},"callFunction":{"name":"## callFunction(options)","description":"请求云函数","param":"### 参数 \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| options | [UniCloudCallFunctionOptions](#unicloudcallfunctionoptions) | 是 | - |\n#### UniCloudCallFunctionOptions \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| name | string | 是 | 云函数名 |\n| data | any | 否 | 云函数参数 |\n","returnValue":"### 返回值 \n\n| 类型 |\n| :-|\n| Promise\\<T\\> | \n","compatibility":"### 兼容性 \n\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :-| :-| :-| :-| :-| :-|\n| 4.4 | √ | 3.9.0 仅支持阿里云 | - | √ | x |\n","tutorial":""},"uploadFile":{"name":"## uploadFile(options)","description":"上传文件到云存储","param":"### 参数 \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| options | [UniCloudUploadFileOptions](#uniclouduploadfileoptions) | 是 | - |\n#### UniCloudUploadFileOptions \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| filePath | string | 是 | 文件路径 |\n| cloudPath | string | 是 | 云端路径 |\n| cloudPathAsRealPath | boolean | 否 | 是否以云端路径是否为真实路径保存上传的文件 |\n| onUploadProgress | ([UniCloudUploadProgress](#uniclouduploadprogress)) => any | 否 | 上传进度回调 |\n\n##### UniCloudUploadProgress \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| loaded | number | 是 | 已上传大小 |\n| total | number | 是 | 总大小 |\n","returnValue":"### 返回值 \n\n| 类型 |\n| :-|\n| Promise\\<T\\> | \n","compatibility":"### 兼容性 \n\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :-| :-| :-| :-| :-| :-|\n| 4.4 | √ | 3.9.0 仅支持阿里云 | - | √ | x |\n","tutorial":""},"getTempFileURL":{"name":"## getTempFileURL(options)","description":"获取文件临时URL","param":"### 参数 \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| options | [UniCloudGetTempFileURLOptions](#unicloudgettempfileurloptions) | 是 | - |\n#### UniCloudGetTempFileURLOptions \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| fileList | Array\\<string\\> | 是 | 文件列表 |\n","returnValue":"### 返回值 \n\n| 类型 |\n| :-|\n| Promise\\<T\\> | \n","compatibility":"### 兼容性 \n\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :-| :-| :-| :-| :-| :-|\n| 4.4 | √ | 3.9.0 仅支持阿里云 | - | √ | x |\n","tutorial":""},"importObject":{"name":"## importObject(objectName)","description":"引用云对象","param":"### 参数 \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| objectName | string | 是 | - |","returnValue":"### 返回值 \n\n| 类型 |\n| :-|\n| any | \n","compatibility":"### 兼容性 \n\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :-| :-| :-| :-| :-| :-|\n| 4.4 | √ | 3.9.0 仅支持阿里云 | - | √ | x |\n","tutorial":""},"onResponse":{"name":"## onResponse(callback)","description":"监听响应事件","param":"### 参数 \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| callback | (any?) => any | 是 | - |","returnValue":"","compatibility":"### 兼容性 \n\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :-| :-| :-| :-| :-| :-|\n| 4.4 | √ | 3.9.0 仅支持阿里云 | - | √ | x |\n","tutorial":""},"offResponse":{"name":"## offResponse(callback)","description":"移除响应事件监听","param":"### 参数 \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| callback | (any?) => any | 是 | - |","returnValue":"","compatibility":"### 兼容性 \n\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :-| :-| :-| :-| :-| :-|\n| 4.4 | √ | 3.9.0 仅支持阿里云 | - | √ | x |\n","tutorial":""},"onRefreshToken":{"name":"## onRefreshToken(callback)","description":"监听token刷新事件","param":"### 参数 \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| callback | (any?) => any | 是 | - |","returnValue":"","compatibility":"### 兼容性 \n\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :-| :-| :-| :-| :-| :-|\n| 4.4 | √ | 3.9.0 仅支持阿里云 | - | √ | x |\n","tutorial":""},"offRefreshToken":{"name":"## offRefreshToken(callback)","description":"移除token刷新事件监听","param":"### 参数 \n\n| 参数名 | 参数类型 | 是否必填 | 描述 |\n| :-| :-| :-| :-|\n| callback | (any?) => any | 是 | - |","returnValue":"","compatibility":"### 兼容性 \n\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :-| :-| :-| :-| :-| :-|\n| 4.4 | √ | 3.9.0 仅支持阿里云 | - | √ | x |\n","tutorial":""}}
\ No newline at end of file
......@@ -144,3 +144,15 @@ uni.chooseLocation({
DCloud为开发者争取了福利,可优惠获取高德的商业授权。如有需求请发邮件到`bd@dcloud.io`(注明你的公司名称、应用介绍、HBuilder账户);你也可以直接通过`uni-im`发起在线咨询,在线咨询地址:[DCloud地图服务专员](https://im.dcloud.net.cn/#/?user_id=b9839630-a479-11ea-b772-0f6ad6cf835c)
详见:[https://uniapp.dcloud.net.cn/tutorial/app-geolocation.html#lic](https://uniapp.dcloud.net.cn/tutorial/app-geolocation.html#lic)
### unicloud-city-select 城市选择组件
若想要实现城市选择功能,可以使用 `unicloud-city-select` 城市选择组件。
**运行效果图**
![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/3707/410.png)
> 下载地址:[https://ext.dcloud.net.cn/plugin?name=unicloud-city-select](https://ext.dcloud.net.cn/plugin?name=unicloud-city-select)
> 文档地址:[https://uniapp.dcloud.net.cn/uniCloud/unicloud-city-select.html](https://uniapp.dcloud.net.cn/uniCloud/unicloud-city-select.html)
......@@ -36,7 +36,7 @@ selector类似于 CSS 的选择器,但仅支持下列语法。
1. app-uvue支持的选择器较少,不支持ID选择器,[详见](../../uni-app-x/css/readme.md#选择器)
2. app-uvue的页面滚动,是由页面最外层的scroll-view模拟的,如果页面最外层不是scroll-view,无法使用本api。[详见](../../uni-app-x/css/readme.md#pagescroll)
3. app-uvue的scroll-view滚动时,如需动画,则需要在scroll-view的属性中配置 `scroll-with-animation="true"`[详见](../../component/scroll-view.md)
4. scroll-view的滚动,另见API
4. scroll-view的滚动,设置其scrollTop即可。[详见](../../component/scroll-view.md)
**示例**
......
......@@ -1057,7 +1057,7 @@ midButton没有pagePath,需监听点击事件,自行处理点击后的行为
- 微信小程序模拟器1.02.1904090版有bug,在缩放模拟器页面百分比后,tabbar点击多次后就会卡死。真机无碍,使用时注意。[详见](https://developers.weixin.qq.com/community/develop/doc/0002e6e6bf0d602d8c783e10756400)
- PC宽屏上,当页面存在topWindow或leftWindow或rightWindow等多窗体结构时,若想改变 tabbar 显示的位置,请使用 [custom-tab-bar组件](https://uniapp.dcloud.io/component/custom-tab-bar) 配置,若想隐藏 tabbar,可以使用如下 css(好处是可以和 leftwindow 等窗体联动):
```html
```css
.uni-app--showleftwindow + .uni-tabbar-bottom {
display: none;
}
......
## button
# button
按钮。
......@@ -49,16 +49,16 @@
- **注1:``button-hover`` 默认为 ``{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}``**
- ```open-type="launchApp"```时需要调起的APP接入微信OpenSDK[详见](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html)
### size 有效值
## size 有效值
|值|说明|
|:-|:-|
|default|默认大小|
|mini|小尺寸|
button组件也支持style中通过css定义文字大小。
button组件也支持style中通过css定义文字大小。[见下](#style)
### type 有效值
## type 有效值
|值|说明|
|:-|:-|
......@@ -66,16 +66,16 @@ button组件也支持style中通过css定义文字大小。
|default|白色|
|warn|红色|
button组件也支持style中通过css定义颜色。
button组件也支持style中通过css定义颜色。[见下](#style)
### form-type 有效值
## form-type 有效值
|值|说明|
|:-|:-|
|submit|提交表单|
|reset|重置表单|
### open-type 有效值
## open-type 有效值
|值|说明|平台差异说明|
|:-|:-|:-|
......@@ -108,7 +108,7 @@ button组件也支持style中通过css定义颜色。
|watchLater|触发用户稍后再看|快手小程序 |
|openProfile|触发打开用户主页|快手小程序 |
#### feedback
### feedback
open-type 为 feedback时:
......@@ -120,7 +120,30 @@ open-type 为 feedback时:
- button组件支持style中通过css定义文字大小、颜色
### button点击
## button样式修改@style
button组件属性中的size和type,属于预置样式,方便开发者使用。开发者也可以通过style和class来自定义样式。
button虽然可以内嵌text组件,但不建议通过text组件来修改button样式,因为会导致hove-class不生效。尤其是uvue中样式不继承。建议直接在button组件的style或class属性编写样式。
style和class的优先级,高于size和type属性。
```html
<template>
<button size="default" type="default"
style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
hover-class="is-hover">按钮</button>
</template>
<style>
.is-hover {
color: rgba(255, 255, 255, 0.6);
background-color: #179b16;
border-color: #179b16;
}
</style>
```
## button点击
button 组件的点击遵循 vue 标准的 @click事件。
......@@ -153,7 +176,7 @@ button 组件没有 url 属性,如果要跳转页面,可以在@click中编
- 支付宝小程序平台,获取用户手机号时,建议先通过条件编译的方式,调用支付宝原生API,[参考](https://docs.alipay.com/mini/api/getphonenumber)
### 示例
## 示例
[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/button/button)
......
......@@ -62,7 +62,7 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
* 粘贴时仅纯文本内容会被拷贝进编辑器
* 插入 html 到编辑器内时,编辑器会删除一些不必要的标签,以保证内容的统一。例如`<p><span>xxx</span></p>`会改写为`<p>xxx</p>`
* 编辑器聚焦时页面会被上推,系统行为以保证编辑区可见
* H5端会动态引入依赖 [quill.min.js](https://unpkg.com/quill@1.3.7/dist/quill.min.js)、[image-resize.min.js](https://unpkg.com/quill-image-resize-mp@3.0.1/image-resize.min.js),依赖从 [unpkg.com](https://unpkg.com) 加载,如过依赖加载较慢,可以下载下来放在自己的服务器或 CDN 服务商,然后在 [自定义模板](/collocation/manifest?id=h5-template) head 内引入。
* H5端会动态引入依赖 [quill.min.js](https://unpkg.com/quill@1.3.7/dist/quill.min.js)、[image-resize.min.js](https://unpkg.com/quill-image-resize-mp@3.0.1/image-resize.min.js),依赖从 [unpkg.com](https://unpkg.com) 加载,如过依赖加载较慢或失败,可以从 [github.com](https://github.com/dcloudio/uni-app/tree/dev/src/core/view/components/editor/quill) 或者 [gitee.com](https://gitee.com/dcloud/uni-app/tree/dev/src/core/view/components/editor/quill) 下载下来放在自己的服务器或 CDN 服务商,相比自己的服务器或者其他 CDN 服务商更推荐的做法是开发者将将所有前端资源托管在 [uniCloud 前端网页托管](https://uniapp.dcloud.net.cn/uniCloud/hosting.html) ,然后在 [自定义模板](../collocation/manifest?id=h5-template) 的 `head` 标签内引入。
* 不能直接插入视频或者其他文件,编辑时可以采用视频封面或者文件缩略图占位,并在图片属性中保存视频信息,预览时读取附加信息再还原为视频或者其他文件操作。
......
### map
## map
地图组件。
......@@ -256,9 +256,9 @@ export default {
```
:::
## App平台地图服务商差异
### App平台地图服务商差异
### Map 地图组件
#### Map 地图组件
|属性 |说明 |高德是否支持 |google地图是否支持 |
|:---- |:---- |:---- |:---- |
......@@ -268,25 +268,25 @@ export default {
|labeltap |点击label时触发 |已支持 |Android支持iOS不支持 |
|poitap |点击地图poi点时触发 |已支持 |Android不支持 iOS支持 |
### marker
#### marker
|属性 |说明 |高德是否支持 |google地图是否支持 |
|:---- |:---- |:---- |:---- |
|label |为标记点旁边增加标签 |已支持 |Android支持 iOS不支持 |
### marker 上的气泡 callout
#### marker 上的气泡 callout
|属性 |说明 |高德是否支持 |google地图是否支持 |
|:---- |:---- |:---- |:---- |
|display |'BYCLICK':点击显示; 'ALWAYS':常显 |已支持 |Android支持iOS只支持 'BYCLICK' |
### marker 上的自定义气泡 customCallout
#### marker 上的自定义气泡 customCallout
|属性 |说明 |高德是否支持 |google地图是否支持 |
|:---- |:---- |:---- |:---- |
|display|'BYCLICK':点击显示; 'ALWAYS':常显 |已支持 |Android支持iOS只支持 'BYCLICK' |
### polyline
#### polyline
|属性 |说明 |高德是否支持 |google地图是否支持 |
|:---- |:---- |:---- |:---- |
......@@ -340,3 +340,26 @@ DCloud为开发者争取了福利,可优惠获取商业授权。如有需求
联系电话:17778170760
详见:[https://uniapp.dcloud.net.cn/tutorial/app-geolocation.html#lic](https://uniapp.dcloud.net.cn/tutorial/app-geolocation.html#lic)
### unicloud-map 云端一体组件
若想要在地图上展示自定义的POI信息,试试 `unicloud-map` 云端一体组件,该组件将前端地图组件与云端数据库无缝连接,只需写一个`<unicloud-map>`组件,即可从数据库中获取附近的POI信息并在地图上呈现。无论是静态还是动态的POI,甚至更多自定义功能,都轻松实现。让地图开发变得愉快又高效。
> 下载地址:[https://ext.dcloud.net.cn/plugin?name=unicloud-map](https://ext.dcloud.net.cn/plugin?name=unicloud-map)
> 文档地址:[https://uniapp.dcloud.net.cn/uniCloud/unicloud-map.html](https://uniapp.dcloud.net.cn/uniCloud/unicloud-map.html)
**渲染静态POI运行效果图**
通过从数据库获取POI数据,渲染到地图上
![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/3707/409.png)
**渲染动态POI运行效果图**
通过从数据库获取POI数据,并通过 uni-id-common 内的路线规划API,计算路线、距离、时间
**运行效果图**
![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/3707/408.png)
......@@ -611,18 +611,7 @@ export function getPluginVersion(): UTSJSONObject{
}
```
3 JSONObject
```ts
// JSONObject 示例
export function getPluginVersion(): JSONObject{
var retJson = new JSONObject()
retJson["version"] = "1.2.0"
retJson["versionNum"] = 120
return retJson
}
```
uni-app向UTS环境传值,支持下列类型:
......@@ -681,6 +670,43 @@ postUserInfo({
```
遗留问题:
有些场景,我们需要参数对象包含对象数组,比如
```json
{
"name": "zhangsan",
"teacher": [{
"id": "1",
"name": "kongzi"
},
{
"id": "2",
"name": "mengzi"
}
]
}
```
目前在uni-app 1.0 环境下,复杂参数的传递是存在一定的缺陷。我们不能将teacher 声明为具体的类型数组,需要声明为any数组:
```uts
type Param{
name:string,
// 不能声明为 Teacher[]
teacher: any[];
}
```
访问数组元素时,通过 UTSJSONObjct 包装访问
```uts
// 循环遍历
list1.forEach((item : any) => {
const utsItem = new UTSJSONObject(item)
})
```
这个问题,我们稍后会改进。
## 4 前端使用插件
......
......@@ -205,7 +205,7 @@ const app = createApp({})
|内置组件 |描述 |H5 |App端|微信小程序 |
| -- | -- | -- |-- |-- |
|component | 渲染一个“元组件”为动态组件。依 `is` 的值,来决定哪个组件被渲染。 [详情](https://v3.cn.vuejs.org/api/built-in-components.html#component) |√ | √ | x | |
|component | 渲染一个“元组件”为动态组件。依 `is` 的值,来决定哪个组件被渲染。 [详情](https://cn.vuejs.org/api/built-in-special-elements.html#component) |√ | √ | x | |
|transition | 作为单个元素/组件的过渡效果。 [详情](https://v3.cn.vuejs.org/api/built-in-components.html#transition) |√ | x | x | |
|transition-group | 作为多个元素/组件的过渡效果。 [详情](https://v3.cn.vuejs.org/api/built-in-components.html#transition-group) |√ | x | x | |
|keep-alive | 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,主要用于保留组件状态或避免重新渲染。 [详情](https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive) |√ |x | x | |
......
......@@ -211,6 +211,10 @@
##### 示例:
::: preview
> uni-app js 引擎版
```html
<template>
<view>
......@@ -235,17 +239,42 @@
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是父组件 -->
<componentA :age="10"></componentA>
<!-- 我是子组件componentA -->
<view>{{age}}</view>
</view>
</template>
<script lang="uts">
export default {
props: {
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function(value): boolean {
return value >= 0
}
}
}
}
</script>
```
:::
```html
<template>
<view>
<!-- 我是父组件 -->
<componentA :age="10"></componentA>
</view>
</template>
```
### 传递静态或动态的 Prop
......@@ -360,7 +389,9 @@
1. **这个 `prop` 用来传递一个初始值**;这个子组件接下来希望将其作为一个本地的 `prop` 数据来使用。在这种情况下,最好定义一个本地的 `data property `并将这个 `prop` 作为其初始值:
::: preview
> uni-app js 引擎版
```html
<template>
......@@ -381,6 +412,33 @@
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{myTitle}}</view>
</view>
</template>
<script lang="uts">
export default {
props: {
title: {
type: String
}
},
data() {
return {
myTitle:this.title as string
}
}
}
</script>
```
:::
```html
<template>
<view>
......@@ -403,6 +461,9 @@
2. **这个 `prop` 以一种原始的值传入且需要进行转换**。在这种情况下,最好使用这个 `prop` 的值来定义一个计算属性:
::: preview
> uni-app js 引擎版
```html
<template>
......@@ -423,6 +484,33 @@
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{normalizedSize}}</view>
</view>
</template>
<script lang="uts">
export default {
props: {
size: {
type: String
}
},
computed: {
normalizedSize: function (): string {
return this.size.toLowerCase()
}
}
}
</script>
```
:::
```html
<template>
<view>
......@@ -454,6 +542,9 @@
为了定制 `prop` 的验证方式,你可以为 `props` 中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:
::: preview
> uni-app js 引擎版
```js
props: {
......@@ -497,6 +588,51 @@
}
```
> uni-app x
```js
props: {
propA: {
type: Number
},
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: UTSObject,
// 对象或数组默认值必须从一个工厂函数获取
default: function(): UTSObject {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function(value): boolean {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
},
// 具有默认值的函数
propG: {
type: Function,
// 与对象或数组默认值不同,这不是一个工厂函数 —— 这是一个用作默认值的函数
default: function(): string {
return 'Default function'
}
}
}
```
:::
`prop` 验证失败的时候,(开发环境构建版本的) `Vue` 将会产生一个控制台的警告。
**tips**
......@@ -537,12 +673,17 @@
用于验证 `author` prop 的值是否是通过 `new Person` 创建的。
**注意:uni-app x 暂不支持**
### Prop 的大小写命名
`HTML` 中的 `attribute` 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 `DOM` 中的模板时,`camelCase` (驼峰命名法) 的 `prop` 名需要使用其等价的 `kebab-case` (短横线分隔命名) 命名:
::: preview
> uni-app js 引擎版
```html
<template>
<view>
......@@ -558,6 +699,29 @@
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{postTitle}}</view>
</view>
</template>
<script lang="uts">
export default {
props: {
postTitle: {
type: String
}
}
}
</script>
```
:::
```html
<template>
<view>
......@@ -844,9 +1008,7 @@
}
```
**注意:uni-app x 暂不支持**
### v-model 参数
......@@ -1001,7 +1163,7 @@
</script>
```
**注意:uni-app x 暂不支持 capitalize 修饰符**
```html
<!-- 我是 my-component子组件-->
......@@ -1038,10 +1200,8 @@
</script>
```
对于带参数的 `v-model` 绑定,生成的 `prop` 名称将为 `arg + "Modifiers"`
```html
<my-component v-model:foo.capitalize="bar"></my-component>
```
......
* [概述](README.md)
* [manifest.json](manifest.md)
* [开发注意](codegap.md)
* [性能](performance.md)
* [编译器](compiler/README.md)
* [UVUE DOM](dom.md)
* [manifest.json](manifest.md)
* 组件
* [公共属性和事件](component/common.md)
* [view](component/view.md)
* [scroll-view](component/scroll-view.md)
* [list-view](component/list-view.md)
* [navigator](component/navigator.md)
* [swiper](component/swiper.md)
* [text](component/text.md)
* [rich-text](component/rich-text.md)
* [image](component/image.md)
* [input](component/input.md)
* [textarea](component/textarea.md)
* [button](component/button.md)
* [checkbox](component/checkbox-group.md)
* [radio](component/radio-group.md)
* [picker-view](component/picker-view.md)
* [progress](component/progress.md)
* [slider](component/slider.md)
* [switch](component/switch.md)
* [video](component/video.md)
* [animation-view](component/animation-view.md)
* [web-view](component/web-view.md)
* [API](api.md)
* CSS
* [概述](css/README.md)
* [CSS概述](css/README.md)
* [align-content](css/align-content.md)
* [align-items](css/align-items.md)
* [background](css/background.md)
......@@ -89,8 +110,12 @@
* [text-decoration-thickness](css/text-decoration-thickness.md)
* [visibility](css/visibility.md)
* [lines](css/lines.md)
* [API](api.md)
* [事件](event.md)
* UVUE DOM
* [DOM概述](dom/)
* [INode](dom/inode.md)
* [CSSStyleDeclaration](dom/cssstyledeclaration.md)
* [DrawableContext](dom/drawablecontext.md)
* [性能](performance.md)
<!-- * [新建项目]()
* [1. 通过 HBuilderX 可视化界面](quickstart-hx.md)
* [运行和调试]()
......@@ -102,4 +127,4 @@
* [API]()
* [编译器]()
* [质量]()
* [性能]() -->
-->
## uni.createInnerAudioContext() @createinneraudiocontext
# 基础
<!-- UTSAPIJSON.createInnerAudioContext.description -->
<!-- UTSAPIJSON.createInnerAudioContext.param -->
## uni.exit(options?) @exit
<!-- UTSAPIJSON.createInnerAudioContext.returnValue -->
<!-- UTSAPIJSON.exit.description -->
<!-- UTSAPIJSON.createInnerAudioContext.compatibility -->
<!-- UTSAPIJSON.exit.param -->
<!-- UTSAPIJSON.createInnerAudioContext.tutorial -->
<!-- UTSAPIJSON.exit.returnValue -->
## uni.getBackgroundAudioManager() @getbackgroundaudiomanager
<!-- UTSAPIJSON.exit.compatibility -->
<!-- UTSAPIJSON.getBackgroundAudioManager.description -->
<!-- UTSAPIJSON.exit.tutorial -->
<!-- UTSAPIJSON.getBackgroundAudioManager.param -->
# 界面
<!-- UTSAPIJSON.getBackgroundAudioManager.returnValue -->
<!-- UTSAPIJSON.getBackgroundAudioManager.compatibility -->
<!-- UTSAPIJSON.getBackgroundAudioManager.tutorial -->
## uni.exitApp() @exitapp
<!-- UTSAPIJSON.exitApp.description -->
<!-- UTSAPIJSON.exitApp.param -->
<!-- UTSAPIJSON.exitApp.returnValue -->
<!-- UTSAPIJSON.exitApp.compatibility -->
<!-- UTSAPIJSON.exitApp.tutorial -->
## uni.getFileSystemManager() @getfilesystemmanager
<!-- UTSAPIJSON.getFileSystemManager.description -->
<!-- UTSAPIJSON.getFileSystemManager.param -->
<!-- UTSAPIJSON.getFileSystemManager.returnValue -->
<!-- UTSAPIJSON.getFileSystemManager.compatibility -->
<!-- UTSAPIJSON.getFileSystemManager.tutorial -->
## uni.getAccessibilityInfo() @getaccessibilityinfo
<!-- UTSAPIJSON.getAccessibilityInfo.description -->
<!-- UTSAPIJSON.getAccessibilityInfo.param -->
<!-- UTSAPIJSON.getAccessibilityInfo.returnValue -->
<!-- UTSAPIJSON.getAccessibilityInfo.compatibility -->
<!-- UTSAPIJSON.getAccessibilityInfo.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.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.getNetworkType(options) @getnetworktype
<!-- UTSAPIJSON.getNetworkType.description -->
<!-- UTSAPIJSON.getNetworkType.param -->
<!-- UTSAPIJSON.getNetworkType.returnValue -->
<!-- UTSAPIJSON.getNetworkType.compatibility -->
<!-- UTSAPIJSON.getNetworkType.tutorial -->
## uni.getRecorderManager() @getrecordermanager
<!-- UTSAPIJSON.getRecorderManager.description -->
<!-- UTSAPIJSON.getRecorderManager.param -->
<!-- UTSAPIJSON.getRecorderManager.returnValue -->
<!-- UTSAPIJSON.getRecorderManager.compatibility -->
<!-- UTSAPIJSON.getRecorderManager.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 -->
## uni.chooseImage(options) @chooseimage
<!-- UTSAPIJSON.chooseImage.description -->
<!-- UTSAPIJSON.chooseImage.param -->
<!-- UTSAPIJSON.chooseImage.returnValue -->
<!-- UTSAPIJSON.chooseImage.compatibility -->
<!-- UTSAPIJSON.chooseImage.tutorial -->
## uni.previewImage(options) @previewimage
......@@ -226,101 +40,104 @@
<!-- UTSAPIJSON.closePreviewImage.tutorial -->
## uni.getImageInfo(options) @getimageinfo
## uni.showToast(options) @showtoast
<!-- UTSAPIJSON.getImageInfo.description -->
<!-- UTSAPIJSON.showToast.description -->
<!-- UTSAPIJSON.getImageInfo.param -->
<!-- UTSAPIJSON.showToast.param -->
<!-- UTSAPIJSON.getImageInfo.returnValue -->
<!-- UTSAPIJSON.showToast.returnValue -->
<!-- UTSAPIJSON.getImageInfo.compatibility -->
<!-- UTSAPIJSON.showToast.compatibility -->
<!-- UTSAPIJSON.getImageInfo.tutorial -->
<!-- UTSAPIJSON.showToast.tutorial -->
## uni.saveImageToPhotosAlbum(options) @saveimagetophotosalbum
## uni.hideToast() @hidetoast
<!-- UTSAPIJSON.saveImageToPhotosAlbum.description -->
<!-- UTSAPIJSON.hideToast.description -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.param -->
<!-- UTSAPIJSON.hideToast.param -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.returnValue -->
<!-- UTSAPIJSON.hideToast.returnValue -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.compatibility -->
<!-- UTSAPIJSON.hideToast.compatibility -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.tutorial -->
<!-- UTSAPIJSON.hideToast.tutorial -->
## uni.compressImage(options) @compressimage
## uni.showLoading(options) @showloading
<!-- UTSAPIJSON.compressImage.description -->
<!-- UTSAPIJSON.showLoading.description -->
<!-- UTSAPIJSON.compressImage.param -->
<!-- UTSAPIJSON.showLoading.param -->
<!-- UTSAPIJSON.compressImage.returnValue -->
<!-- UTSAPIJSON.showLoading.returnValue -->
<!-- UTSAPIJSON.compressImage.compatibility -->
<!-- UTSAPIJSON.showLoading.compatibility -->
<!-- UTSAPIJSON.compressImage.tutorial -->
<!-- UTSAPIJSON.showLoading.tutorial -->
## uni.hideLoading() @hideloading
## uni.chooseVideo(options) @choosevideo
<!-- UTSAPIJSON.hideLoading.description -->
<!-- UTSAPIJSON.hideLoading.param -->
<!-- UTSAPIJSON.chooseVideo.description -->
<!-- UTSAPIJSON.hideLoading.returnValue -->
<!-- UTSAPIJSON.chooseVideo.param -->
<!-- UTSAPIJSON.hideLoading.compatibility -->
<!-- UTSAPIJSON.chooseVideo.returnValue -->
<!-- UTSAPIJSON.hideLoading.tutorial -->
<!-- UTSAPIJSON.chooseVideo.compatibility -->
## uni.showModal(options) @showmodal
<!-- UTSAPIJSON.chooseVideo.tutorial -->
<!-- UTSAPIJSON.showModal.description -->
## uni.getVideoInfo(options) @getvideoinfo
<!-- UTSAPIJSON.showModal.param -->
<!-- UTSAPIJSON.getVideoInfo.description -->
<!-- UTSAPIJSON.showModal.returnValue -->
<!-- UTSAPIJSON.getVideoInfo.param -->
<!-- UTSAPIJSON.showModal.compatibility -->
<!-- UTSAPIJSON.getVideoInfo.returnValue -->
<!-- UTSAPIJSON.showModal.tutorial -->
<!-- UTSAPIJSON.getVideoInfo.compatibility -->
## uni.showActionSheet(options) @showactionsheet
<!-- UTSAPIJSON.getVideoInfo.tutorial -->
<!-- UTSAPIJSON.showActionSheet.description -->
## uni.saveVideoToPhotosAlbum(options) @savevideotophotosalbum
<!-- UTSAPIJSON.showActionSheet.param -->
<!-- UTSAPIJSON.saveVideoToPhotosAlbum.description -->
<!-- UTSAPIJSON.showActionSheet.returnValue -->
<!-- UTSAPIJSON.saveVideoToPhotosAlbum.param -->
<!-- UTSAPIJSON.showActionSheet.compatibility -->
<!-- UTSAPIJSON.saveVideoToPhotosAlbum.returnValue -->
<!-- UTSAPIJSON.showActionSheet.tutorial -->
<!-- UTSAPIJSON.saveVideoToPhotosAlbum.compatibility -->
# 网络
<!-- UTSAPIJSON.saveVideoToPhotosAlbum.tutorial -->
## uni.compressVideo(options) @compressvideo
## uni.getNetworkType(options) @getnetworktype
<!-- UTSAPIJSON.compressVideo.description -->
<!-- UTSAPIJSON.getNetworkType.description -->
<!-- UTSAPIJSON.compressVideo.param -->
<!-- UTSAPIJSON.getNetworkType.param -->
<!-- UTSAPIJSON.compressVideo.returnValue -->
<!-- UTSAPIJSON.getNetworkType.returnValue -->
<!-- UTSAPIJSON.compressVideo.compatibility -->
<!-- UTSAPIJSON.getNetworkType.compatibility -->
<!-- UTSAPIJSON.compressVideo.tutorial -->
<!-- UTSAPIJSON.getNetworkType.tutorial -->
## uni.uploadFile(options) @uploadfile
## uni.request(param) @request
<!-- UTSAPIJSON.uploadFile.description -->
<!-- UTSAPIJSON.request.description -->
<!-- UTSAPIJSON.uploadFile.param -->
<!-- UTSAPIJSON.request.param -->
<!-- UTSAPIJSON.uploadFile.returnValue -->
<!-- UTSAPIJSON.request.returnValue -->
<!-- UTSAPIJSON.uploadFile.compatibility -->
<!-- UTSAPIJSON.request.compatibility -->
<!-- UTSAPIJSON.uploadFile.tutorial -->
<!-- UTSAPIJSON.request.tutorial -->
## uni.downloadFile(options) @downloadfile
......@@ -334,89 +151,92 @@
<!-- UTSAPIJSON.downloadFile.tutorial -->
## uni.openAppAuthorizeSetting(options) @openappauthorizesetting
## uni.connectSocket(options) @connectsocket
<!-- UTSAPIJSON.connectSocket.description -->
<!-- UTSAPIJSON.connectSocket.param -->
<!-- UTSAPIJSON.openAppAuthorizeSetting.description -->
<!-- UTSAPIJSON.connectSocket.returnValue -->
<!-- UTSAPIJSON.openAppAuthorizeSetting.param -->
<!-- UTSAPIJSON.connectSocket.compatibility -->
<!-- UTSAPIJSON.openAppAuthorizeSetting.returnValue -->
<!-- UTSAPIJSON.connectSocket.tutorial -->
<!-- UTSAPIJSON.openAppAuthorizeSetting.compatibility -->
## uni.onSocketOpen(options) @onsocketopen
<!-- UTSAPIJSON.openAppAuthorizeSetting.tutorial -->
<!-- UTSAPIJSON.onSocketOpen.description -->
## uni.showToast(options) @showtoast
<!-- UTSAPIJSON.onSocketOpen.param -->
<!-- UTSAPIJSON.showToast.description -->
<!-- UTSAPIJSON.onSocketOpen.returnValue -->
<!-- UTSAPIJSON.showToast.param -->
<!-- UTSAPIJSON.onSocketOpen.compatibility -->
<!-- UTSAPIJSON.showToast.returnValue -->
<!-- UTSAPIJSON.onSocketOpen.tutorial -->
<!-- UTSAPIJSON.showToast.compatibility -->
## uni.onSocketError(callback) @onsocketerror
<!-- UTSAPIJSON.showToast.tutorial -->
<!-- UTSAPIJSON.onSocketError.description -->
## uni.hideToast() @hidetoast
<!-- UTSAPIJSON.onSocketError.param -->
<!-- UTSAPIJSON.hideToast.description -->
<!-- UTSAPIJSON.onSocketError.returnValue -->
<!-- UTSAPIJSON.hideToast.param -->
<!-- UTSAPIJSON.onSocketError.compatibility -->
<!-- UTSAPIJSON.hideToast.returnValue -->
<!-- UTSAPIJSON.onSocketError.tutorial -->
<!-- UTSAPIJSON.hideToast.compatibility -->
## uni.sendSocketMessage(options) @sendsocketmessage
<!-- UTSAPIJSON.hideToast.tutorial -->
<!-- UTSAPIJSON.sendSocketMessage.description -->
## uni.showLoading(options) @showloading
<!-- UTSAPIJSON.sendSocketMessage.param -->
<!-- UTSAPIJSON.showLoading.description -->
<!-- UTSAPIJSON.sendSocketMessage.returnValue -->
<!-- UTSAPIJSON.showLoading.param -->
<!-- UTSAPIJSON.sendSocketMessage.compatibility -->
<!-- UTSAPIJSON.showLoading.returnValue -->
<!-- UTSAPIJSON.sendSocketMessage.tutorial -->
<!-- UTSAPIJSON.showLoading.compatibility -->
## uni.onSocketMessage(callback) @onsocketmessage
<!-- UTSAPIJSON.showLoading.tutorial -->
<!-- UTSAPIJSON.onSocketMessage.description -->
## uni.hideLoading() @hideloading
<!-- UTSAPIJSON.onSocketMessage.param -->
<!-- UTSAPIJSON.hideLoading.description -->
<!-- UTSAPIJSON.onSocketMessage.returnValue -->
<!-- UTSAPIJSON.hideLoading.param -->
<!-- UTSAPIJSON.onSocketMessage.compatibility -->
<!-- UTSAPIJSON.hideLoading.returnValue -->
<!-- UTSAPIJSON.onSocketMessage.tutorial -->
<!-- UTSAPIJSON.hideLoading.compatibility -->
## uni.closeSocket(options) @closesocket
<!-- UTSAPIJSON.hideLoading.tutorial -->
<!-- UTSAPIJSON.closeSocket.description -->
## uni.showModal(options) @showmodal
<!-- UTSAPIJSON.closeSocket.param -->
<!-- UTSAPIJSON.showModal.description -->
<!-- UTSAPIJSON.closeSocket.returnValue -->
<!-- UTSAPIJSON.showModal.param -->
<!-- UTSAPIJSON.closeSocket.compatibility -->
<!-- UTSAPIJSON.showModal.returnValue -->
<!-- UTSAPIJSON.closeSocket.tutorial -->
<!-- UTSAPIJSON.showModal.compatibility -->
## uni.onSocketClose(callback) @onsocketclose
<!-- UTSAPIJSON.showModal.tutorial -->
<!-- UTSAPIJSON.onSocketClose.description -->
## uni.showActionSheet(options) @showactionsheet
<!-- UTSAPIJSON.onSocketClose.param -->
<!-- UTSAPIJSON.showActionSheet.description -->
<!-- UTSAPIJSON.onSocketClose.returnValue -->
<!-- UTSAPIJSON.showActionSheet.param -->
<!-- UTSAPIJSON.onSocketClose.compatibility -->
<!-- UTSAPIJSON.showActionSheet.returnValue -->
<!-- UTSAPIJSON.onSocketClose.tutorial -->
<!-- UTSAPIJSON.showActionSheet.compatibility -->
# 存储
<!-- UTSAPIJSON.showActionSheet.tutorial -->
## uni.setStorage(options) @setstorage
......@@ -514,7 +334,7 @@
<!-- UTSAPIJSON.removeStorageSync.tutorial -->
## uni.clearStorage(option?) @clearstorage
## uni.clearStorage(option) @clearstorage
<!-- UTSAPIJSON.clearStorage.description -->
......@@ -538,89 +358,146 @@
<!-- UTSAPIJSON.clearStorageSync.tutorial -->
## uni.connectSocket(options) @connectsocket
# 定位
<!-- UTSAPIJSON.connectSocket.description -->
<!-- UTSAPIJSON.connectSocket.param -->
## uni.getLocation(options) @getlocation
<!-- UTSAPIJSON.connectSocket.returnValue -->
<!-- UTSAPIJSON.getLocation.description -->
<!-- UTSAPIJSON.connectSocket.compatibility -->
<!-- UTSAPIJSON.getLocation.param -->
<!-- UTSAPIJSON.connectSocket.tutorial -->
<!-- UTSAPIJSON.getLocation.returnValue -->
## uni.onSocketOpen(options) @onsocketopen
<!-- UTSAPIJSON.getLocation.compatibility -->
<!-- UTSAPIJSON.onSocketOpen.description -->
<!-- UTSAPIJSON.getLocation.tutorial -->
<!-- UTSAPIJSON.onSocketOpen.param -->
## uni.getLocation(options) @getlocation
<!-- UTSAPIJSON.onSocketOpen.returnValue -->
<!-- UTSAPIJSON.getLocation.description -->
<!-- UTSAPIJSON.onSocketOpen.compatibility -->
<!-- UTSAPIJSON.getLocation.param -->
<!-- UTSAPIJSON.onSocketOpen.tutorial -->
<!-- UTSAPIJSON.getLocation.returnValue -->
## uni.onSocketError(callback) @onsocketerror
<!-- UTSAPIJSON.getLocation.compatibility -->
<!-- UTSAPIJSON.onSocketError.description -->
<!-- UTSAPIJSON.getLocation.tutorial -->
<!-- UTSAPIJSON.onSocketError.param -->
# 媒体
<!-- UTSAPIJSON.onSocketError.returnValue -->
<!-- UTSAPIJSON.onSocketError.compatibility -->
## uni.chooseImage(options) @chooseimage
<!-- UTSAPIJSON.onSocketError.tutorial -->
<!-- UTSAPIJSON.chooseImage.description -->
## uni.sendSocketMessage(options) @sendsocketmessage
<!-- UTSAPIJSON.chooseImage.param -->
<!-- UTSAPIJSON.sendSocketMessage.description -->
<!-- UTSAPIJSON.chooseImage.returnValue -->
<!-- UTSAPIJSON.sendSocketMessage.param -->
<!-- UTSAPIJSON.chooseImage.compatibility -->
<!-- UTSAPIJSON.sendSocketMessage.returnValue -->
<!-- UTSAPIJSON.chooseImage.tutorial -->
<!-- UTSAPIJSON.sendSocketMessage.compatibility -->
## uni.saveImageToPhotosAlbum(options) @saveimagetophotosalbum
<!-- UTSAPIJSON.sendSocketMessage.tutorial -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.description -->
## uni.onSocketMessage(callback) @onsocketmessage
<!-- UTSAPIJSON.saveImageToPhotosAlbum.param -->
<!-- UTSAPIJSON.onSocketMessage.description -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.returnValue -->
<!-- UTSAPIJSON.onSocketMessage.param -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.compatibility -->
<!-- UTSAPIJSON.onSocketMessage.returnValue -->
<!-- UTSAPIJSON.saveImageToPhotosAlbum.tutorial -->
<!-- UTSAPIJSON.onSocketMessage.compatibility -->
# 设备
<!-- UTSAPIJSON.onSocketMessage.tutorial -->
## uni.closeSocket(options) @closesocket
## uni.getAppAuthorizeSetting() @getappauthorizesetting
<!-- UTSAPIJSON.closeSocket.description -->
<!-- UTSAPIJSON.getAppAuthorizeSetting.description -->
<!-- UTSAPIJSON.closeSocket.param -->
<!-- UTSAPIJSON.getAppAuthorizeSetting.param -->
<!-- UTSAPIJSON.closeSocket.returnValue -->
<!-- UTSAPIJSON.getAppAuthorizeSetting.returnValue -->
<!-- UTSAPIJSON.closeSocket.compatibility -->
<!-- UTSAPIJSON.getAppAuthorizeSetting.compatibility -->
<!-- UTSAPIJSON.closeSocket.tutorial -->
<!-- UTSAPIJSON.getAppAuthorizeSetting.tutorial -->
## uni.onSocketClose(callback) @onsocketclose
## uni.getAppBaseInfo(config) @getappbaseinfo
<!-- UTSAPIJSON.onSocketClose.description -->
<!-- UTSAPIJSON.getAppBaseInfo.description -->
<!-- UTSAPIJSON.onSocketClose.param -->
<!-- UTSAPIJSON.getAppBaseInfo.param -->
<!-- UTSAPIJSON.onSocketClose.returnValue -->
<!-- UTSAPIJSON.getAppBaseInfo.returnValue -->
<!-- UTSAPIJSON.onSocketClose.compatibility -->
<!-- UTSAPIJSON.getAppBaseInfo.compatibility -->
<!-- UTSAPIJSON.onSocketClose.tutorial -->
<!-- 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 -->
......
......@@ -34,19 +34,19 @@ data里`:`的用途是赋值,无法通过`:`定义类型,所以data的数据
<script lang="uts">
type User = {
name:string
}
} //定义一个User类型
export default {
data() {
const date = new Date() //自动推导类型为Date
const v = 1;
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 显式声明
buttonEnable: false,
t: ``, // 模板字面量,推导为 string
o: { id: 1, name:"DCloud" }, // 对象字面量,推导为 UTSJSONObject,注意:访问 data 中定义的UTSJSONObject属性时,需要使用索引访问,如 this.o["id"]
an: [1, 2], // 数组字面量,如果元素均为纯数字字面量,则推导为 Array<number>
......@@ -79,18 +79,51 @@ data里`:`的用途是赋值,无法通过`:`定义类型,所以data的数据
</style>
```
## 函数 event 参数需显式指定类型
## 模板函数 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>
```
## JSON的类型注意
## 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。
JSON在强类型语言中使用时,不能像js那样随意。这部分内容较长,[详见](../uts/data-type.md#JSON)
uts中有2种方式使用json数据:
1. 把json数据转为type,自定义一个类型,声明json数据内容中每个属性的类型。然后就可以使用对象属性的方式来使用json数据。[详见](../uts/data-type.md#type)
2. 使用UTSJSONObject,不为json定义类型,然后通过下标和方法来使用json数据。[详见](../uts/data-type.md#ustjsonobject)
## 作用域插槽数据类型
## 组件作用域插槽的类型
作用域插槽需在组件中指定插槽数据类型
```ts
......@@ -115,9 +148,12 @@ export default {
</view>
```
## uts不支持undefined
## uts不支持js的一些功能和特性
任何变量被定义后,都需要赋值。
- 不支持undefined。任何变量被定义后,都需要赋值
- 不支持promise、async、await,仅支持callback回调
- 函数声明方式不支持[作为值传递](../uts/function.md#作为值传递)
- 函数表达式方式不支持[默认参数](../uts/function.md#默认参数)
## css使用注意
......
<!-- UTSCOMJSON.animation-view.name -->
<!-- UTSCOMJSON.animation-view.description -->
<!-- UTSCOMJSON.animation-view.attrubute -->
<!-- UTSCOMJSON.animation-view.compatibility -->
<!-- UTSCOMJSON.animation-view.reference -->
<!-- UTSCOMJSON.button.name -->
<!-- UTSCOMJSON.button.description -->
<!-- UTSCOMJSON.button.attrubute -->
<!-- UTSCOMJSON.button.compatibility -->
<!-- UTSCOMJSON.button.reference -->
<!-- UTSCOMJSON.checkbox-group.name -->
<!-- UTSCOMJSON.checkbox-group.description -->
<!-- UTSCOMJSON.checkbox-group.attrubute -->
<!-- UTSCOMJSON.checkbox-group.compatibility -->
<!-- UTSCOMJSON.checkbox-group.reference -->
<!-- UTSCOMJSON.checkbox.name -->
<!-- UTSCOMJSON.checkbox.description -->
<!-- UTSCOMJSON.checkbox.attrubute -->
<!-- UTSCOMJSON.checkbox.compatibility -->
<!-- UTSCOMJSON.checkbox.reference -->
# 组件的公共属性和事件
每个组件都有属性和事件。有些属性和事件,是所有组件都支持的。
## 组件公共属性
- id
- ref
- style
- class
## 组件公共事件
- @touchstart
- @touchmove
- @touchend
- @tap
- @click
- @longpress
### 冒泡事件系统
DOM事件主要有三个阶段:捕获阶段、目标阶段和冒泡阶段。
以点击事件为例,当触发点击时,
1. 首先从根节点逐级向下分发,直到监听点击事件的节点为止(捕获阶段);
2. 然后事件到达当前节点并触发点击事件(目标阶段);
3. 接着继续向上逐级触发父节点的点击事件,直到根节点为止(冒泡阶段)。
注意,虽然有3个阶段,但第2个阶段(“目标阶段”:事件到达了元素)并没有单独处理:捕获和冒泡阶段的处理程序都会在该阶段触发。
我们一般使用默认的事件注册机制,将事件注册到冒泡阶段,相对来说,大多数处理情况都在冒泡阶段。
uvue 目前暂不支持事件的捕获阶段。
#### 阻止冒泡
在事件回调中,可以通过调用`event.stopPropagation`方法阻止事件冒泡。
```ts
handleClick (event : MouseEvent) {
// 阻止继续冒泡.
event.stopPropagation();
}
```
#### 阻止默认行为
在事件回调中,可以通过调用`event.preventDefault`方法阻止默认行为。`event.preventDefault`仅处理默认行为,事件冒泡不会被阻止。
```vue
<template>
<scroll-view style="flex: 1;">
<view style="width: 750rpx;height: 1750rpx;background-color: bisque;">
滑动框中区域修改进度并阻止滚动,滑动其余空白区域触发滚动
<view style="width: 750rpx;height: 40rpx; margin-top: 100rpx;border:5rpx;" @touchmove="slider">
<view ref="sliderNode" style="background-color: chocolate;width: 0rpx;height: 30rpx;"></view>
</view>
</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
sliderNode: null as INode | null
}
},
methods: {
slider(e : TouchEvent) {
if (this.sliderNode == null) {
this.sliderNode = this.$refs["sliderNode"] as INode
}
e.preventDefault() // 阻止外层scroll-view滚动行为
this.sliderNode!!.style?.setProperty('width', e.touches[0].screenX);
}
}
}
</script>
```
\ No newline at end of file
<!-- UTSCOMJSON.image.name -->
<!-- UTSCOMJSON.image.description -->
<!-- UTSCOMJSON.image.attrubute -->
## 图标格式
- [x] bmp
- [x] gif
- [x] ico
- [x] jpg
- [x] png
- [x] webp
- [x] heic(Android10+支持)
如需其他图片格式,可搜索插件市场或自行开发uts组件插件。
## src路径支持说明
- 支持本地路径相对路径:比如根目录/、上级目录../、子目录subdir/。但不支持页面当前目录。
- 支持本地绝对路径
- 支持网络路径
- 本地路径的大小写不敏感
## 网络图缓存说明
image组件内部使用facebook的fresco库,自带缓存策略。
<!-- UTSCOMJSON.image.compatibility -->
<!-- UTSCOMJSON.image.reference -->
## bug&tips
- 目前src不支持页面当前目录的图片。
\ No newline at end of file
<!-- UTSCOMJSON.input.name -->
<!-- UTSCOMJSON.input.description -->
<!-- UTSCOMJSON.input.attrubute -->
<!-- UTSCOMJSON.input.compatibility -->
<!-- UTSCOMJSON.input.reference -->
<!-- UTSCOMJSON.list-view.name -->
<!-- UTSCOMJSON.list-view.description -->
在App中,基于recycle-view的list,才能实现长列表的资源自动回收,以保障列表加载很多项目时,屏幕外的资源被有效回收。list-view就是基于recycle-view的list组件。
每个list由1个父组件list-view及若干子组件list-item构成。
在list-item上使用v-for指令循环list-item,自动会回收屏幕外的列表项资源。
list-view和scroll-view都是滚动组件,list适用于长列表场景,其他场景适用于scroll-view。
<!-- UTSCOMJSON.list-view.attrubute -->
<!-- UTSCOMJSON.list-view.compatibility -->
<!-- UTSCOMJSON.list-view.reference -->
<!-- UTSCOMJSON.list-item.name -->
<!-- UTSCOMJSON.list-item.description -->
<!-- UTSCOMJSON.list-item.attrubute -->
<!-- UTSCOMJSON.list-item.compatibility -->
<!-- UTSCOMJSON.list-item.reference -->
## 示例代码
- 联网联表:[https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/list-news/list.uvue](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/list-news/list.uvue)
- 可左右滑动的多个列表:[https://gitcode.net/dcloud/hello-uni-app-x/-/tree/master/pages/template/long-list](https://gitcode.net/dcloud/hello-uni-app-x/-/tree/master/pages/template/long-list)
## Bug&Tips
- list触底偶尔不触发
- 暂不支持reverse,目前还不能开发im那样的倒叙列表
- 暂不支持waterfall多列瀑布流
\ No newline at end of file
<!-- UTSCOMJSON.navigator.name -->
<!-- UTSCOMJSON.navigator.description -->
<!-- UTSCOMJSON.navigator.attrubute -->
<!-- UTSCOMJSON.navigator.compatibility -->
<!-- UTSCOMJSON.navigator.reference -->
<!-- UTSCOMJSON.picker-view.name -->
<!-- UTSCOMJSON.picker-view.description -->
<!-- UTSCOMJSON.picker-view.attrubute -->
<!-- UTSCOMJSON.picker-view.compatibility -->
<!-- UTSCOMJSON.picker-view.reference -->
<!-- UTSCOMJSON.picker-view-column.name -->
<!-- UTSCOMJSON.picker-view-column.description -->
<!-- UTSCOMJSON.picker-view-column.attrubute -->
<!-- UTSCOMJSON.picker-view-column.compatibility -->
<!-- UTSCOMJSON.picker-view-column.reference -->
## tips
- picker里如放置较长内容,应该使用list-view而不是scroll-view。
\ No newline at end of file
<!-- UTSCOMJSON.progress.name -->
<!-- UTSCOMJSON.progress.description -->
<!-- UTSCOMJSON.progress.attrubute -->
<!-- UTSCOMJSON.progress.compatibility -->
<!-- UTSCOMJSON.progress.reference -->
<!-- UTSCOMJSON.radio-group.name -->
<!-- UTSCOMJSON.radio-group.description -->
<!-- UTSCOMJSON.radio-group.attrubute -->
<!-- UTSCOMJSON.radio-group.compatibility -->
<!-- UTSCOMJSON.radio-group.reference -->
<!-- UTSCOMJSON.radio.name -->
<!-- UTSCOMJSON.radio.description -->
<!-- UTSCOMJSON.radio.attrubute -->
<!-- UTSCOMJSON.radio.compatibility -->
<!-- UTSCOMJSON.radio.reference -->
<!-- UTSCOMJSON.rich-text.name -->
<!-- UTSCOMJSON.rich-text.description -->
<!-- UTSCOMJSON.rich-text.attrubute -->
<!-- UTSCOMJSON.rich-text.compatibility -->
<!-- UTSCOMJSON.rich-text.reference -->
## bug&tips
- 目前只支持HTMLString,暂不支持node。HTMLString支持常用但不是全部web样式,具体清单后续给出。
\ No newline at end of file
<!-- UTSCOMJSON.scroll-view.name -->
<!-- UTSCOMJSON.scroll-view.description -->
<!-- UTSCOMJSON.scroll-view.attrubute -->
<!-- UTSCOMJSON.scroll-view.compatibility -->
<!-- UTSCOMJSON.scroll-view.reference -->
## bug@tips
- 嵌套滚动暂未发布
\ No newline at end of file
<!-- UTSCOMJSON.slider.name -->
<!-- UTSCOMJSON.slider.description -->
<!-- UTSCOMJSON.slider.attrubute -->
<!-- UTSCOMJSON.slider.compatibility -->
<!-- UTSCOMJSON.slider.reference -->
<!-- UTSCOMJSON.swiper.name -->
<!-- UTSCOMJSON.swiper.description -->
<!-- UTSCOMJSON.swiper.attrubute -->
<!-- UTSCOMJSON.swiper.compatibility -->
<!-- UTSCOMJSON.swiper.reference -->
<!-- UTSCOMJSON.swiper-item.name -->
<!-- UTSCOMJSON.swiper-item.description -->
<!-- UTSCOMJSON.swiper-item.attrubute -->
<!-- UTSCOMJSON.swiper-item.compatibility -->
<!-- UTSCOMJSON.swiper-item.reference -->
<!-- UTSCOMJSON.switch.name -->
<!-- UTSCOMJSON.switch.description -->
<!-- UTSCOMJSON.switch.attrubute -->
<!-- UTSCOMJSON.switch.compatibility -->
<!-- UTSCOMJSON.switch.reference -->
<!-- UTSCOMJSON.text.name -->
<!-- UTSCOMJSON.text.description -->
在app-uvue和app-nvue中,文本只能写在text中,而不能写在view的text区域。
虽然app-uvue中写在view的text区域的文字,也会被编译器自动包裹一层text组件,看起来也可以使用。但这样会造成无法修改该text文字的样式,详见uvue的[样式不继承](../uni-app-x/css/readme.md#stylenoextends)章节
<!-- UTSCOMJSON.text.attrubute -->
<!-- UTSCOMJSON.text.compatibility -->
## 子组件
text组件在web浏览器渲染(含浏览器、小程序webview渲染模式、app-vue)和uvue中,可以并只能嵌套text组件。
在nvue中,text组件不能嵌套。
<!-- UTSCOMJSON.text.reference -->
<!-- UTSCOMJSON.textarea.name -->
<!-- UTSCOMJSON.textarea.description -->
<!-- UTSCOMJSON.textarea.attrubute -->
<!-- UTSCOMJSON.textarea.compatibility -->
<!-- UTSCOMJSON.textarea.reference -->
<!-- UTSCOMJSON.video.name -->
<!-- UTSCOMJSON.video.description -->
<!-- UTSCOMJSON.video.attrubute -->
<!-- UTSCOMJSON.video.compatibility -->
<!-- UTSCOMJSON.video.reference -->
## bug@tips
- 暂不支持全屏后放置子组件
- video组件的API目前只支持ref方式,详见[示例](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/video/video.uvue)
\ No newline at end of file
<!-- UTSCOMJSON.view.name -->
<!-- UTSCOMJSON.view.description -->
<!-- UTSCOMJSON.view.attrubute -->
<!-- UTSCOMJSON.view.compatibility -->
<!-- UTSCOMJSON.view.reference -->
view是Drawable的组件,也就是可以在view上调用绘制API自绘内容。它类似canvas,但不需要单独的canvas组件,在view上就可以直接draw。[详见](../dom/drawablecontext.md)
\ No newline at end of file
<!-- UTSCOMJSON.web-view.name -->
<!-- UTSCOMJSON.web-view.description -->
<!-- UTSCOMJSON.web-view.attrubute -->
<!-- UTSCOMJSON.web-view.compatibility -->
<!-- UTSCOMJSON.web-view.reference -->
## letter-spacing
<!-- CSSJSON.letter-spacing.description -->
<!-- CSSJSON.letter-spacing.syntax -->
<!-- CSSJSON.letter-spacing.values -->
<!-- CSSJSON.letter-spacing.compatibility -->
<!-- CSSJSON.letter-spacing.reference -->
\ No newline at end of file
# UVUE DOM
App-uvue的每个页面,在内存中都有一个 DOM(文档对象模型)。它和浏览器的 [DOM规范](https://www.w3.org/DOM/?spm=a2c7j.-zh-docs-api-weex-variable.0.0.2a5537c6FrgbYp) 类似。
App-uvue的每个页面,在内存中都有一个 DOM(文档对象模型)。它和浏览器的 [DOM规范](https://www.w3.org/DOM/?spm=a2c7j.-zh-docs-api-weex-variable.0.0.2a5537c6FrgbYp) 类似。
DOM 是页面元素内容的结构数据。DOM 模型用一个逻辑树来表示一个页面文档,树的每个分支的终点都是一个节点,每个节点都对应一个节点对象(INode)。
实际上 app-uvue 的template、数据绑定,在底层调用的也是 DOM API。
在浏览器中,开发者一旦跳过vue框架直接操作dom,vue框架将无法管理相应dom,开发者需要注意两端的冲突。
在 App 端,为了减少冲突,目前不支持通过 DOM API 创建和删除 DOM 树中的元素。只支持获取元素INode。
实际上 app-uvue 的template、数据绑定,在底层调用的也是 DOM API。
在浏览器中,开发者一旦跳过vue框架直接操作dom,vue框架将无法管理相应dom,开发者需要注意两端的冲突。
在 App 端,为了减少冲突,目前不支持通过 DOM API 创建和删除 DOM 树中的元素。只支持获取元素INode。
## 使用场景
通常情况下,使用 uvue 框架的数据绑定来操作更新页面组件就可以。但有2个场景,需要使用 DOM API。
1. 跟手动效
响应触屏事件更新组件的位置,要想不掉帧,需要保证16毫秒绘制一帧。
uvue的data更新,有一套diff机制,每次触发data更新,会多几毫秒的耗时。
此时推荐通过 DOM API 跳过 vue 框架直接操作组件的样式。
通常情况下,使用 uvue 框架的数据绑定来操作更新页面组件就可以。但有2个场景,需要使用 DOM API。
1. 跟手动效
响应触屏事件更新组件的位置,要想不掉帧,需要保证16毫秒绘制一帧。
uvue的data更新,有一套diff机制,每次触发data更新,会多几毫秒的耗时。
此时推荐通过 DOM API 跳过 vue 框架直接操作组件的样式。
2. Draw API
Android和iOS的原生view,有一些底层的高性能绘制能力,这些API的调用,需要先获取到INode对象,然后再调用其方法。
Android和iOS的原生view,有一些底层的高性能绘制能力,这些API的调用,需要先获取到INode对象,然后再调用其方法。
[性能](performance.md)章节,对这2个场景有详细的阐述。
## 获取DOM元素对象@getDomNode
app-uvue页面中可以通过 vue 框架中的组件实例对象 [$refs](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B-property) 获取 DOM 元素对象。
首先需要为组件设置 ref 属性值,它类似于id:
......@@ -35,8 +37,8 @@ app-uvue页面中可以通过 vue 框架中的组件实例对象 [$refs](https:/
<view ref="myNode" class="container">
</view>
```
在页面生命周期 `onReady` 中(太早组件可能没有创建),通过 `$refs` 获取。如果长期使用,可以保存在vue的 data 中。
在页面`onReady` 后(太早组件可能没有创建),通过 `$refs` 获取。如果长期使用,可以保存在vue的 data 中。
```ts
export default {
data() {
......@@ -50,7 +52,7 @@ export default {
},
}
```
通过INode对象的 style 属性更新组件的样式:
```ts
this.myNode?.style?.setProperty('background-color', 'red');
......@@ -81,7 +83,7 @@ this.myNode?.style?.setProperty('background-color', 'red');
}
},
onLoad() {
},
},
onReady() {
// 获取组件对象
this.myNode = $refs['myNode'] as INode;
......@@ -97,7 +99,7 @@ this.myNode?.style?.setProperty('background-color', 'red');
<style>
.container {
align-items: center;
align-items: center;
justify-content: center;
background-color: aquamarine;
width: 100%;
......@@ -105,11 +107,6 @@ this.myNode?.style?.setProperty('background-color', 'red');
}
</style>
```
以上例子仅为演示DOM API的使用,实际上点击按钮修改背景色这种简单场景,使用数据绑定更简单,class绑定到一个data上,动态修改data即可。
## DOM接口
- [INode](dom/inode.md)
- [CSSStyleDeclaration](dom/cssstyle.md)
- [DrawableContext](dom/drawablecontext.md)
以上例子仅为演示DOM API的使用,实际上点击按钮修改背景色这种简单场景,使用数据绑定更简单,class绑定到一个data上,动态修改data即可。
## CSSStyleDeclaration
CSSStyleDeclaration表示一个CSS 声明块对象,它是一个 CSS 属性键值对的集合。它暴露了样式信息和各种与样式相关的方法和属性。
| 方法 | 说明 |
|-------------------------------------- |-------------------------- |
| [setProperty](#setProperty) | 设置CSS的某个样式值 |
| [getPropertyValue](#getPropertyValue) | 获取CSS的某个样式值 |
### setProperty(name, value)@setProperty
对CSS指定样式设置一个新值。
```ts
CSSStyleDeclaration.setProperty(name:string, value:any):void
```
**参数说明**
| 参数 | 类型 | 说明 |
|-------|-------- |------ |
| name | string | CSS样式名称|
| value | any | CSS样式值 |
**返回值**
### getPropertyValue(property)@getPropertyValue
获取CSS指定的样式值,如果指定的样式不存在则返回null。
```ts
CSSStyleDeclaration.getPropertyValue(property:string):any?
```
**参数说明**
| 参数 | 类型 | 说明 |
|---------------|-------- |------ |
| property | string | CSS样式名称|
**返回值**
| 类型 | 说明 |
|------ |---------- |
| any | CSS样式值,可能为null |
## DrawableContext
uni-app x 在 app 端提供 DrawableContext 绘制内容到 uvue 页面的`view`标签上。可用于绘制文本、形状等内容。
### 使用
#### 获取 DrawableContext 对象
DrawableContext 对象通过对象节点(INode)的`getDrawableContext()`方法获取
```vue
<template>
<view ref="drawable" style="width: 750rpx;height: 750rpx;">
</view>
</template>
<script>
export default {
onReady() {
var ctx = (this.$refs['drawable'] as INode).getDrawableContext()
}
}
</script>
```
#### 绘制内容
通过 DrawableContext 提供的 API 绘制文本、形状等内容
```ts
<script>
export default {
onReady() {
var ctx = (this.$refs['drawable'] as INode).getDrawableContext()
ctx.moveTo(50, 40);
ctx.lineTo(200, 40);
ctx.stroke();
}
}
</script>
```
#### 更新到画布
DrawableContext 在调用 API 之后不会主动更新到画布上,需要主动调用`update()`方法更新。
```ts
<script>
export default {
onReady() {
var ctx = (this.$refs['drawable'] as INode).getDrawableContext()
ctx.moveTo(50, 40);
ctx.lineTo(200, 40);
ctx.stroke();
ctx.update()
}
}
</script>
```
#### 清除画布内容
如果清除已经绘制的内容重新绘制,需要调用`reset()`方法清除内容再进行绘制。
```vue
<template>
<view ref="drawable" style="width: 750rpx;height: 750rpx;" @click="drawable">
</view>
</template>
<script>
export default {
data(){
return {
change:false
}
},
onReady() {
this.drawable()
},
methods:{
drawable(){
var ctx = (this.$refs['drawable'] as INode).getDrawableContext()
ctx.reset();
if(this.change) {
ctx.strokeStyle = "#33ff0000"
ctx.lineWidth = 10
}
this.change = !this.change
ctx.moveTo(50, 40);
ctx.lineTo(200, 40);
ctx.stroke();
ctx.update()
}
}
}
```
\ No newline at end of file
......@@ -26,7 +26,7 @@ node.style;
设置指定组件上的某个属性值。如果设置的属性已经存在,则更新该属性值;否则使用指定的名称和值添加一个新的属性。
```ts
node.setAttribute("name", "helloButton");
INode.setAttribute(name:string, value:any|null):void
```
**参数说明**
......@@ -34,7 +34,7 @@ node.setAttribute("name", "helloButton");
| 参数 | 类型 | 说明 |
|-------|-------- |------ |
| name | string | 属性名称 |
| value | Any | 属性的值 |
| value | any | 属性的值 |
**返回值**
......@@ -46,7 +46,7 @@ node.setAttribute("name", "helloButton");
获取元素指定的属性值,如果指定的属性不存在则返回null。
```ts
var attribute = node.getAttribute(attributeName);
INode.getAttribute(attributeName:string):any?
```
**参数说明**
......@@ -67,12 +67,12 @@ var attribute = node.getAttribute(attributeName);
获取组件的绘制对象,仅uvue页面中的 `view` 组件支持,其它组件不支持则返回null。
```ts
var drawContext = node.getDrawableContext();
INode.getDrawableContext():DrawableContext|null
```
**返回值**
| 类型 | 说明 |
|------ |---------- |
| [DrawableContext](drawablecontext.md)? | 绘制对象,可为null |
| [DrawableContext](drawablecontext.md) | 绘制对象,可能为null |
......@@ -4,13 +4,13 @@
## 配置项列表
|属性 |类型 |默认值 |描述 |最低版本 |
|:- |:- |:- |:- |:- |
|name |String |- |应用名称 | |
|appid |String |- |应用标识,新建项目时DCloud云端分配 | |
|description|String |- |应用描述 | |
|versionName|String |- |版本名称,例如:1.0.0 | |
|versionCode|String |- |版本号,仅包含数字字符,例如:100 | |
|uni-app-x |[UNI-APP-X配置](#uniappx) |- |uni-app x项目配置 | |
|app |[APP配置](#app) |- |App项目(原生App端)配置 | |
|name |String |- |应用名称 |3.9.0 |
|appid |String |- |应用标识,新建项目时DCloud云端分配 |3.9.0 |
|description|String |- |应用描述 |3.9.0 |
|versionName|String |- |版本名称,例如:1.0.0 |3.9.0 |
|versionCode|String |- |版本号,仅包含数字字符,例如:100 |3.9.0 |
|uni-app-x |[UNI-APP-X配置](#uniappx) |- |uni-app x项目配置 |3.9.0 |
|app |[APP配置](#app) |- |App项目(原生App端)配置 |3.9.0 |
**注意**
- `appid` 由 DCloud 云端分配,主要用于 DCloud 相关的云服务,请勿自行修改。[详见](https://ask.dcloud.net.cn/article/35907)
......@@ -22,8 +22,7 @@
|属性 |类型 |默认值 |描述 |最低版本 |
|:- |:- |:- |:- |:- |
|singleThread |Boolean |true |是否为单线程模式 | |
|flex-direction |String |column |uvue页面默认flex排列方向,可取值:row:从左到右; row-reverse:从右到左;column:从上到下;column-reverse:与 column 相反| |
|flex-direction |String |column |uvue页面默认flex排列方向,可取值:row:从左到右; row-reverse:从右到左;column:从上到下;column-reverse:与 column 相反|3.9.0 |
### APP配置@app
......@@ -31,7 +30,7 @@ App端(原生App)配置
|属性 |类型 |默认值 |描述 |最低版本 |
|:- |:- |:- |:- |:- |
|distribute |[DISTRIBUTE配置](#distribute) |- |App端发布配置 | |
|distribute |[DISTRIBUTE配置](#distribute) |- |App端发布配置 |3.9.0 |
### DISTRIBUTE配置@distribute
......@@ -39,9 +38,9 @@ App端发布配置
|属性 |类型 |默认值 |描述 |最低版本 |
|:- |:- |:- |:- |:- |
|syncDebug |Boolean |false |是否为自定义调试基座 | |
|android |[ANDROID配置](#android) |- |App-Android端发布配置 | |
|ios |[IOS配置](#ios) |- |App-iOS端发布配置 | |
|syncDebug |Boolean |false |是否为自定义调试基座 |3.9.0 |
|android |[ANDROID配置](#android) |- |App-Android端发布配置 |3.9.0 |
|ios |[IOS配置](#ios) |- |App-iOS端发布配置 |3.9.0 |
### ANDROID配置@android
......@@ -49,19 +48,20 @@ App-Android端发布配置
|属性 |类型 |默认值 |描述 |最低版本 |
|:- |:- |:- |:- |:- |
|packagename |String |- |Android包名 | |
|keystore |String |- |证书库文件路径,相对于.manifest目录 | |
|storepwd |String |- |证书库文件密码 | |
|aliasname |String |- |证书别名 | |
|keypwd |String |- |证书密码 | |
|abiFilters |Array<String> |- |支持的CPU类型 | |
|minSdkVersion |String |- |最低Android版本(Android API Level)| |
|targetSdkVersion |String |- |目标版本(Android API Level) | |
|packagename |String |- |Android包名 |3.9.0 |
|keystore |String |- |证书库文件路径,相对于.manifest目录 |3.9.0 |
|storepwd |String |- |证书库文件密码 |3.9.0 |
|aliasname |String |- |证书别名 |3.9.0 |
|keypwd |String |- |证书密码 |3.9.0 |
|abiFilters |Array<String> |- |支持的CPU类型 |3.9.0 |
|minSdkVersion |String |- |最低Android版本(Android API Level)|3.9.0 |
|targetSdkVersion |String |- |目标版本(Android API Level) |3.9.0 |
**注意**
- `minSdkVersion` 用于指定应用运行所需最低 API 级别的整数。如果系统的 API 级别低于该属性中指定的值,Android 系统将阻止用户安装应用。
- `targetSdkVersion` 一个用于指定应用的目标 API 级别的整数。如果未设置,其默认值与为 minSdkVersion 指定的值相等。该值用于通知系统,您已针对目标版本进行了测试,并且系统不应通过启用任何兼容性行为,以保持您的应用与目标版本的向前兼容性。
- `minSdkVersion``targetSdkVersion` 设置的值是 API 级别(API Level),完整API级别信息请参考[Android API级别说明](https://developer.android.com/guide/topics/manifest/uses-sdk-element?hl=zh-cn#ApiLevels)
- `keystore``storepwd``aliasname``keypwd`为云端打包证书相关配置,在HBuilderX中提交云端打包时使用,不要手动修改
### IOS配置@ios
......@@ -69,7 +69,7 @@ App-iOS端发布配置
|属性 |类型 |默认值 |描述 |最低版本 |
|:- |:- |:- |:- |:- |
|appid |String |- |iOS Bundle ID | |
|appid |String |- |iOS Bundle ID |3.9.0 |
## 示例
......@@ -81,7 +81,7 @@ App-iOS端发布配置
"versionName" : "1.0.0",
"versionCode" : "100",
"uni-app-x":{
"enable": true
"flex-direction": "column"
},
"vueVersion" : "3",
"app": {
......@@ -89,10 +89,6 @@ App-iOS端发布配置
"syncDebug": true,
"android": {
"packagename": "Android包名",
"keystore": "证书库文件路径",
"storepwd": "证书库密码",
"aliasname": "证书别名",
"keypwd": "证书密码",
"abiFilters": [
"armeabi-v7a","arm64-v8a"
],
......
......@@ -112,6 +112,7 @@ uni-app x 一期,只包括基本的组件和API。
- [x] switch
- [x] slider
- [x] picker-view
- [x] navigator
- [x] progress
- [x] webview
- [x] video 暂不支持全屏后放置子组件
......@@ -231,7 +232,7 @@ uni-app js版的“App原生语言插件”无法在 uni-app x 中运行。
前端插件里,可兼容uts前端插件、可兼容uvue组件,即script是uts,style符合uvue的css。
# 自动化测试
## 自动化测试
uni-app x 从源头重视产品质量,第一个版本就支持自动化测试。并为uni-app x产品编写了数万行自动化测试例代码。
uni-app x 的自动化测试方案和 uni-app js版相同,自动化测试脚本使用js编写(注意不是uts)。整个自动化测试环境,运行在电脑端。
......@@ -240,7 +241,7 @@ uni-app x 的自动化测试方案和 uni-app js版相同,自动化测试脚
uni-app 的自动化测试教程详见:[https://uniapp.dcloud.net.cn/worktile/auto/quick-start.html](https://uniapp.dcloud.net.cn/worktile/auto/quick-start.html)
# 一期范围
## 一期范围
除上述文档中声明已经完成的,还有如下需要注意:
......@@ -252,9 +253,9 @@ uni-app 的自动化测试教程详见:[https://uniapp.dcloud.net.cn/worktile/
欢迎去[需求墙](https://vote.dcloud.net.cn/)投票,告诉我们你的需求优先级。
# 历史老项目兼容指南
## 历史老项目兼容指南
## uni-app js版老项目迁移指南
### uni-app js版老项目迁移指南
1. 首先检查你的老项目里使用的uni组件、api、三方插件、三方库,在uni-app x上是否支持。
2. 对于不支持的,需要自己写uni-app x的插件或去插件市场找替代兼容插件。如果写调用原生的uts代码,需要你了解原生的api。
3. 对于css,如果你之前使用nvue的css,那边迁移到uni-app x在样式上改动很小。如果之前是vue的css,那么需要改为flex布局,以及仅使用uvue支持的css来布局界面。
......@@ -265,7 +266,7 @@ uni-app 的自动化测试教程详见:[https://uniapp.dcloud.net.cn/worktile/
官方近期会提供把[uni小程序sdk](https://nativesupport.dcloud.net.cn/#)集成到uni-app x的方案。届时你的uni-app js版老项目可以作为uni-app x新项目的一个小程序来使用。
## 原生/rn/flutter页面兼容指南
### 原生/rn/flutter页面兼容指南
之前已经有原生/rn/flutter页面,希望渐进式的迁移到uni-app x架构,该怎么搞?
......@@ -273,7 +274,7 @@ uni-app x 毕竟是原生应用,内嵌flutter、rn这些没有任何问题,
至于把 uni-app x 作为一个sdk内嵌到其他原生应用中,还在评估中。
# FAQ
## FAQ
- uni-app x 支持uvue页面和vue页面混写吗?
仅支持uvue页面。后期考虑中。历史vue页面也可以通过 uni小程序sdk 嵌入到uni-app x中。
......
# UniCloud
## UniCloud
<!-- UTSUNICLOUDAPIJSON.uniCloud_props.description -->
<!-- UTSUNICLOUDAPIJSON.uniCloud_props.param -->
<!-- UTSUNICLOUDAPIJSON.uniCloud_props.returnValue -->
<!-- UTSUNICLOUDAPIJSON.uniCloud_props.compatibility -->
<!-- UTSUNICLOUDAPIJSON.uniCloud_props.tutorial -->
## Constructor(options) @constructor-1
<!-- UTSUNICLOUDAPIJSON.Constructor.description -->
<!-- UTSUNICLOUDAPIJSON.Constructor.param -->
<!-- UTSUNICLOUDAPIJSON.Constructor.returnValue -->
<!-- UTSUNICLOUDAPIJSON.Constructor.compatibility -->
<!-- UTSUNICLOUDAPIJSON.Constructor.tutorial -->
## callFunction(options) @callfunction
<!-- UTSUNICLOUDAPIJSON.callFunction.description -->
<!-- UTSUNICLOUDAPIJSON.callFunction.param -->
<!-- UTSUNICLOUDAPIJSON.callFunction.returnValue -->
<!-- UTSUNICLOUDAPIJSON.callFunction.compatibility -->
<!-- UTSUNICLOUDAPIJSON.callFunction.tutorial -->
## uploadFile(options) @uploadfile
<!-- UTSUNICLOUDAPIJSON.uploadFile.description -->
<!-- UTSUNICLOUDAPIJSON.uploadFile.param -->
<!-- UTSUNICLOUDAPIJSON.uploadFile.returnValue -->
<!-- UTSUNICLOUDAPIJSON.uploadFile.compatibility -->
<!-- UTSUNICLOUDAPIJSON.uploadFile.tutorial -->
## getTempFileURL(options) @gettempfileurl
<!-- UTSUNICLOUDAPIJSON.getTempFileURL.description -->
<!-- UTSUNICLOUDAPIJSON.getTempFileURL.param -->
<!-- UTSUNICLOUDAPIJSON.getTempFileURL.returnValue -->
<!-- UTSUNICLOUDAPIJSON.getTempFileURL.compatibility -->
<!-- UTSUNICLOUDAPIJSON.getTempFileURL.tutorial -->
## importObject(objectName) @importobject
<!-- UTSUNICLOUDAPIJSON.importObject.description -->
<!-- UTSUNICLOUDAPIJSON.importObject.param -->
<!-- UTSUNICLOUDAPIJSON.importObject.returnValue -->
<!-- UTSUNICLOUDAPIJSON.importObject.compatibility -->
<!-- UTSUNICLOUDAPIJSON.importObject.tutorial -->
## onResponse(callback) @onresponse
<!-- UTSUNICLOUDAPIJSON.onResponse.description -->
<!-- UTSUNICLOUDAPIJSON.onResponse.param -->
<!-- UTSUNICLOUDAPIJSON.onResponse.returnValue -->
<!-- UTSUNICLOUDAPIJSON.onResponse.compatibility -->
<!-- UTSUNICLOUDAPIJSON.onResponse.tutorial -->
## offResponse(callback) @offresponse
<!-- UTSUNICLOUDAPIJSON.offResponse.description -->
<!-- UTSUNICLOUDAPIJSON.offResponse.param -->
<!-- UTSUNICLOUDAPIJSON.offResponse.returnValue -->
<!-- UTSUNICLOUDAPIJSON.offResponse.compatibility -->
<!-- UTSUNICLOUDAPIJSON.offResponse.tutorial -->
## onRefreshToken(callback) @onrefreshtoken
<!-- UTSUNICLOUDAPIJSON.onRefreshToken.description -->
<!-- UTSUNICLOUDAPIJSON.onRefreshToken.param -->
<!-- UTSUNICLOUDAPIJSON.onRefreshToken.returnValue -->
<!-- UTSUNICLOUDAPIJSON.onRefreshToken.compatibility -->
<!-- UTSUNICLOUDAPIJSON.onRefreshToken.tutorial -->
## offRefreshToken(callback) @offrefreshtoken
<!-- UTSUNICLOUDAPIJSON.offRefreshToken.description -->
<!-- UTSUNICLOUDAPIJSON.offRefreshToken.param -->
<!-- UTSUNICLOUDAPIJSON.offRefreshToken.returnValue -->
<!-- UTSUNICLOUDAPIJSON.offRefreshToken.compatibility -->
<!-- UTSUNICLOUDAPIJSON.offRefreshToken.tutorial -->
\ No newline at end of file
......@@ -19,7 +19,7 @@ uniCloud为每个开发者提供一个免费服务空间,让你也可以拥有
### 看视频,只需25分钟,快速入门uniCloud
<a target="_blank" href="https://www.bilibili.com/video/BV17p4y1a71x?p=1">
<div style="height: 32vw;width: 50vw;background-image: url(https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/20210512183320.jpg);background-size: 100% 100%;"></div>
<img style="max-height: 512px;max-width: 800px;" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/20210512183320.jpg"></img>
</a>
### uniCloud是什么和不是什么
......@@ -220,7 +220,6 @@ uni云端一体生态的内容太多,让我们抽丝剥茧、归纳分类,
上面的轮子,是与业务无关的通用轮子。除此之外,还有大量的云端一体的项目模板。
使用这些现成的项目模板,那开发效率更是极大幅的提升。过去5、6人月的项目,现在几天就能搞定上线!
| | | |
|-- |-- |-- |
|电商 |博客 |排班 |
|网赚合成游戏 |社交 |预约预订 |
......
......@@ -20,6 +20,7 @@ uni-admin 是开源的,遵循 MIT 协议,你可以从[Github](https://github
<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/20210826112813.jpg" alt="uni-admin视频教程" style="width: 60%;">
</a>
> 问题交流与反馈,请加入:[uni-admin交流群](https://im.dcloud.net.cn/#/?joinGroup=64e84353cf42a22d542b29ea)
## uni-admin 功能
......
......@@ -1747,7 +1747,29 @@ let res = await db.collection('user').where({
geometry: line
})
}).get()
```
```
#### unicloud-map 云端一体组件
若想要在地图上展示自定义的POI信息,试试 `unicloud-map` 云端一体组件,该组件将前端地图组件与云端数据库无缝连接,只需写一个`<unicloud-map>`组件,即可从数据库中获取附近的POI信息并在地图上呈现。无论是静态还是动态的POI,甚至更多自定义功能,都轻松实现。让地图开发变得愉快又高效。
> 下载地址:[https://ext.dcloud.net.cn/plugin?name=unicloud-map](https://ext.dcloud.net.cn/plugin?name=unicloud-map)
> 文档地址:[https://uniapp.dcloud.net.cn/uniCloud/unicloud-map.html](https://uniapp.dcloud.net.cn/uniCloud/unicloud-map.html)
**渲染静态POI运行效果图**
通过从数据库获取POI数据,渲染到地图上
![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/3707/409.png)
**渲染动态POI运行效果图**
通过从数据库获取POI数据,并通过 uni-id-common 内的路线规划API,计算路线、距离、时间
**运行效果图**
![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/3707/408.png)
## 事务@transaction
......
......@@ -708,7 +708,7 @@ uni-frv-external-co 只支持URL化方式访问,在调用之前需要在uniClo
支持以下两种认证方式,根据业务需求选择不同的认证方式
1. 携带connectCode认证;相比签名认证,省去了复杂的签名计算过程。 调用简单,但安全性较低,适合服务器与服务器之间调用[详见](/uniCloud/uni-cloud-s2s.md#code)
1. 携带connectCode认证;相比签名认证,省去了复杂的签名计算过程。 调用简单,但安全性较低。[详见](/uniCloud/uni-cloud-s2s.md#code)
2. 使用签名认证;调用接口时需要使用签名密钥对请求内容进行签名计算,并将签名添加至请求头传输给云函数进行签名验证,相比简易鉴权方式,安全性高,可防止接口参数被篡改。[详见](/uniCloud/uni-cloud-s2s.md#sign)
如在您的业务也在uniCloud并且需要签名请求认证,可以使用`uni-cloud-s2s`提供的`getSecureHeaders`方法生成签名请求头 [详见](/uniCloud/uni-cloud-s2s.md#sign-method-of-server)
......
......@@ -2667,6 +2667,28 @@ const res = await db.collection('geo-near').aggregate().geoNear({
- 存在geoNear时其query参数将取代where/doc作为权限校验依据,即query匹配到的结果需要满足权限才可以查询
#### unicloud-map 云端一体组件
若想要在地图上展示自定义的POI信息,试试 `unicloud-map` 云端一体组件,该组件将前端地图组件与云端数据库无缝连接,只需写一个`<unicloud-map>`组件,即可从数据库中获取附近的POI信息并在地图上呈现。无论是静态还是动态的POI,甚至更多自定义功能,都轻松实现。让地图开发变得愉快又高效。
> 下载地址:[https://ext.dcloud.net.cn/plugin?name=unicloud-map](https://ext.dcloud.net.cn/plugin?name=unicloud-map)
> 文档地址:[https://uniapp.dcloud.net.cn/uniCloud/unicloud-map.html](https://uniapp.dcloud.net.cn/uniCloud/unicloud-map.html)
**渲染静态POI运行效果图**
通过从数据库获取POI数据,渲染到地图上
![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/3707/409.png)
**渲染动态POI运行效果图**
通过从数据库获取POI数据,并通过 uni-id-common 内的路线规划API,计算路线、距离、时间
**运行效果图**
![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/3707/408.png)
### 查询某字段和另一个表的字段相等的记录@enhanced-in
> 新增于 HBuilderX 3.7.12
......
......@@ -41,20 +41,20 @@ uniCloud的定价、套餐内容、服务SLA,是由云厂商直接公布的。
|资源分类 |资源细项 |免费版 |基础版 |标准版 |专业版 |企业版 |旗舰版 |
|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|云函数 |资源使用量(GBs/月) |1000 |1万 |20万 |40万 |150万 |400万 |
| |调用次数(万次/月) |1.5 |15 |300 |600 |2400 |6000 |
| |出网流量(GB/月) |1 |1 |20 |40 |160 |500 |
|^^ |调用次数(万次/月) |1.5 |15 |300 |600 |2400 |6000 |
|^^ |出网流量(GB/月) |1 |1 |20 |40 |160 |500 |
|云数据库 |容量(GB) |2 |2 |3 |5 |10 |10 |
| |读操作使用量(万RU/天)|0.05 |5 |25 |50 |150 |500 |
| |写操作使用量(万WU/天)|0.03 |3 |15 |30 |100 |300 |
| |集合数量 |100 |100 |100 |100 |100 |100 |
| |索引数量 |400 |400 |400 |400 |400 |400 |
|^^ |读操作使用量(万RU/天)|0.05 |5 |25 |50 |150 |500 |
|^^ |写操作使用量(万WU/天)|0.03 |3 |15 |30 |100 |300 |
|^^ |集合数量 |100 |100 |100 |100 |100 |100 |
|^^ |索引数量 |400 |400 |400 |400 |400 |400 |
|云存储 |容量(GB) |5 |8 |10 |50 |100 |500 |
| |下载操作次数(万次/月)|0.2 |10 |200 |750 |1500 |3750 |
| |上传操作次数(万次/月)|0.1 |5 |100 |300 |600 |1500 |
| |CDN流量(GB/月) |1 |2 |10 |50 |150 |500 |
|^^ |下载操作次数(万次/月)|0.2 |10 |200 |750 |1500 |3750 |
|^^ |上传操作次数(万次/月)|0.1 |5 |100 |300 |600 |1500 |
|^^ |CDN流量(GB/月) |1 |2 |10 |50 |150 |500 |
|前端网页托管 |容量(GB) |5 |8 |10 |50 |100 |500 |
| |CDN流量(GB/月) |1 |2 |10 |50 |150 |500 |
|售价(元/月) |- |免费 |5 |24 |82 |316 |688 |
|^^ |CDN流量(GB/月) |1 |2 |10 |50 |150 |500 |
|售价(元/月) ||免费 |5 |24 |82 |316 |688 |
- GBs、RU、WU等单位释义,[见下](#aliyun-quota-description)
- 套餐中的资源超标后服务空间会停服,需要及时升配或转按量计费才能恢复。
......@@ -84,17 +84,17 @@ uniCloud的定价、套餐内容、服务SLA,是由云厂商直接公布的。
|资源分类 |资源细项 |售价(元) |
|:-: |:-: |:-: |
|云函数 |资源使用量(GBs) |0.000110592|
| |调用次数(万次) |0.0133 |
| |出网流量(GB) |0.8 |
|^^ |调用次数(万次) |0.0133 |
|^^ |出网流量(GB) |0.8 |
|云数据库 |容量(GB/天) |0.07 |
| |读操作使用量(万RU) |0.015 |
| |写操作使用量(万RU) |0.05 |
|^^ |读操作使用量(万RU) |0.015 |
|^^ |写操作使用量(万RU) |0.05 |
|云存储 |容量(GB/天) |0.0043 |
| |下载操作次数(万次) |0.01 |
| |上传操作次数(万次) |0.01 |
| |CDN 流量(GB) |0.18 |
|^^ |下载操作次数(万次) |0.01 |
|^^ |上传操作次数(万次) |0.01 |
|^^ |CDN 流量(GB) |0.18 |
|前端网站托管 |容量(GB/天) |0.0043 |
| |流量(GB) |0.18 |
|^^ |流量(GB)|0.18 |
**注意**
- GBs、RU、WU等单位释义,[见下](#aliyun-quota-description)
......@@ -113,17 +113,17 @@ uniCloud的定价、套餐内容、服务SLA,是由云厂商直接公布的。
|资源分类 |资源细项 |最小值 |数据更新延迟时间 |
|:-: |:-: |:-: |:-: |
|云函数 |资源使用量 |1万GBs/日 |20分钟 |
| |调用次数 |1万次/日 |20分钟 |
| |出网流量 |1GB/日 |20分钟 |
|^^ |调用次数 |1万次/日 |20分钟 |
|^^ |出网流量 |1GB/日 |20分钟 |
|云数据库 |容量 |1GB |1小时 |
| |读操作使用量 |1万RU/日 |20分钟 |
| |写操作使用量 |1万WU/日 |20分钟 |
|^^ |读操作使用量 |1万RU/日 |20分钟 |
|^^ |写操作使用量 |1万WU/日 |20分钟 |
|云存储 |容量 |1GB |6小时 |
| |下载操作次数 |1万次/日 |6小时 |
| |上传操作次数 |1万次/日 |6小时 |
| |CDN 流量 |1GB/日 |6小时 |
|^^ |下载操作次数 |1万次/日 |6小时 |
|^^ |上传操作次数 |1万次/日 |6小时 |
|^^ |CDN 流量 |1GB/日 |6小时 |
|前端网站托管 |容量 |1GB |6小时 |
| |流量 |1GB/日 |6小时 |
|^^|流量|1GB/日 |6小时 |
上述指标,容量是累计的,其他单位则是按日的。
......@@ -138,17 +138,17 @@ uniCloud的定价、套餐内容、服务SLA,是由云厂商直接公布的。
|资源分类 |资源细项 |说明 |数据更新延迟时间 |
|:-: |:-: |:-: |:-: |
|云函数 |资源使用量(GBs) |资源使用量GBs = 函数配置内存GB × 运行计费时长s。 例如,配置为256MB的函数,单次运行了1760ms,计费时长为1760ms,则单次运行的资源使用量为(256 / 1024) × (1760 / 1000) = 0.44GBs |20分钟 |
| |调用次数 | - |20分钟 |
| |出网流量(GB) |在云函数中访问外网时产生的出网流量,包含请求三方服务器发送的数据和返回给客户端的数据。 |20分钟 |
|^^ |调用次数 | - |20分钟 |
|^^ |出网流量(GB) |在云函数中访问外网时产生的出网流量,包含请求三方服务器发送的数据和返回给客户端的数据。 |20分钟 |
|云数据库 |容量(GB) | - |1小时 |
| |读操作使用量(RU) |读操作使用量(Read Unit)= ceil(查询数据量KB / 4),即从数据表中读取一条4 KB数据(向上取整)计作1RU,例如读取7.6 KB的数据计作2RU。 |20分钟 |
| |写操作使用量(WU) |写操作使用量(Write Unit)= ceil(写入数据量KB / 1),即向数据表中写入一条1 KB数据(向上取整)计作1WU,例如写入1.8 KB的数据计作2WU。 |20分钟 |
|^^ |读操作使用量(RU) |读操作使用量(Read Unit)= ceil(查询数据量KB / 4),即从数据表中读取一条4 KB数据(向上取整)计作1RU,例如读取7.6 KB的数据计作2RU。 |20分钟 |
|^^ |写操作使用量(WU) |写操作使用量(Write Unit)= ceil(写入数据量KB / 1),即向数据表中写入一条1 KB数据(向上取整)计作1WU,例如写入1.8 KB的数据计作2WU。 |20分钟 |
|云存储 |容量(GB) | - |6小时 |
| |下载操作次数 |通过CDN加速访问的次数,回源次数暂不收费。 |6小时 |
| |上传操作次数 | - |6小时 |
| |CDN 流量(GB) |通过CDN加速产生的流量,回源流量暂不收费。 |6小时 |
|^^ |下载操作次数 |通过CDN加速访问的次数,回源次数暂不收费。 |6小时 |
|^^ |上传操作次数 | - |6小时 |
|^^ |CDN 流量(GB) |通过CDN加速产生的流量,回源流量暂不收费。 |6小时 |
|前端网站托管 |容量(GB) | - |6小时 |
| |CDN 流量(GB) |通过CDN加速产生的流量,回源流量暂不收费。 |6小时 |
|^^ |CDN 流量(GB) |通过CDN加速产生的流量,回源流量暂不收费。 |6小时 |
**补充**
......@@ -165,33 +165,33 @@ uniCloud的定价、套餐内容、服务SLA,是由云厂商直接公布的。
|资源分类 |限制项 |限额 |
|--- |--- |--- |
|云函数 |callFunction请求QPS |1000 |
| |url化请求QPS(自定义域名) |1000 |
| |url化请求QPS(默认域名) |1000 |
| |固定IP代理请求QPS |20 |
| |最大实例数 |300 |
| |函数数量限制 |48 |
| |客户端请求最大超时时间 |60秒 |
| |固定IP代理请求最大超时时间 |5秒 |
| |定时任务单次最大运行时间 |600秒|
| |定时任务最小执行间隔 |1分钟|
| |callFunction请求体最大限制 |6M |
| |url化请求体最大限制 |1M |
|^^ |url化请求QPS(自定义域名) |1000 |
|^^ |url化请求QPS(默认域名) |1000 |
|^^ |固定IP代理请求QPS |20 |
|^^ |最大实例数 |300 |
|^^ |函数数量限制 |48 |
|^^ |客户端请求最大超时时间 |60秒 |
|^^ |固定IP代理请求最大超时时间 |5秒 |
|^^ |定时任务单次最大运行时间 |600秒|
|^^ |定时任务最小执行间隔 |1分钟|
|^^ |callFunction请求体最大限制 |6M |
|^^ |url化请求体最大限制 |1M |
|数据库 |QPS |1000 |
| |并发执行数 |100 |
| |单次请求超时时间 |5秒 |
| |集合数量 |100 |
| |索引数量 |400 |
| |单次请求获取的最大数据条数(limit) |1000 |
| |事务超时时间(从事务开始到事务提交或回滚) |10秒 |
|^^ |并发执行数 |100 |
|^^ |单次请求超时时间 |5秒 |
|^^ |集合数量 |100 |
|^^ |索引数量 |400 |
|^^ |单次请求获取的最大数据条数(limit) |1000 |
|^^ |事务超时时间(从事务开始到事务提交或回滚) |10秒 |
|云存储 |上传QPS |300 |
| |删除QPS |300 |
| |查询QPS |300 |
|^^ |删除QPS |300 |
|^^ |查询QPS |300 |
目前单个账号可创建20个正式版服务空间,如有更多需求需发邮件到service@dcloud.io申请。此外云函数数量限制、集合数量限制也可申请提升。邮件模板见下方:[申请解除限制邮件模板](#apply-email-template)
### 申请解除限制邮件模板@apply-email-template
```text
```md
邮件标题:云函数数量限制提升申请 | 服务空间数量限制提升申请 | 集合数量限制提升申请 | 云函数域名代理需求申请
邮件内容:
......@@ -289,13 +289,13 @@ uniCloud的定价、套餐内容、服务SLA,是由云厂商直接公布的。
| 计费项 |计费项 |定价 |
| --- | --- |--- |
|前端网页托管 |容量 |0.005元/GB/天 |
| |流量 |0.21元/GB |
|^^ |流量 |0.21元/GB |
|日志服务 |标准索引存储 |0.0115元/GB/日 |
| |标准日志存储 |0.0115元/GB/日 |
| |标准索引流量 |0.35元/GB/日 |
| |写流量 |0.18元/GB/日 |
| |请求次数 |0.15元/百万次/日 |
| |分区数量 |0.04元/个/日 |
|^^ |标准日志存储 |0.0115元/GB/日 |
|^^ |标准索引流量 |0.35元/GB/日 |
|^^ |写流量 |0.18元/GB/日 |
|^^ |请求次数 |0.15元/百万次/日 |
|^^ |分区数量 |0.04元/个/日 |
- 在正式进行计费方式切换之日起,用户将不可继续续费或新购旧版套餐或按量计费服务空间。用户可选择是否切换新的计费方式,超时(2022.09.08)切换的服务空间将会停服释放。
- 新计费下腾讯云云函数日志保存时长为7天
......
......@@ -276,7 +276,7 @@ const payload = {
const signKey = 'q0etb3cl0s8mrlfdqp33ist1ou0r97pg'
```
1. 过滤payload内非简单类型数据,以key升序,生成payloadStr。`payloadStr = 'a=1&b=2'`
1. 过滤payload内非简单类型数据,以key升序,生成payloadStr。`payloadStr = 'a=1&b=2'`**注意:生成payloadStr时无需对其中字符进行encode**
2. 拼接签名串,hmac方法对应的签名串为`timestamp+'\n'+payloadStr`,hash方法对应的签名串为`timestamp+'\n'+payloadStr+'\n'+signKey`
3. 分别调用hmac方法、hash方法获取签名结果
......
......@@ -40,7 +40,7 @@ uni-im是云端一体的、全平台的、免费的、开源即时通讯系统
优先开发哪些,取决于开发者的反馈。同时也欢迎开发者共建这个开源项目。
> uni-im相关功能建议或问题,可以加入由uni-im(本插件)搭建的交流群,[点此加入](https://im.dcloud.net.cn/#/?joinGroup=63ef49711d358337456f4d67),备用QQ群(当系统处于维护中使用)群号:[854520009](https://qm.qq.com/cgi-bin/qm/qr?k=DJNSajXAYHnYcr9pouOfxF9Rwwl1AJHc&jump_from=webapi&authKey=HZ1fG58Eudp3o0GCoyx1/UPMY9Fv1sGT5jdqYqPJlTGT0XVUip3Bk8E+UyToQOMo)
> uni-im相关功能建议或问题,可以加入由uni-im(本插件)搭建的交流群,[点此加入](https://im.dcloud.net.cn/#/?joinGroup=63ef49711d358337456f4d67)
## 使用uniCloud产生的费用说明@cost
......
......@@ -245,7 +245,7 @@ export default {
</style>
```
#### 渲染动态POII@dynamicspoi
#### 渲染动态POI@dynamicspoi
通过从数据库获取POI数据,并通过 uni-id-common 内的路线规划API,计算路线、距离、时间
......
......@@ -115,9 +115,9 @@ vue 选项式开发时,冒号被用于赋值,无法通过let、const和冒
s1 : "abc", // 根据字面量推导为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 显式声明
n3 as number, // 不合法,uts不支持undefined,必须通过冒号初始化赋值,哪怕赋值为null,见下
n4 : null as number | null // 合法。定义为可为null的数字,初始值是null,但在使用n4前必须为其赋值数字。(number | null)是一个或的写法,前后顺序没有关系。uts的联合类型只支持 |null 。
year: date.getFullYear() as number, // 在data里,目前无法通过变量类型推导data项的类型,需使用 as 显式声明类型为number
}
}
}
......@@ -168,6 +168,9 @@ let a1:Array<number> = [1,2,3,4]
目前建议开发者,除了boolean和string外,其他包括数字和数组在内的类型,尽量不使用字面量自动类型推导,而是显式声明类型。避免 uts 统一自动类型推导时引发的向下兼容问题。
### 类型判断
> 注意:isArray 需要HX 3.9.0之后版本才会支持
判断类型,有好几种方案:typeof、instanceof、isArray。
使用 typeof 可以判断布尔值、数字、字符串、函数。
......
此差异已折叠。
......@@ -219,7 +219,7 @@ fn = function (x: string, y: string) { } // 错误,参数类型不匹配
fn = function (x: string): string { return x } // 错误,返回类型不匹配
```
## 函数默认参数
## 默认参数
函数参数可以设默认值,当省略相应的参数时使用默认值。此时该参数也就成了可选参数。
......@@ -249,7 +249,7 @@ class Persion {
```ts
// 该变量会被编译成Swift或者Kottlin的闭包表达式,其不支持使用默认参数。
const test = function(msg: string | null)
const test = function(msg: string | null) { }
```
因为需要作为值进行传递,对象字面量中定义的方法会自动转换为函数表达式,所以也不支持默认参数
......@@ -265,3 +265,28 @@ export {
}
```
## 剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
使用 `...` 操作符定义函数的最后一个参数为剩余参数。
```ts
function fn(str: string, ...args: string[]) {
console.log(str, args)
}
```
在这种情况下可以传递可变数量的参数给函数:
```ts
fn('a') // 'a' []
fn('a', 'b', 'c') // 'a' ['b', 'c']
```
也可以使用[展开语法](./operator.md#展开语法)传递一个数组值给函数的剩余参数(转到 swift 时未支持):
```ts
fn('a', ...['b', 'c']) // 'a' ['b', 'c']
```
......@@ -160,7 +160,7 @@ const coffees = ["French Roast", "Colombian", "Kona"]
在JS中,对象字面值是封闭在花括号对`{}`中的一个对象的零个或多个“属性名—值”对的(元素)列表。
在uts中,对象字面量赋值给变量,默认会被推导为[UTSJSONObject](data-type.md#USTJSONObject)类型。
在uts中,对象字面量赋值给变量,默认会被推导为[UTSJSONObject](data-type.md#UTSJSONObject)类型。
```ts
// 创建对象
......
## 模块
# 模块
uts 支持将程序拆分为可按需导入的单独模块,模块中可以导入和导出各种类型的变量,如函数,字符串,数字,布尔值,类等。
### 导出
## 导出
export 语句可以将一个文件中的函数,类等导出。比如:
......@@ -17,7 +17,7 @@ export default class Canvas {} // default 关键词支持默认导出
- 在一个文件中,export、import 可以有多个,export default 仅有一个。
- 通过 export 方式导出,在导入时要加{ },export default 则不需要。
### 导入
## 导入
import 语句可以将另一个文件中的函数,类等导入到当前文件。比如:
......@@ -52,7 +52,16 @@ const test = new Test()
test.test()
```
### 数据共享和复用
### 指定别名
使用 `as` 关键字可以为导入的值指定别名
```ts
import { name as testName } from './test.uts'
import * as testModule from './test.uts'
```
## 数据共享和复用
可以使用 export 语句将变量或函数导出,以便其他模块可以访问和使用它们。导出的变量可以在模块内共享,并在其他模块中导入和复用。
......
此差异已折叠。
# type(Type Aliases)
# 类型别名(Type Aliases)
使用类型别名可以为任何类型命名。类型别名不支持在局部作用域内定义。
......
此差异已折叠。
......@@ -6489,6 +6489,11 @@ markdown-it-emoji@^1.4.0:
resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz#9bee0e9a990a963ba96df6980c4fddb05dfb4dcc"
integrity sha1-m+4OmpkKljupbfaYDE/dsF37Tcw=
markdown-it-multimd-table@^4.2.3:
version "4.2.3"
resolved "https://registry.npmmirror.com/markdown-it-multimd-table/-/markdown-it-multimd-table-4.2.3.tgz#b81ac1f6c26482ddf0504c9e25583ad126c03dec"
integrity sha512-KepCr2OMJqm7IT6sOIbuqHGe+NERhgy66XMrc5lo6dHW7oaPzMDtYwR1EGwK16/blb6mCSg4jqityOe0o/H7HA==
markdown-it-table-of-contents@^0.4.0:
version "0.4.4"
resolved "https://registry.yarnpkg.com/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.4.4.tgz#3dc7ce8b8fc17e5981c77cc398d1782319f37fbc"
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册