diff --git a/README.md b/README.md index 23f420ccf947c17c67f8268db451c0e1b3a84cba..f37b47635bd2daf2ed268bbdc4d0fe32737d2813 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ `uni-app` 是一个使用 `Vue.js` 开发小程序、H5、App的统一前端框架。官网地址：[https://uniapp.dcloud.io](https://uniapp.dcloud.io) -开发者使用 `Vue` 语法编写代码，`uni-app` 框架将其编译到 小程序（微信/支付宝/百度/字节跳动/QQ/钉钉）、App（iOS/Android）、H5等多个平台，保证其正确运行并达到优秀体验。 +开发者使用 `Vue` 语法编写代码，`uni-app` 框架将其编译到 小程序（微信/支付宝/百度/字节跳动/QQ/快手/钉钉）、App（iOS/Android）、H5等多个平台，保证其正确运行并达到优秀体验。 # uni-app的特点 @@ -15,9 +15,9 @@ ## 扫码体验 -开发一次，编译到10个平台。依次扫描10个二维码，亲自体验最全面的跨平台效果！ +开发一次，编译到11个平台。依次扫描11个二维码，亲自体验最全面的跨平台效果！ - + *注： 某些平台不能提交简单demo，补充了一些其他功能。* diff --git a/docs/404.md b/docs/404.md deleted file mode 100644 index 1fc693b7c377ec0e137bdfbfbece6dfc4f9077f5..0000000000000000000000000000000000000000 --- a/docs/404.md +++ /dev/null @@ -1,2 +0,0 @@ -

页面迷路了

-

1. 请确认访问地址是否有误
2. 请检查网络环境是否通畅
3. 关闭广告屏蔽插件后重试

\ No newline at end of file diff --git a/docs/README.md b/docs/README.md index 59a744e7b3705edc3238dc42da9e7b6f112e2078..43e395fa0e9934c2d2a5bc12105972f62e85d360 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,187 +1,2 @@ - -```uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 - -`DCloud`公司拥有800万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（[详见](https://docs.alipay.com/mini/ide/0.70-stable)），腾讯课堂官方为uni-app录制培训课程（[详见](https://ask.dcloud.net.cn/article/35640)），开发者可以放心选择。 - -`uni-app`在手，做啥都不愁。即使不跨端，```uni-app```也是更好的小程序开发框架（[详见](https://ask.dcloud.net.cn/article/35947)）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。 - -
-

快速体验

-

一套代码编到10个平台，这不是梦想。眼见为实，扫描10个二维码，亲自体验最全面的跨平台效果！

-
- -
- -
- Android版 - - -
- -
- iOS版 - - -
- -
- Web版 - - -
- 微信小程序版 - -
-
- -
- 支付宝小程序版 - - -
- 百度小程序版 - - -
- -
- 字节跳动小程序版 - - -
- -
- 快应用 - -
-
- -
- -
- QQ小程序版 - - -
- -
- 360小程序 - - -
- 快手小程序版 - -
-

注：
- - 某些平台不能提交简单demo，故补充了一些其他功能；hello uni-app示例代码可从[github](https://github.com/dcloudio/hello-uniapp)获取
- - 快应用仅支持 vivo 、oppo、华为
- - 360小程序仅 windows平台支持，需要在360浏览器中打开
-

-
- -### uni-app视频介绍 - -我们精心准备了一个简单的十分钟介绍视频，方便你快速了解```uni-app```的主要特征： - - - - - -### 为什么要选择uni-app？ - -```uni-app```在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。 - -
-
-
- -
-
-
开发者/案例数量更多
-

数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数

-

跨端完善度更高，真正落地的提高生产力

-
-
-
-
- -
-
-
平台能力不受限
-

在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。

-

支持原生代码混写和原生sdk集成。

-
-
-
-
- -
-
-
性能体验优秀
-

加载新页面速度更快、自动diff更新数据。

-

App端支持原生渲染，可支撑更流畅的用户体验。

-

小程序端的性能优于市场其他框架。评测

-
-
-
-
- -
-
-
周边生态丰富
-

插件市场数千款插件。

-

支持NPM、支持小程序组件和SDK。

-

微信生态的各种sdk可直接用于跨平台App。

-
-
-
-
- -
-
-
学习成本低
-

基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。

-
-
-
-
- -
-
-
开发成本低
-

不止开发成本，招聘、管理、测试各方面成本都大幅下降。

-

HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（即便只开发一个平台）。

-
-
-
- - - -### 功能框架 - -从下面```uni-app```功能框架图可看出，```uni-app```在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。 - -![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/87a0a0d0-60aa-11eb-8ff1-d5dcf8779628.png) - -### 一套代码，运行到多个平台 - -```uni-app```实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）： - -![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/efd8e280-60a9-11eb-a16f-5b3e54966275.jpg) - -实际运行效果如下（点击图片可放大）： - -![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/ec6e95dd-77ad-4d14-aafa-ca503f5b9e53.jpg) +* [简体中文](https://github.com/dcloudio/unidocs-zh) +* [English](https://github.com/dcloudio/unidocs-en) diff --git a/docs/_navbar.md b/docs/_navbar.md deleted file mode 100644 index d52ccfa81edebed97e7260357f2bc26c454800b1..0000000000000000000000000000000000000000 --- a/docs/_navbar.md +++ /dev/null @@ -1,27 +0,0 @@ -* [介绍](README.md) -* [框架](collocation/pages.md) -* [组件](component/README.md) -* [API](api/README.md) -* [uniCloud](uniCloud/README.md) -* [其它规范](http://www.html5plus.org/doc/h5p.html) - - [App扩展规范HTML5 Plus](http://www.html5plus.org/doc/h5p.html) - - [微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/) - - [支付宝小程序](https://docs.alipay.com/mini/developer/getting-started) - - [百度小程序](https://smartprogram.baidu.com/docs/develop/tutorial/codedir/) - - [字节跳动小程序](https://developer.toutiao.com/dev/cn/mini-app/develop/component/introduction/basic-component) - - [QQ小程序](https://q.qq.com/wiki/develop/miniprogram/frame/) - - [华为快应用](https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-component-view) - - [360小程序](https://mp.360.cn/doc/miniprogram/dev/#/view) - - [Weex](https://weex.apache.org/cn/guide/) - - - -
- - - -
diff --git a/docs/_sidebar.md b/docs/_sidebar.md deleted file mode 100644 index 0efbcea302dda12508148e1b3992362ed4c09243..0000000000000000000000000000000000000000 --- a/docs/_sidebar.md +++ /dev/null @@ -1,130 +0,0 @@ -* [什么是 uni-app](README.md) -* 快速上手 - * [1. 通过 HBuilderX 可视化界面](quickstart-hx.md) - * [2. 通过vue-cli命令行](quickstart-cli.md) -* [uni-app的由来](history.md) -* [如何学习](resource.md) -* [框架简介](frame.md) -* vue教程 - * [基础](vue-basics.md) - * [组件](vue-components.md) - * [API](vue-api.md) - * [vuex](vue-vuex.md) -* nvue教程 - * [综述](nvue-outline.md) - * [样式](nvue-css.md) - * [API](nvue-api.md) - * [事件](nvue-event.md) -* [使用 HTML5+ 注意事项](use-html5plus.md) -* [条件编译 解决各端差异](platform.md) -* [uni-app 跨端开发注意](matter.md) -* [高效开发技巧](snippet.md) -* [性能优化建议](performance.md) -* [宽屏适配指南](adapt.md) -* [开放生态](ecosystem.md) -* [uni_modules插件规范](uni_modules.md) -* [从其他项目转uni-app](translate.md) -* [混合开发](hybrid.md) -* [uni小程序sdk](https://nativesupport.dcloud.net.cn/README) -* 运营服务 - * [App升级中心](uniCloud/upgrade-center.md) - * [uni一键登录](univerify.md) - * [统一推送uniPush](unipush.md) - * [uni统计](uni-stat.md) - * [广告变现](uni-ad.md) - * [统一发行页面](m3w.md) -* [案例](case.md) -* [选型评估指南](select.md) -* [应用市场上架](store.md) -* [常见问题](faq.md) -* 更新日志 - * [正式版](release.md) - * [Alpha版](release-note-alpha.md) - - -
  • 插件市场
    • -
  • 需求墙
    • -
  • 赞助我们
    • -
    - - -
    -
    uniCloud Web控制台
    -
    -     - - -
    -
    论坛
    -
    -     - - -
    -
    uniAD
    -
    -     - - -
    -
    uni统计
    -
    -     -
    - -
    -
    - 代码仓库：码云、GitHub -
    -
    -
    -
    - -
    -
    官方QQ交流群
    -
    群12：884860657  点此加入
    -
    群35：713420817（2000人已满）
    -
    群34：530305531（2000人已满）
    -
    群33：498071674（2000人已满）
    -
    群32：166188631（2000人已满）
    -
    群31：567471669（2000人已满）
    -
    群30：371046920（2000人已满）
    -
    群29：202965481（2000人已满）
    -
    群28：166188776（2000人已满）
    -
    群27：811363410（2000人已满）
    -
    群26：147867597（2000人已满）
    -
    群25：165297000（2000人已满）
    -
    群24：672494800（2000人已满）
    -
    群23：599958679（2000人已满）
    -
    群22：687186952（2000人已满）
    -
    群21：717019120（2000人已满）
    -
    群20：165796402（2000人已满）
    -
    群19：165657124（2000人已满）
    -
    群18：698592271（2000人已满）
    -
    群17：951348804（2000人已满）
    -
    群16：719211033（2000人已满）
    -
    群15：516984120（2000人已满）
    -
    群14：465953250（2000人已满）
    -
    群13：699478442（2000人已满）
    - -
    群11：296811328（2000人已满）
    -
    群10：959059626（2000人已满）
    -
    群9：775128777（2000人已满）
    -
    群8：695442854（2000人已满）
    -
    群7：942061423（2000人已满）
    -
    群6：697264024（2000人已满）
    -
    群5：731951419（2000人已满）
    -
    群4：942702595（2000人已满）
    -
    群3：773794803（2000人已满）
    -
    群2：901474938（2000人已满）
    -
    群1：531031261（2000人已满）
    -
    -
    -
    - -
    -
    关注微信公众号
    - -
    -
    -
    diff --git a/docs/adapt.md b/docs/adapt.md deleted file mode 100644 index b09c9637b2e6b1c1d38c174c99771701af2c7d02..0000000000000000000000000000000000000000 --- a/docs/adapt.md +++ /dev/null @@ -1,304 +0,0 @@ -#### 宽屏适配指南 - -uni-app是以移动为先的理念诞生的。从uni-app 2.9起，提供了PC等宽屏的适配方案，完成了全端统一。 - -PC适配和屏幕适配略有差异。PC适配包含`宽屏适配`和`uni-app内置组件适配PC`两方面的工作。 - -uni-app内置组件的PC适配，又包括`PC交互习惯的UI调整`和`非webkit浏览器适配`这两部分。这块工作不在本文的讨论范围内，尤其是开发者在PC端可以随意使用普通html元素和组件，不局限于uni-app内置组件。所以本文重点讨论屏幕适配。 - -uni-app提供的屏幕适配方案，包括3部分： - -#### 1. 页面窗体级适配方案：leftWindow、rightWindow、topWindow -以目前手机屏幕为主window，在左右上，可新扩展 leftWindow、rightWindow、topWindow，这些区域可设定在一定屏幕宽度范围自动出现或消失。这些区域各自独立，切换页面支持在各自的window内刷新，而不是整屏刷新。 - -各个window之间可以交互通信。 - -这里有2个例子： -- hello uni-app：[https://hellouniapp.dcloud.net.cn/](https://hellouniapp.dcloud.net.cn/) -- 分栏式的新闻模板：[https://static-7d133019-9a7e-474a-b7c2-c01751f00ca5.bspapp.com/#/](https://static-7d133019-9a7e-474a-b7c2-c01751f00ca5.bspapp.com/#/)，这个示例对应的源码在：[https://github.com/dcloudio/uni-template-news](https://github.com/dcloudio/uni-template-news) - - -以上示例建议使用最新版的chrome、Safari、或firefox访问。可以在PC模式和手机模式分别体验。以上示例源码的运行需使用HBuilderX 2.9+ - -这些例子特点如下： -- hello uni-app使用了topWindow和leftWindow，分为上左右3栏。新闻模板使用了rightWindow区域，分为左右2栏。宽屏下点击左边的列表在右边显示详情内容。而窄屏下仍然是点击列表后新开一个页面显示详情内容。 -- leftWindow或rightWindow 里的页面是复用的，不需要重写新闻详情页面，支持把已有详情页面当组件放到 leftWindow或rightWindow 页面中。 - -这套方案是已知的、最便捷的分栏式宽屏应用适配方案。 - -__H5 宽屏下 tabBar(选项卡) 与窗体的关系__ - -> 目前做如下调整：leftWindow、rightWindow、topWindow 中有其一存在，则 tabBar 隐藏；不存在，则不隐藏。 - -leftWindow等配置，在pages.json里进行。文档见：[https://uniapp.dcloud.net.cn/collocation/pages?id=topwindow](https://uniapp.dcloud.net.cn/collocation/pages?id=topwindow) - -pages.json 配置样例 - -```json -{ - "globalStyle": { - - }, - "topWindow": { - "path": "responsive/top-window.vue", // 指定 topWindow 页面文件 - "style": { - "height": "44px" - } - }, - "leftWindow": { - "path": "responsive/left-window.vue", // 指定 leftWindow 页面文件 - "style": { - "width": 300 - } - }, - "rightWindow": { - "path": "responsive/right-window.vue", // 指定 rightWindow 页面文件 - "style": { - "width": "calc(100vw - 400px)" // 页面宽度 - }, - "matchMedia": { - "minWidth": 768 //生效条件，当窗口宽度大于768px时显示 - } - } -} -``` - - -- leftWindow等方案的使用教程 - -如果已经有了一个为小屏设计的uni-app，在使用leftWindow等窗体适配大屏时，需理清一个思路：现有的小屏内容，放在哪个window里？ - -如果应用的首页是列表，二级页是详情，此时适合的做法是，将原有的小屏列表作为主window，在右边扩展rightWindow来显示详情。 - -以新闻示例项目为例，预览地址[https://static-7d133019-9a7e-474a-b7c2-c01751f00ca5.bspapp.com/#/](https://static-7d133019-9a7e-474a-b7c2-c01751f00ca5.bspapp.com/#/)。这个项目的源码已经内置于HBuilderX 2.9中，新建uni-app项目时选择新闻/资讯模板。 - -首先在这个项目的`pages.json`文件中，配置[`rightWindow`选项](https://uniapp.dcloud.net.cn/collocation/pages?id=rightwindow)，放置一个新页面`right-window.vue`。 -```json -# pages.json -"rightWindow": { - "path": "responsive/right-window.vue", - "style": { - "width": "calc(100vw - 450px)" - }, - "matchMedia": { - "minWidth": 768 - } - } -``` - -`rightWindow`对应的页面不需要重写一遍新闻详情的页面逻辑，只需要引入之前的详情页面组件（详情页面`/pages/detail/detail`可自动转化为`pages-detail-detail`组件使用）。 - -```html - - - - -``` - -然后在新闻列表页面，处理点击列表后与rightWindow交互通信的逻辑。 - -```js -// pages/news/news-page.nvue -goDetail(detail) { - if (this._isWidescreen) { //若为宽屏，则触发右侧详情页的自定义事件，通知右侧窗体刷新新闻详情 - uni.$emit('updateDetail', { - detail: encodeURIComponent(JSON.stringify(detail)) - }) - } else { // 若为窄屏，则打开新窗体，在新窗体打开详情页面 - uni.navigateTo({ - url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail)) - }); - } -}, - -``` - -可以看到，无需太多工作量，就可以快速把一个为手机窄屏开发的应用，快速适配为PC宽屏应用。并且以后的代码维护，仍然是同一套，当业务迭代时不需要多处升级。 - -rightWindow适用于分栏式应用，那leftWindow一般用于什么场景？ - -leftWindow比较适合放置导航页面。如果你的应用首页有很多tab和宫格导航，那么可以把它们重组，放在leftWindow作为导航。之前在手机竖屏上依靠多级tab和宫格导航的场景，可以在leftWindow里通过tree或折叠面板方式导航。 - -leftWindow除了适用于手机应用适配大屏，也适用于重新开发的PC应用，尤其是PC Admin管理控制台。 - -DCloud官方基于uni-app的pc版，推出了unicloud Admin：[https://uniapp.dcloud.net.cn/uniCloud/admin](https://uniapp.dcloud.net.cn/uniCloud/admin) - -目前的leftWindow、rightWindow、topWindow 只支持web端。计划后续在Pad App上实现该配置。小程序无法支持该配置。 - - -#### 2. 组件级适配方案：match-media组件 - -leftWindow等方案是页面窗体级适配方案。适于独立的页面。那么在同一个页面中，是否可以适配不同屏宽？当然可以，此时可以使用组件级适配方案。 - -uni-app提供了 [match-media组件](https://uniapp.dcloud.net.cn/component/match-media) 和配套的 [uni.createMediaQueryObserver](https://uniapp.dcloud.net.cn/api/ui/media-query-observer) 方法。 - -这是一个媒体查询适配组件，可以更简单的用于动态屏幕适配。 - -在`match-media`组件中放置内容，并为组件指定一组 media query 媒体查询规则，如屏幕宽度。运行时，如屏幕宽度满足查询条件，这个组件就会被展示，反之则隐藏。 - -`match-media`组件的优势包括： -1. 开发者能够更方便、显式地使用 Media Query 能力，而不是耦合在 CSS 文件中，难以复用。 -2. 能够在模板中结合数据绑定动态地使用，不仅能做到组件的显示或隐藏，在过程式 API 中可塑性更高，例如能够根据尺寸变化动态地添加 class 类名，改变样式。 -3. 能够嵌套式地使用 Media Query 组件，即能够满足局部组件布局样式的改变。 -4. 组件化之后，封装性更强，能够隔离样式、模版以及绑定在模版上的交互事件，还能够提供更高的可复用性。 - -它的详细文档参考：[https://uniapp.dcloud.net.cn/component/match-media](https://uniapp.dcloud.net.cn/component/match-media) - -当然，开发者也可以继续使用css媒体查询来适配屏幕，或者使用一些类似mobilehide、pcshow之类的css样式。 - -uni-app的屏幕适配推荐方案是运行时动态适配，而不是为PC版单独条件编译（虽然您也可以通过自定义条件编译来实现单独的PC版）。这样设计的好处是在ipad等设备的浏览器上可以方便的横竖屏切换。 - -#### 3. 内容缩放拉伸的处理 - -除了根据屏宽动态显示和隐藏内容，其实还有一大类屏幕适配需求，即：内容不会根据屏宽动态显示隐藏，而是缩放或拉伸。 - -具体来说，内容适应又有两种细分策略： -1. 局部拉伸：页面内容划分为固定区域和长宽动态适配区域，固定区域使用固定的px单位约定宽高，长宽适配区域则使用flex自动适配。当屏幕大小变化时，固定区域不变，而长宽适配区域跟着变化 -2. 等比缩放：根据页面屏幕宽度缩放。rpx其实属于这种类型。在宽屏上，rpx变大，窄屏上rpx变小。 - -举个实际的例子，比如一个列表页面，左边有一个图标，右边是2行文字。 -- 如果使用策略1，即局部拉伸，那么左边的图标部分固定一个宽高，右边的2行文字的大小也固定，但2行文字的宽度自适应，占满屏幕右侧的空间。也就是屏宽宽度变化后，只有2行文字的宽度在变化，其他一切不变。 -- 如果使用策略2，即等比缩放，那么整个列表均使用rpx，在宽屏上，图标变大、右边的2行文字变大，列表项行高变大。而在窄屏上，一切又都变小。 - -策略2省事，设计师按750px屏宽出图，程序员直接按rpx写代码即可。但策略2的实际效果不如策略1好。程序员使用策略1，分析下界面，设定好局部拉伸区域，这样可以有更好的用户体验。 - -这里需要对rpx的使用特别强调一下。 - -在移动设备上也有很多屏幕宽度，设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于，各种移动设备的屏幕宽度差异不是很大，相对于750px微调缩放后的效果，尽可能的还原了设计师的设计。 - -但是，一旦脱离移动设备，在pc屏幕，或者pad横屏状态下，因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期，大的惨不忍睹。 - -为此，在uni-app 2.9+起，新增了 rpx 按750px做基准屏宽的生效范围控制，并且将 rpx 的默认最大适配宽度设为了 960 px。 - -也就是设计师按750px出具的设计图，可适配的最大屏幕宽度为960px，在这个范围内，rpx可以根据屏幕宽度缩放。一旦超过960，rpx再根据屏幕宽度缩放就变的没有意义了。按如下配置，在超过960宽的屏幕上，会按375px作为基准宽度，这是最大程度上保持界面不失真的策略。 - -当然这些配置您都可以自己定义调整，在 pages.json 的 globeStyle 里配置 rpx 的如下参数。 - -```json -{ - "globalStyle": { - "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960 - "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375 - "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750 - }, -} -``` - -通过上述配置中的前2个，即rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth，即可有效解决使用了rpx后，在宽屏下界面变的奇大无比的问题。如果你不需要特别定义这2个参数的数值，则无需在`pages.json`中配置它们，保持默认的960和375即可。 - -但是，rpx的最大适配宽度被限定后，会带来一个新问题：如果您的代码中把750rpx当做100%来使用（官方强烈不推荐这种写法，即便是nvue不支持百分比，也应该使用flex来解决撑满问题），此时不管屏幕宽度为多少，哪怕超过了960px，您的预期仍然是要占满整个屏幕宽度，但如果按rpxCalcBaseDeviceWidth的375px的策略执行将不再占满屏宽。 - -此时您有两种解决方案，一种是修改代码，将里面把rpx当做百分比的代码改掉；另一种是配置rpxCalcIncludeWidth，设置某个特定数值不受rpxCalcMaxDeviceWidth约束。如上述例子中的"rpxCalcIncludeWidth": 750，代表着如果写了 750rpx，始终将按屏幕宽度百分百占满来计算。 - -- 关于 rpx 转 px - -不少开发者之前对rpx的使用过于没有节制，后来为了适配宽屏，想要改用“局部拉伸：页面内容划分为固定区域和长宽动态适配区域”的策略，此时将回归px。 - -比如[DCloud社区的宽屏适配示例](https://static-1afcc27f-ce2f-4a6d-9416-c65a6f87d24e.bspapp.com/#/)和[新闻模板](https://static-7d133019-9a7e-474a-b7c2-c01751f00ca5.bspapp.com)都没有使用rpx。 - -如果想把rpx转px，可以在源码里正则替换，也可以使用三方已经写好的单位转换库。下面介绍下三方库的用法。 - -项目根目录新增文件 `postcss.config.js`，内容如下。则在编译时，编译器会自动转换rpx单位为px。 - -** 注意：将rpx作为百分比的用法需要手动处理 - -```js -// postcss.config.js - -const path = require('path') -module.exports = { - parser: 'postcss-comment', - plugins: { - 'postcss-import': { - resolve(id, basedir, importOptions) { - if (id.startsWith('~@/')) { - return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3)) - } else if (id.startsWith('@/')) { - return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2)) - } else if (id.startsWith('/') && !id.startsWith('//')) { - return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1)) - } - return id - } - }, - 'autoprefixer': { - overrideBrowserslist: ["Android >= 4", "ios >= 8"], - remove: process.env.UNI_PLATFORM !== 'h5' - }, - // 借助postcss-px-to-viewport插件，实现rpx转px，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md - // 以下配置，可以将rpx转换为1/2的px，如20rpx=10px，如果要调整比例，可以调整 viewportWidth 来实现 - 'postcss-px-to-viewport': { - unitToConvert: 'rpx', - viewportWidth: 200, - unitPrecision: 5, - propList: ['*'], - viewportUnit: 'px', - fontViewportUnit: 'px', - selectorBlackList: [], - minPixelValue: 1, - mediaQuery: false, - replace: true, - exclude: undefined, - include: undefined, - landscape: false - }, - '@dcloudio/vue-cli-plugin-uni/packages/postcss': {} - } -} -``` - -#### 非webkit浏览器适配 - -uni-app理论上不限定浏览器。在HBuilderX 2.9发版时，就新闻示例项目，在chrome、Safari、firefox、edge的最新版上均测试过，可以正常使用。 - -一般国内的浏览器，如360浏览器、搜狗浏览器，均支持chrome内核，只要版本够新，应该都可以访问。 - -如果你的应用在其他PC浏览器下异常，请检查自己代码的浏览器兼容问题。 - -如果你发现了uni-app框架层面、内置组件有浏览器兼容问题，欢迎在github上给我们提交pr。 - -一般情况下，只要基础框架没有浏览器兼容问题，那么组件层面的问题也可以通过更换组件来解决。当uni-app编译到PC浏览器端时，支持所有的vue组件，包含那些操作了dom、window的ui库，比如elementUI等。 - -#### 一个让手机版网页临时可用于pc浏览器的方案 - -如果你的h5版已经开发完毕，还没来得及适配pc，但想在pc上先用起来。那么可以在pc网页里使用iframe，约定好宽度，在里面套用uni-app的窄屏版。 - -当然还可以在iframe旁边放置二维码，提供手机版扫码地址，例如： - -![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/979f7940-12ba-11eb-b680-7980c8a877b8.png) - -#### 通过electron打包为windows、mac、linux客户端 - -有了宽屏适配，uni-app的应用就可以方便的通过electron打包为电脑客户端应用，windows、mac、linux均支持。 - -开发者可以随意调用electron的API，以调用更多操作系统的能力（为方便多端兼容，可以将这些特殊API写在自定义的条件编译里） - -插件市场有已经封装好的一些插件，详见：[https://ext.dcloud.net.cn/search?q=electron](https://ext.dcloud.net.cn/search?q=electron) - -#### 响应式布局组件：uni-row - -流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。 - -该插件将屏幕分为五个档位：`<768px`、`>=768px`、`>=992px`、`>=1200px`、`>=1920px`。 - -对应的可以使用`xs`、`sm`、`md`、`lg`、`xl`来控制在不同分辨率下的显示效果。详情可在插件市场查看。 - -插件地址：https://ext.dcloud.net.cn/plugin?id=3958 diff --git a/docs/api/README.md b/docs/api/README.md deleted file mode 100644 index aaf468fbc97499f7d2a46e36d0edbe727cd87d9e..0000000000000000000000000000000000000000 --- a/docs/api/README.md +++ /dev/null @@ -1,510 +0,0 @@ -`uni-app`的js API由标准ECMAScript的js API 和 uni 扩展 API 这两部分组成。 - -标准ecmascript的API非常多，本文档没有必要列全，仅以console、settimeout为例做简要说明。扩展 API 命名与小程序相同。 - -## 标准js和浏览器js的区别 - -`uni-app`的js代码，h5端运行于浏览器中。非h5端，Android平台运行在v8引擎中，iOS平台运行在iOS自带的jscore引擎中。 - -非H5端，虽然不支持window、document、navigator等浏览器的js API，但也支持标准ECMAScript。 - -开发者不要把浏览器里的js等价于标准js。 - -ECMAScript由Ecma国际管理，是基础js语法。浏览器基于标准js扩充了window、document等js API；Node.js基于标准js扩充了fs等模块；小程序也基于标准js扩展了各种wx.xx、my.xx、swan.xx的API。 - -所以uni-app的非H5端，一样支持标准js，支持if、for等语法，支持字符串、数组、时间等变量及各种处理方法。仅仅是不支持浏览器专用对象。 - -## 各端特色API调用 - -除了uni-app框架内置的跨端API，各端自己的特色API也可通过[条件编译](https://uniapp.dcloud.io/platform)自由使用。 - -各端特色API规范参考各端的开发文档。其中App端的JS API参考[html5plus.org](https://www.html5plus.org/doc/h5p.html)；uni-app也支持通过扩展原生插件来丰富App端的开发能力，具体参考[插件开发文档](http://ask.dcloud.net.cn/article/35408) - -各平台的API新增，不需要uni-app升级，开发者就可以直接使用。 - -## 说明 - -- uni.on 开头的 API 是监听某个事件发生的 API 接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。 -- 如未特殊约定，其他 API 接口都接受一个 OBJECT 作为参数。 -- OBJECT 中可以指定 success，fail，complete 来接收接口调用结果。 -- **平台差异说明**若无特殊说明，则表示所有平台均支持。 - -## Promise 封装 - -uni-app 对部分 API 进行了 Promise 封装，返回数据的第一个参数是错误对象，第二个参数是返回数据。 - -详细策略如下： - -- 异步的方法，如果不传入 success、fail、complete 等 callback 参数，将以 Promise 返回数据。例如：uni.getImageInfo() -- 异步的方法且有返回对象，如果希望获取返回对象，必须至少传入一项 success、fail、complete 等 callback 参数。例如：uni.connectSocket() -- 同步的方法（即以 sync 结束），不封装 Promise。例如：uni.getSystemInfoSync() -- 以 create 开头的方法，不封装 Promise。例如：uni.createMapContext() -- 以 manager 结束的方法，不封装 Promise。例如：uni.getBackgroundAudioManager() - -使用示例： - -```js -// 默认方式 -uni.request({ - url: 'https://www.example.com/request', - success: (res) => { - console.log(res.data); - } -}); - -// Promise -uni.request({ - url: 'https://www.example.com/request' - }) - .then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据 - var [error, res] = data; - console.log(res.data); - }) - -// Await -async function request () { - var [error, res] = await uni.request({ - url: 'https://www.example.com/request' - }); - console.log(res.data); -} -``` - -### API 列表 -#### 网络 -##### 发起请求 - -|API|说明| -|:-|:-| -|[uni.request](api/request/request?id=request)|发起网络请求| -##### 上传、下载 - -|API|说明| -|:-|:-| -|[uni.uploadFile](api/request/network-file?id=uploadfile)|上传文件| -|[uni.downloadFile](api/request/network-file?id=downloadfile)|下载文件| -##### WebSocket - -|API|说明| -|:-|:-| -|[uni.connectSocket](api/request/websocket?id=connectsocket)|创建 WebSocket 连接| -|[uni.onSocketOpen](api/request/websocket?id=onsocketopen)|监听 WebSocket 打开| -|[uni.onSocketError](api/request/websocket?id=onsocketerror)|监听 WebSocket 错误| -|[uni.sendSocketMessage](api/request/websocket?id=sendsocketmessage)|发送 WebSocket 消息| -|[uni.onSocketMessage](api/request/websocket?id=onsocketmessage)|接受 WebSocket 消息| -|[uni.closeSocket](api/request/websocket?id=closesocket)|关闭 WebSocket 连接| -|[uni.onSocketClose](api/request/websocket?id=onsocketclose)|监听 WebSocket 关闭| -##### SocketTask - -|API|说明| -|---|---| -|[SocketTask.send](/api/request/socket-task?id=sockettasksend) |通过 WebSocket 连接发送数据 | -|[SocketTask.close](/api/request/socket-task?id=sockettaskclose) |关闭 WebSocket 连接 | -|[SocketTask.onOpen](/api/request/socket-task?id=sockettaskonopen) |监听 WebSocket 连接打开事件 | -|[SocketTask.onClose](/api/request/socket-task?id=sockettaskonclose) |监听 WebSocket 连接关闭事件 | -|[SocketTask.onError](/api/request/socket-task?id=sockettaskonerror) |监听 WebSocket 错误事件 | -|[SocketTask.onMessage](/api/request/socket-task?id=sockettaskonmessage) |监听 WebSocket 接受到服务器的消息事件 | - -#### 媒体 -##### 图片 - -|API|说明| -|:-|:-| -|[uni.chooseImage](api/media/image?id=chooseimage)|从相册选择图片，或者拍照| -|[uni.previewImage](api/media/image?id=previewimage)|预览图片| -|[uni.getImageInfo](api/media/image?id=getimageinfo)|获取图片信息| -|[uni.saveImageToPhotosAlbum](api/media/image?id=saveimagetophotosalbum)|保存图片到系统相册| -##### 文件 - -|API|说明| -|:-|:-| -|[uni.chooseFile](api/media/file?id=chooseFile)|从本地选择文件| -##### 录音管理 - -|API|说明| -|:-|:-| -|[uni.getRecorderManager](api/media/record-manager)|录音管理| -##### 背景音频播放管理 - -|API|说明| -|:-|:-| -|[uni.getBackgroundAudioManager](api/media/background-audio-manager)|背景音频播放管理| -##### 音频组件管理 - -|API|说明| -|:-|:-| -|[uni.createInnerAudioContext](api/media/audio-context)|音频组件管理| -##### 视频 - -|API|说明| -|:-|:-| -|[uni.chooseVideo](api/media/video?id=choosevideo)|从相册选择视频，或者拍摄| -|[uni.chooseMedia](api/media/video?id=choosemedia)|拍摄或从手机相册中选择图片或视频。| -|[uni.saveVideoToPhotosAlbum](api/media/video?id=savevideotophotosalbum)|保存视频到系统相册| -|[uni.createVideoContext](/api/media/video-context?id=createvideocontext)|视频组件管理| - -##### 相机组件管理 - -|API|说明| -|:-|:-| -|[uni.createCameraContext](api/media/camera-context.md)|相机组件管理| -##### 直播组件管理 - -|API|说明| -|:-|:-| -|[uni.createLivePlayerContext](api/media/live-player-context.md)|直播组件管理| - -#### 文件 - -|API|说明| -|:-|:-| -|[uni.saveFile](api/file/file?id=savefile)|保存文件| -|[uni.getSavedFileList](api/file/file?id=getsavedfilelist)|获取已保存的文件列表| -|[uni.getSavedFileInfo](api/file/file?id=getsavedfileinfo)|获取已保存的文件信息| -|[uni.removeSavedFile](api/file/file?id=removesavedfile)|删除已保存的文件信息| -|[uni.getFileInfo](/api/file/file?id=getfileinfo)|获取文件信息| -|[uni.openDocument](api/file/file?id=opendocument)|打开文件| - - -#### 数据缓存 - -|API|说明| -|:-|:-| -|[uni.getStorage](api/storage/storage?id=setstorage)|获取本地数据缓存| -|[uni.getStorageSync](api/storage/storage?id=setstoragesync)|获取本地数据缓存| -|[uni.setStorage](api/storage/storage?id=getstorage)|设置本地数据缓存| -|[uni.setStorageSync](api/storage/storage?id=getstoragesync)|设置本地数据缓存| -|[uni.getStorageInfo](api/storage/storage?id=getstorageinfo)|获取本地缓存的相关信息| -|[uni.getStorageInfoSync](api/storage/storage?id=getstorageinfosync)|获取本地缓存的相关信息| -|[uni.removeStorage](api/storage/storage?id=removestorage)|删除本地缓存内容| -|[uni.removeStorageSync](api/storage/storage?id=removestoragesync)|删除本地缓存内容| -|[uni.clearStorage](api/storage/storage?id=clearstorage)|清理本地数据缓存| -|[uni.clearStorageSync](api/storage/storage?id=clearstoragesync)|清理本地数据缓存| - - -#### 位置 -##### 获取位置 - -|API|说明| -|:-|:-| -|[uni.getLocation](api/location/location?id=getlocation)|获取当前位置| -|[uni.chooseLocation](api/location/location?id=chooselocation)|打开地图选择位置| -##### 查看位置 - -|API|说明| -|:-|:-| -|[uni.openLocation](api/location/open-location?id=openlocation)|打开内置地图| -##### 地图组件控制 - -|API|说明| -|:-|:-| -|[uni.createMapContext](api/location/map?id=createmapcontext)|地图组件控制| - - -#### 设备 -##### 系统信息 - -|API|说明| -|:-|:-| -|[uni.getSystemInfo](api/system/info?id=getsysteminfo)|获取系统信息| -|[uni.getSystemInfoSync](api/system/info?id=getsysteminfosync)|获取系统信息| -|[uni.canIUse](/api/system/info?id=caniuse)|判断应用的 API，回调，参数，组件等是否在当前版本可用| -##### 内存 - -|API|说明| -|:-|:-| -|[uni.onMemoryWarning](/api/system/memory?id=wxonmemorywarning)|监听内存不足告警事件| -##### 网络状态 - -|API|说明| -|:-|:-| -|[uni.getNetworkType](api/system/network?id=getnetworktype)|获取网络类型| -|[uni.onNetworkStatusChange](api/system/network?id=onnetworkstatuschange)|监听网络状态变化| -|[uni.offNetworkStatusChange](api/system/network?id=offnetworkstatuschange)|取消监听网络状态变化| -##### 加速度计 - -|API|说明| -|:-|:-| -|[uni.onAccelerometerChange](api/system/accelerometer?id=onaccelerometerchange)|监听加速度数据| -|[uni.offAccelerometerChange](api/system/accelerometer?id=offaccelerometerchange)|取消监听加速度数据| -|[uni.startAccelerometer](api/system/accelerometer?id=startaccelerometer)|开始监听加速度数据| -|[uni.stopAccelerometer](api/system/accelerometer?id=stopaccelerometer)|停止监听加速度数据| -##### 罗盘 - -|API|说明| -|:-|:-| -|[uni.onCompassChange](api/system/compass?id=oncompasschange)|监听罗盘数据| -|[uni.offCompassChange](api/system/compass?id=offcompasschange)|取消监听罗盘数据| -|[uni.startCompass](api/system/compass?id=startcompass)|开始监听罗盘数据| -|[uni.stopCompass](api/system/compass?id=stopcompass)|停止监听罗盘数据| -##### 陀螺仪 - -|API|说明| -|:-|:-| -|[uni.onGyroscopeChange](/api/system/gyroscope?id=ongyroscopechange)|监听陀螺仪数据| -|[uni.startGyroscope](/api/system/gyroscope?id=startgyroscope)|开始监听陀螺仪数据| -|[uni.stopGyroscope](/api/system/gyroscope?id=stopgyroscope)|停止监听陀螺仪数据| -##### 拨打电话 - -|API|说明| -|:-|:-| -|[uni.makePhoneCall](api/system/phone?id=makephonecall)|拨打电话| -##### 扫码 - -|API|说明| -|:-|:-| -|[uni.scanCode](api/system/barcode?id=scancode)|扫码| -##### 剪切板 - -|API|说明| -|:-|:-| -|[uni.setClipboardData](api/system/clipboard?id=setclipboarddata)|设置剪贴板内容| -|[uni.getClipboardData](api/system/clipboard?id=getclipboarddata)|获取剪贴板内容| -##### 屏幕亮度 - -|API|说明| -|:-|:-| -|[uni.setScreenBrightness](api/system/brightness?id=setscreenbrightness)|设置屏幕亮度| -|[uni.getScreenBrightness](api/system/brightness?id=getscreenbrightness)|获取屏幕亮度| -|[uni.setKeepScreenOn](api/system/brightness?id=setkeepscreenon)|设置是否保持常亮状态| -##### 用户截屏事件 - -|API|说明| -|:-|:-| -|[uni.onUserCaptureScreen](/api/system/capture-screen)|监听用户截屏事件| -##### 振动 - -|API|说明| -|:-|:-| -|[uni.vibrate](api/system/vibrate?id=vibrate)|使手机发生振动| -|[uni.vibrateLong](api/system/vibrate?id=vibratelong)|使手机发生较长时间的振动| -|[uni.vibrateShort](api/system/vibrate?id=vibrateshort)|使手机发生较短时间的振动| -##### 手机联系人 - -|API|说明| -|:-|:-| -|[uni.addPhoneContact](api/system/contact?id=addphonecontact)|添加手机通讯录| -##### 蓝牙 - -|API|说明| -|:-|:-| -|[uni.openBluetoothAdapter](/api/system/bluetooth?id=openbluetoothadapter)|初始化蓝牙模块| -|[uni.startBluetoothDevicesDiscovery](/api/system/bluetooth?id=startbluetoothdevicesdiscovery)|搜寻附近的蓝牙外围设备| -|[uni.onBluetoothDeviceFound](/api/system/bluetooth?id=onbluetoothdevicefound)|监听寻找到新设备的事件 | -|[uni.stopBluetoothDevicesDiscovery](/api/system/bluetooth?id=stopbluetoothdevicesdiscovery)|停止搜寻| -|[uni.onBluetoothAdapterStateChange](/api/system/bluetooth?id=onbluetoothadapterstatechange)|监听蓝牙适配器状态变化事件| -|[uni.getConnectedBluetoothDevices](/api/system/bluetooth?id=getconnectedbluetoothdevices)|根据 uuid 获取处于已连接状态的设备| -|[uni.getBluetoothDevices](/api/system/bluetooth?id=getbluetoothdevices)|获取已发现的蓝牙设备| -|[uni.getBluetoothAdapterState](/api/system/bluetooth?id=getbluetoothadapterstate)|获取本机蓝牙适配器状态| -|[uni.closeBluetoothAdapter](/api/system/bluetooth?id=closebluetoothadapter)|关闭蓝牙模块| -##### 低耗蓝牙 - -|API|说明| -|:-|:-| -|[uni.writeBLECharacteristicValue](/api/system/ble?id=writeblecharacteristicvalue)|向低功耗蓝牙设备特征值中写入二进制数据| -|[uni.readBLECharacteristicValue](/api/system/ble?id=readblecharacteristicvalue)|读取低功耗蓝牙设备的特征值的二进制数据值| -|[uni.onBLEConnectionStateChange](/api/system/ble?id=onbleconnectionstatechange)|监听低功耗蓝牙连接状态的改变事件| -|[uni.onBLECharacteristicValueChange](/api/system/ble?id=onblecharacteristicvaluechange)|监听低功耗蓝牙设备的特征值变化事件| -|[uni.notifyBLECharacteristicValueChange](/api/system/ble?id=notifyblecharacteristicvaluechange)|监听低功耗蓝牙设备的特征值变化事件| -|[uni.getBLEDeviceServices](/api/system/ble?id=getbledeviceservices)|获取蓝牙设备所有服务(service)| -|[uni.getBLEDeviceCharacteristics](/api/system/ble?id=getbledevicecharacteristics)|获取蓝牙设备某个服务中所有特征值(characteristic)| -|[uni.createBLEConnection](/api/system/ble?id=createbleconnection)|连接低功耗蓝牙设备| -|[uni.closeBLEConnection](/api/system/ble?id=closebleconnection)|断开与低功耗蓝牙设备的连接| -##### iBeacon - -|API|说明| -|:-|:-| -|[uni.onBeaconServiceChange](/api/system/ibeacon?id=onbeaconservicechange)|监听 iBeacon 服务状态变化事件| -|[uni.onBeaconUpdate](/api/system/ibeacon?id=onbeaconupdate)|监听 iBeacon 设备更新事件| -|[uni.getBeacons](/api/system/ibeacon?id=getbeacons)|获取所有已搜索到的 iBeacon 设备| -|[uni.startBeaconDiscovery](/api/system/ibeacon?id=startbeacondiscovery)|停止搜索附近的 iBeacon 设备| -|[uni.stopBeaconDiscovery](/api/system/ibeacon?id=stopbeacondiscovery)|开始搜索附近的 iBeacon 设备| - -##### 生物认证 - -|API|说明| -|:-|:-| -|[uni.startSoterAuthentication](/api/system/authentication?id=startsoterauthentication)|开始生物认证| -|[uni.checkIsSupportSoterAuthentication](/api/system/authentication?id=checkissupportsoterauthentication)|获取本机支持的生物认证方式| -|[uni.checkIsSoterEnrolledInDevice](/api/system/authentication?id=checkissoterenrolledindevice)|获取设备内是否录入如指纹等生物信息的接口| - -#### 界面 -##### 交互反馈 - -|API|说明| -|:-|:-| -|[uni.showToast](api/ui/prompt?id=showtoast)|显示提示框| -|[uni.showLoading](api/ui/prompt?id=showloading)|显示加载提示框| -|[uni.hideToast](api/ui/prompt?id=hidetoast)|隐藏提示框| -|[uni.hideLoading](api/ui/prompt?id=hideloading)|隐藏加载提示框| -|[uni.showModal](api/ui/prompt?id=showmodal)|显示模态弹窗| -|[uni.showActionSheet](api/ui/prompt?id=showactionsheet)|显示菜单列表| -##### 设置导航条 - -|API|说明| -|:-|:-| -|[uni.setNavigationBarTitle](api/ui/navigationbar?id=setnavigationbartitle)|设置当前页面标题| -|[uni.setNavigationBarColor](/api/ui/navigationbar?id=setnavigationbarcolor)|设置页面导航条颜色| -|[uni.showNavigationBarLoading](api/ui/navigationbar?id=shownavigationbarloading)|显示导航条加载动画| -|[uni.hideNavigationBarLoading](api/ui/navigationbar?id=hidenavigationbarloading)|隐藏导航条加载动画| -##### 设置TabBar - -|API|说明| -|:-|:-| -|[uni.setTabBarItem](/api/ui/tabbar?id=settabbaritem)|动态设置 tabBar 某一项的内容| -|[uni.setTabBarStyle](/api/ui/tabbar?id=settabbarstyle)|动态设置 tabBar 的整体样式| -|[uni.hideTabBar](/api/ui/tabbar?id=hidetabbar)|隐藏 tabBar| -|[uni.showTabBar](/api/ui/tabbar?id=showtabbar)|显示 tabBar| -|[uni.setTabBarBadge](/api/ui/tabbar?id=settabbarbadge)|为 tabBar 某一项的右上角添加文本| -|[uni.removeTabBarBadge](/api/ui/tabbar?id=removetabbarbadge)|移除 tabBar 某一项右上角的文本| -|[uni.showTabBarRedDot](/api/ui/tabbar?id=showtabbarreddot)|显示 tabBar 某一项的右上角的红点| -|[uni.hideTabBarRedDot](/api/ui/tabbar?id=hidetabbarreddot)|隐藏 tabBar 某一项的右上角的红点| -##### 背景 - -|API|说明| -|:-|:-| -|[uni.setBackgroundColor](/api/ui/bgcolor?id=setbackgroundcolor)|动态设置窗口的背景色。| -|[uni.setBackgroundTextStyle](/api/ui/bgcolor?id=setbackgroundtextstyle)|动态设置下拉背景字体、loading 图的样式。| - -##### 动画 - -|API|说明| -|:-|:-| -|[uni.createAnimation](/api/ui/animation?id=createanimation)|创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。| - -##### 滚动 - -|API|说明| -|:-|:-| -|[uni.pageScrollTo](/api/ui/scroll?id=pagescrollto)|将页面滚动到目标位置。| - -##### 绘画 - -|API|说明| -|:-|:-| -|[uni.createCanvasContext](/api/canvas/createCanvasContext)|创建绘图上下文| -|[uni.canvasToTempFilePath](/api/canvas/canvasToTempFilePath)|将画布内容保存成文件| -|[uni.canvasGetImageData](/api/canvas/canvasGetImageData)|获取画布图像数据| -|[uni.canvasPutImageData](/api/canvas/canvasPutImageData)|设置画布图像数据| -##### 下拉刷新 - -|API|说明| -|:-|:-| -|[onPullDownRefresh](/api/ui/pulldown?id=onpulldownrefresh)|监听该页面用户下拉刷新事件| -|[uni.startPullDownRefresh](/api/ui/pulldown?id=startpulldownrefresh)|开始下拉刷新| -|[uni.stopPullDownRefresh](/api/ui/pulldown?id=stoppulldownrefresh)|停止当前页面下拉刷新| -##### 节点信息 - -|API|说明| -|:-|:-| -|[uni.createSelectorQuery](api/ui/nodes-info?id=createselectorquery)|创建查询请求| -|[selectorQuery.select](/api/ui/nodes-info?id=selectorquery-对象的方法列表)|根据选择器选择单个节点| -|[selectorQuery.selectAll](/api/ui/nodes-info?id=selectorquery-对象的方法列表)|根据选择器选择全部节点| -|[selectorQuery.selectViewport](/api/ui/nodes-info?id=selectorquery-对象的方法列表)|选择显示区域| -|[selectorQuery.exec](/api/ui/nodes-info?id=selectorquery-对象的方法列表)|执行查询请求| -|[nodesRef.boundingClientRect](/api/ui/nodes-info?id=nodesref-对象的方法列表)|获取布局位置和尺寸| -|[nodesRef.scrollOffset](/api/ui/nodes-info?id=nodesref-对象的方法列表)|获取滚动位置| -|[nodesRef.fields](/api/ui/nodes-info?id=nodesref-对象的方法列表)|获取任意字段| -##### 节点布局相交状态 - -|API|说明| -|:-|:-| -|[uni.createIntersectionObserver](api/ui/intersection-observer?id=createintersectionobserver)|创建 IntersectionObserver 对象| -|[intersectionObserver.relativeTo](/api/ui/intersection-observer?id=intersectionobserver-对象的方法列表)|指定参照节点| -|[intersectionObserver.relativeToViewport](/api/ui/intersection-observer?id=intersectionobserver-对象的方法列表)|指定页面显示区域作为参照区域| -|[intersectionObserver.observe](/api/ui/intersection-observer?id=intersectionobserver-对象的方法列表)|指定目标节点并开始监听| -|[intersectionObserver.disconnect](/api/ui/intersection-observer?id=intersectionobserver-对象的方法列表)|停止监听| - - -#### 路由 - -|API|说明| -|:-|:-| -|[uni.navigateTo](/api/router?id=navigateto)|保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面| -|[uni.redirectTo](/api/router?id=redirectto)|关闭当前页面，跳转到应用内的某个页面| -|[uni.reLaunch](/api/router?id=relaunch)|关闭所有页面，打开到应用内的某个页面| -|[uni.switchTab](/api/router?id=switchtab)|跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面| -|[uni.navigateBack](/api/router?id=navigateback)|关闭当前页面，返回上一页面或多级页面| - - - -#### 第三方服务 - -|API|说明| -|:-|:-| -|[uni.getProvider](api/plugins/provider?id=getprovider)|获取服务供应商| -|[uni.login](api/plugins/login?id=login)|登录| -|[uni.getUserInfo](api/plugins/login?id=getuserinfo)|获取用户信息| -|[uni.share](api/plugins/share?id=share)|分享| -|[uni.shareWithSystem](api/plugins/share?id=sharewithsystem)|使用系统分享| -|[uni.requestPayment](api/plugins/payment?id=requestpayment)|支付| -|[uni.subscribePush](api/plugins/push?id=subscribepush)|开启推送| -|[uni.unsubscribePush](api/plugins/push?id=unsubscribepush)|关闭推送| -|[uni.onPush](api/plugins/push?id=onpush)|监听透传数据| -|[uni.offPush](api/plugins/push?id=offpush)|移除监听透传数据| - -#### 平台扩展 - -|API|说明| -|:-|:-| -|[uni.requireNativePlugin](/api/extend/native-plugin?id=requirenativeplugin)|引入 App 原生插件| - -#### 其他 -##### 授权 - -|API|说明| -|:-|:-| -|[uni.authorize](/api/other/authorize?id=authorize)|提前向用户发起授权请求| -##### 设置 - -|API|说明| -|:-|:-| -|[uni.openSetting](/api/other/setting?id=opensetting)|调起客户端小程序设置界面，返回用户设置的操作结果。| -|[uni.getSetting](/api/other/setting?id=getsetting)|获取用户的当前设置。| -##### 收货地址 - -|API|说明| -|:-|:-| -|[uni.chooseAddress](/api/other/choose-address?id=chooseaddress)|获取用户收货地址| -##### 获取发票抬头 - -|API|说明| -|:-|:-| -|[uni.chooseInvoiceTitle](/api/other/invoice-title?id=chooseinvoicetitle)|选择用户的发票抬头，需要用户授权 scope.invoiceTitle。| -##### 小程序跳转 - -|API|说明| -|:-|:-| -|[uni.navigateToMiniProgram](/api/other/open-miniprogram?id=navigatetominiprogram)|打开另一个小程序。| -|[uni.navigateBackMiniProgram](/api/other/open-miniprogram?id=navigatebackminiprogram)|跳转回上一个小程序，只有当另一个小程序跳转到当前小程序时才会能调用成功。| -##### 模板消息 - -|API|说明| -|:-|:-| -|[addTemplate](/api/other/template?id=addtemplate)|组合模板并添加至帐号下的个人模板库。| -|[deleteTemplate](/api/other/template?id=deletetemplate)|删除帐号下的某个模板。| -|[getTemplateLibraryById](/api/other/template?id=gettemplatelibrarybyid)|获取模板库某个模板标题下关键词库。| -|[getTemplateLibraryList](/api/other/template?id=gettemplatelibrarylist)|获取APP模板库标题列表| -|[getTemplateList](/api/other/template?id=gettemplatelist)|获取帐号下已存在的模板列表。| -|[sendTemplateMessage](/api/other/template?id=sendtemplatemessage)|发送模板消息| -|[alipay.open.app.mini.templatemessage.send](/api/other/template?id=alipayopenappminitemplatemessagesend)|支付宝小程序通过 openapi 给用户触达消息，主要为支付后的触达（通过消费id）和用户提交表单后的触达（通过formId）。| -##### 小程序更新 - -|API|说明| -|:-|:-| -|[uni.getUpdateManager](/api/other/update?id=getupdatemanager)|返回全局唯一的版本更新管理器对象： updateManager，用于管理小程序更新。| -##### 调试 - -|API|说明| -|:-|:-| -|[uni.setEnableDebug](/api/other/set-enable-debug?id=setenabledebug)|设置是否打开调试开关。此开关对正式版也能生效。| - -##### 获取第三方平台数据 - -|API|说明| -|:-|:-| -|[uni.getExtConfig](/api/other/get-extconfig?id=getextconfig)|获取第三方平台自定义的数据字段。| -|[uni.getExtConfigSync](/api/other/get-extconfig?id=getextconfigsync)|uni.getExtConfig 的同步版本。| - - - diff --git a/docs/api/_sidebar.md b/docs/api/_sidebar.md deleted file mode 100644 index 549ca46b6303b89a5a3896c2ba39e49e869c964d..0000000000000000000000000000000000000000 --- a/docs/api/_sidebar.md +++ /dev/null @@ -1,232 +0,0 @@ -* 基础 - * [日志打印](api/log.md) - * [定时器](api/timer.md) - * [uni.base64ToArrayBuffer](api/base64ToArrayBuffer?id=base64toarraybuffer) - * [uni.arrayBufferToBase64](api/arrayBufferToBase64?id=arraybuffertobase64) - * [生命周期](api/lifecycle.md) - * [应用级事件](api/application.md) - * [拦截器](api/interceptor.md) - * [全局API](api/global.md) -* 网络 - * [发起请求](api/request/request.md) - * [上传、下载](api/request/network-file.md) - * [WebSocket](api/request/websocket.md) - * [SocketTask](api/request/socket-task.md) - * [mDNS](api/request/mDNS.md) - * [UDP 通信](api/request/UDP.md) -* 路由与页面跳转 - * [uni.navigateTo](/api/router?id=navigateto) - * [uni.redirectTo](/api/router?id=redirectto) - * [uni.reLaunch](/api/router?id=relaunch) - * [uni.switchTab](/api/router?id=switchtab) - * [uni.navigateBack](/api/router?id=navigateback) - * [uni.preloadPage](/api/preload-page) - * [窗口动画](/api/router?id=animation) -* 数据缓存 - * [uni.setStorage](/api/storage/storage?id=setstorage) - * [uni.setStorageSync](/api/storage/storage?id=setStorageSync) - * [uni.getStorage](/api/storage/storage?id=getStorage) - * [uni.getStorageSync](/api/storage/storage?id=getStorageSync) - * [uni.getStorageInfo](/api/storage/storage?id=getStorageInfo) - * [uni.getStorageInfoSync](/api/storage/storage?id=getStorageInfoSync) - * [uni.removeStorage](/api/storage/storage?id=removeStorage) - * [uni.removeStorageSync](/api/storage/storage?id=removeStorageSync) - * [uni.clearStorage](/api/storage/storage?id=clearStorage) - * [uni.clearStorageSync](/api/storage/storage?id=clearstoragesync) -* 位置 - * [获取位置](api/location/location.md) - * [查看位置](api/location/open-location.md) - * [地图组件控制](api/location/map.md) -* 媒体 - * [图片](api/media/image.md) - * [文件](api/media/file.md) - * [录音管理](api/media/record-manager.md) - * [背景音频播放管理](api/media/background-audio-manager.md) - * [音频组件控制](api/media/audio-context.md) - * [视频](api/media/video.md) - * [视频组件控制](api/media/video-context.md) - * [相机组件控制](api/media/camera-context.md) - * [直播组件控制](api/media/live-player-context.md) - * [富文本](api/media/editor-context.md) - * [音视频合成](api/media/media-container.md) -* 设备 - * [系统信息](api/system/info.md) - * [内存](api/system/memory.md) - * [网络状态](api/system/network.md) - * [系统主题](api/system/theme.md) - * [加速度计](api/system/accelerometer.md) - * [罗盘](api/system/compass.md) - * [陀螺仪](api/system/gyroscope.md) - * [拨打电话](api/system/phone.md) - * [扫码](api/system/barcode.md) - * [剪贴板](api/system/clipboard.md) - * [屏幕](api/system/brightness.md) - * [用户截屏事件](api/system/capture-screen.md) - * [振动](api/system/vibrate.md) - * [手机联系人](api/system/contact.md) - * [蓝牙](api/system/bluetooth.md) - * [低功耗蓝牙](api/system/ble.md) - * [iBeacon](api/system/ibeacon.md) - * [Wi-Fi](api/system/wifi.md) - * [电量](api/system/batteryInfo.md) - * [NFC](api/system/nfc.md) - * [设备方向](api/system/deviceMotion.md) - * [生物认证](api/system/authentication.md) -* [Worker](api/worker.md) -* 键盘 - * [uni.hideKeyboard](/api/key?id=hidekeyboard) - * [uni.onKeyboardHeightChange](/api/key?id=onkeyboardheightchange) - * [uni.offKeyboardHeightChange](/api/key?id=offkeyboardheightchange) -* 界面 - * [交互反馈](api/ui/prompt.md) - * [设置导航条](api/ui/navigationbar.md) - * [设置TabBar](api/ui/tabbar.md) - * [背景](api/ui/bgcolor.md) - * [动画](api/ui/animation?id=unicreateanimationobject) - * [滚动](api/ui/scroll) - * [窗口](api/ui/window.md) - * [宽屏适配](api/ui/adapt.md) - * [字体](api/ui/font.md) - * [下拉刷新](api/ui/pulldown.md) - * [节点信息](api/ui/nodes-info.md) - * [节点布局相交状态](api/ui/intersection-observer.md) - * [媒体查询](api/ui/media-query-observer.md) - * [自定义组件](api/ui/nextTick.md) - * [菜单](api/ui/menuButton.md) - * [语言](api/ui/locale.md) -* 页面和窗体 - * [页面](api/window/window.md) - * [页面通讯](api/window/communication.md) - * [subNVue原生子窗体](api/window/subNVues.md) -* 文件 - * [uni.saveFile](/api/file/file?id=savefile) - * [uni.getSavedFileList](/api/file/file?id=getSavedFileList) - * [uni.getSavedFileInfo](/api/file/file?id=getSavedFileInfo) - * [uni.removeSavedFile](/api/file/file?id=removeSavedFile) - * [uni.getFileInfo](/api/file/file?id=getFileInfo) - * [uni.openDocument](/api/file/file?id=openDocument) - * [uni.getFileSystemManager](/api/file/getFileSystemManager) -* 绘画 - * [uni.createOffscreenCanvas](api/canvas/createOffscreenCanvas.md) - * [uni.createCanvasContext](api/canvas/createCanvasContext.md) - * [uni.canvasToTempFilePath](api/canvas/canvasToTempFilePath.md) - * [uni.canvasPutImageData](api/canvas/canvasPutImageData.md) - * [uni.canvasGetImageData](api/canvas/canvasGetImageData.md) - * [CanvasContext](api/canvas/CanvasContext.md) - * [CanvasGradient](api/canvas/CanvasGradient.md) -* 广告 - * [激励视频广告](api/a-d/rewarded-video.md) - * [全屏视频广告](api/a-d/full-screen-video.md) - * [内容联盟广告](api/a-d/content-page.md) - * [插屏广告](api/a-d/interstitial.md) - * [互动游戏](api/a-d/interactive.md) -* 第三方服务 - * [获取服务供应商](api/plugins/provider.md) - * [登录](api/plugins/login.md) - * [分享](api/plugins/share.md) - * [支付](api/plugins/payment.md) - * [推送](api/plugins/push.md) - * [语音](api/plugins/voice.md) - * [一键生成iOS通用链接](api/plugins/universal-links.md) -* [uniCloud](api/uniCloud.md) -* 平台扩展 - * [App原生插件](api/extend/native-plugin.md) -* 其他 - * [授权](api/other/authorize.md) - * [设置](api/other/setting.md) - * [收货地址](api/other/choose-address.md) - * [获取发票抬头](api/other/invoice-title.md) - * [小程序跳转](api/other/open-miniprogram.md) - * [账号信息](api/other/getAccountInfoSync.md) - * [运动(计步器)](api/other/sport.md) - * [统计](api/other/report.md) - * [卡券](api/other/card.md) - * [模板消息](api/other/template.md) - * [订阅消息](api/other/requestSubscribeMessage.md) - * [小程序更新](api/other/update.md) - * [调试](api/other/set-enable-debug.md) - * [获取第三方平台数据](api/other/get-extconfig.md) -
  • -
    - - -
    -
    uniCloud Web控制台
    -
    -     - - -
    -
    论坛
    -
    -     - - -
    -
    uniAD
    -
    -     - - -
    -
    uni统计
    -
    -     -
    - -
    -
    - 代码仓库：码云、GitHub -
    -
    -
    -
    - -
    -
    官方QQ交流群
    -
    群8：695442854  点此加入
    -
    群35：713420817（2000人已满）
    -
    群34：530305531（2000人已满）
    -
    群33：498071674（2000人已满）
    -
    群32：166188631（2000人已满）
    -
    群31：567471669（2000人已满）
    -
    群30：371046920（2000人已满）
    -
    群29：202965481（2000人已满）
    -
    群28：166188776（2000人已满）
    -
    群27：811363410（2000人已满）
    -
    群26：147867597（2000人已满）
    -
    群25：165297000（2000人已满）
    -
    群24：672494800（2000人已满）
    -
    群23：599958679（2000人已满）
    -
    群22：687186952（2000人已满）
    -
    群21：717019120（2000人已满）
    -
    群20：165796402（2000人已满）
    -
    群19：165657124（2000人已满）
    -
    群18：698592271（2000人已满）
    -
    群17：951348804（2000人已满）
    -
    群16：719211033（2000人已满）
    -
    群15：516984120（2000人已满）
    -
    群14：465953250（2000人已满）
    -
    群13：699478442（2000人已满）
    -
    群12：884860657（2000人已满）
    -
    群11：296811328（2000人已满）
    -
    群10：959059626（2000人已满）
    -
    群9：775128777（2000人已满）
    - -
    群7：942061423（2000人已满）
    -
    群6：697264024（2000人已满）
    -
    群5：731951419（2000人已满）
    -
    群4：942702595（2000人已满）
    -
    群3：773794803（2000人已满）
    -
    群2：901474938（2000人已满）
    -
    群1：531031261（2000人已满）
    -
    -
    -
    - -
    -
    关注微信公众号
    - -
    -
    -
    diff --git a/docs/api/a-d/content-page.md b/docs/api/a-d/content-page.md deleted file mode 100644 index 3734dd4d0259c3465de1c78384e33626c948f535..0000000000000000000000000000000000000000 --- a/docs/api/a-d/content-page.md +++ /dev/null @@ -1,93 +0,0 @@ -### 短视频内容联盟广告 - -简介 - -⼀个视频内容频道，支持上下滑动切换视频内容 - -![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/673f23ff-0924-4302-8467-9c1c1fd03b96.png) - - -内容联盟广告是一个原生全屏组件，大小不可控制 - -如果需要嵌入到页面控制大小请使用 [短视频内容联盟组件](https://uniapp.dcloud.net.cn/component/ad-content-page) - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√（3.1.5+）|x|x|x|x|x|x|x| - -**开通配置广告** - -开通广告步骤： -1. 开通广告 -需在广告平台后台操作： - * App平台：[https://uniad.dcloud.net.cn/](https://uniad.dcloud.net.cn/) -2. 申请广告位id -在各位后台申请广告位id -3. App端打包后生效，打包时必须选择要集成的广告SDK（目前仅支持快手内容联盟）。 - - -### 语法 - -`plus.ad.showContentPage(options, success, fail)` - -### 参数说明 - -`options` 为 object 类型，属性如下： - -|属性名 |类型 |必填 |描述 | -|:-:|:-:|:-:|:-:| -|adpid |string | 是|广告位 id | -|background |string | 否|背景颜色，不支持透明度 | - -`success` 为 function 类型，加载成功后的回调 - -`fail` 为 function 类型，加载失败后的回调 - -HBuilder 基座的测试广告位 `adpid` 为 `1111111112` - - -示例代码 - -```html - - - -``` diff --git a/docs/api/a-d/full-screen-video.md b/docs/api/a-d/full-screen-video.md deleted file mode 100644 index b2b9ee3a93f9b8669d7539f9a9a01507261fbddb..0000000000000000000000000000000000000000 --- a/docs/api/a-d/full-screen-video.md +++ /dev/null @@ -1,124 +0,0 @@ -### 全屏视频广告 - -全屏视频广告是一个原生组件，层级比普通组件高。全屏视频广告每次创建都会返回一个全新的实例，默认是隐藏的，需要调用 FullScreenVideoAd.show() 将其显示。 - -如何开通参考激励视频广告 [https://uniapp.dcloud.net.cn/api/a-d/rewarded-video](https://uniapp.dcloud.net.cn/api/a-d/rewarded-video) - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√（2.9.5+）|x|x|x|x|x|x|x| - -uni.createFullScreenVideoAd(Object) - -|属性|类型|必填|说明| -|:-:|:-:|:-:|:-:| -|adpid|string|是|广告位 id| - - -#### 方法 - -加载全屏视频广告。 - -`Promise FullScreenVideoAd.load()` - - -显示全屏视频广告。 - -`Promise FullScreenVideoAd.show()` - - -销毁全屏视频广告实例。 - -`FullScreenVideoAd.destroy()` - - -监听全屏视频广告加载事件。 - -`FullScreenVideoAd.onLoad(function callback)` - - -监听全屏视频错误事件。 - -`FullScreenVideoAd.onError(function callback)` - - -监听全屏视频广告关闭事件。 - -`FullScreenVideoAd.onClose(function callback)` - - -示例代码 -```html - - - - -``` diff --git a/docs/api/a-d/interactive.md b/docs/api/a-d/interactive.md deleted file mode 100644 index 79d0e7d1e1d305801fb1eaddf5ef566e4ea98cbc..0000000000000000000000000000000000000000 --- a/docs/api/a-d/interactive.md +++ /dev/null @@ -1,410 +0,0 @@ -# 互动游戏 - -## 简介 - -互动游戏是DCloud联合三方服务商为开发者提供新的广告场景增值服务。开发者在App中放置入口，用户点击入口参与权益化、趣味性的活动。通过观看激励视频广告加速获取权益。沉浸的游戏体验能够降低对广告的抵触心理，增加激励视频广告展示的同时有效提高广告收益。 - -![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/c19c9518-c953-49c3-89a0-33a1e595be7f.png) - - -## 活动场景类型： - -共抽奖类、游戏类、养成类3种场景类型，开发者可根据自身情况选择活动类型： - -1. 抽奖类活动：通过转盘、扭蛋、摇骰子等抽奖玩法获得奖品碎片或红包奖励 -2. 游戏类活动：通过合成游戏、成语答题、捕鱼等游戏玩法获得金币或红包奖励 -3. 养成类活动：果园、农场、养牛等长期活动，用户通过连续签到、道具收集、任务体系等玩法提升养成对象的等级，升级后可获得红包奖励或兑换奖品 - -![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/994e3f54-d498-4642-8e61-3177dcfef63a.jpg) - -### 活动分类表 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    活动分类活动名称发放奖励活动周期是否支持积分打通
    抽奖集碎片多奖品7天
    印钞机现金7天
    扭蛋机多奖品7天
    游戏大富翁现金7天支持
    成语大赢家现金7天
    合成招财猫现金7天
    捕鱼达人现金长期新增支持
    养成福牛现金7天
    果园水果长期
    农场现金30天
    养鸡现金长期
    走路赚现金7天支持
    - -注：活动名称在开通时不能选择，如需修改，请邮件联系[uniad@dcloud.io](mailto:uniad@dcloud.io) - - -## 关于奖励发放的说明 - -互动游戏的目的是吸引用户参与活动，引导用户观看广告，通过活动获取奖励，满足特定条件后需要向用户发放奖励。目前有两种奖励发放方式，一种是由DCloud联合三方服务商为开发者提供用户奖励线下代发；一种是由开发者对接App自身积分系统，将用户奖励转换为App积分，提高用户参与度和体验。 - -### 用户奖励线下代发服务 -默认使用用户奖励线下代发服务，具体说明如下： -1. 用户参与以上活动达到一定资产时（奖品碎片或金币到达兑换门槛，红包金额到达提现门槛），可发起兑奖申请。如用户申请提现，需要填写收款的支付宝或微信账号；如用户申请兑换虚拟或者实物奖品，需要填写联系人联系方式和收货地址等；具体以兑奖弹窗为准。 -2. 用户提交兑奖申请后，客服将在5个工作日内确认，确认后将尽快为您进行发货，如实物奖品有发货时间较长等问题请联系客服。 -3. 如实物奖品（水果生鲜等）因为时令问题、疫情区域或者新疆、西藏等偏远地区暂时无法寄送，客服将联系用户赠送奖品价值相等的现金奖励。 -4. 实物奖品发放后,快递配送请在24小时内收货,如有质量问题,请于签收后48小时内进行售后申请,超出时间不予赔付。 -5. 用户不得使用任何外挂、插件以及其他破坏破坏活动规则、违背活动公平原则的方式参加本次活动，否则服务商有权取消用户参与活动的资格以及清空获得的奖励。 - - -### 用户奖励对接App积分 - -积分对接需要开发者业务系统与三方服务商的互动游戏进行对接，需要一定的开发工作量，请邮件联系[uniad@dcloud.io](mailto:uniad@dcloud.io) - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|App 3.1.15+|x|x|x|x|x|x|x| - -**开通配置广告** - -开通广告步骤： -1. 开通广告 -需在广告平台后台操作： - * App平台：[https://uniad.dcloud.net.cn/](https://uniad.dcloud.net.cn/) -2. 申请广告位id -在各位后台申请广告位id -3. App端打包后生效，打包时必须选择要集成的广告SDK互动游戏(变现猫)，优量汇、穿山甲、快手至少选择其中一个。 - -### 语法 - -`uni.createInteractiveAd(options)` - -### 参数说明 - -`options` 为 object 类型，属性如下： - -|属性名 |类型 |必填 |描述 | -|:-:|:-:|:-:|:-:| -|adpid |string | 是 |广告位 id | -|provider |string | 是 |服务商标识，即插件id | -|userData |object | 否 |对接App积分系统参数 | - - -### 广告创建 - -广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。开发者可以在页面的 onReady 事件回调中创建广告实例，并在该页面的生命周期内重复调用该广告实例。 - - -### 显示/隐藏 - -广告组件默认是隐藏的，开发者需要调用 CreateInteractiveAd.show() 进行显示。如果广告拉取失败或触发频率限制，CreateInteractiveAd.show() 方法会返回一个rejected Promise，开发者可自行监听错误信息 - -```js -CreateInteractiveAd.show().catch((err) => { - console.error(err) -}) -``` - -用户可以主动关闭广告。开发者不可控制广告组件的隐藏。 - - -### 监听广告加载成功事件 - -如果广告加载成功，通过 CreateInteractiveAd.onLoad() 注册的回调函数会执行，回调函数返回广告素材参数。 - - -|属性名 |类型 |描述 | -|:-:|:-:|:-:| -|imgUrl |string | 广告素材图片的url地址 | - - -```js -CreateInteractiveAd.onLoad(res => { - console.log('图片素材地址', res.imgUrl); - console.log('广告加载成功'); -}) -``` - - -HBuilder基座的测试广告位 adpid: `1042956255` (游戏); `1620839118` (抽奖); `1064042976` (养成) - - -示例代码 - -```html - - - - -``` - - -#### 方法 - -`Promise CreateInteractiveAd.load()` - -加载广告。 - -`Promise CreateInteractiveAd.show()` - -显示广告。 - -`CreateInteractiveAd.reportExposure()` - -场景入口曝光打点。 - -`CreateInteractiveAd.destroy()` - -销毁广告实例。 - -`CreateInteractiveAd.onLoad(function callback)` - -监听广告加载事件。 - -`CreateInteractiveAd.offLoad(function callback)` - -取消监听广告加载事件 - -`CreateInteractiveAd.onError(function callback)` - -监听错误事件。 - -`CreateInteractiveAd.offError(function callback)` - -取消监听错误事件 - - -### 积分对接 - -### 开通 - -1. 开发者需要提供广告位 `adpid` -2. 开发者需要提供服务器接口 - 1. 获取积分接口 - 2. 操作积分接口 -4. 三方服务商需要提供 `secretKey` 让开发者来验签请求来源 - - -### 获取积分 - -简要描述： - -该接口用于获取用户总积分数量； - -开发者提供url用户查询积分 - -请求方式 `GET` - -参数： - -|参数名|必选|类型|说明| -|:-:|:-:|:-:|:-:| -|appUserId|是|String|app用户Id| -|appId|是|String|SSP后台注册的appId| -|timestamp|是|String|时间戳（自1970年起，精确到毫秒）| -|sign|是|String|签名,用于验证身份。按照按 secretKey + timestamp 的进行MD5加密（注意加密后字符串要转大写，不要加上“+”号）| - -返回参数说明 - -|参数名|类型|说明| -|:-:|:-:|:-:| -|appUserId|String|app用户Id| -|avatar|String|用户头像| -|nickname|String|用户昵称| -|amount|Long|用户总积分| - -示例 - -```json - { - "appUserId" : "dcloud", - "avatar": "https://xxx.yyy.com/xxxx.jpg", - "nickname": "jack", - "amount": 100 - } -``` - -### 操作积分 - -简要描述： - -此接口用于操作用户积分数量，如增加、扣除； -请求参数放在body里，以JSON格式提交； -考虑到接口的安全，建议开发者采用IP白名单+签名的方式校验来源，以防备被第三方利用。 - - -失败情况： - -- URL存在特殊字符或无法通过外网访问； -- 没有按照响应格式要求返回的内容； -- 接口返回状态码非`200`的情况； -- 接口响应时间超过`3`秒。 - -开发者提供url用户查询积分 - -请求方式 `POST` - -参数： - -|参数名|必选|类型|说明| -|:-:|:-:|:-:|:-:| -|appUserId|是|String|App用户Id(唯一标识)| -|appId|是|String|SSP后台注册的appId| -|operateType|是|Long|操作类型：1.增加 2.扣除| -|amount|是|Long|本次操作的积分值| -|timestamp|是|String|时间戳（自1970年起，精确到毫秒）| -|sign|是|String|签名，用于验证身份。按照按 secretKey + timestamp 进行MD5加密（注意加密后字符串要转大写，不要加上“+”号）| - -返回参数说明 - -|参数名|类型|说明| -|:-:|:-:|:-:| -|appUserId|String|App用户Id(唯一标识)| -|status|int|状态码：0. 处理失败 1. 处理成功| -|message|String|失败原因| -|amount|Long|操作后的用户总积分| - -返回结果示例 -```json -{ - "appUserId": "dcloud", - "status": 1, - "amount": 100 -} -``` diff --git a/docs/api/a-d/interstitial.md b/docs/api/a-d/interstitial.md deleted file mode 100644 index 2a2fa11c5d2fad1117b4902a3373ae5c8f62f739..0000000000000000000000000000000000000000 --- a/docs/api/a-d/interstitial.md +++ /dev/null @@ -1,182 +0,0 @@ -### 插屏广告 - -插屏广告组件是由客户端原生的图片、文本、视频控件组成的；插屏广告与信息流或横幅广告相比展现尺寸更大，同样能够满足您对大量曝光和用户转化的需求。 - -![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/5dc1ce6b-b786-4175-aec5-dd2ab4a5e34c.png) - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|App 3.1.10+|x|√|x|x|x|√|x| - -- app端的广告源由腾讯优量汇、头条穿山甲、快手等广告联盟提供，DCloud负责聚合 -- 小程序端的广告由小程序平台提供 - -**开通配置广告** - -开通广告步骤： -1. 开通广告 -需在广告平台后台操作： - * App平台：[https://uniad.dcloud.net.cn/](https://uniad.dcloud.net.cn/) - * 小程序平台：在各自的小程序管理后台操作。 -2. 申请广告位id -在各位后台申请广告位id -3. App端打包后生效，打包时必须选择要集成的广告SDK（优量汇、穿山甲、快手）。 - -### 语法 - -`uni.createInterstitialAd(options)` - -### 参数说明 - -`options` 为 object 类型，属性如下： - -|属性名 |类型 |必填 |描述 |最低支持版本 | -|:-:|:-:|:-:|:-:|:-:| -|adpid |string | 是|广告位 id |App 3.1.10+| -|adUnitId |string | 是|广告位 id |微信小程序2.6.0+, QQ0.1.26+| - - -HBuilder 基座的测试广告位 `adpid` 为 `1111111113` - - -### 广告创建 - -插屏广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。开发者可以在页面的 onReady 事件回调中创建广告实例，并在该页面的生命周期内重复调用该广告实例。 - - -### 显示/隐藏 - -插屏广告组件默认是隐藏的，开发者需要调用 InterstitialAd.show() 进行显示。如果广告拉取失败或触发频率限制，InterstitialAd.show() 方法会返回一个rejected Promise，开发者可自行监听错误信息 - -```js -interstitialAd.show().catch((err) => { - console.error(err) -}) -``` - -用户可以主动关闭插屏广告。开发者不可控制插屏广告组件的隐藏。 - - -### 监听用户关闭广告 - -如果广告被关闭，通过 InterstitialAd.onClose() 注册的回调函数会执行，回调函数没有参数传递。 - -```js -interstitialAd.onClose(res => { - console.log('插屏 广告关闭') -}) -``` - - -示例代码 - -```html - - - -``` - - -#### 方法 - -`Promise InterstitialAd.load()` - -加载插屏广告。 - -`Promise InterstitialAd.show()` - -显示插屏广告。 - -`InterstitialAd.destroy()` - -销毁插屏广告实例。 - -`InterstitialAd.onLoad(function callback)` - -监听插屏广告加载事件。 - -`InterstitialAd.offLoad(function callback)` - -取消监听插屏广告加载事件 - -`InterstitialAd.onError(function callback)` - -监听插屏错误事件。 - -`InterstitialAd.offError(function callback)` - -取消监听插屏错误事件 - -`InterstitialAd.onClose(function callback)` - -监听插屏广告关闭事件。 - -`InterstitialAd.offClose(function callback)` - -取消监听插屏广告关闭事件 - - -### 注意事项 - -在插屏广告展示过程中如果快速切换页面，可能会出现插屏广告展示在非调用页面的情况，如有需要请在页面切换完成后进行插屏广告展示。 diff --git a/docs/api/a-d/rewarded-video.md b/docs/api/a-d/rewarded-video.md deleted file mode 100644 index baf44cad42357783c1d0a9bda80eaee536118e2b..0000000000000000000000000000000000000000 --- a/docs/api/a-d/rewarded-video.md +++ /dev/null @@ -1,847 +0,0 @@ -**激励视频广告** - -### 简介 - -激励视频广告，是cpm收益最高的广告形式。 - -手机用户观看几十秒视频广告，在广告播放完毕后可获得应用开发商提供的奖励，而应用开发商则可以从广告平台获取不菲的广告收入。 - -![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/23fcff30-441f-11eb-b680-7980c8a877b8.png) - -与开屏、信息流等广告变现方式不同，激励视频收益高、但场景设计和编程工作量也较高。 - -激励视频广告的场景灵活多样： -- 游戏内看广告复活、看广告拿高级道具 -- 合成类游戏，看广告获得道具，比如各种养龙、养凤凰、养牛、养蟹...... -- 走路赚钱、看短视频赚钱、猜歌赚钱等应用也非常多 -- 网赚应用中，做各种任务赚钱，或者想要接赚钱的任务，前提是观看激励视频 -- 增值内容消费，比如小说、电影看一半，剩下的需要看广告后才能继续 -- 区块链应用融合激励视频，比如看广告提高收益或提高挖矿成功率 - -激励视频还经常和邀请裂变结合在一起，应用开发者为用户设计邀请好友的奖励，让用户有动力邀请更多用户使用这个应用。 - -激励视频是造富神器。行业经常出现几个人的团队，月收入百万的奇迹。均是因为良好的设计了激励场景和裂变模型。 - - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√（2.5.11+）|x|√|x|x|√（1.57.0+）|√（0.1.26+）|√| - -- app端的广告源由腾讯优量汇、头条穿山甲、快手等广告联盟提供，DCloud负责聚合 -- 小程序端的广告由小程序平台提供 - -**开通配置广告** - -开通广告步骤： -1. 开通广告 -需在广告平台后台操作： - * App平台：[https://uniad.dcloud.net.cn/](https://uniad.dcloud.net.cn/) - * 小程序平台：在各自的小程序管理后台操作。 -2. 申请广告位id -在各位后台申请广告位id -3. App端打包后生效，打包时必须选择要集成的广告SDK（优量汇、穿山甲、快手）。 - - -激励视频广告组件是原生组件，层级最高，会覆盖在普通前端组件上。 - - -### 语法 - -`uni.createRewardedVideoAd(options)` - -### 参数说明 -options 为 object 类型，属性如下： - -|属性名 |类型 |必填 |描述 |最低支持版本 | -|:-:|:-:|:-:|:-:|:-:| -|adpid |string | 是|广告位 id |App 2.5.11+| -|adUnitId |string | 是|广告位 id |微信小程序2.6.0+, QQ0.1.26+， 字节跳动1.57.0+| - - -### 返回值 - -返回值为 RewarededVideoAd 类型，属性如下： - -|属性名|类型|描述|最低支持版本| -|:-:|:-:|:-:|:-:| -|show|Function|广告创建后默认是隐藏的，可以通过该方法显示广告|App 2.5.11+, 微信小程序2.6.0+, QQ0.1.26+，字节跳动1.57.0+| -|onLoad|Function|绑定广告 load 事件的监听器|App 2.5.11+, 微信小程序2.6.0+, QQ0.1.26+，字节跳动1.57.0+| -|offLoad|Function|解除绑定 load 事件的监听器|QQ0.1.26+，字节跳动1.57.0+| -|load|Function|当广告素材加载出现错误时，可以通过 load 方法手动加载|App 2.5.11+, 微信小程序2.6.0+, QQ0.1.26+，字节跳动1.57.0+| -|onError|Function|绑定 error 事件的监听器 |App 2.5.11+, 微信小程序2.6.0+, QQ0.1.26+，字节跳动1.57.0+| -|offError|Function|解除绑定 error 事件的监听器|QQ0.1.26+，字节跳动1.57.0+| -|onClose|Function|绑定 close 事件的监听器|App 2.5.11+, 微信小程序2.6.0+, QQ0.1.26+，字节跳动1.57.0+| -|offClose|Function|解除绑定 close 事件的监听器|QQ0.1.26+，字节跳动1.57.0+| - - -### 广告创建 - -开发者可以调用 `uni.createRewardedVideoAd` 创建激励视频广告组件。 - -激励视频广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。开发者可以在页面的 `onReady` 事件回调中创建广告实例，并在该页面的生命周期内重复调用该广告实例。 - -```html - -``` - - -### 推荐接入示例@ad-js - -`ad.js` 是对 `uni.createRewardedVideoAd` 的封装，一个页面缓存多页面生效，避免每个页面都预载而不展示的问题，可以传入不同广告位，内部处理了Loading状态、快速点击、数据过期、失败重试1次逻辑 - -```html - - - - -``` - -```js -// ad.js -const ADType = { - RewardedVideo: "RewardedVideo", - FullScreenVideo: "FullScreenVideo" -} - -class AdHelper { - - constructor() { - this._ads = {} - } - - load(options, onload, onerror) { - let ops = this._fixOldOptions(options) - let { - adpid - } = ops - - if (!adpid || this.isBusy(adpid)) { - return - } - - this.get(ops).load(onload, onerror) - } - - show(options, onsuccess, onfail) { - let ops = this._fixOldOptions(options) - let { - adpid - } = ops - - if (!adpid) { - return - } - - uni.showLoading({ - mask: true - }) - - var ad = this.get(ops) - - ad.load(() => { - uni.hideLoading() - ad.show((e) => { - onsuccess && onsuccess(e) - }) - }, (err) => { - uni.hideLoading() - onfail && onfail(err) - }) - } - - isBusy(adpid) { - return (this._ads[adpid] && this._ads[adpid].isLoading) - } - - get(options) { - const { - adpid - } = options - if (!this._ads[adpid]) { - this._ads[adpid] = this._createAdInstance(options) - } - - return this._ads[adpid] - } - - _createAdInstance(options) { - const adType = options.adType || ADType.RewardedVideo - delete options.adType - - let ad = null; - if (adType === ADType.RewardedVideo) { - ad = new RewardedVideo(options) - } else if (adType === ADType.FullScreenVideo) { - ad = new FullScreenVideo(options) - } - - return ad - } - - _fixOldOptions(options) { - return (typeof options === "string") ? { - adpid: options - } : options - } -} - -const EXPIRED_TIME = 1000 * 60 * 30 -const ProviderType = { - CSJ: 'csj', - GDT: 'gdt' -} - -const RETRY_COUNT = 1 - -class AdBase { - constructor(adInstance, options = {}) { - this._isLoad = false - this._isLoading = false - this._lastLoadTime = 0 - this._lastError = null - this._retryCount = 0 - - this._loadCallback = null - this._closeCallback = null - this._errorCallback = null - - const ad = this._ad = adInstance - ad.onLoad((e) => { - this._isLoading = false - this._isLoad = true - this._lastLoadTime = Date.now() - - this.onLoad() - }) - ad.onClose((e) => { - this._isLoad = false - this.onClose(e) - }) - ad.onVerify && ad.onVerify((e) => { - // e.isValid - }) - ad.onError(({ - code, - message - }) => { - this._isLoading = false - const data = { - code: code, - errMsg: message - } - - if (code === -5008) { - this._loadAd() - return - } - - if (this._retryCount < RETRY_COUNT) { - this._retryCount += 1 - this._loadAd() - return - } - - this._lastError = data - this.onError(data) - }) - } - - get isExpired() { - return (this._lastLoadTime !== 0 && (Math.abs(Date.now() - this._lastLoadTime) > EXPIRED_TIME)) - } - - get isLoading() { - return this._isLoading - } - - getProvider() { - return this._ad.getProvider() - } - - load(onload, onerror) { - this._loadCallback = onload - this._errorCallback = onerror - - if (this._isLoading) { - return - } - - if (this._isLoad) { - this.onLoad() - return - } - - this._retryCount = 0 - - this._loadAd() - } - - show(onclose) { - this._closeCallback = onclose - - if (this._isLoading || !this._isLoad) { - return - } - - if (this._lastError !== null) { - this.onError(this._lastError) - return - } - - const provider = this.getProvider() - if (provider === ProviderType.CSJ && this.isExpired) { - this._loadAd() - return - } - - this._ad.show() - } - - onLoad(e) { - if (this._loadCallback != null) { - this._loadCallback() - } - } - - onClose(e) { - if (this._closeCallback != null) { - this._closeCallback({ - isEnded: e.isEnded - }) - } - } - - onError(e) { - if (this._errorCallback != null) { - this._errorCallback(e) - } - } - - destroy() { - this._ad.destroy() - } - - _loadAd() { - this._isLoad = false - this._isLoading = true - this._lastError = null - this._ad.load() - } -} - -class RewardedVideo extends AdBase { - constructor(options = {}) { - super(plus.ad.createRewardedVideoAd(options), options) - } -} - -class FullScreenVideo extends AdBase { - constructor(options = {}) { - super(plus.ad.createFullScreenVideoAd(options), options) - } -} - -export default new AdHelper() - -``` - - -### 显示/隐藏 -激励视频广告组件默认是隐藏的，在用户主动触发广告后，开发者需要调用 RewardedVideoAd.show() 进行显示。 - -```js -rewardedVideoAd.show() -``` - -只有在用户点击激励视频广告组件上的 关闭广告 按钮时，广告才会关闭。开发者不可控制激励视频广告组件的隐藏。 - -### 广告拉取成功与失败 - -激励视频广告组件是自动拉取广告并进行更新的。在组件创建后会拉取一次广告，用户点击 关闭广告 后会去拉取下一条广告。 - -如果拉取成功，通过 `RewardedVideoAd.onLoad()` 注册的回调函数会执行，`RewardedVideoAd.show()` 返回的 Promise 也会是一个 resolved Promise。两者的回调函数中都没有参数传递。 - -```js -rewardedVideoAd.onLoad(() => { - console.log('激励视频 广告加载成功') -}) - -rewardedVideoAd.show() -.then(() => console.log('激励视频 广告显示')) -``` - -如果拉取失败，通过 `RewardedVideoAd.onError()` 注册的回调函数会执行，回调函数的参数是一个包含错误信息的对象。常见异常错误参考文档 - -```js -rewardedVideoAd.onError(err => { - console.log(err) -}) -``` - -`RewardedVideoAd.show()` 返回的 Promise 也会是一个 rejected Promise。 - -```js -rewardedVideoAd.show() -.catch(err => console.log(err)) -``` - -### 拉取失败，重新拉取 - -如果组件的某次自动拉取失败，那么之后调用的 show() 将会被 reject。此时可以调用 `RewardedVideoAd.load()` 手动重新拉取广告。 - -```js -rewardedVideoAd.show() -.catch(() => { - rewardedVideoAd.load() - .then(() => rewardedVideoAd.show()) - .catch(err => { - console.log('激励视频 广告显示失败') - }) -}) -``` - -如果组件的自动拉取是成功的，那么调用 `load()` 方法会直接返回一个 resolved Promise，而不会去拉取广告。 - -```js -rewardedVideoAd.load() -.then(() => rewardedVideoAd.show()) -``` - -### 监听用户关闭广告 - -![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/24d1db60-441f-11eb-bd01-97bc1429a9ff.png) - -只有在用户点击激励视频广告组件上的 关闭广告 按钮时，广告才会关闭。这个事件可以通过 `RewardedVideoAd.onClose()` 监听。 - -`RewardedVideoAd.onClose()` 的回调函数会传入一个参数 res，res.isEnded 描述广告被关闭时的状态。 - - -|属性|类型|说明| -|:-:|:-:|:-:| -|isEnded|boolean|视频是否是在用户完整观看的情况下被关闭的，true 表示用户是在视频播放完以后关闭的视频，false 表示用户在视频播放过程中关闭了视频 - - -开发者需要根据 res.isEnded 判断是否视频是否播放结束，如果成功播放完毕则应该向用户发放奖励。 - -```js -rewardedVideoAd.onClose(res => { - // 用户点击了【关闭广告】按钮 - if (res && res.isEnded) { - // 正常播放结束 - // 这里应该联网给予用户激励。且这段代码应该做安全保护，详见下文中的“安全注意” - } else { - // 播放中途退出 - } -}) -``` - - -### 服务器回调@callback - -App平台 3.1.15+ 支持穿山甲/优量汇/快手 - -激励视频广告可以支持广告服务器到业务服务器的回调，用于业务系统判断是否提供奖励给观看广告的用户。配置服务器回调后，当用户成功看完广告时，广告服务器会访问配置的回调链接，通知用户完成观看激励视频。 - -相对来讲服务器回调将更加安全，可以依赖广告平台的反作弊机制来避免用户模拟观看广告完成的事件。 - -如何使用 -1. 申请激励视频广告位时开启服务器回调 -2. 创建激励视频广告时传入回调参数 - - -urlCallback示例 - -```js -rewardedVideoAd = uni.createRewardedVideoAd({ - adpid: '', - urlCallback: { - userId: 'testuser', - extra: 'testdata' - } -}); -``` - -### 服务器回调事件 -- HBuilderX 2.6.8+ - -穿山甲 -```js -rewardedVideoAd.onVerify(e => { - console.log('服务器发送验证请求且回调校验完成'); - var provider= e.provider; - var valid = e.isValid; //获取校验结果 - //valid为true表示通过了服务器的校验，false表示可能没有通过服务器的校验，或是服务器延迟或失败(此时需增加逻辑：轮询向服务器请求并验证结果) -}) -``` - -优量汇 -```js -rewardedVideoAd.onVerify(e => { - console.log('服务器已发送验证请求'); - var provider= e.provider; - var transId = e.transId; - // 需增加逻辑：轮询向服务器请求并验证结果 -}) -``` - -快手 -```js -rewardedVideoAd.onVerify(e => { - console.log('服务器已发送验证请求'); - var provider= e.provider; - // 需增加逻辑：轮询向服务器请求并验证结果 -}) -``` - -### 服务器回调说明 - -服务器回调基于[uniCloud](https://uniapp.dcloud.net.cn/uniCloud/README)，详细流程如下: - -1. 登陆 [uniCloud](https://unicloud.dcloud.net.cn/) web控制台，新建服务空间或选择已有服务空间，然后在HBuilderX中新建uni-app项目并关联服务空间，新建云函数上传，用于接收广告的回调 -2. 在 [uniAD](https://uniad.dcloud.net.cn/) web控制台开通服务器回调并选择上一步新建的云函数 -3. 开通后将在选择的服务空间下自动部署一个加密云函数 `uniAdCallback` -4. `uniAdCallback` 接收广告商服务器回调验证签名并抹平穿山甲/优量汇/快手参数差异，然后以 [callFunction](https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=callbyfunction) 方式调用用户云函数 -5. 用户在自己的云函数中处理业务 - -注意： -1. 服务器通信和前端事件是并行的，前端需要轮询向服务器请求并验证结果 -2. 不建议在 `uniAD` web控制修改回调的服务空间和云函数名称，因为修改后生效需要一段时间 - -### Q&A - -Q: 回调为什么使用[uniCloud](https://uniapp.dcloud.net.cn/uniCloud/README)，而不是直接配置开发者的服务器 -A： -1. 由于多家广告商的回调和签名验证逻辑不同，开发者需要写很多逻辑，`uniCloud` 中的云函数 `uniAdCallback` 已抹平了差异，开发者按照统一的参数处理即可 -2. 开发者的服务器有可能响应慢或失去响应造成回调数据丢失, 使用 `uniCloud` 可以帮助开发者保存一份来自广告商服务器的回调数据到开发者的云数据中，以便开发者主动查询 -3. `uniCloud` 可以承载大并发、防DDoS攻击，无需运营人员维护，如果选择了 `阿里云` 且是免费的 - -### 云函数uniAdCallback传递的参数 - -|字段定义|类型|字段名称|备注| -|:-:|:-:|:-:|:-:| -|adpid|String|DCloud广告位id|| -|provider|String|广告服务商|csj、ks、gdt| -|platform|String|平台|iOS、Android| -|trans_id|String|交易id|完成观看的唯一交易ID| -|user_id|String|用户id|调用SDK透传，应用对用户的唯一标识| -|extra|String|自定义数据|调用SDK传入并透传，如无需要则为空| - - -#### 用户的云函数返回数据约定 - -返回json数据，字段如下： - -字段名称|说明|字段类型|备注| -:-|:-|:-|:-| -isValid|校验结果|Blean|判定结果，是否发放奖励| - -示例 -```js -exports.main = async (event, context) => { - //event为客户端上传的参数 - console.log('event : ', event); - - return { - "isValid": true - } -}; -``` - -#### 用户云函数详细说明 - -如果业务使用了uniCloud，可以直接在云函数内部处理 - -也可以将结果发送给已有业务服务器 - -示例代码 -```js -'use strict'; - -const crypto = require('crypto'); - -const db = uniCloud.database(); - -const DEFAUTL_TIMEOUT = 30000; -const DEFAUTL_RETRY_COUNT = 3; -const RETRY_TIMEOUT = 3000; - -const ProviderType = { - CSJ: "csj", - GDT: "gdt", - KS: "ks" -}; - -const collectionName = "opendb-uniad-callback-log"; - -class DB { - - static save(data) { - return new DB().add(data); - } - - add(data) { - const collection = db.collection(collectionName); - const data2 = Object.assign(data, { - ad_type: 0, - create_date: new Date() - }) - return collection.add(data2); - } -} - -class UserServer { - - static send(url, data) { - return new UserServer().sendHttpRequest(url, data); - } - - async sendHttpRequest(url, data) { - let needRetry = data.provider !== ProviderType.GDT; - let retryCount = needRetry ? DEFAUTL_RETRY_COUNT : 1; - let timeout = needRetry ? RETRY_TIMEOUT : DEFAUTL_TIMEOUT; - let result = null; - - while (retryCount > 0) { - console.log("sendHttpRequest::count::" + retryCount + "::", url, data); - - try { - result = await uniCloud.httpclient.request(url, { - data, - dataType: 'json', - contentType: 'json', - timeout - }); - - if (result.data && result.data.isValid === true) { - break; - } - } catch (e) { - console.log(e); - } - - retryCount--; - } - - return result; - } -} - -exports.main = async (event, context) => { - //event为客户端上传的参数 - console.log('event : ', event); - - const { - path, - queryStringParameters - } = event; - - const data = { - adpid: event.adpid, - platform: event.platform, - provider: event.provider, - trans_id: event.trans_id, - sign: event.sign, - user_id: event.user_id, - extra: event.extra, - } - - // 注意::必须验签请求来源 - const secret = "";// uniad 后台开通激励视频回调后生成的 secret - const trans_id = event.trans_id; - const sign2 = crypto.createHash('sha256').update(`${secret}:${trans_id}`).digest('hex'); - if (event.sign !== sign2) { - return null; - } - - - // 可选将回调记录保存到uniCloud，避免用户服务器没有响应时有日志可查，如果选择了保存记录需要做定时清理日志，避免日志过多影响性能 - // try { - // await DB.save(data); - // } catch (e) { - // console.log(e); - // } - - //const url = "https://"; // 用户业务服务器地址，为了避免请求被伪造，必须使用签名的方式请求 - //let reuslt = await UserServer.send(url, data); - - return { - "isValid": true - } -}; -``` - - -#### 安全注意 - -由于激励视频对应着用户奖励，可能会遇到恶意刷激励奖励但实际上并不看广告的情况。此时广告平台不给结算，但开发者却可能把激励送出去。 - -为了提升安全性，建议所有使用激励视频的开发者都要做如下工作来加强保护： -1. 前端代码加密。涉及激励相关的，在manifest中配置好要加密的代码文件，打包后会自动加密相应文件。[详见](https://ask.dcloud.net.cn/article/36437) -2. apk加固。即便前端代码加密，原生层引擎的java代码仍然可能被反编译，需要对apk加固。市面上很多加固服务，比如360加固、爱加密加固均可以自行选择。 -3. 使用如下安全类API，防止客户端被篡改 -- plus.navigator.getSignature 获取应用签名标识。结合在服务器端存放证书信息，可比对判断App的证书是否被重签 [规范](https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getSignature) -- plus.navigator.isSimulator 判断App是否运行在模拟器环境 [规范](https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.isSimulator) -- plus.navigator.isRoot 判断设备是否被root或越狱 [规范](https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.isRoot) -- plus.networkinfo.isSetProxy 判断设备的网络是否设置了代理 [规范](https://www.html5plus.org/doc/zh_cn/device.html#plus.networkinfo.isSetProxy) -4. 避免使用短信验证码来识别身份，推荐使用可信度更高的 [手机号一键登录](/univerify) 或 [微信登录](/api/plugins/login?id=login) -5. 必要时可使用[生物认证（指纹和faceid）](/api/system/authentication)、[活体检测的sdk](https://ext.dcloud.net.cn/search?q=%E6%B4%BB%E4%BD%93%E6%A3%80%E6%B5%8B&orderBy=Relevance&cat1=5&cat2=51) - -#### 获取广告商名称 - -> HBuilderX 2.6.8+ - -#### 语法 - -`RewardedVideoAd.getProvider()` - -#### 说明 - -返回值 为 string 类型 - -|值|描述| -|:-:|:-:| -|csj|穿山甲| -|gdt|腾讯优量汇（前称广点通）| -|ks|快手| - - -```js -var rewardedVideoAd = uni.createRewardedVideoAd(Options); -var provider = rewardedVideoAd.getProvider(); -``` - - -### app平台错误码 - -code|message| -:-|:-| --5001|广告位标识adpid为空，请传入有效的adpid --5002|无效的广告位标识adpid，请使用正确的adpid --5003|未开通广告，请在广告平台申请并确保已审核通过 --5004|无广告模块，打包时请配置要使用的广告模块 --5005|广告加载失败，请过段时间重新加载，否则可能触发系统策略导致流量收益下降 --5006|广告未加载完成无法播放，请加载完成后再调show播放 --5007|无法获取广告配置数据，请尝试重试 --5008|广告已过期，请重新加载数据 --5100|其他错误，聚合广告商内部错误 - - -**@error 详细错误码** - -- App端聚合的穿山甲(iOS)：[错误码](https://ad.oceanengine.com/union/media/union/download/detail?id=16&docId=5de8d574b1afac00129330d5&osType=ios) -- App端聚合的穿山甲(Android)：[错误码](https://ad.oceanengine.com/union/media/union/download/detail?id=4&docId=5de8d9b925b16b00113af0ed&osType=android) -- App端聚合的广点通(iOS)：[错误码](https://developers.adnet.qq.com/doc/ios/union/union_debug#%E9%94%99%E8%AF%AF%E7%A0%81) -- App端聚合的广点通(Android)：[错误码](https://developers.adnet.qq.com/doc/android/union/union_debug#sdk%20%E9%94%99%E8%AF%AF%E7%A0%81) - - -### 注意事项 -- iOS平台配置应用使用广告标识（IDFA）详见：[https://ask.dcloud.net.cn/article/36107](https://ask.dcloud.net.cn/article/36107) -- 测试期间请使用测试 `adpid`，参考测试代码，如果无法显示换个时间再试 -- 多次调用 `RewardedVideoAd.onLoad()`、`RewardedVideoAd.onError()`、`RewardedVideoAd.onClose()` 等方法监听广告事件会产生多次事件回调，建议在创建广告后监听一次即可。 -- 为避免滥用广告资源，目前每个用户每天可观看激励式视频广告的次数有限，建议展示广告按钮前先判断广告是否拉取成功。 -- App平台，建议每个广告商每个设备每天调用次数不超过`15`，中间要有间隔时间，否则可能触发系统的反作弊策略导致流量收益下降。 -- 老版非V3编译项目不支持激励视频。 - -### 案例参考 -- [全民董事长](https://android.myapp.com/myapp/detail.htm?apkName=com.dlt.qmdsz&info=DF3F955B42F0B77FECA41F03E7F77C8D) -- 重要项目源码《养猫合成游戏》，拿走就能用，[https://ext.dcloud.net.cn/plugin?id=4095](https://ext.dcloud.net.cn/plugin?id=4095) diff --git a/docs/api/application.md b/docs/api/application.md deleted file mode 100644 index d62faa59cfdb0980b0b0d48863ac79fcca7ceecd..0000000000000000000000000000000000000000 --- a/docs/api/application.md +++ /dev/null @@ -1,160 +0,0 @@ -### uni.onPageNotFound(function callback) - -监听应用要打开的页面不存在事件。该事件与 `App.onPageNotFound` 的回调时机一致 - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|x|√|x|√|√| - -#### 参数 - -**function callback** - -要打开的页面不存在事件的回调函数 - -#### 参数 - -|属性|类型|说明| -|:-:|:-:|:-:| -|path|String|不存在页面的路径 (代码包路径)| -|query|Object|打开不存在页面的 query 参数| -|isEntryPage|Boolean|是否本次启动的首个页面（例如从分享等入口进来，首个页面是开发者配置的分享页面） | - -**注意** -- 开发者可以在回调中进行页面重定向，但必须在回调中同步处理，异步处理（例如 `setTimeout` 异步执行）无效。 -- 若开发者没有调用 `uni.onPageNotFound` 绑定监听，也没有声明 `App.onPageNotFound`，当跳转页面不存在时，将推入客户端原生的页面不存在提示页面。 -- 如果回调中又重定向到另一个不存在的页面，将推入客户端原生的页面不存在提示页面，并且不再第二次回调。 -- 在除了 `App.vue` 的其他时机中调用 `uni.onPageNotFound` 的话，需要用uni.offPageNotFound取消监听，否则会出现监听多次的情况 - -### uni.onError(function callback) - -监听小程序错误事件。如脚本错误或 `API` 调用报错等。该事件与 `App.onError` 的回调时机与参数一致。 - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|x|√|√|√|√| - -#### 参数 - -**function callback** - -应用错误事件的回调函数 - -#### 参数 -**string error** - -错误信息，包含堆栈 - -### uni.onAppShow(function callback) - -监听应用切前台事件。该事件与 `App.onShow` 的回调参数一致。 - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|√|√|√|√|√| - -**支付宝小程序使用说明：** - -- 由于开发者工具版本限制，目前本 API 暂不支持在开发者工具调试和真机调试，仅支持真机预览。开发者请调至 预览 模式，在支付宝客户端扫码查看效果。 -- 请勿使用 API 监听匿名函数，否则将无法关闭监听。 - -#### 参数 - -**function callback** - -应用切前台事件的回调函数 - -#### 参数 - -|属性|类型|说明|平台差异说明| -|:-:|:-:|:-:|:-:| -|path|String|应用切前台的路径 (代码包路径)|| -|scene|Number|应用切前台的场景值|| -|query|Object |应用切前台的 query 参数|| -|shareTicket|String |shareTicket|微信小程序| -|referrerInfo|String|来源信息|| -|entryType|String|页面展现的来源标识，可取的值为: 'user'、'schema'、'sys'，对应代表的意义如下表。|百度小程序 2.10.7+| -|appURL|String|展现时的调起协议，仅当entryType值为 schema 时存在。|百度小程序 2.10.7+| -|entryDataHash|String|群入口信息，通过群应用商店打开、群分享卡片打开的小程序可获得。|qq小程序| - -**referrerInfo 的结构** - -|属性|类型|说明|平台差异说明| -|:-:|:-:|:-:|| -|appId|String|来源小程序的appId|| -|extraData|Object|来源小程序传过来的数据|微信小程序和qq小程序 scene=1037或1038时支持| - -### uni.onAppHide(function callback) - -监听应用切后台事件。该事件与 `App.onHide` 的回调参数一致。 - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|√|√|√|√|√| - -**支付宝小程序使用说明：** - -- 由于开发者工具版本限制，目前本 API 暂不支持在开发者工具调试和真机调试，仅支持真机预览。开发者请调至 预览 模式，在支付宝客户端扫码查看效果。 -- 请勿使用 API 监听匿名函数，否则将无法关闭监听。 - -#### 参数 - -**function callback** - -应用切后台事件的回调函数 - -### uni.offPageNotFound(function callback) - -取消监听应用要打开的页面不存在事件。 - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|x|√|x|√|√| - -#### 参数 - -**function callback** - -应用要打开的页面不存在事件的回调函数 - -### uni.offError(function callback) - -取消监听应用错误事件。 - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|x|√|√|√|√| - -#### 参数 - -**function callback** - -应用错误事件的回调函数 - -### uni.offAppShow(function callback) - -取消监听小程序切前台事件。 - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|√|√|√|√|√| - -#### 参数 - -**function callback** - -应用切前台事件的回调函数 - -### uni.offAppHide(function callback) - -取消监听小程序切后台事件。 - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|√|√|√|√|√| - -#### 参数 - -**function callback** - -应用切后台事件的回调函数 diff --git a/docs/api/arrayBufferToBase64.md b/docs/api/arrayBufferToBase64.md deleted file mode 100644 index 9114d3324239129f0016df6fdc5f3808b35823af..0000000000000000000000000000000000000000 --- a/docs/api/arrayBufferToBase64.md +++ /dev/null @@ -1,22 +0,0 @@ -## uni.arrayBufferToBase64(arrayBuffer) - -将 ArrayBuffer 对象转成 Base64 字符串 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|x|x|x|√| - -**参数说明** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|arrayBuffer|ArrayBuffer|是|要转换成 Base64 字符串的 ArrayBuffer 对象| - -**示例** - -```javascript -const arrayBuffer = new Uint8Array([55, 55, 55]) -const base64 = uni.arrayBufferToBase64(arrayBuffer) -``` \ No newline at end of file diff --git a/docs/api/base64ToArrayBuffer.md b/docs/api/base64ToArrayBuffer.md deleted file mode 100644 index 3e2bdea004dee5b77c4a7e9b3a7ba1ce2c947f9c..0000000000000000000000000000000000000000 --- a/docs/api/base64ToArrayBuffer.md +++ /dev/null @@ -1,22 +0,0 @@ -## uni.base64ToArrayBuffer(base64) - -将 Base64 字符串转成 ArrayBuffer 对象 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|x|x|x|√| - -**参数说明** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|base64|String|是|要转化成 ArrayBuffer 对象的 Base64 字符串| - -**示例** - -```javascript -const base64 = 'test' -const arrayBuffer = uni.base64ToArrayBuffer(base64) -``` \ No newline at end of file diff --git a/docs/api/canvas/CanvasContext.md b/docs/api/canvas/CanvasContext.md deleted file mode 100644 index 335504c97641b9f265089c6f6fc52fac9d591fed..0000000000000000000000000000000000000000 --- a/docs/api/canvas/CanvasContext.md +++ /dev/null @@ -1,1446 +0,0 @@ -**属性** - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|√|√|√|√| - -App-nvue下如需使用canvas，暂未封装为uni API，可参考[文档](https://github.com/dcloudio/NvueCanvasDemo)使用。 - -### CanvasContext.fillStyle string - -填充颜色。用法同 [CanvasContext.setFillStyle()](#canvascontextsetfillstyle)。 - -### CanvasContext.strokeStyle string - -边框颜色。用法同 [CanvasContext.setStrokeStyle()](#canvascontextsetstrokestyle)。 - -### CanvasContext.shadowOffsetX number - -阴影相对于形状在水平方向的偏移 - -### CanvasContext.shadowOffsetY number - -阴影相对于形状在竖直方向的偏移 - -### CanvasContext.shadowColor number - -阴影的颜色 - -### CanvasContext.shadowBlur number - -阴影的模糊级别 - -### CanvasContext.lineWidth number - -线条的宽度。用法同 [CanvasContext.setLineWidth()](#canvascontextsetlinewidth)。 - -### CanvasContext.lineCap number - -线条的端点样式。用法同 [CanvasContext.setLineCap()](#canvascontextsetlinecap)。 - -### CanvasContext.lineJoin number - -线条的交点样式。用法同 [CanvasContext.setLineJoin()](#canvascontextsetlinejoin)。 - -### CanvasContext.miterLimit number - -最大斜接长度。用法同 [CanvasContext.setMiterLimit()](#canvascontextsetmiterlimit)。 - -### CanvasContext.lineDashOffset number - -虚线偏移量，初始值为0 - -### CanvasContext.font string - -当前字体样式的属性。符合 [CSS font 语法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font) 的 DOMString 字符串，至少需要提供字体大小和字体族名。默认值为 10px sans-serif。 - -### CanvasContext.globalAlpha number - -全局画笔透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。 - -### CanvasContext.globalCompositeOperation string - -在绘制新形状时应用的合成操作的类型。目前安卓版本只适用于 `fill` 填充块的合成，用于 `stroke` 线段的合成效果都是 `source-over`。 - -目前支持的操作有 -* App和H5端：source-over、destination-over、source-in、destination-in、source-out、destination-out、source-atop、destination-atop、lighter、darker、xor、copy -* 微信小程序安卓端：xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light -* 微信小程序iOS端：xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity - -**方法** - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序| -|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|√|√| - -### CanvasContext.arc - -画一条弧线。创建一个圆可以用 ```arc()``` 方法指定起始弧度为0，终止弧度为 ```2 * Math.PI```。用 ```stroke()``` 或者 ```fill()``` 方法来在 ```canvas``` 中画弧线。 - -**参数** - -|参数|类型 |说明| -|---|--- |--- | -|x |Number |圆的x坐标 | -|y |Number |圆的y坐标| -|r|Number |圆的半径| -|sAngle |Number |起始弧度，单位弧度（在3点钟方向）| -|eAngle |Number |终止弧度| -|counterclockwise |Boolean|可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Draw coordinates -ctx.arc(100, 75, 50, 0, 2 * Math.PI) -ctx.setFillStyle('#EEEEEE') -ctx.fill() - -ctx.beginPath() -ctx.moveTo(40, 75) -ctx.lineTo(160, 75) -ctx.moveTo(100, 15) -ctx.lineTo(100, 135) -ctx.setStrokeStyle('#AAAAAA') -ctx.stroke() - -ctx.setFontSize(12) -ctx.setFillStyle('black') -ctx.fillText('0', 165, 78) -ctx.fillText('0.5*PI', 83, 145) -ctx.fillText('1*PI', 15, 78) -ctx.fillText('1.5*PI', 83, 10) - -// Draw points -ctx.beginPath() -ctx.arc(100, 75, 2, 0, 2 * Math.PI) -ctx.setFillStyle('lightgreen') -ctx.fill() - -ctx.beginPath() -ctx.arc(100, 25, 2, 0, 2 * Math.PI) -ctx.setFillStyle('blue') -ctx.fill() - -ctx.beginPath() -ctx.arc(150, 75, 2, 0, 2 * Math.PI) -ctx.setFillStyle('red') -ctx.fill() - -// Draw arc -ctx.beginPath() -ctx.arc(100, 75, 50, 0, 1.5 * Math.PI) -ctx.setStrokeStyle('#333333') -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/687c12e0-4f28-11eb-bdc1-8bd33eb6adaa.png) - -针对 ```arc(100, 75, 50, 0, 1.5 * Math.PI)```的三个关键坐标如下： -* 绿色: 圆心 (100, 75) -* 红色: 起始弧度 (0) -* 蓝色: 终止弧度 (1.5 * Math.PI) - -### CanvasContext.arcTo - -根据控制点和半径绘制圆弧路径。 - -```javascript -CanvasContext.arcTo(x1, y1, x2, y2, radius) -``` - -**参数** - -|属性值 |类型 |说明| -|--- |--- |--- | -|x1|Number |第一个控制点的 x 轴坐标| -|y1|Number |第一个控制点的 y 轴坐标| -|x2|Number |第二个控制点的 x 轴坐标| -|y2|Number |第二个控制点的 y 轴坐标| -|radius |Number |圆弧的半径 | - -### CanvasContext.beginPath - -开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。 - -**Tip:** 在最开始的时候相当于调用了一次 ```beginPath()```。 -**Tip:** 同一个路径内的多次```setFillStyle()```、``setStrokeStyle()```、```setLineWidth()```等设置，以最后一次设置为准。 - - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -// begin path -ctx.rect(10, 10, 100, 30) -ctx.setFillStyle('yellow') -ctx.fill() - -// begin another path -ctx.beginPath() -ctx.rect(10, 40, 100, 30) - -// only fill this rect, not in current path -ctx.setFillStyle('blue') -ctx.fillRect(10, 70, 100, 30) - -ctx.rect(10, 100, 100, 30) - -// it will fill current path -ctx.setFillStyle('red') -ctx.fill() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1b5714b0-4f28-11eb-8a36-ebb87efcf8c0.png) -### CanvasContext.bezierCurveTo - -创建三次方贝塞尔曲线路径。 - -**Tip:** 曲线的起始点为路径中前一个点。 - -**参数** - -|参数 |类型 |说明| -|--- |--- |---| -|cp1x |Number |第一个贝塞尔控制点的 x 坐标| -|cp1y |Number |第一个贝塞尔控制点的 y 坐标| -|cp2x |Number |第二个贝塞尔控制点的 x 坐标| -|cp2y |Number |第二个贝塞尔控制点的 y 坐标| -|x|Number |结束点的 x 坐标| -|y|Number |结束点的 y 坐标| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Draw points -ctx.beginPath() -ctx.arc(20, 20, 2, 0, 2 * Math.PI) -ctx.setFillStyle('red') -ctx.fill() - -ctx.beginPath() -ctx.arc(200, 20, 2, 0, 2 * Math.PI) -ctx.setFillStyle('lightgreen') -ctx.fill() - -ctx.beginPath() -ctx.arc(20, 100, 2, 0, 2 * Math.PI) -ctx.arc(200, 100, 2, 0, 2 * Math.PI) -ctx.setFillStyle('blue') -ctx.fill() - -ctx.setFillStyle('black') -ctx.setFontSize(12) - -// Draw guides -ctx.beginPath() -ctx.moveTo(20, 20) -ctx.lineTo(20, 100) -ctx.lineTo(150, 75) - -ctx.moveTo(200, 20) -ctx.lineTo(200, 100) -ctx.lineTo(70, 75) -ctx.setStrokeStyle('#AAAAAA') -ctx.stroke() - -// Draw quadratic curve -ctx.beginPath() -ctx.moveTo(20, 20) -ctx.bezierCurveTo(20, 100, 200, 100, 200, 20) -ctx.setStrokeStyle('black') -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/03cf3750-4f28-11eb-b997-9918a5dda011.png) - -针对 ```moveTo(20, 20)`` ```bezierCurveTo(20, 100, 200, 100, 200, 20)``` 的三个关键坐标如下： - -* 红色：起始点(20, 20) -* 蓝色：两个控制点(20, 100) (200, 100) -* 绿色：终止点(200, 20) - -### CanvasContext.clearRect - -清除画布上在该矩形区域内的内容。 - - -**参数** - -|参数|类型|说明| -|--- |--- |--- | -|x |Number |矩形区域左上角的x坐标| -|y |Number |矩形区域左上角的y坐标| -|width |Number |矩形区域的宽度| -|height |Number |矩形区域的高度| - -**示例代码** - -clearRect 并非画一个白色的矩形在地址区域，而是清空，为了有直观感受，对 canvas 加了一层背景色。 - -```javascript - -``` - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setFillStyle('red') -ctx.fillRect(0, 0, 150, 200) -ctx.setFillStyle('blue') -ctx.fillRect(150, 0, 150, 200) -ctx.clearRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/05afde30-4f28-11eb-a16f-5b3e54966275.png) - - -### CanvasContext.clip -从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。 - -**Tip:** 用 setFillStroke() 设置矩形线条的颜色，如果没设置默认是黑色。 - - -**示例代码** - -```javascript -const context = uni.createCanvasContext('myCanvas') - -uni.downloadFile({ - url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png', - success: function (res) { -context.save() -context.beginPath() -context.arc(96, 96, 48, 0, 2 * Math.PI) -context.clip() -context.drawImage(res.tempFilePath, 48, 48) - context.restore() - context.draw() - } -}) - -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/067a3310-4f28-11eb-b997-9918a5dda011.png) - -### CanvasContext.closePath -关闭一个路径。 - -**Tip:** 关闭路径会连接起点和终点。 -**Tip:** 如果关闭路径后没有调用 ```fill()``` 或者 ```stroke()``` 并开启了新的路径，那之前的路径将不会被渲染。 - - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.moveTo(10, 10) -ctx.lineTo(100, 10) -ctx.lineTo(100, 100) -ctx.closePath() -ctx.stroke() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/074e9a10-4f28-11eb-8a36-ebb87efcf8c0.png) - - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -// begin path -ctx.rect(10, 10, 100, 30) -ctx.closePath() - -// begin another path -ctx.beginPath() -ctx.rect(10, 40, 100, 30) - -// only fill this rect, not in current path -ctx.setFillStyle('blue') -ctx.fillRect(10, 70, 100, 30) - -ctx.rect(10, 100, 100, 30) - -// it will fill current path -ctx.setFillStyle('red') -ctx.fill() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/02d34b20-4f28-11eb-b680-7980c8a877b8.png) - -### CanvasContext.createCircularGradient -创建一个从圆心开始的渐变。返回的 [CanvasGradient](/api/canvas/CanvasGradient) 对象，需要使用 ```CanvasGradient.addColorStop()``` 来指定渐变点，至少要两个。 - -**参数** - -|参数 |类型 |定义 | -|--- |--- |--- | -|x |Number |圆心的x坐标| -|y |Number |圆心的y坐标| -|r |Number |圆的半径 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Create circular gradient -const grd = ctx.createCircularGradient(75, 50, 50) -grd.addColorStop(0, 'red') -grd.addColorStop(1, 'white') - -// Fill with gradient -ctx.setFillStyle(grd) -ctx.fillRect(10, 10, 150, 80) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/04c3f790-4f28-11eb-8a36-ebb87efcf8c0.png) - -### CanvasContext.createLinearGradient -创建一个线性的渐变颜色。返回的 [CanvasGradient](/api/canvas/CanvasGradient) 对象，需要使用 ```CanvasGradient.addColorStop()``` 来指定渐变点，至少要两个。 - -**参数** - -|参数 |类型 |定义 | -|--- |--- |--- | -|x0 |Number |起点的x坐标| -|y0 |Number |起点的y坐标| -|x1 |Number |终点的x坐标| -|y1 |Number |终点的y坐标| - - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Create linear gradient -const grd = ctx.createLinearGradient(0, 0, 200, 0) -grd.addColorStop(0, 'red') -grd.addColorStop(1, 'white') - -// Fill with gradient -ctx.setFillStyle(grd) -ctx.fillRect(10, 10, 150, 80) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/24a94010-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.createPattern -对指定的图像创建模式的方法，可在指定的方向上重复元图像 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|image |String |重复的图像源，仅支持包内路径和临时路径 | -|repetition |String |指定如何重复图像，有效值有: repeat, repeat-x, repeat-y, no-repeat | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -const pattern = ctx.createPattern('/path/to/image', 'repeat-x') -ctx.fillStyle = pattern -ctx.fillRect(0, 0, 300, 150) -ctx.draw() -``` - -### CanvasContext.draw -将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。 - -**参数** - -|参数|类型|说明|最低版本 | -|---|---|---|---| -|reserve |Boolean |非必填。本次绘制是否接着上一次绘制，即reserve参数为false，则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制；若reserver参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认 false | | -|callback |Function |绘制完成后回调|1.7.0| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 100) -ctx.draw() -ctx.fillRect(50, 50, 150, 100) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/33d7d100-4f28-11eb-97b7-0dc4655d6e68.png) - - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 100) -ctx.draw() -ctx.fillRect(50, 50, 150, 100) -ctx.draw(true) -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2ad88090-4f28-11eb-8ff1-d5dcf8779628.png) - -### CanvasContext.drawImage -绘制图像到画布。 - -**参数** - -|参数|类型 |说明 | -|--- |---|--- | -|imageResource |String |所要绘制的图片资源 | -|dx |Number |图像的左上角在目标canvas上 X 轴的位置 | -|dy |Number |图像的左上角在目标canvas上 Y 轴的位置 | -|dWidth|Number |在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放 | -|dHeight|Number |在目标画布上绘制图像的高度，允许对绘制的图像进行缩放 | -|sx |Number |源图像的矩形选择框的左上角 X 坐标 | -|sy |Number |源图像的矩形选择框的左上角 Y 坐标 | -|sWidth|Number |源图像的矩形选择框的高度 | -|sHeight |Number |源图像的矩形选择框的高度 | - -有三个版本的写法： - -* ```drawImage(dx, dy)``` -* ```drawImage(dx, dy, dWidth, dHeight)``` -* ```drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)``` - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -uni.chooseImage({ - success: function(res){ - ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100) - ctx.draw() - } -}) -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1946d250-4f28-11eb-8a36-ebb87efcf8c0.png) - -### CanvasContext.fill -对当前路径中的内容进行填充。默认的填充色为黑色。 - -**Tip:** 如果当前路径没有闭合，```fill()``` 方法会将起点和终点进行连接，然后填充，详情见例一。 - -**Tip:** ```fill()``` 填充的的路径是从 ```beginPath()``` 开始计算，但是不会将 ```fillRect()``` 包含进去，详情见例二。 - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.moveTo(10, 10) -ctx.lineTo(100, 10) -ctx.lineTo(100, 100) -ctx.fill() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1a366270-4f28-11eb-a16f-5b3e54966275.png) - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -// begin path -ctx.rect(10, 10, 100, 30) -ctx.setFillStyle('yellow') -ctx.fill() - -// begin another path -ctx.beginPath() -ctx.rect(10, 40, 100, 30) - -// only fill this rect, not in current path -ctx.setFillStyle('blue') -ctx.fillRect(10, 70, 100, 30) - -ctx.rect(10, 100, 100, 30) - -// it will fill current path -ctx.setFillStyle('red') -ctx.fill() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1b5714b0-4f28-11eb-8a36-ebb87efcf8c0.png) - -### CanvasContext.fillRect -填充一个矩形。 - -**Tip:** 用 ```setFillStyle()``` 设置矩形的填充色，如果没设置默认是黑色。 - -**参数** - -|参数 |类型 |定义 | -|--- |--- |--- | -|x |Number |矩形路径左上角的x坐标 | -|y |Number |矩形路径左上角的y坐标 | -|width |Number |矩形路径的宽度 | -|height |Number |矩形路径的高度 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1c4656b0-4f28-11eb-a16f-5b3e54966275.png) - -### CanvasContext.fillText -在画布上绘制被填充的文本。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|text |String |在画布上输出的文本 | -|x |Number |绘制文本的左上角x坐标位置 | -|y |Number |绘制文本的左上角y坐标位置 | -|maxWidth |Number |需要绘制的最大宽度，可选 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setFontSize(20) -ctx.fillText('Hello', 20, 20) -ctx.fillText('MINA', 100, 100) - -ctx.draw() -``` - - -### CanvasContext.lineTo -增加一个新点，然后创建一条从上次指定点到目标点的线。 - -**Tip:** 用 ```stroke()``` 方法来画线条 - -**参数** - -|参数 |类型|说明 | -|--- |--- |--- | -|x |Number |目标位置的x坐标| -|y |Number |目标位置的y坐标| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.moveTo(10, 10) -ctx.rect(10, 10, 100, 50) -ctx.lineTo(110, 60) -ctx.stroke() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/27097730-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.measureText -测量文本尺寸信息，目前仅返回文本宽度。同步接口。（App 端 2.8.12+ 支持） - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|text |String |要测量的文本 | - -**返回** - -返回 ```TextMetrics``` 对象，结构如下： - -|参数 |类型 |说明 | -|--- |--- |--- | -|width |Number |文本的宽度 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.font = 'italic bold 20px cursive' -const metrics = ctx.measureText('Hello World') -console.log(metrics.width) -``` - -### CanvasContext.moveTo -把路径移动到画布中的指定点，不创建线条。用 ```stroke()``` 方法来画线条。 - -**参数** - -|参数 |类型|说明 | -|--- |--- |--- | -|x |Number |目标位置的x坐标| -|y |Number |目标位置的y坐标| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.moveTo(10, 10) -ctx.lineTo(100, 10) - -ctx.moveTo(10, 50) -ctx.lineTo(100, 50) -ctx.stroke() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2945d2a0-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.quadraticCurveTo -创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|cpx |Number |贝塞尔控制点的x坐标| -|cpy |Number |贝塞尔控制点的y坐标| -|x |Number |结束点的x坐标 | -|y |Number |结束点的y坐标 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Draw points -ctx.beginPath() -ctx.arc(20, 20, 2, 0, 2 * Math.PI) -ctx.setFillStyle('red') -ctx.fill() - -ctx.beginPath() -ctx.arc(200, 20, 2, 0, 2 * Math.PI) -ctx.setFillStyle('lightgreen') -ctx.fill() - -ctx.beginPath() -ctx.arc(20, 100, 2, 0, 2 * Math.PI) -ctx.setFillStyle('blue') -ctx.fill() - -ctx.setFillStyle('black') -ctx.setFontSize(12) - -// Draw guides -ctx.beginPath() -ctx.moveTo(20, 20) -ctx.lineTo(20, 100) -ctx.lineTo(200, 20) -ctx.setStrokeStyle('#AAAAAA') -ctx.stroke() - -// Draw quadratic curve -ctx.beginPath() -ctx.moveTo(20, 20) -ctx.quadraticCurveTo(20, 100, 200, 20) -ctx.setStrokeStyle('black') -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2a0a0d00-4f28-11eb-bd01-97bc1429a9ff.png) - -针对 ```moveTo(20, 20)`` ```quadraticCurveTo(20, 100, 200, 20)``` 的三个关键坐标如下： - -* 红色：起始点(20, 20) -* 蓝色：控制点(20, 100) -* 绿色：终止点(200, 20) - -### CanvasContext.rect -创建一个矩形。 - -**Tip:** 用 fill() 或者 stroke() 方法将矩形真正的画到 canvas 中。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|x |Number |矩形路径左上角的x坐标 | -|y |Number |矩形路径左上角的y坐标 | -|width |Number |矩形路径的宽度 | -|height |Number |矩形路径的高度 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.rect(10, 10, 150, 75) -ctx.setFillStyle('red') -ctx.fill() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1c4656b0-4f28-11eb-a16f-5b3e54966275.png) - -### CanvasContext.restore -恢复之前保存的绘图上下文。 - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// save the default fill style -ctx.save() -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 100) - -// restore to the previous saved state -ctx.restore() -ctx.fillRect(50, 50, 150, 100) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2c8d0e60-4f28-11eb-8ff1-d5dcf8779628.png) - -### CanvasContext.rotate -以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|rotate |Number |旋转角度，以弧度计(degrees * Math.PI/180；degrees范围为0~360) | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.strokeRect(100, 10, 150, 100) -ctx.rotate(20 * Math.PI / 180) -ctx.strokeRect(100, 10, 150, 100) -ctx.rotate(20 * Math.PI / 180) -ctx.strokeRect(100, 10, 150, 100) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2bbd8960-4f28-11eb-bd01-97bc1429a9ff.png) - -### CanvasContext.save -保存当前的绘图上下文。 - -**示例代码** - -```javascript -const ctx = wx.createCanvasContext('myCanvas') - -// save the default fill style -ctx.save() -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 100) - -// restore to the previous saved state -ctx.restore() -ctx.fillRect(50, 50, 150, 100) - -ctx.draw() -``` - -### CanvasContext.scale -在调用```scale```方法后，之后创建的路径其横纵坐标会被缩放。多次调用```scale```，倍数会相乘。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|scaleWidth |Number |横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%) | -|scaleHeight|Number |纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%) | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.strokeRect(10, 10, 25, 15) -ctx.scale(2, 2) -ctx.strokeRect(10, 10, 25, 15) -ctx.scale(2, 2) -ctx.strokeRect(10, 10, 25, 15) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2d528140-4f28-11eb-8ff1-d5dcf8779628.png) - -### CanvasContext.setFillStyle -设置填充色，如果没有设置 fillStyle，默认颜色为 black。 - -**语法** - -```javascript -canvasContext.setFillStyle(color) -canvasContext.fillStyle = color -``` - -**参数** - -|参数 |类型|定义 |说明| -|---|---|---|---| -|color|Color|Gradient Object|填充色 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1c4656b0-4f28-11eb-a16f-5b3e54966275.png) - -### CanvasContext.setFontSize -设置字体的字号。 - -|参数 |类型 |说明 | -|--- |--- |--- | -|fontSize |Number |字体的字号| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setFontSize(20) -ctx.fillText('20', 20, 20) -ctx.setFontSize(30) -ctx.fillText('30', 40, 40) -ctx.setFontSize(40) -ctx.fillText('40', 60, 60) -ctx.setFontSize(50) -ctx.fillText('50', 90, 90) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1855bb90-4f28-11eb-a16f-5b3e54966275.png) - - -### CanvasContext.setGlobalAlpha -设置全局画笔透明度。 - -**参数** - -|参数 |类型 |范围|说明 | -|--- |--- |--- |--- | -|alpha |Number |0~1 |透明度，0 表示完全透明，1 表示完全不透明 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setFillStyle('red') -ctx.fillRect(10, 10, 150, 100) -ctx.setGlobalAlpha(0.2) -ctx.setFillStyle('blue') -ctx.fillRect(50, 50, 150, 100) -ctx.setFillStyle('yellow') -ctx.fillRect(100, 100, 150, 100) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/23c43740-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.setLineCap -设置线条的端点样式。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|lineCap|String |'butt'、'round'、'square' |线条的结束端点样式 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.beginPath() -ctx.moveTo(10, 10) -ctx.lineTo(150, 10) -ctx.stroke() - -ctx.beginPath() -ctx.setLineCap('butt') -ctx.setLineWidth(10) -ctx.moveTo(10, 30) -ctx.lineTo(150, 30) -ctx.stroke() - -ctx.beginPath() -ctx.setLineCap('round') -ctx.setLineWidth(10) -ctx.moveTo(10, 50) -ctx.lineTo(150, 50) -ctx.stroke() - -ctx.beginPath() -ctx.setLineCap('square') -ctx.setLineWidth(10) -ctx.moveTo(10, 70) -ctx.lineTo(150, 70) -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2577dab0-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.setLineDash -设置线条宽度。 - -**参数** - -|参数 |类型 |定义 | -|--- |--- |--- | -|pattern|Array |一组描述交替绘制线段和间距（坐标空间单位）长度的数字 | -|offset |Number |虚线偏移量 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setLineDash([10, 20], 5); - -ctx.beginPath(); -ctx.moveTo(0,100); -ctx.lineTo(400, 100); -ctx.stroke(); - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2e1d4b50-4f28-11eb-8ff1-d5dcf8779628.png) - -### CanvasContext.setLineJoin -设置线条的交点样式。 - -**参数** - -|参数 |类型 |范围 |说明| -|--- |--- |--- |---| -|lineJoin |String |'bevel'、'round'、'miter' |线条的结束交点样式 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.beginPath() -ctx.moveTo(10, 10) -ctx.lineTo(100, 50) -ctx.lineTo(10, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineJoin('bevel') -ctx.setLineWidth(10) -ctx.moveTo(50, 10) -ctx.lineTo(140, 50) -ctx.lineTo(50, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineJoin('round') -ctx.setLineWidth(10) -ctx.moveTo(90, 10) -ctx.lineTo(180, 50) -ctx.lineTo(90, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineJoin('miter') -ctx.setLineWidth(10) -ctx.moveTo(130, 10) -ctx.lineTo(220, 50) -ctx.lineTo(130, 90) -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/264f9d10-4f28-11eb-bd01-97bc1429a9ff.png) - -### CanvasContext.setLineWidth -设置线条的宽度。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|lineWidth |Number |线条的宽度(单位是px) | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.beginPath() -ctx.moveTo(10, 10) -ctx.lineTo(150, 10) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(5) -ctx.moveTo(10, 30) -ctx.lineTo(150, 30) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(10) -ctx.moveTo(10, 50) -ctx.lineTo(150, 50) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(15) -ctx.moveTo(10, 70) -ctx.lineTo(150, 70) -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/27d356e0-4f28-11eb-bd01-97bc1429a9ff.png) - -### CanvasContext.setMiterLimit -设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。 当 ``setLineJoin()`` 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|miterLimit |Number |最大斜接长度 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.beginPath() -ctx.setLineWidth(10) -ctx.setLineJoin('miter') -ctx.setMiterLimit(1) -ctx.moveTo(10, 10) -ctx.lineTo(100, 50) -ctx.lineTo(10, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(10) -ctx.setLineJoin('miter') -ctx.setMiterLimit(2) -ctx.moveTo(50, 10) -ctx.lineTo(140, 50) -ctx.lineTo(50, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(10) -ctx.setLineJoin('miter') -ctx.setMiterLimit(3) -ctx.moveTo(90, 10) -ctx.lineTo(180, 50) -ctx.lineTo(90, 90) -ctx.stroke() - -ctx.beginPath() -ctx.setLineWidth(10) -ctx.setLineJoin('miter') -ctx.setMiterLimit(4) -ctx.moveTo(130, 10) -ctx.lineTo(220, 50) -ctx.lineTo(130, 90) -ctx.stroke() - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/289176c0-4f28-11eb-bd01-97bc1429a9ff.png) - -### CanvasContext.setShadow -设置阴影样式。如果没有设置，offsetX 默认值为0， offsetY 默认值为0， blur 默认值为0，color 默认值为 black。 - -**参数** - -|参数|类型|定义 |说明 | -|---|---|--- |--- | -|offsetX|Number | |阴影相对于形状在水平方向的偏移 | -|offsetY|Number | |阴影相对于形状在竖直方向的偏移 | -|blur|Number |0~100 |阴影的模糊级别，数值越大越模糊 | -|color |Color | |阴影的颜色 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setFillStyle('red') -ctx.setShadow(10, 50, 50, 'blue') -ctx.fillRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/308068a0-4f28-11eb-b997-9918a5dda011.png) - -### CanvasContext.setStrokeStyle -设置边框颜色。如果没有设置 fillStyle，默认颜色为 black。 - -**参数** - -|参数 |类型 |定义|说明 | -|--- |--- |---|--- | -|color|Color|Gradient Object|填充色 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setStrokeStyle('red') -ctx.strokeRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3302cdc0-4f28-11eb-97b7-0dc4655d6e68.png) - -### CanvasContext.setTextAlign -用于设置文字的对齐 - -|参数 |类型 |定义| -|--- |--- |---| -|align |String |可选值 'left'、'center'、'right' | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setStrokeStyle('red') -ctx.moveTo(150, 20) -ctx.lineTo(150, 170) -ctx.stroke() - -ctx.setFontSize(15) -ctx.setTextAlign('left') -ctx.fillText('textAlign=left', 150, 60) - -ctx.setTextAlign('center') -ctx.fillText('textAlign=center', 150, 80) - -ctx.setTextAlign('right') -ctx.fillText('textAlign=right', 150, 100) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2ee492f0-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.setTextBaseline -用于设置文字的水平对齐 - -**参数** - -|参数 |类型|说明| -|--- |---|---| -|textBaseline |String |可选值 'top'、'bottom'、'middle'、'normal' | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.setStrokeStyle('red') -ctx.moveTo(5, 75) -ctx.lineTo(295, 75) -ctx.stroke() - -ctx.setFontSize(20) - -ctx.setTextBaseline('top') -ctx.fillText('top', 5, 75) - -ctx.setTextBaseline('middle') -ctx.fillText('middle', 50, 75) - -ctx.setTextBaseline('bottom') -ctx.fillText('bottom', 120, 75) - -ctx.setTextBaseline('normal') -ctx.fillText('normal', 200, 75) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/2fba3270-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.setTransform -使用矩阵重新设置（覆盖）当前变换的方法 - -**语法** - -```javascript -canvasContext.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY) -``` - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|scaleX |Number |水平缩放 | -|skewX |Number |水平倾斜 | -|skewY |Number |垂直倾斜 | -|scaleY |Number |垂直缩放 | -|translateX |Number |水平移动 | -|translateY |Number |垂直移动 | - -### CanvasContext.stroke -画出当前路径的边框。默认颜色色为黑色。 - -**Tip:** ``stroke()`` 描绘的的路径是从 ```beginPath()``` 开始计算，但是不会将 ```strokeRect()``` 包含进去，详情见例二。 - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.moveTo(10, 10) -ctx.lineTo(100, 10) -ctx.lineTo(100, 100) -ctx.stroke() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/31473b10-4f28-11eb-bdc1-8bd33eb6adaa.png) - - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -// begin path -ctx.rect(10, 10, 100, 30) -ctx.setStrokeStyle('yellow') -ctx.stroke() - -// begin another path -ctx.beginPath() -ctx.rect(10, 40, 100, 30) - -// only stoke this rect, not in current path -ctx.setStrokeStyle('blue') -ctx.strokeRect(10, 70, 100, 30) - -ctx.rect(10, 100, 100, 30) - -// it will stroke current path -ctx.setStrokeStyle('red') -ctx.stroke() -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/322c1cd0-4f28-11eb-bdc1-8bd33eb6adaa.png) - -### CanvasContext.strokeRect -画一个矩形(非填充)。用 `setFillStroke()` 设置边框颜色，如果没设置默认是黑色。 - -**参数** - -|参数 |类型 |范围 |说明 | -|--- |--- |--- |--- | -|x |Number | |矩形路径左上角的x坐标 | -|y |Number | |矩形路径左上角的y坐标 | -|width |Number | |矩形路径的宽度 | -|height |Number | |矩形路径的高度 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') -ctx.setStrokeStyle('red') -ctx.strokeRect(10, 10, 150, 75) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3302cdc0-4f28-11eb-97b7-0dc4655d6e68.png) - - -### CanvasContext.strokeText -给定的 (x, y) 位置绘制文本描边的方法 - -**语法** - -```javascript -canvasContext.strokeText(text, x, y, maxWidth) -``` - - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|text |String |要绘制的文本 | -|x |Number |文本起始点的 x 轴坐标 | -|y |Number |文本起始点的 y 轴坐标 | -|maxWidth |Number |需要绘制的最大宽度，可选 | - -### CanvasContext.transform -使用矩阵多次叠加当前变换的方法。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|scaleX |Number |水平缩放 | -|skewX |Number |水平倾斜 | -|skewY |Number |垂直倾斜 | -|scaleY |Number |垂直缩放 | -|translateX |Number |水平移动 | -|translateY |Number |垂直移动 | - -### CanvasContext.translate -对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。 - -**参数** - -|参数 |类型 |说明 | -|--- |--- |--- | -|x |Number |水平坐标平移量 | -|y |Number |竖直坐标平移量 | - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -ctx.strokeRect(10, 10, 150, 100) -ctx.translate(20, 20) -ctx.strokeRect(10, 10, 150, 100) -ctx.translate(20, 20) -ctx.strokeRect(10, 10, 150, 100) - -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/34aef720-4f28-11eb-97b7-0dc4655d6e68.png) diff --git a/docs/api/canvas/CanvasGradient.md b/docs/api/canvas/CanvasGradient.md deleted file mode 100644 index 0fc133d407548d9cda6ef502deb16743ac1c22b7..0000000000000000000000000000000000000000 --- a/docs/api/canvas/CanvasGradient.md +++ /dev/null @@ -1,37 +0,0 @@ -### CanvasGradient.addColorStop(stop,color) - -创建一个颜色的渐变点。 -- 小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染。 - -- 需要使用 ```addColorStop()``` 来指定渐变点，至少要两个。 - -#### 参数 - -|参数|类型 |定义 | -|---|---|--- | -|stop |Number(0-1)|表示渐变点在起点和终点中的位置 | -|color |Color |渐变点的颜色| - -**示例代码** - -```javascript -const ctx = uni.createCanvasContext('myCanvas') - -// Create circular gradient -const grd = ctx.createLinearGradient(30, 10, 120, 10) -grd.addColorStop(0, 'red') -grd.addColorStop(0.16, 'orange') -grd.addColorStop(0.33, 'yellow') -grd.addColorStop(0.5, 'green') -grd.addColorStop(0.66, 'cyan') -grd.addColorStop(0.83, 'blue') -grd.addColorStop(1, 'purple') - -// Fill with gradient -ctx.setFillStyle(grd) -ctx.fillRect(10, 10, 150, 80) -ctx.draw() -``` - -![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d1e88440-4f26-11eb-bd01-97bc1429a9ff.png) - diff --git a/docs/api/canvas/canvasGetImageData.md b/docs/api/canvas/canvasGetImageData.md deleted file mode 100644 index d666540b47da625cba2d0f0cdaf6aa25d655bca8..0000000000000000000000000000000000000000 --- a/docs/api/canvas/canvasGetImageData.md +++ /dev/null @@ -1,45 +0,0 @@ -#### uni.canvasGetImageData(OBJECT,this) - -返回一个数组，用来描述 canvas 区域隐含的像素数据，在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内 `` 组件。 - -**OBJECT参数说明：** - -|参数|类型|必填|说明| -|---|---|---|---| -|canvasId|String|是|画布标识，传入 `````` 的 canvas-id（支付宝小程序是id、其他平台是canvas-id）| -|x|Number|是|将要被提取的图像数据矩形区域的左上角 x 坐标| -|y|Number|是|将要被提取的图像数据矩形区域的左上角 y 坐标| -|width|Number|是|将要被提取的图像数据矩形区域的宽度| -|height|Number|是|将要被提取的图像数据矩形区域的高度| -|success|Function|否|接口调用成功的回调函数| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**success回调返回参数：** - -|参数|类型|说明| -|---|---|---| -|errMsg|String|| -|width|Number|图像数据矩形的宽度| -|height|Number|图像数据矩形的高度| -|data|Uint8ClampedArray|图像像素点数据，一维数组，每四项表示一个像素点的rgba| - - -**示例代码** - -```javascript -uni.canvasGetImageData({ - canvasId: 'myCanvas', - x: 0, - y: 0, - width: 100, - height: 100, - success(res) { - console.log(res.width) // 100 - console.log(res.height) // 100 - console.log(res.data instanceof Uint8ClampedArray) // true - console.log(res.data.length) // 100 * 100 * 4 - } -}) -``` - diff --git a/docs/api/canvas/canvasPutImageData.md b/docs/api/canvas/canvasPutImageData.md deleted file mode 100644 index c448c87bec51b84fd7bc0618dfae53ffb0cbda2b..0000000000000000000000000000000000000000 --- a/docs/api/canvas/canvasPutImageData.md +++ /dev/null @@ -1,31 +0,0 @@ -#### uni.canvasPutImageData(OBJECT,this) - -将像素数据绘制到画布的方法，在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内 `` 组件 - -**OBJECT参数说明：** - -|参数|类型|必填|说明|最低版本| -|---|---|---|---|--| -|canvasId|String|是|画布标识，传入 `````` 的 canvas-id（支付宝小程序是id、其他平台是canvas-id）|| -|data|Uint8ClampedArray|是|图像像素点数据，一维数组，每四项表示一个像素点的rgba|| -|x|Number|是|源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）|| -|y|Number|是|源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）|| -|width|Number|是|源图像数据矩形区域的宽度|| -|height|Number|否|源图像数据矩形区域的高度|| -|success|Function|否|接口调用成功的回调函数|| -|fail|Function|否|接口调用失败的回调函数|| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| | - -**示例代码** - -```javascript -const data = new Uint8ClampedArray([255, 0, 0, 255]) -uni.canvasPutImageData({ - canvasId: 'myCanvas', - x: 0, - y: 0, - width: 1, - data: data, - success(res) {} -}) -``` diff --git a/docs/api/canvas/canvasToTempFilePath.md b/docs/api/canvas/canvasToTempFilePath.md deleted file mode 100644 index ba5862cf3379556c0ab8276683ec8772c3cc01fe..0000000000000000000000000000000000000000 --- a/docs/api/canvas/canvasToTempFilePath.md +++ /dev/null @@ -1,48 +0,0 @@ -#### uni.canvasToTempFilePath(object, component) - -把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 `` 组件。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|x（[CanvasContext.toTempFilePath](https://opendocs.alipay.com/mini/api/rod3ti)）|√|√|√|√| - -**object参数说明：** - -|参数 |类型 |必填 |说明 | -|---|---|---|---|---| -|x |Number |否 |画布x轴起点（默认0）| -|y |Number |否 |画布y轴起点（默认0）| -|width |Number |否 |画布宽度（默认为canvas宽度-x）| -|height |Number |否 |画布高度（默认为canvas高度-y）| -|destWidth |Number |否 |输出图片宽度（默认为 width * 屏幕像素密度）| -|destHeight |Number |否 |输出图片高度（默认为 height * 屏幕像素密度）| -|canvasId |String |是 |画布标识，传入 ```` 的 canvas-id（支付宝小程序是id、其他平台是canvas-id）| -|fileType |String |否 |目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png'| -|quality |Number |否 |图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理| -|success |Function |否 |接口调用成功的回调函数| -|fail |Function |否 |接口调用失败的回调函数| -|complete |Function |否 |接口调用结束的回调函数（调用成功、失败都会执行） | - -**示例代码** - -```javascript -uni.canvasToTempFilePath({ - x: 100, - y: 200, - width: 50, - height: 50, - destWidth: 100, - destHeight: 100, - canvasId: 'myCanvas', - success: function(res) { - // 在H5平台下，tempFilePath 为 base64 - console.log(res.tempFilePath) - } -}) -``` - -**Tips** - -- H5端 Canvas 内绘制的图像需要支持跨域访问才能成功。 \ No newline at end of file diff --git a/docs/api/canvas/createCanvasContext.md b/docs/api/canvas/createCanvasContext.md deleted file mode 100644 index 0d8cc1ffe371fea9e0b1c7c5eb62c1b38a5c96bb..0000000000000000000000000000000000000000 --- a/docs/api/canvas/createCanvasContext.md +++ /dev/null @@ -1,18 +0,0 @@ -#### uni.createCanvasContext(canvasId, this) - -#### 定义 - -创建 ```canvas``` 绘图上下文（指定 canvasId）。在自定义组件下，第二个参数传入组件实例this，以操作组件内 `````` 组件 - -**Tip:** 需要指定 canvasId，该绘图上下文只作用于对应的 `` - -#### 参数 - -|参数|类型|说明| -|----|----|-----| -|canvasId|String |画布表示，传入定义在 `` 的 canvas-id或id（支付宝小程序是id、其他平台是canvas-id） | -|componentInstance|Object |自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 `` ，如果省略，则不在任何自定义组件内查找 | - -#### 返回值 - -[CanvasContext](/api/canvas/CanvasContext.md) \ No newline at end of file diff --git a/docs/api/canvas/createOffscreenCanvas.md b/docs/api/canvas/createOffscreenCanvas.md deleted file mode 100644 index 60990ab59353939fdfd314a1c7f4f0509b37a6c6..0000000000000000000000000000000000000000 --- a/docs/api/canvas/createOffscreenCanvas.md +++ /dev/null @@ -1,6 +0,0 @@ - -#### uni.createOffscreenCanvas() - -创建离屏 canvas 实例 - -仅微信小程序平台支持，[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.createOffscreenCanvas.html) diff --git a/docs/api/extend/native-plugin.md b/docs/api/extend/native-plugin.md deleted file mode 100644 index 67762d0ca6286363eec1e71401f2a18601b385b3..0000000000000000000000000000000000000000 --- a/docs/api/extend/native-plugin.md +++ /dev/null @@ -1,167 +0,0 @@ -### uni.requireNativePlugin(PluginName) - -引入 App 原生插件。 - -平台差异说明：App - -自 HXuilderX1.4 版本起，uni-app 支持引入原生插件，使用方式如下： - -```js - const PluginName = uni.requireNativePlugin(PluginName); // PluginName 为原生插件名称 -``` - -不管是vue文件还是nvue文件，都是这个API。 - - -### 内置原生插件 -内置原生插件,uni-app已默认集成，支持直接在内置基座运行。 - -仅在nvue页面，支持引入BindingX，animation， DOM.addRule等。 - -在vue页面，支持引入clipboard，storage，stream，deviceInfo等。 - - - -使用方式：可通过```uni.requireNativePlugin```直接使用。 - -示例： - -``` html - - - -``` - - - - -非内置原生插件，分为 [本地插件](/api/extend/native-plugin?id=本地插件非内置原生插件) 和 [云端插件](/api/extend/native-plugin?id=云端插件非内置原生插件) 。集成原生插件后，需要提交云端打包或制作自定义基座运行才会生效。 - -### 本地插件(非内置原生插件) - -**本地插件**，是uni-app项目nativeplugins目录(目录不存在则创建)下的原生插件。 - -##### 第一步：获取本地原生插件 - -- 方式一：插件市场下载免费uni-app原生插件 - -可以登录[uni原生插件市场](https://ext.dcloud.net.cn/?cat1=5&cat2=51)，在免费的插件详情页中点击“下载for离线打包”下载原生插件（zip格式），解压到HBuilderX的uni-app项目下的“nativeplugins”目录（如不存在则创建），以下是“DCloud-RichAlert”插件举例，它的下载地址是：https://ext.dcloud.net.cn/plugin?id=36 - -下载解压后目录结构如下： - - - - -- 方式二：开发者自己开发uni-app原生插件 - -原生插件开发完成后按指定格式压缩为zip包，参考[uni-app原生插件格式说明文档](https://nativesupport.dcloud.net.cn/NativePlugin/course/package)。 -按上图的格式配置到uni-app项目下的“nativeplugins”目录。 - - - -##### 第二步：配置本地原生插件 - -在manifest.json -> App原生插件配置 -> 选择本地插件 -> 选择需要打包生效的插件 -> 保存后提交云端打包生效。 - - - -##### 第三步：开发调试本地原生插件 -在vue页面或nvue页面引入这个原生插件。 - -使用uni.requireNativePlugin的api，参数为插件的id。 -```js - const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert') -``` - -##### 第四步：打包发布 -使用自定义基座开发调试本地原生插件后，不可直接将自定义基座apk作为正式版发布。 -应该重新提交云端打包（不能勾选“自定义基座”）生成正式版本。 - - - - -### 云端插件(非内置原生插件) - -**云端插件**，已经在插件市场绑定或购买的插件，无需下载插件到工程中，云打包时会直接合并打包原生插件到APP中。（试用插件只能在自定义基座中使用） - - - -##### 第一步：购买或下载uni-app原生插件 -使用前需先登录[uni原生插件市场](https://ext.dcloud.net.cn/?cat1=5&cat2=51)，在插件详情页中购买，免费插件也可以在插件市场0元购。购买后才能够云端打包使用插件。 -> 购买插件时请选择正确的appid，以及绑定正确包名 - - -##### 第二步：使用自定义基座打包uni原生插件 （注：请使用真机运行自定义基座） -在manifest.json -> App原生插件配置 -> 选择云端插件 -> 选择需要打包的插件 -> 保存后提交云端打包生效。 - - - - -##### 第三步：开发调试uni-app原生插件 -在vue页面或nvue页面引入这个原生插件。 - -使用uni.requireNativePlugin的api，参数为插件的id。 - -1.在页面引入原生插件，uni.requireNativePlugin 使用后返回一个对象： - -```js -const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert') -``` -2.使用原生插件 - -```js - dcRichAlert.show({ - position: 'bottom', - title: "提示信息", - titleColor: '#FF0000', - content: "uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍", - contentAlign: 'left', - checkBox: { - title: '不再提示', - isSelected: true - }, - buttons: [{ - title: '取消' - }, { - title: '否' - }, { - title: '确认', - titleColor: '#3F51B5' - }] - }, result => { - console.log(result) - }); -``` - - - - -##### 第四步：打包发布 -使用自定义基座开发调试uni-app原生插件后，不可直接将自定义基座apk作为正式版发布。 -应该重新提交云端打包（不能勾选“自定义基座”）生成正式版本。 - - - -#### 注意事项 -1.可以在 插件市场 查看更多插件，如需开发uni原生插件请参考 [uni原生插件开发文档](https://nativesupport.dcloud.net.cn/NativePlugin/README)。 -2.如果插件需要传递文件路径，则需要传手机文件的绝对路径，可使用 5+ [IO模块](http://www.html5plus.org/doc/zh_cn/io.html) 的相关 API 得到文件的绝对路径。 diff --git a/docs/api/file/file.md b/docs/api/file/file.md deleted file mode 100644 index 1f95e33f4ce990ea5d5485d0a0f3074974692558..0000000000000000000000000000000000000000 --- a/docs/api/file/file.md +++ /dev/null @@ -1,234 +0,0 @@ -#### uni.saveFile(OBJECT) -保存文件到本地。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|√|√|√|√|x| - -**注意：saveFile 会把临时文件移动，因此调用成功后传入的 tempFilePath 将不可用。** - -**OBJECT 参数说明：** - -|参数名|类型|必填|说明| -|:-|:-|:-|:-| -|tempFilePath|String|是|需要保存的文件的临时路径| -|success|Function|否|返回文件的保存路径，res = {savedFilePath: '文件的保存路径'}| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**success 返回参数说明：** - -|参数|说明| -|:-|:-| -|savedFilePath|文件的保存路径| - -**示例代码：** - -```javascript -uni.chooseImage({ - success: function (res) { - var tempFilePaths = res.tempFilePaths; - uni.saveFile({ - tempFilePath: tempFilePaths[0], - success: function (res) { - var savedFilePath = res.savedFilePath; - } - }); - } -}); -``` - -#### uni.getSavedFileList(OBJECT) -获取本地已保存的文件列表。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|√|√|√|√|x| - -**OBJECT 参数说明：** - -|参数名|类型|必填|说明| -|:-|:-|:-|:-| -|success|Function|否|接口调用成功的回调函数，返回结果见 success 返回参数说明| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**success 返回参数说明：** - -|参数|类型|说明| -|:-|:-|:-| -|errMsg|String|接口调用结果| -|fileList|Array<Object>|文件列表| - -**fileList 中的项目说明：** - -|键|类型|说明| -|:-|:-|:-| -|filePath|String|文件的本地路径| -|createTime|Number|文件的保存时的时间戳，从 `1970/01/01 08:00:00` 到该时刻的秒数。| -|size|Number|文件大小，以字节为单位。| - -**示例代码：** - -```javascript -uni.getSavedFileList({ - success: function (res) { - console.log(res.fileList); - } -}); -``` - -#### uni.getSavedFileInfo(OBJECT) -获取本地文件的文件信息。此接口只能用于获取已保存到本地的文件。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|√|√|x|√|x| - -**OBJECT 参数说明：** - -|参数名|类型|必填|说明| -|:-|:-|:-|:-| -|filePath|String|是|文件路径| -|success|Function|否|接口调用成功的回调函数，返回结果见 success 返回参数说明| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**success 返回参数说明：** - -|参数|类型|说明| -|:-|:-|:-| -|errMsg|String|接口调用结果| -|size|Number|文件大小，以字节为单位。| -|createTime|Number|文件保存时的时间戳，从 `1970/01/01 08:00:00` 到该时刻的秒数。| - -**示例代码：** - -```javascript -uni.getSavedFileInfo({ - filePath: 'unifile://somefile', //仅做示例用，非真正的文件路径 - success: function (res) { - console.log(res.size); - console.log(res.createTime); - } -}); -``` - -#### uni.removeSavedFile(OBJECT) -删除本地存储的文件。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|√|√|√|√|x| - -**OBJECT 参数说明：** - -|参数名|类型|必填|说明| -|:-|:-|:-|:-| -|filePath|String|是|需要删除的文件路径| -|success|Function|否|接口调用成功的回调函数| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**示例代码：** - -```javascript -uni.getSavedFileList({ - success: function (res) { - if (res.fileList.length > 0) { - uni.removeSavedFile({ - filePath: res.fileList[0].filePath, - complete: function (res) { - console.log(res); - } - }); - } - } -}); -``` - -#### uni.getFileInfo(OBJECT) -获取文件信息 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|√|√|√|x| - -**OBJECT 参数说明：** - -|参数名|类型|默认值|必填|说明|平台差异说明| -|:-|:-|:-|:-|:-|:-| -|filePath|String||是|本地文件路径|| -|digestAlgorithm|String|md5|否|计算文件摘要的算法，可取值 md5、sha1。|微信小程序、App 2.9.0+| -|success|Function||否|接口调用成功的回调函数|| -|fail|Function||否|接口调用失败的回调函数|| -|complete|Function||否|接口调用结束的回调函数（调用成功、失败都会执行）| | - -**success 返回参数说明：** - -|参数|类型|说明|平台差异说明| -|:-|:-|:-|:-| -|errMsg|String|接口调用结果|| -|size|Number|文件大小，以字节为单位。|| -|digest|String|按照传入的 digestAlgorithm 计算得出的的文件摘要|微信小程序、App 2.9.0+| - -#### uni.openDocument(OBJECT) -新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|√|√|√|√|x| - -**OBJECT 参数说明：** - -|参数名|类型|必填|说明|平台差异说明| -|:-|:-|:-|:-| -|filePath|String|是|文件路径，可通过 downFile 获得|| -|fileType|String|否|文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx|微信小程序| -|success|String|否|接口调用成功的回调函数|| -|fail|String|否|接口调用失败的回调函数|微信小程序| -|complete|String|否|接口调用结束的回调函数（调用成功、失败都会执行）| | - -**示例代码：** - -```javascript -uni.downloadFile({ - url: 'https://example.com/somefile.pdf', - success: function (res) { - var filePath = res.tempFilePath; - uni.openDocument({ - filePath: filePath, - success: function (res) { - console.log('打开文档成功'); - } - }); - } -}); -``` - -**平台差异** - -|平台|打开方式| -|:-|:-| -|小程序|在小程序的入口应用内打开| -|App iOS|在当前应用内打开| -|App Android|调用系统相关应用打开，无相关应用则不能打开| -|H5|使用浏览器打开，当前浏览器不支持则不能打开| - -**Tips** - -- App端，io操作还可以用更强大的plus.io API。[https://www.html5plus.org/doc/zh_cn/io.html](https://www.html5plus.org/doc/zh_cn/io.html) -- App端，打开各种格式的文件，如office、pdf等，还可以用更强大的三方插件，详见[插件市场](https://ext.dcloud.net.cn/search?q=pdf) -- 选择文件上传，uni-app有自带的api：[uni.chooseImage](https://uniapp.dcloud.io/api/media/image?id=chooseimage)和[uni.chooseVideo](https://uniapp.dcloud.io/api/media/video?id=choosevideo)。App端如需选择非媒体文件，可在插件市场搜索[文件选择](https://ext.dcloud.net.cn/search?q=文件选择)，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。 diff --git a/docs/api/file/getFileSystemManager.md b/docs/api/file/getFileSystemManager.md deleted file mode 100644 index 2b037a7684dbc307e1d804033ef01e7f21b314ec..0000000000000000000000000000000000000000 --- a/docs/api/file/getFileSystemManager.md +++ /dev/null @@ -1,8 +0,0 @@ - -#### uni.getFileSystemManager() - -获取全局唯一的文件管理器 - -- 微信小程序平台，[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/wx.getFileSystemManager.html) -- 字节跳动小程序平台，[规范详情](https://developer.toutiao.com/dev/cn/mini-app/develop/api/file/getfilesystemmanager) -- QQ小程序平台，[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/file/qq.getFileSystemManager.html) \ No newline at end of file diff --git a/docs/api/global.md b/docs/api/global.md deleted file mode 100644 index af8160e688c9a6be0c745234736a6b979eb5ad1d..0000000000000000000000000000000000000000 --- a/docs/api/global.md +++ /dev/null @@ -1,57 +0,0 @@ -## uniIDHasRole - -新增于`HBuilderX 3.1.15-alpha`，判断当前用户是否拥有某角色。 - -> 需要在token内缓存角色权限才可使用，请参考：[缓存角色权限](https://uniapp.dcloud.net.cn/uniCloud/uni-id?id=cachepermissionintoken) - -**在模板内使用** - -```html - -``` - -**在页面/组件js代码中使用** - -```html - - -``` - -## uniIDHasPermission - -新增于`HBuilderX 3.1.15-alpha`，判断当前用户是否拥有某权限，注意：admin角色的用户拥有所有权限 - -> 需要在token内缓存角色权限才可使用，请参考：[缓存角色权限](https://uniapp.dcloud.net.cn/uniCloud/uni-id?id=cachepermissionintoken) - -**在模板内使用** - -```html - -``` - -**在页面/组件js代码中使用** - -```html - - -``` \ No newline at end of file diff --git a/docs/api/interceptor.md b/docs/api/interceptor.md deleted file mode 100644 index 313eca27ffd6574ee461af9ca39d4b951d789ae6..0000000000000000000000000000000000000000 --- a/docs/api/interceptor.md +++ /dev/null @@ -1,65 +0,0 @@ -### uni.addInterceptor(STRING, OBJECT) -添加拦截器 - -**STRING 参数说明** - -需要拦截的`api`名称，如：`uni.addInterceptor('request', OBJECT)` ，将拦截 `uni.request()` - -**OBJECT 参数说明** - -|参数名 |类型 |必填 |默认值 |说明 |平台差异说明 | -|:- |:- |:- |:- |:- |:- | -|invoke |Function |否 | |拦截前触发 | | -|success |Function |否 | |成功回调拦截 | | -|fail |Function |否 | |失败回调拦截 | | -|complete |Function |否 | |完成回调拦截 | | - - -**示例** - -```javascript -uni.request({ - url: 'request/login', //仅为示例，并非真实接口地址。 - success: (res) => { - console.log(res.data); - // 打印： {code:1,...} - } -}); - - -uni.addInterceptor('request', { - invoke(args) { - // request 触发前拼接 url - args.url = 'https://www.example.com/'+args.url - }, - success(args) { - // 请求成功后，修改code值为1 - args.data.code = 1 - }, - fail(err) { - console.log('interceptor-fail',err) - }, - complete(res) { - console.log('interceptor-complete',res) - } -}) - -``` - -### uni.removeInterceptor(STRING) -删除拦截器 - -**STRING 参数说明** - -需要删除拦截器的`api`名称 - -**示例** - -```javascript - -uni.removeInterceptor('request') - -``` - -##### 拦截器的适用场景非常多，比如路由拦截，权限引导等。 -> 你可以参考插件市场,拦截器应用示例：图片选择api时无权限，引导用户快捷打开系统设置：[https://ext.dcloud.net.cn/plugin?id=5095](https://ext.dcloud.net.cn/plugin?id=5095) \ No newline at end of file diff --git a/docs/api/key.md b/docs/api/key.md deleted file mode 100644 index 3f2c07808c945312ad36cb7aa6ae1428efc7c5db..0000000000000000000000000000000000000000 --- a/docs/api/key.md +++ /dev/null @@ -1,87 +0,0 @@ -#### uni.hideKeyboard() - -隐藏软键盘 - -隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|x|√|√|√| - - -#### uni.onKeyboardHeightChange(CALLBACK) - -监听键盘高度变化 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|HBuilderX 2.2.3+|x|基础库2.7+|x|x|x|√|√| - -**CALLBACK 返回参数** - -|参数|类型|说明| -|:-|:-|:-| -|height|Number|键盘高度| - -**示例代码** - -```js -uni.onKeyboardHeightChange(res => { - console.log(res.height) -}) -``` - -#### uni.offKeyboardHeightChange(CALLBACK) - -取消监听键盘高度变化事件 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|HBuilderX 3.1.0+|x|基础库2.9.2+|x|x|x|x|x| - -**示例代码** - -```js -uni.offKeyboardHeightChange(callback) -``` - -#### uni.getSelectedTextRange(OBJECT) - -在input、textarea等focus之后，获取输入框的光标位置。注意：只有在focus的时候调用此接口才有效。目前仅支持 vue 页面，nvue 可以直接使用 weex 的 [getSelectionRange](https://weex.apache.org/zh/docs/components/input.html#getSelectionRange)。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|HBuilderX 2.8.12+|HBuilderX 2.8.12+|基础库 2.7.0+|x|x|x|x|√| - -**OBJECT 参数说明：** - -| 参数名 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -**success 返回参数说明：** - -| 属性 | 类型 | 说明 | -| --- | --- | --- | -| start | Number | 输入框光标起始位置 | -| end | Number | 输入框光标结束位置 | - -**示例代码** - -```js -uni.getSelectedTextRange({ - success: res => { - console.log('getSelectedTextRange res', res.start, res.end) - } -}) -``` diff --git a/docs/api/lifecycle.md b/docs/api/lifecycle.md deleted file mode 100644 index 6058019e05ed0311347c1a2342d088c90e607aff..0000000000000000000000000000000000000000 --- a/docs/api/lifecycle.md +++ /dev/null @@ -1,7 +0,0 @@ -### 应用生命周期 - -``uni-app`` 支持 onLaunch、onShow、onHide 等应用生命周期函数，详情请参考[应用生命周期](/collocation/frame/lifecycle?id=应用生命周期) - -### 页面生命周期 - -``uni-app`` 支持 onLoad、onShow、onReady 等生命周期函数，详情请参考[页面生命周期](/collocation/frame/lifecycle?id=页面生命周期) \ No newline at end of file diff --git a/docs/api/location/location.md b/docs/api/location/location.md deleted file mode 100644 index 75750985153b3572b5c6e88b1958f1a768c35891..0000000000000000000000000000000000000000 --- a/docs/api/location/location.md +++ /dev/null @@ -1,125 +0,0 @@ -### uni.getLocation(OBJECT) -获取当前的地理位置、速度。 -在微信小程序中，当用户离开应用后，此接口无法调用，除非申请后台持续定位权限；当用户点击“显示在聊天顶部”时，此接口可继续调用。 - -**OBJECT 参数说明** - -|参数名|类型|必填|说明|平台差异说明| -|:-|:-|:-|:-|:-:| -|type|String|否|默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 ``uni.openLocation`` 的坐标，app平台高德SDK仅支持返回gcj02|| -|altitude|Boolean|否|传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度|App和字节跳动小程序不支持| -|geocode|Boolean|否|默认false，是否解析地址信息|仅App平台支持| -|success|Function|是|接口调用成功的回调函数，返回内容详见返回参数说明。|| -|fail|Function|否|接口调用失败的回调函数|| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| | - -**success 返回参数说明** - -|参数|说明| -|:-|:-| -|latitude|纬度，浮点数，范围为-90~90，负数表示南纬| -|longitude|经度，浮点数，范围为-180~180，负数表示西经| -|speed|速度，浮点数，单位m/s| -|accuracy|位置的精确度| -|altitude|高度，单位 m| -|verticalAccuracy|垂直精度，单位 m（Android 无法获取，返回 0）| -|horizontalAccuracy|水平精度，单位 m| -|[address](/api/location/location?id=address)|地址信息（仅App端支持，需配置geocode为true）| - -**address 地址信息说明** - -|属性|类型|描述|说明| -|:-|:-|:-|:-| -|country|String|国家|如“中国”，如果无法获取此信息则返回undefined| -|province|String|省份名称|如“北京市”，如果无法获取此信息则返回undefined| -|city|String|城市名称|如“北京市”，如果无法获取此信息则返回undefined| -|district|String|区（县）名称|如“朝阳区”，如果无法获取此信息则返回undefined| -|street|String|街道信息|如“酒仙桥路”，如果无法获取此信息则返回undefined| -|streetNum|String|获取街道门牌号信息|如“3号”，如果无法获取此信息则返回undefined| -|poiName|String|POI信息|如“电子城．国际电子总部”，如果无法获取此信息则返回undefined| -|postalCode|String|邮政编码|如“100016”，如果无法获取此信息则返回undefined| -|cityCode|String|城市代码|如“010”，如果无法获取此信息则返回undefined| - -**示例** - -```javascript -uni.getLocation({ - type: 'wgs84', - success: function (res) { - console.log('当前位置的经度：' + res.longitude); - console.log('当前位置的纬度：' + res.latitude); - } -}); -``` - -#### 注意 - -- H5：在较新的浏览器上，H5 端获取定位信息，要求部署在 **https** 服务上，本地预览（localhost）仍然可以使用 http 协议。 -- H5：国产安卓手机上，H5若无法定位，检查手机是否开通位置服务、GPS，ROM是否给该浏览器位置权限、浏览器是否对网页弹出请求给予定位的询问框。 -- H5：安卓手机在原生App内嵌H5时，无法定位需要原生App处理Webview。 -- H5：移动端浏览器普遍仅支持GPS定位，在GPS信号弱的地方可能定位失败。 -- H5：PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。 -- H5：使用地图和定位相关需要在[腾讯地图开放平台](https://lbs.qq.com/dev/console/key/manage)申请密钥，填写在 [manifest.json](https://uniapp.dcloud.io/collocation/manifest?id=h5sdkconfig) 中。 -- H5：微信公众号可使用微信js sdk，[详见](https://ask.dcloud.net.cn/article/35380) -- H5：2.9.9 alpha升级，优化 uni.getLocation 支持通过 IP 定位。默认通过getLocation获取，如果获取失败，备选方案是通过 IP 定位获取，用的是内置公共的key，如果你想正确使用，就填写正常的key。如果你不想使用，就填写错误的key即可。key配置：manifest.json ---> H5配置 ---> 定位和地图 ---> key。 -- App：Android由于谷歌服务被墙，或者手机上没有GMS，想正常定位就需要向高德等三方服务商申请SDK资质，获取AppKey。否则打包后定位就会不准。云打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南，详见：[https://ask.dcloud.net.cn/article/29](https://ask.dcloud.net.cn/article/29)。离线打包自行在原生工程中配置。注意包名、appkey、证书信息必须匹配。真机运行可以正常定位，是因为真机运行基座使用了DCloud向高德申请的sdk配置，打包后必须由开发者自己申请。如果手机自带GMS且网络环境可以正常访问google定位服务器，此时无需在manifest填写高德定位的sdk配置。 -- App：```` 组件默认为国测局坐标gcj02，调用 ``uni.getLocation`` 返回结果传递给 ```` 组件时，需指定 type 为 gcj02。 -- App：定位和map是2个东西。通过`getLocation`得到位置坐标后，可以在任意map地图上展示，比如定位使用高德，地图使用google的webview版地图。如果坐标系不同时，注意转换坐标系。 -- App：如果使用web-view加载地图，无需在manifest里配地图的sdk配置。 -- App：持续定位方案：iOS端可以申请持续定位权限，[参考](https://ask.dcloud.net.cn/article/12569)。Android如果进程被杀，代码无法执行。可以使用[unipush](https://ask.dcloud.net.cn/article/35622)，通过服务器激活App，执行透传消息，让App启动然后采集位置。Android上，即使自己写原生插件做后台进程，也很容易被杀，unipush是更合适的方案 -- 小程序：api默认不返回详细地址中文描述。需要中文地址有2种方式：1、使用高德地图小程序sdk，在app和微信上都可以获得中文地址，[参考](http://ask.dcloud.net.cn/article/35070)。2、只考虑app，使用``plus.geolocation``也可以获取中文地址。manifest里的App SDK配置仅用于app，小程序无需在这里配置。 -- 可以通过用户授权API来判断用户是否给应用授予定位权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize) - -### uni.chooseLocation(OBJECT) -打开地图选择位置。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|√|x|x|x| - -**OBJECT 参数说明** - -|参数名|类型|必填|说明| -|:-|:-|:-|:-| -|latitude|Number|否|目标地纬度，仅微信小程序2.9.0+支持| -|longitude|Number|否|目标地经度，仅微信小程序2.9.0+支持| -|keyword|String|否|搜索关键字，仅App平台支持| -|success|Function|是|接口调用成功的回调函数，返回内容详见返回参数说明。| -|fail|Function|否|接口调用失败的回调函数（获取定位失败、用户取消等情况下触发）| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**注意** -- 因平台差异，如果SDK配置百度地图，需要设置keyword，才能显示相关地点 -- nvue下只支持高德地图，不支持百度地图 -- HBuilderX 2.4.0+ 非 weex 编译模式仅支持高德地图 - - -**success 返回参数说明** - -|参数|说明| -|:-|:-| -|name|位置名称| -|address|详细地址| -|latitude|纬度，浮点数，范围为-90~90，负数表示南纬，使用 gcj02 国测局坐标系。| -|longitude|经度，浮点数，范围为-180~180，负数表示西经，使用 gcj02 国测局坐标系。| - -**示例** - -```javascript -uni.chooseLocation({ - success: function (res) { - console.log('位置名称：' + res.name); - console.log('详细地址：' + res.address); - console.log('纬度：' + res.latitude); - console.log('经度：' + res.longitude); - } -}); -``` - -**注意** -- 不同端，使用地图选择时基于的底层地图引擎不一样，如微信小程序和H5是腾讯地图，App和阿里小程序是高德地图，百度小程序是百度地图，详见地图map组件的使用注意事项。app中也可以使用百度定位，在manifest中配置，打包后生效。但app-nvue里只能用百度定位，不能用百度地图。另外选择地图、查看地图位置的API也仅支持高德地图。所以App端如无特殊必要，建议使用高德地图。 -- 微信内置浏览器中可使用微信js sdk，[详见](https://ask.dcloud.net.cn/article/35380) -- chooseLocation属于封装型API，开发者若觉得不够灵活，可自行基于原始的map组件进行封装。插件市场已经有各种封装样例了。 -- 若Android App端位置不准，见上文uni.getLocation的注意事项 diff --git a/docs/api/location/map.md b/docs/api/location/map.md deleted file mode 100644 index bc07bdada59a4e4d27fa758a7c5eaaa7c3d90ccd..0000000000000000000000000000000000000000 --- a/docs/api/location/map.md +++ /dev/null @@ -1,152 +0,0 @@ -### uni.createMapContext(mapId,this) -创建并返回 map 上下文 ``mapContext`` 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 ```` 组件。 - -**注意：uni.createMapContext(mapId, this)** -- app-nvue 平台 2.2.5+ 支持 uni.createMapContext(mapId, this) -- app-nvue 平台 2.2.5- 需要同时设置组件属性id和ref ````，或者直接使用 ref，例如 ``this.$refs.map1`` - - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|√|x|1.9.0+|x| - -mapContext - -``mapContext`` 通过 mapId 跟一个 ```` 组件绑定，通过它可以操作对应的 ```` 组件。 - -**mapContext 对象的方法列表** - -|方法|参数|说明|平台差异说明|最低版本| -|:-|:-|:-|:-|:-| -|getCenterLocation|OBJECT|获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 [uni.openLocation](api/location/location?id=getlocation)||| -|moveToLocation|OBJECT|将地图中心移动到当前定位点，需要配合map组件的show-location使用||| -|translateMarker|OBJECT|平移marker，带动画|app-nvue 2.1.5+、微信小程序带动画|| -|includePoints|OBJECT|缩放视野展示所有经纬度|app-nvue 2.1.5+|| -|getRegion|OBJECT|获取当前地图的视野范围||| -|getScale|OBJECT|获取当前地图的缩放级别||| -|$getAppMap||获取原生地图对象 [plus.maps.Map](https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map)|app-vue自定义组件模式|1.9.3| - -`$getAppMap()` 注意事项： - -- 在页面中，必须在 `onReady` 中调用。 -- 在组件中，必须在 `mounted` 中调用。 -- nvue没有`$getAppMap()`，请使用`createMapContext` -- `uni-app`中使用原生地图无需提供占位div，得到`$getAppMap()`后直接js使用即可。 - -**getCenterLocation 的 OBJECT 参数列表** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|success|Function|否|接口调用成功的回调函数 ，res = { longitude: "经度", latitude: "纬度"}| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - - -**moveToLocation 的 OBJECT 参数列表** - -|参数 |类型 |必填 |说明 | -|:- |:- |:- |:- | -|longitude|Number |否 |经度 ，App 2.6.8、H5、仅微信小程序 2.8.0+ 支持 | -|latitude |Number |否 |纬度 ，App 2.6.8、H5、仅微信小程序 2.8.0+ 支持 | -|success |Function |否 |接口调用成功的回调函数 ，res = { longitude: "经度", latitude: "纬度"}| -|fail |Function |否 |接口调用失败的回调函数 | -|complete |Function |否 |接口调用结束的回调函数（调用成功、失败都会执行） | - - -**translateMarker 的 OBJECT 参数列表** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|markerId|Number|是|指定 marker| -|destination|Object|是|指定 marker 移动到的目标点| -|autoRotate|Boolean|否|移动过程中是否自动旋转 marker| -|rotate|Number|否|marker 的旋转角度| -|duration|Number|否|动画持续时长，默认值1000ms，平移与旋转分别计算| -|animationEnd|Function|否| 动画结束回调函数| -|fail|Function|否| 接口调用失败的回调函数| - -**includePoints 的 OBJECT 参数列表** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|points|Array|是|要显示在可视区域内的坐标点列表，[{latitude, longitude}]| -|padding|Array|否|坐标点形成的矩形边缘到地图边缘的距离，单位像素。格式为[上，右，下，左]，安卓上只能识别数组第一项，上下左右的padding一致。开发者工具暂不支持padding参数。| - -**getRegion 的 OBJECT 参数列表** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|success|Function|否|接口调用成功的回调函数，res = {southwest, northeast}，西南角与东北角的经纬度| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**getScale 的 OBJECT 参数列表** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|success|Function|否|接口调用成功的回调函数，res = {scale}| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -## mapSearch 模块(module) - -#### reverseGeocode(Object,callback) -> 反向地理编码 - -##### Object -属性|类型 |默认值|必填|说明 -:--|:--|:--|:--|:--| -point|Object| |是|{latitude: 纬度, longitude: 经度} - -##### callback 返回 Object 参数说明 -属性|类型 |说明 -:--|:--|:--| -type|String|"success" 表示成功， "fail" 表示失败 -code|Number| 成功返回 0,失败返回相应 code 码 -message|String|失败描述 -address|String|查询后地址 （成功时返回） - - -#### poiSearchNearBy（Object,callback); -> 周边检索 - -##### Object -属性|类型 |默认值|必填|说明 -:--|:--|:--|:--|:--| -point|Object| |是|检索的中心点坐标 {latitude: 纬度, longitude: 经度} -key|String| | 是|搜索关键字 -radius|Number|3000|否|检索的半径，单位为米 -index|Number|1|否|要获取检索结果的页号索引 - -##### callback 返回 Object 参数说明 -属性|类型 |说明 -:--|:--|:--| -type|String|"success" 表示成功， "fail" 表示失败 -code|Number| 成功返回 0,失败返回相应 code 码 -message|String|失败描述 -totalNumber|Number|返回的POI数目 -currentNumber|Number|当前页POI数目 -pageNumber|Number|页数 -pageIndex|Number|当前页号索引 -poiList|Array.<poiObject>|POI信息数组 - -##### poiObject -属性|类型 |说明 -:--|:--|:--| -location|Object|{latitude: 纬度, longitude: 经度} -name|String|名称 -type|String|类型 -distance|Number|距离（单位米） -address|String|地址 - - -**Tips** - -- App端使用map，nvue比vue更强大，且没有层级问题。 -- App端vue页面默认为高德地图，也可以选择百度地图。但app-nvue只有高德地图，没有百度地图。以及地图选择api（mapSearch），只支持高德地图。 -- H5 端获取定位信息，需要部署在 **https** 服务上，本地预览（localhost）仍然可以使用 http 协议。 -- 无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。 -- App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南，详见：[https://ask.dcloud.net.cn/article/29](https://ask.dcloud.net.cn/article/29) -- ```` 组件默认为国测局坐标，调用 ``uni.getLocation`` 返回结果传递给 ```` 组件时，需指定 type 为 gcj02。 diff --git a/docs/api/location/open-location.md b/docs/api/location/open-location.md deleted file mode 100644 index ce67b24c8e6ec3348522aac45197ae083aaf8cc8..0000000000000000000000000000000000000000 --- a/docs/api/location/open-location.md +++ /dev/null @@ -1,68 +0,0 @@ -### uni.openLocation(OBJECT) -使用应用内置地图查看位置。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|√|√|x|x| - -**OBJECT 参数说明** - -|参数名|类型|必填|说明|平台差异说明| -|:-|:-|:-|:-|:-| -|latitude|Float|是|纬度，范围为-90~90，负数表示南纬，使用 gcj02 国测局坐标系|| -|longitude|Float|是|经度，范围为-180~180，负数表示西经，使用 gcj02 国测局坐标系|| -|scale|Int|否|缩放比例，范围5~18，默认为18|微信小程序| -|name|String|否|位置名|支付宝必填| -|address|String|否|地址的详细说明|支付宝必填| -|success|Function|否|接口调用成功的回调函数|| -|fail|Function|否|接口调用失败的回调函数|| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| | - -**示例** - -```javascript -uni.getLocation({ - type: 'gcj02', //返回可以用于uni.openLocation的经纬度 - success: function (res) { - const latitude = res.latitude; - const longitude = res.longitude; - uni.openLocation({ - latitude: latitude, - longitude: longitude, - success: function () { - console.log('success'); - } - }); - } -}); -``` - -**Tips** - -- 本API是一个非原子的封装界面，开发者如有定制需求，可自己做页面实现类似功能。 -- 若定位不准，参考[uni.getLocation文档的注意事项](https://uniapp.dcloud.io/api/location/location) -- ```` 组件默认为国测局坐标，调用 ``uni.getLocation`` 返回结果传递给 ```` 组件时，需指定 type 为 gcj02。 -- App 端使用地图组件需要向高德等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南，详见：[https://ask.dcloud.net.cn/article/29](https://ask.dcloud.net.cn/article/29)。 -- H5 端使用地图和定位相关需要在[腾讯地图开放平台](https://lbs.qq.com/dev/console/key/manage)申请密钥，填写在 [manifest.json](https://uniapp.dcloud.io/collocation/manifest?id=h5sdkconfig) 中。 -- iOS端 如需使用第三方地图进行导航，需要在 manifest.json 文件内增加 ``urlschemewhitelist`` 节点，在线打包即可 -- 不同平台打开的地图不一样，App端是高德地图（不支持百度地图）、H5端是腾讯地图、微信小程序端是腾讯地图、百度小程序是百度地图、阿里小程序是高德地图、字节跳动小程序是高德地图。 - -```json -{ - "app-plus": { - "distribute": { - "ios": { - "urlschemewhitelist": [ - "baidumap", - "iosamap", - "qqmap" - ] - } - } - } -} -``` - -- 点击返回也会进入 `fail` 回调中 diff --git a/docs/api/log.md b/docs/api/log.md deleted file mode 100644 index 645be1efbb8d7ab318ddf3db86edaba3cc7f2964..0000000000000000000000000000000000000000 --- a/docs/api/log.md +++ /dev/null @@ -1,20 +0,0 @@ -## console -向控制台打印日志信息。 -### debug -向控制台打印 debug 日志 - -注：App 端自定义组件模式下，debug 方法等同于 log 方法。 -### log -向控制台打印 log 日志 -### info -向控制台打印 info 日志 -### warn -向控制台打印 warn 日志 -### error -向控制台打印 error 日志 - -注意： - -- 不同平台对于 console 方法的支持存在差异，建议在开发过程中只使用文档中提到的方法。 -- HBuilderX中有2个重要的代码块，敲`clog`：可直接输出`console.log()`；敲`clogv`：可输出`console.log(": " + );`，并且出现双光标，方便把变量名称和值同时打印出来。 -- HBuilderX 1.9.7 以上的自定义组件模式，在App端支持打印对象信息到控制台。老版本可使用`clogj`代码块将json对象转为字符串打印出来。 diff --git a/docs/api/media/audio-context.md b/docs/api/media/audio-context.md deleted file mode 100644 index cd83ca06feae1b7070bf4b78919c92f40cc9d86e..0000000000000000000000000000000000000000 --- a/docs/api/media/audio-context.md +++ /dev/null @@ -1,103 +0,0 @@ -### uni.createInnerAudioContext() -创建并返回内部 audio 上下文 `innerAudioContext` 对象。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|1.23.4+|√|√|√|√| - -**innerAudioContext 对象的属性列表** - -|属性|类型|说明|只读|平台差异说明| -|:-|:-|:-|:-|:-| -|src|String|音频的数据链接，用于直接播放。|否|微信小程序不支持本地路径| -|startTime|Number|开始播放的位置（单位：s），默认 0|否|| -|autoplay|Boolean|是否自动开始播放，默认 false|否|H5端部分浏览器不支持| -|loop|Boolean|是否循环播放，默认 false|否|| -|obeyMuteSwitch|Boolean|是否遵循系统静音开关，当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音，默认值 true|否|微信小程序、百度小程序、字节跳动小程序| -|duration|Number|当前音频的长度（单位：s），只有在当前有合法的 src 时返回，需要在onCanplay中获取|是|| -|currentTime|Number|当前音频的播放位置（单位：s），只有在当前有合法的 src 时返回，时间不取整，保留小数点后 6 位|是|| -|paused|Boolean|当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放|是|| -|buffered|Number|音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲。|是|| -|volume|Number|音量。范围 0~1。|否| | - - -**innerAudioContext 对象的方法列表** - -|方法|参数|说明| -|:-|:-|:-| -|play||播放（H5端部分浏览器需在用户交互时进行）| -|pause||暂停| -|stop||停止| -|seek|position|跳转到指定位置，单位 s| -|destroy||销毁当前实例| -|onCanplay|callback|音频进入可以播放状态，但不保证后面可以流畅播放| -|onPlay|callback|音频播放事件| -|onPause|callback|音频暂停事件| -|onStop|callback|音频停止事件| -|onEnded|callback|音频自然播放结束事件| -|onTimeUpdate|callback|音频播放进度更新事件| -|onError|callback|音频播放错误事件| -|onWaiting|callback|音频加载中事件，当音频因为数据不足，需要停下来加载时会触发| -|onSeeking|callback|音频进行 seek 操作事件| -|onSeeked|callback|音频完成 seek 操作事件| -|offCanplay|callback|取消监听 onCanplay 事件| -|offPlay|callback|取消监听 onPlay 事件| -|offPause|callback|取消监听 onPause 事件| -|offStop|callback|取消监听 onStop 事件| -|offEnded|callback|取消监听 onEnded 事件| -|offTimeUpdate|callback|取消监听 onTimeUpdate 事件| -|offError|callback|取消监听 onError 事件| -|offWaiting|callback|取消监听 onWaiting 事件| -|offSeeking|callback|取消监听 onSeeking 事件| -|offSeeked|callback|取消监听 onSeeked 事件| - -errCode 说明 - -|errCode|说明| -|:-|:-| -|10001|系统错误| -|10002|网络错误| -|10003|文件错误| -|10004|格式错误| -|-1|未知错误| - - -**支持格式** - -|格式|iOS|Android| -|:-|:-|:-| -|flac |x|√| -|m4a |√|√| -|ogg |x|√| -|ape |x|√| -|amr |x|√| -|wma |x|√| -|wav |√|√| -|mp3 |√|√| -|mp4 |x|√| -|aac |√|√| -|aiff |√|x| -|caf |√|x| - -**示例** - -```javascript -const innerAudioContext = uni.createInnerAudioContext(); -innerAudioContext.autoplay = true; -innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'; -innerAudioContext.onPlay(() => { - console.log('开始播放'); -}); -innerAudioContext.onError((res) => { - console.log(res.errMsg); - console.log(res.errCode); -}); -``` - -**tips** - -- 如需音频的倍速播放，可通过video的倍速播放替代实现。插件市场有封装好的插件[音频倍速播放](https://ext.dcloud.net.cn/search?q=%E9%9F%B3%E9%A2%91%E5%80%8D%E9%80%9F%E6%92%AD%E6%94%BE) -- 如果需要带ui的音频播放器样式，可以在插件市场搜索相关[插件](https://ext.dcloud.net.cn/search?q=audio) -- `Android 4.1` 及更高版本对 `PCM/WAVE` 支持范围是 `8` 位和 `16` 位线性 PCM（比特率最高可达到硬件上限）。以 8000、16000 和 44100 Hz 录制原始 PCM 所需的采样率。 diff --git a/docs/api/media/background-audio-manager.md b/docs/api/media/background-audio-manager.md deleted file mode 100644 index 4e87127c1e90fc9f37127f316f0782340276bf92..0000000000000000000000000000000000000000 --- a/docs/api/media/background-audio-manager.md +++ /dev/null @@ -1,73 +0,0 @@ -### uni.getBackgroundAudioManager() -获取**全局唯一**的背景音频管理器 ``backgroundAudioManager``。 - -背景音频，不是游戏的背景音乐，而是类似QQ音乐那样，App在后台时，仍然在播放音乐。如果你不需要在App切后台时继续播放，那么不应该使用本API，而应该使用普通音频API[uni.createInnerAudioContext](https://uniapp.dcloud.io/api/media/audio-context)。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|x|√|√|√|√|x| - -**backgroundAudioManager 对象的属性列表** - -|属性|类型|说明|只读| -|:-|:-|:-|:-| -|duration|Number|当前音频的长度（单位：s），只有在当前有合法的 src 时返回|是| -|currentTime|Number|当前音频的播放位置（单位：s），只有在当前有合法的 src 时返回|是| -|paused|Boolean|当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放|是| -|src|String|音频的数据源，默认为空字符串，**当设置了新的 src 时，会自动开始播放，**目前支持的格式有 m4a, aac, mp3, wav|否| -|startTime|Number|音频开始播放的位置（单位：s）|否| -|buffered|Number|音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲。|是| -|title|String|音频标题，用于做原生音频播放器音频标题。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。|否| -|epname|String|专辑名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。|否| -|singer|String|歌手名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。|否| -|coverImgUrl|String|封面图url，用于做原生音频播放器背景图。原生音频播放器中的分享功能，分享出去的卡片配图及背景也将使用该图。|否| -|webUrl|String|页面链接，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。|否| -|protocol|String|音频协议。默认值为 'http'，设置 'hls' 可以支持播放 HLS 协议的直播音频，App平台暂不支持|否| - -**backgroundAudioManager 对象的方法列表** - -|方法|参数|说明| -|:-|:-|:-| -|play||播放| -|pause||暂停| -|stop||停止| -|seek|position|跳转到指定位置，单位 s| -|onCanplay|callback|背景音频进入可以播放状态，但不保证后面可以流畅播放| -|onPlay|callback|背景音频播放事件| -|onPause|callback|背景音频暂停事件| -|onStop|callback|背景音频停止事件| -|onEnded|callback|背景音频自然播放结束事件| -|onTimeUpdate|callback|背景音频播放进度更新事件| -|onPrev|callback|用户在系统音乐播放面板点击上一曲事件（iOS only）| -|onNext|callback|用户在系统音乐播放面板点击下一曲事件（iOS only）| -|onError|callback|背景音频播放错误事件| -|onWaiting|callback|音频加载中事件，当音频因为数据不足，需要停下来加载时会触发| - -errCode 说明 - -|errCode|说明| -|:-|:-| -|10001|系统错误| -|10002|网络错误| -|10003|文件错误| -|10004|格式错误| -|-1|未知错误| - -**示例** - -```javascript -const bgAudioManager = uni.getBackgroundAudioManager(); -bgAudioManager.title = '致爱丽丝'; -bgAudioManager.singer = '暂无'; -bgAudioManager.coverImgUrl = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png'; -bgAudioManager.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'; -``` - - -**注意** -因为背景音频播放耗费手机电量，所以平台都有管控，需在manifest中填写申请。 -- ios App平台，背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 ``"UIBackgroundModes":["audio"]`` 才能保证音乐可以后台播放（打包成ipa生效） -- 小程序平台，需在manifest.json 对应的小程序节点下，填写"requiredBackgroundModes": ["audio"]。发布小程序时平台会审核 -- Android App端默认不会在通知栏出现音量控制，如需此功能，需要在插件市场单独下载原生插件，[详见](https://ext.dcloud.net.cn/search?q=%E9%80%9A%E7%9F%A5%E6%A0%8F+%E9%9F%B3%E4%B9%90%E6%8E%A7%E5%88%B6) diff --git a/docs/api/media/camera-context.md b/docs/api/media/camera-context.md deleted file mode 100644 index 737c65982bf3fa9574969197fba773c3d15eaf68..0000000000000000000000000000000000000000 --- a/docs/api/media/camera-context.md +++ /dev/null @@ -1,66 +0,0 @@ -### uni.createCameraContext() -创建并返回 camera 组件的上下文 cameraContext 对象。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|x|√|x|√|√| - -本API为 camera 组件配套的js API，与 camera 组件的平台兼容性相同，可实现非全屏摄像头。App端可通过[plus.camera](https://www.html5plus.org/doc/zh_cn/camera.html)实现全屏摄像头。 - -**cameraContext 对象的方法列表** - -|方法|参数|说明| -|:-|:-|:-| -|takePhoto|Object|拍照，可指定质量，成功则返回图片路径。| -|setZoom|Object|设置缩放级别 **微信小程序 2.10.0+ 支持**| -|startRecord|Object|开始录像| -|stopRecord|Object|结束录像，成功则返回封面与视频。| -|onCameraFrame|Function|获取 Camera 实时帧数据。仅`微信小程序平台`支持，[规范详情](https://developers.weixin.qq.com/miniprogram/dev/api/CameraContext.onCameraFrame.html)| - -### cameraContext.takePhoto -**takePhoto 的 Object 参数列表：** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|quality|String|否|成像质量，值为high（高质量）、normal（普通质量）、low（低质量），默认normal| -|success|Function|否|接口调用成功的回调函数 ，返回照片文件的临时路径，res = { tempImagePath }| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -### cameraContext.setZoom -**setZoom 的 Object 参数列表：** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|zoom|String|是|缩放级别，范围[1, maxZoom]。zoom 可取小数，精确到小数后一位。maxZoom 可在 @initdone 返回值中获取。| -|success|Function|否|接口调用成功的回调函数| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -### cameraContext.startRecord -**startRecord 的 Object 参数列表：** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|timeoutCallback|Function|否|接超过30s或页面 onHide 时会结束录像| -|success|Function|否|接口调用成功的回调函数| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -### cameraContext.stopRecord -**stopRecord 的 Object 参数列表：** - -|参数|类型|默认值|必填|说明| -|:-|:-|:-|:-|:-| -|compressed|Boolean|false|否|启动视频压缩，压缩效果同 `chooseVideo` ,**微信小程序 2.10.0+ 支持**｜ -|success|Function||否|接口调用成功的回调函数 ，返回封面与视频的临时路径，res = { tempThumbPath, tempVideoPath }。| -|fail|Function||否|接口调用失败的回调函数| -|complete|Function||否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**注意** - -- App下实现OCR等证件识别等需求，可在插件市场获取原生插件，[https://ext.dcloud.net.cn/plugin?id=135](https://ext.dcloud.net.cn/plugin?id=135) -- 微信小程序下实现OCR等证件识别等需求，插件市场也有封装，搜索 [ocr](https://ext.dcloud.net.cn/search?q=ocr) 可见。 -- 可以通过用户授权API来判断用户是否给应用授予摄像头的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize) diff --git a/docs/api/media/editor-context.md b/docs/api/media/editor-context.md deleted file mode 100644 index 31b657334c005f78c1fd22d6a7c7c8a19644d02a..0000000000000000000000000000000000000000 --- a/docs/api/media/editor-context.md +++ /dev/null @@ -1,294 +0,0 @@ -## editorContext - -editor 组件对应的 editorContext 实例，可通过 [uni.createSelectorQuery](/api/ui/nodes-info?id=createselectorquery) 获取。 - -```js - onEditorReady() { - uni.createSelectorQuery().select('#editor').context((res) => { - this.editorCtx = res.context - }).exec() -} -``` - -百度小程序 ```Editor``` 富文本编辑器动态库提供了 ```createEditorContext``` 的方法来获取。 - -```js - onEditorReady() { - this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId'); - } -``` - - -`editorContext` 通过 `id` 跟一个 [``](/component/editor) 组件绑定，操作对应的 [``](/component/editor) 组件。 - - - - - - -**平台差异说明** - -|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 | -|:-:|:-: |:-: |:-: |:-: |:-: |:-: | -|√ |2.4.5+ |√ |x |需引入动态库 |x |x | - - -**百度小程序引入动态库** - - -1. 在项目中引用动态库，在 ```manifest.json``` 中增添一项 ```dynamicLib``` - -```js - "mp-baidu" : { - "usingComponents" : true, - "appid" : "", - "setting" : { - "urlCheck" : true - }, - "dynamicLib": {//引入百度小程序动态库 - "editorLib": { - "provider": "swan-editor" - } - } - }, - -``` - -2. 在每个使用到富文本编辑器组件的页面，配置 ```pages.json``` 文件如下： - -``` js -{ - "pages": [ - { - "path": "pages/index/index", - "style": { - "navigationBarTitleText": "uni-app", - "usingSwanComponents": { - "editor": "dynamicLib://editorLib/editor" - } - } - } - ] -} - -``` - - - - -## editorContext.format(name, value) - -修改样式 - -| 参数 | 类型 | 说明 | -| --- | --- | --- | -|name|String|属性| -|value|String|值| - -**支持设置的样式列表** - -| name | value | -| --- | --- | -| bold | | -| italic | | -| underline | | -| strike | | -| ins | | -| script | sub / super | -| header | H1 / H2 / h3 / H4 / h5 / H6 | -| align | left / center / right / justify | -| direction | rtl | -| indent | -1 / +1 | -| list | ordered / bullet / check | -| color | hex color | -| backgroundColor | hex color | -| margin/marginTop/marginBottom/marginLeft/marginRight | css style | -| padding/paddingTop/paddingBottom/paddingLeft/paddingRight | css style | -| font/fontSize/fontStyle/fontVariant/fontWeight/fontFamily | css style | -| lineHeight | css style | -| letterSpacing | css style | -| textDecoration | css style | -| textIndent | css style | - -对已经应用样式的选区设置会取消样式。css style 表示 css 中规定的允许值。 - -## editorContext.insertDivider(OBJECT) - -插入分割线 - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.insertImage(OBJECT) - -插入图片。 - -微信小程序平台地址为临时文件时，获取的编辑器html格式内容中 `` 标签增加属性 data-local，delta 格式内容中图片 attributes 属性增加 data-local 字段，该值为传入的临时文件地址。 -开发者可选择在提交阶段上传图片到服务器，获取到网络地址后进行替换。替换时对于html内容应替换掉 `` 的 src 值，对于 delta 内容应替换掉 `insert { image: abc }` 值。 - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| src | String | | 是 | 图片地址 | -| alt | String | | 否 | 图像无法显示时的替代文本 | -| width | String | | 否 | 图片宽度（pixels/百分比），2.6.5+ 支持 | -| height | String | | 否 | 图片高度 (pixels/百分比），2.6.5+ 支持| -| extClass | String | | 否 | 添加到图片 img 标签上的类名，2.6.5+ 支持 | -| data | Object | | 否 | data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上，2.6.5+ 支持 | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.insertText(OBJECT) - -覆盖当前选区，设置一段文本 - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| text | String | | 否 | 文本内容 | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.setContents(OBJECT) - -初始化编辑器内容，hmlt和delta同时存在时仅delta生效 - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| html | String | | 否 | 带标签的HTML内容 | -| delta | Object | | 否 | 表示内容的delta对象 | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.getContents(OBJECT) - -获取编辑器内容 - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.clear(OBJECT) - -清空编辑器内容 - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.removeFormat(OBJECT) - -清除当前选区的样式 - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.undo(OBJECT) - -撤销 - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.redo(OBJECT) - -恢复 - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.blur(OBJECT) - -编辑器失焦，同时收起键盘。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√`HBuilderX 3.0.3`|√`HBuilderX 3.0.3`|√`基础库2.8.3`|x|x|x|x|x| - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.scrollIntoView(OBJECT) - -使得编辑器光标处滚动到窗口可视区域内。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√`HBuilderX 3.0.3`|√`HBuilderX 3.0.3`|√`基础库2.8.3`|x|x|x|x|x| - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -## editorContext.getSelectionText(OBJECT) - -获取编辑器已选区域内的纯文本内容。当编辑器失焦或未选中一段区间时，返回内容为空。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√`HBuilderX 3.0.3`|√`HBuilderX 3.0.3`|√`基础库2.10.2`|x|x|x|x|x| - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | -| --- | --- | --- | --- | --- | -| success | Function | | 否 | 接口调用成功的回调函数 | -| fail | Function | | 否 | 接口调用失败的回调函数 | -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | - -**success 返回参数说明：** - -|参数|类型|说明| -|:-|:-|:-| -|errMsg|String|接口调用结果| -|text|String|纯文本内容| \ No newline at end of file diff --git a/docs/api/media/file.md b/docs/api/media/file.md deleted file mode 100644 index e705d6cf6f7d9ddebb7a299e26a4a66f779102e9..0000000000000000000000000000000000000000 --- a/docs/api/media/file.md +++ /dev/null @@ -1,100 +0,0 @@ -### uni.chooseFile(OBJECT) -从本地选择文件。 - -本API主要用于选择非媒体文件，如果选择的文件是媒体文件，另有3个专用API： -- [图片选择](https://uniapp.dcloud.io/api/media/image?id=chooseimage) -- [视频选择](https://uniapp.dcloud.io/api/media/video?id=choosevideo) -- [多媒体文件选择(含图片视频)](https://uniapp.dcloud.io/api/media/video?id=choosemedia) - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|√`(HBuilder X2.9.9+)`|x`(可使用wx.chooseMessageFile)`|x|x|x|x|x| - -- App端如需选择非媒体文件，可在插件市场搜索[文件选择](https://ext.dcloud.net.cn/search?q=文件选择)，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。 -- App端如果想选择下载到`_doc`、`_downloads`、`_documents`等plus.io控制的目录下的文件，可通过[plus.io Api](https://www.html5plus.org/doc/zh_cn/io.html)，自己做选择框。 -- 选择文件大多为了上传，uni ui封装了更完善的[uni-file-picker组件](https://ext.dcloud.net.cn/plugin?id=4079)，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。 - -**OBJECT 参数说明** - -|参数名|类型|默认值|必填|说明|平台差异说明| -|:-|:-|:-|:-|:-|:-| -|count|Number|100|否|最多可以选择的文件数量|见下方说明| -|type|String|'all'|否|所选的文件的类型|见下方说明| -|extension|Array<String>||否|根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。|见下方说明| -|sourceType|Array<String>|['album','camera']|否|（仅在type为`image`或`video`时可用）`album` 从相册选图，`camera` 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项|| -|success|Function||是|成功则返回图片的本地文件路径列表 `tempFilePaths`|| -|fail|Function||否|接口调用失败的回调函数|| -|complete|Function||否|接口调用结束的回调函数（调用成功、失败都会执行）| | - -**Tips** - -- count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。 -- sourceType 在H5端对应`input`的`capture`属性，设置为`['album']`无效，依然可以使用相机。 -- extension暂只支持文件后缀名，例如`['.zip','.exe','.js']`，不支持`application/msword`等类似值 - -**注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 [uni.saveFile](api/file/file?id=savefile)，在应用下次启动时才能访问得到。** - -**OBJECT.type 的合法值** - -|值|说明| -|:-|:-| -|all|从所有文件选择| -|video|只能选择视频文件| -|image|只能选择图片文件| - -**Tips** - -- 如果type属性和extension同时存在，例如`{type:'image',extension:['.png','.jpg']}`，则会选择`image/png,image/jpg`文件 -- 如果只配置extension属性，例如`{extension:['.doc','.xlsx','.docx']}`，则会选择`.doc,.xlsx,.docx`文件，详情见[`accept属性`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/accept) -- 在微信环境中，如果`type="all"`，则`extension`属性失效 - -**success 返回参数说明** - -|参数|类型|说明| -|:-|:-|:-| -|tempFilePaths|Array<String>|文件的本地文件路径列表| -|tempFiles|Array<Object>、Array<File>|文件的本地文件列表，每一项是一个 File 对象| - -**File 对象结构如下** - -|参数|类型|说明| -|:-|:-|:-| -|path|String|本地文件路径| -|size|Number|本地文件大小，单位：B| -|name|String|包含扩展名的文件名称，仅H5支持| -|type|String|文件类型，仅H5支持| - -**示例** - -```javascript -uni.chooseFile({ - count: 6, //默认100 - extension:['.zip','.doc'], - success: function (res) { - console.log(JSON.stringify(res.tempFilePaths)); - } -}); - -// 选择图片文件 -uni.chooseFile({ - count: 10, - type: 'image', - success (res) { - // tempFilePath可以作为img标签的src属性显示图片 - const tempFilePaths = res.tempFiles - } -}) -``` - -# wx.chooseMessageFile(OBJECT) - -从微信聊天会话中选择文件。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√`(基础库2.5.0+)`|x|x|x|x|x| - diff --git a/docs/api/media/image.md b/docs/api/media/image.md deleted file mode 100644 index 1c3bf1a8361c6b051d0a1bca168a64e9009011aa..0000000000000000000000000000000000000000 --- a/docs/api/media/image.md +++ /dev/null @@ -1,297 +0,0 @@ -### uni.chooseImage(OBJECT) -从本地相册选择图片或使用相机拍照。 - -App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考[plus.camera](https://www.html5plus.org/doc/zh_cn/camera.html) - -**OBJECT 参数说明** - -|参数名|类型|必填|说明|平台差异说明| -|:-|:-|:-|:-|:-| -|count|Number|否|最多可以选择的图片张数，默认9|见下方说明| -|sizeType|Array<String>|否|original 原图，compressed 压缩图，默认二者都有|App、微信小程序、支付宝小程序、百度小程序| -|extension|Array<String>|否|根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。|H5(HBuilder X2.9.9+)| -|sourceType|Array<String>|否|album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项|| -|crop|Object|否|图像裁剪参数，设置后 sizeType 失效|App 3.1.19+| -|success|Function|是|成功则返回图片的本地文件路径列表 tempFilePaths|| -|fail|Function|否|接口调用失败的回调函数|小程序、App| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| | - -**crop 参数说明** - -|参数名|类型|必填|说明| -|:-|:-|:-|:-| -|quality|Number|否|取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。| -|width|Number|是|裁剪的宽度，单位为px，用于计算裁剪宽高比。| -|height|Number|是|裁剪的高度，单位为px，用于计算裁剪宽高比。| -|resize|Boolean|否|是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示| - -**Tips** - -- count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。 -- sourceType 在H5端对应`input`的`capture`属性，设置为`['album']`无效，依然可以使用相机。 -- 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize) -- App端如需选择非媒体文件，可在插件市场搜索[文件选择](https://ext.dcloud.net.cn/search?q=文件选择)，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。 -- 选择照片大多为了上传，uni ui封装了更完善的[uni-file-picker组件](https://ext.dcloud.net.cn/plugin?id=4079)，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。 - - -**注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 [uni.saveFile](api/file/file?id=savefile)，在应用下次启动时才能访问得到。** - -**success 返回参数说明** - -|参数|类型|说明| -|:-|:-|:-| -|tempFilePaths|Array<String>|图片的本地文件路径列表| -|tempFiles|Array<Object>、Array<File>|图片的本地文件列表，每一项是一个 File 对象| - -**File 对象结构如下** - -|参数|类型|说明| -|:-|:-|:-| -|path|String|本地文件路径| -|size|Number|本地文件大小，单位：B| -|name|String|包含扩展名的文件名称，仅H5支持| -|type|String|文件类型，仅H5支持| - -**示例** - -```javascript -uni.chooseImage({ - count: 6, //默认9 - sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 - sourceType: ['album'], //从相册选择 - success: function (res) { - console.log(JSON.stringify(res.tempFilePaths)); - } -}); -``` - -### uni.previewImage(OBJECT) @unipreviewimageobject -预览图片。 - -**OBJECT 参数说明** - -|参数名|类型|必填|说明|平台差异说明| -|:-|:-|:-|:-|:-| -|current|String/Number|详见下方说明|详见下方说明|| -|urls|Array<String>|是|需要预览的图片链接列表|| -|indicator|String|否|图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。|App| -|loop|Boolean|否|是否可循环预览，默认值为 false|App| -|longPressActions|Object|否|长按图片显示操作菜单，如不填默认为**保存相册**|App 1.9.5+| -|success|Function|否|接口调用成功的回调函数|| -|fail|Function|否|接口调用失败的回调函数|| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| | - -**current 参数说明** - -> 1.9.5+ 支持传图片在 urls 中的索引值 - -current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。**App平台在 1.9.5至1.9.8之间，current为必填。不填会报错** - -注意，当 urls 中有重复的图片链接时： - -- 传链接，预览结果始终显示该链接在 urls 中第一次出现的位置。 -- 传索引值，在微信/百度/字节跳动小程序平台，会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。 - -举例说明： - -一组图片 `[A, B1, C, B2, D]`，其中 B1 与 B2 的图片链接是一样的。 - -- 传 B2 的链接，预览的结果是 B1，前一张是 A，下一张是 C。 -- 传 B2 的索引值 3，预览的结果是 B2，前一张是 C，下一张是 D。此时在微信/百度/字节跳动小程序平台，最终传入的 urls 是 `[A, C, B2, D]`，过滤掉了与 B2 重复的 B1。 - -**longPressActions 参数说明** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|itemList|Array<String>|是|按钮的文字数组| -|itemColor|String|否|按钮的文字颜色，字符串格式，默认为"#000000"| -|success|Function|否|接口调用成功的回调函数，详见返回参数说明| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**success 返回参数说明** - -|参数|类型|说明| -|:-|:-|:-| -|index|Number|用户长按图片的索引值| -|tapIndex|Number|用户点击按钮列表的索引值| - -**示例** - -```javascript -// 从相册选择6张图 -uni.chooseImage({ - count: 6, - sizeType: ['original', 'compressed'], - sourceType: ['album'], - success: function(res) { - // 预览图片 - uni.previewImage({ - urls: res.tempFilePaths, - longPressActions: { - itemList: ['发送给朋友', '保存图片', '收藏'], - success: function(data) { - console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); - }, - fail: function(err) { - console.log(err.errMsg); - } - } - }); - } - }); -``` - -**TIPS** -- 在非H5端，previewImage是原生实现的，界面自定义灵活度较低。 -- 插件市场有前端实现的previewImage，性能低于原生实现，但界面可随意定义；插件市场也有适于App端的previewImage原生插件，提供了更多功能。 - - -### uni.getImageInfo(OBJECT) - -获取图片信息。 - -小程序下获取网络图片信息需先配置download域名白名单才能生效。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|√|√|√|√| - -**OBJECT 参数说明** - -|参数名|类型|必填|说明| -|:-|:-|:-|:-| -|src|String|是|图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径| -|success|Function|否|接口调用成功的回调函数| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**success 返回参数说明** - -|参数名|类型|说明|平台差异说明| -|:-|:-|:-|:-| -|width|Number|图片宽度，单位px|| -|height|Number|图片高度，单位px|| -|path|String|返回图片的本地路径|| -|orientation|String|返回图片的方向，有效值见下表|App、小程序| -|type|String|返回图片的格式|App、小程序| - -**orientation 参数说明** - -|枚举值|说明| -|:-|:-| -|up|默认| -|down|180度旋转| -|left|逆时针旋转90度| -|right|顺时针旋转90度| -|up-mirrored|同up，但水平翻转| -|down-mirrored|同down，但水平翻转| -|left-mirrored|同left，但垂直翻转| -|right-mirrored|同right，但垂直翻转| - -**示例** - -```javascript -uni.chooseImage({ - count: 1, - sourceType: ['album'], - success: function (res) { - uni.getImageInfo({ - src: res.tempFilePaths[0], - success: function (image) { - console.log(image.width); - console.log(image.height); - } - }); - } -}); -``` - -### uni.saveImageToPhotosAlbum(OBJECT) -保存图片到系统相册。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|√|√|√|√|√| - -**OBJECT 参数说明** - -|参数名|类型|必填|说明| -|:-|:-|:-|:-| -|filePath|String|是|图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径| -|success|Function|否|接口调用成功的回调函数| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - -**success 返回参数说明** - -|参数名|类型|说明| -|:-|:-|:-| -|path|String|保存到相册的图片路径，仅 App 3.0.5+ 支持| -|errMsg|String|调用结果| - -**注意** - -- 可以通过用户授权API来判断用户是否给应用授予相册的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize) -- H5没有API可触发保存到相册行为，下载图片时浏览器会询问图片存放地址。 - -**示例代码：** - -```javascript -uni.chooseImage({ - count: 1, - sourceType: ['camera'], - success: function (res) { - uni.saveImageToPhotosAlbum({ - filePath: res.tempFilePaths[0], - success: function () { - console.log('save success'); - } - }); - } -}); -``` - -# uni.compressImage(OBJECT) - -压缩图片接口，可选压缩质量 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|√|√(基础库版本>=3.110.3)|√|√|√| - -**OBJECT 参数说明** - -| 属性 | 类型 | 默认值 | 必填 | 说明 | 平台差异说明 | -| :- | :- | :- | :- | :- | :- | -| src | String | | 是 | 图片路径，图片的路径，可以是相对路径、临时文件路径、存储文件路径 || -| quality | Number | 80 | 否 | 压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效） || -| width | String | auto | 否 | 缩放图片的宽度，支持像素值（如"100px"）、百分比（如"50%"）、自动计算（如"auto"，即根据height与源图高的缩放比例计算，若未设置height则使用源图高度）|App 3.0.0+| -| height | String | auto | 否 | 缩放图片的高度，支持像素值（如"100px"）、百分比（如"50%"）、自动计算（如"auto"，即根据height与源图高的缩放比例计算，若未设置height则使用源图高度）|App 3.0.0+| -| success | Function | | 否 | 接口调用成功的回调函数 || -| fail | Function | | 否 | 接口调用失败的回调函数 || -| complete | Function | | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） || - -**success 返回参数说明** - -| 属性 | 类型 | 说明 | -| :- | :- | :- | -| tempFilePath | String | 压缩后图片的临时文件路径 | - -**示例代码：** - -```js -uni.compressImage({ - src: '/static/logo.jpg', - quality: 80, - success: res => { - console.log(res.tempFilePath) - } -}) -``` diff --git a/docs/api/media/live-player-context.md b/docs/api/media/live-player-context.md deleted file mode 100644 index eb0e815e96e6bd1e9e9233119996643b9a5e34a3..0000000000000000000000000000000000000000 --- a/docs/api/media/live-player-context.md +++ /dev/null @@ -1,202 +0,0 @@ -### uni.createLivePlayerContext(livePlayerId, this) -创建 live-player 上下文 livePlayerContext 对象。注意是直播的播放而不是推流。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|见下|x|√|x|√|x|√|x| - -App平台的直播播放，不使用此API，而直接使用video的API。 - -**参数说明** - -|参数|说明|平台差异说明| -|:-:|:-:|:-:| -|livePlayerId|```` 组件 id|| -|this|在自定义组件下，当前组件实例的 this，以操作组件内 ```` 组件|微信小程序| - -**livePlayerContext 对象的方法列表：** - -|方法|参数|说明| -|:-|:-|:-| -|play|Object|播放| -|stop|Object|停止| -|mute|Object|静音| -|pause|Object|暂停| -|resume|Object|恢复| -|requestFullScreen|Object|进入全屏| -|exitFullScreen|Object|退出全屏| - -**requestFullScreen 的 Object 参数列表：** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|direction|Number|是|设置全屏时的方向，有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）。| -|success|Function|否|接口调用成功的回调函数。| -|fail|Function|否|接口调用失败的回调函数。| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）。| - -**其他方法的 Object 参数列表：** - -|参数|类型|必填|说明| -|:-|:-|:-|:-| -|success|Function|否|接口调用成功的回调函数| -|fail|Function|否|接口调用失败的回调函数| -|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| - - - -### uni.createLivePusherContext(livePusherId, this) -创建 live-pusher 上下文 livePusherContext 对象。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|见下|x|√|x|x|x|√|x| - -- app-nvue 平台 2.2.5+ 支持 uni.createLivePusherContext(livePusherId, this) -- app-nvue 平台 2.2.5以下，需要同时设置组件属性id和ref ````，或者直接使用 ref，例如 ``this.$refs.livepusher1`` -- app-vue 平台，需要编写条件编译代码，使用 `plus.video.LivePusher`，[业务指南](https://ask.dcloud.net.cn/article/13416)、[规范文档](http://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusher) - -使用nvue做直播，比使用vue的优势有： -1. nvue可一套代码直接编译到App和微信 -2. nvue的cover-view比vue的cover-view更强大，在视频上绘制元素更容易。如果只考虑App端的话，不用cover-view，任意组件都可以覆盖live-pusher组件 -3. 若需要视频内嵌在swiper里上下滑动（类抖音、映客首页模式），App端只有nvue才能实现 -当然nvue相比vue的坏处是css写法受限，如果只开发微信小程序，不考虑App，那么使用vue页面也是一样的。 - -**参数说明** - -设置live-pusher组件的推流地址，推流视频模式等。 - -属性|类型 |默认值|必填|说明 -:--|:--|:--|:--|:--| -url|string| |是|推流地址，支持RTMP协议。 -mode |string| |否|推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。 -muted|Boolean|false|否|是否静音。 -enable-camera|Boolean|true|否|开启摄像头。 -auto-focus|Boolean|true|否|自动聚集。 -beauty|Number|0|否|美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 -whiteness|Number|0|否|美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 - - -#### API -#### start(callback) -> 开始推流 - -##### callback 返回 Object 参数说明 -属性|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### pause(callback) -> 暂停推流 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### resume(callback) -> 恢复推流 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - - -#### stop(callback) -> 停止推流 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### switchCamera(callback) -> 切换前后摄像头 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### snapshot(callback) -> 快照 - -##### callback 返回 Object 参数说明 -##### 成功时的回调 -参数|类型 |说明 -:--|:--|:--| -type|string|"success" 表示成功, "fail" 表示失败 -code|Number| 对应code码 -message|object|{width:"快照图片宽度",height:"快照图片高度",tempImagePath:"快照图片路径"}。 - -##### 失败的回调 -参数|类型 |说明 -:--|:--|:--| -type|string|"fail" 表示失败 -code|Number| -message|object| - - -#### startPreview(callback) -> 开启摄像头预览 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### stopPreview(callback) -> 关闭摄像头预览 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### 事件 - -#### statechange -> 状态变化事件 - -##### 返回参数（detail）的详细说明 -参数|类型|说明 -:--|:--|:--| -code|Number| -message|string| - - -#### netstatus -> 网络状态通知事件 - -##### 安卓 返回参数（detail）的详细说明 -键名|说明 -:--|:--| -videoBitrate | 当前视频编/码器输出的比特率，单位 kbps -audioBitrate | 当前音频编/码器输出的比特率，单位 kbps -videoFPS | 当前视频帧率 -videoGOP | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s -netSpeed | 当前的发送/接收速度 -netJitter | 网络抖动情况，抖动越大，网络越不稳定 -videoWidth | 视频画面的宽度 -videoHeight | 视频画面的高度 - -##### iOS 返回参数（detail）的详细说明 -参数|类型 |说明 -:--|:--|:--| -code|Number| code码 -message|string| 具体的网络状态信息 - - -#### error -> 渲染错误事件 - -##### 返回参数（detail）的详细说明 -参数|类型 |说明 -:--|:--|:--| -errCode|Number| -errMsg|string| diff --git a/docs/api/media/live-pusher-context.md b/docs/api/media/live-pusher-context.md deleted file mode 100644 index fc998711f7c505c6236130ae70b8321688e13a24..0000000000000000000000000000000000000000 --- a/docs/api/media/live-pusher-context.md +++ /dev/null @@ -1,148 +0,0 @@ -### uni.createLivePusherContext(livePusherId, this) -创建 live-pusher 上下文 livePusherContext 对象。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序| -|:-:|:-:|:-:|:-:|:-:|:-:| -|见下|x|√|x|x|x| - - -**参数说明** - -设置live-pusher组件的推流地址，推流视频模式等。 - -属性|类型 |默认值|必填|说明 -:--|:--|:--|:--|:--| -url|string| |是|推流地址，支持RTMP协议。 -mode |string| |否|推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。 -muted|Boolean|false|否|是否静音。 -enable-camera|Boolean|true|否|开启摄像头。 -auto-focus|Boolean|true|否|自动聚集。 -beauty|Number|0|否|美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 -whiteness|Number|0|否|美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 - -**注意：** -- app-nvue 平台 2.2.5+ 支持 uni.createLivePusherContext(livePusherId, this) -- app-nvue 平台 2.2.5- 需要同时设置组件属性id和ref ````，或者直接使用 ref，例如 ``this.$refs.livepusher1`` - - -### API -#### start(callback) -> 开始推流 - -##### callback 返回 Object 参数说明 -属性|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### pause(callback) -> 暂停推流 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### resume(callback) -> 恢复推流 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - - -#### stop(callback) -> 停止推流 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### switchCamera(callback) -> 切换前后摄像头 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### snapshot(callback) -> 快照 - -##### callback 返回 Object 参数说明 -##### 成功时的回调 -参数|类型 |说明 -:--|:--|:--| -type|string|"success" 表示成功, "fail" 表示失败 -code|Number| 对应code码 -message|object|{width:"快照图片宽度",height:"快照图片高度",tempImagePath:"快照图片路径"}。 - -##### 失败的回调 -参数|类型 |说明 -:--|:--|:--| -type|string|"fail" 表示失败 -code|Number| -message|object| - - -#### startPreview(callback) -> 开启摄像头预览 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -#### stopPreview(callback) -> 关闭摄像头预览 - -##### callback 返回 Object 参数说明 -参数|类型 |说明 -:--|:--|:--| -type | String | "success" 表示成功， "fail" 表示失败 - -### 事件 - -#### statechange -> 状态变化事件 - -##### 返回参数（detail）的详细说明 -参数|类型|说明 -:--|:--|:--| -code|Number| -message|string| - - -#### netstatus -> 网络状态通知事件 - -##### 安卓 返回参数（detail）的详细说明 -键名|说明 -:--|:--| -videoBitrate | 当前视频编/码器输出的比特率，单位 kbps -audioBitrate | 当前音频编/码器输出的比特率，单位 kbps -videoFPS | 当前视频帧率 -videoGOP | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s -netSpeed | 当前的发送/接收速度 -netJitter | 网络抖动情况，抖动越大，网络越不稳定 -videoWidth | 视频画面的宽度 -videoHeight | 视频画面的高度 - -##### iOS 返回参数（detail）的详细说明 -参数|类型 |说明 -:--|:--|:--| -code|Number| code码 -message|string| 具体的网络状态信息 - - -#### error -> 渲染错误事件 - -##### 返回参数（detail）的详细说明 -参数|类型 |说明 -:--|:--|:--| -errCode|Number| -errMsg|string| diff --git a/docs/api/media/media-container.md b/docs/api/media/media-container.md deleted file mode 100644 index 95c9632c3f3191f5d337a8db77d593f318db6166..0000000000000000000000000000000000000000 --- a/docs/api/media/media-container.md +++ /dev/null @@ -1,55 +0,0 @@ -### uni.createMediaContainer() -创建音视频处理容器，最终可将容器中的轨道合成一个视频 ，返回 `MediaContainer` 对象 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|2.9.0+|x|x|x|x|x| - -#### MediaContainer.addTrack(track) -将音频或视频轨道添加到容器 - -**参数说明** - -|参数|说明| -|:-|:-| -|track|要添加的音频或视频轨道| - -#### MediaContainer.destroy() -将容器销毁，释放资源 - -#### MediaContainer.export() -将容器内的轨道合并并导出视频文件 - -#### MediaContainer.extractDataSource(object) -将容器内的轨道合并并导出视频文件 ,返回 `MediaTrack` 对象 - -**参数说明** - -|属性|类型|必填 |说明| -|:-|:-|:-|:-| -|source|String|是|视频源地址，只支持本地文件| - -#### MediaContainer.removeTrack(track) -将音频或视频轨道添加到容器 - -**参数说明** - -|参数|说明| -|:-|:-| -|track|要移除的音频或视频轨道| - - -### MediaTrack -可通过 `MediaContainer.extractDataSource` 返回。 - - `MediaTrack` 音频或视频轨道，可以对轨道进行一些操作 - -**参数说明** - -|属性|类型|说明| -|:-|:-|:-| -|kind|String|轨道类型，只读 ,audio:音频轨道;video:视频轨道 | -|duration|Number|轨道长度，只读 | -|volume|Number|音量，音频轨道下有效，可写 | \ No newline at end of file diff --git a/docs/api/media/record-manager.md b/docs/api/media/record-manager.md deleted file mode 100644 index 0fed7b5e59f6f3841f392bd52cd9bb164b8f7b2d..0000000000000000000000000000000000000000 --- a/docs/api/media/record-manager.md +++ /dev/null @@ -1,125 +0,0 @@ -### uni.getRecorderManager() -获取**全局唯一**的录音管理器 ``recorderManager``。 - -**平台差异说明** - -|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序| -|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|x|√|x|√|√|√|x| - -**recorderManager 对象的方法列表** - -|方法|参数|说明|平台差异说明| -|:-|:-|:-|:-| -|start|options|开始录音|| -|pause||暂停录音|App 暂不支持| -|resume||继续录音|App 暂不支持| -|stop||停止录音|| -|onStart|callback|录音开始事件|| -|onPause|callback|录音暂停事件|| -|onStop|callback|录音停止事件，会回调文件地址|| -|onFrameRecorded|callback|已录制完指定帧大小的文件，会回调录音分片结果数据。如果设置了 frameSize ，则会回调此事件|App 暂不支持| -|onError|callback|录音错误事件, 会回调错误信息| | - -**start(options) 说明** - -|属性|类型|必填|说明|平台差异说明| -|:-|:-|:-|:-|:-| -|duration|Number|否|指定录音的时长，单位 ms ，如果传入了合法的 duration ，在到达指定的 duration 后会自动停止录音，最大值 600000（10 分钟）,默认值 60000（1 分钟）|App、小程序支持| -|sampleRate|Number|否|采样率，有效值 8000/16000/44100|App、小程序支持| -|numberOfChannels|Number|否|录音通道数，有效值 1/2|仅小程序支持| -|encodeBitRate|Number|否|编码码率，有效值见下表格|仅小程序支持| -|format|String|否|音频格式，有效值 aac/mp3/wav/PCM。App默认值为mp3，小程序默认值aac|App、小程序支持| -|frameSize|String|否|指定帧大小，单位 KB。传入 frameSize 后，每录制指定帧大小的内容后，会回调录制的文件内容，不指定则不会回调。暂仅支持 mp3 格式。|App、百度小程序不支持| - -其中，采样率和码率有一定要求，具体有效值如下： - -|采样率|编码码率| -|:-|:-| -|8000|16000 ~ 48000| -|11025|16000 ~ 48000| -|12000|24000 ~ 64000| -|16000|24000 ~ 96000| -|22050|32000 ~ 128000| -|24000|32000 ~ 128000| -|32000|48000 ~ 192000| -|44100|64000 ~ 320000| -|48000|64000 ~ 320000| - -**onStop(callback) 回调结果说明** - -|属性|类型|说明| -|:-|:-|:-| -|tempFilePath|String|录音文件的临时路径| - - -**onFrameRecorded(callback) 回调结果说明** - -|属性|类型|说明| -|:-|:-|:-| -|frameBuffer|ArrayBuffer|录音分片结果数据| -|isLastFrame|Boolean|当前帧是否正常录音结束前的最后一帧| - -**onError(callback) 回调结果说明** - -|属性|类型|说明| -|:-|:-|:-| -|errMsg|String|错误信息| - -**注意** - -- 可以通过用户授权API来判断用户是否给应用授予麦克风的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize) - -**示例** - -```html - -``` - -```javascript -const recorderManager = uni.getRecorderManager(); -const innerAudioContext = uni.createInnerAudioContext(); - -innerAudioContext.autoplay = true; - -export default { - data() { - return { - text: 'uni-app', - voicePath: '' - } - }, - onLoad() { - let self = this; - recorderManager.onStop(function (res) { - console.log('recorder stop' + JSON.stringify(res)); - self.voicePath = res.tempFilePath; - }); - }, - methods: { - startRecord() { - console.log('开始录音'); - - recorderManager.start(); - }, - endRecord() { - console.log('录音结束'); - recorderManager.stop(); - }, - playVoice() { - console.log('播放录音'); - - if (this.voicePath) { - innerAudioContext.src = this.voicePath; - innerAudioContext.play(); - } - } - } -} -``` diff --git a/docs/api/media/video-context.md b/docs/api/media/video-context.md deleted file mode 100644 index 39f6589e02d6b511e9fd10bff469a9b55a999e66..0000000000000000000000000000000000000000 --- a/docs/api/media/video-context.md +++ /dev/null @@ -1,115 +0,0 @@ -### uni.createVideoContext(videoId, this) -创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 ``