Skip to content

U
uni-app

DCloud / uni-app
大约 1 个月 前同步成功

通知 702
Star 38705
Fork 3642
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 d25ea6ec 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

chore: merge

上级 1df0788c fa138962
展开全部 隐藏空白更改
内联 并排
Showing with 15898 addition and 1965 deletion
docs/README.md
浏览文件 @ d25ea6ec
```uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
```uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
`DCloud`公司拥有500万开发者用户，几十万应用案例、10亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（[详见](https://docs.alipay.com/mini/ide/0.70-stable)），腾讯课堂官方为uni-app录制培训课程（[详见](https://ask.dcloud.net.cn/article/35640)），开发者可以放心选择。
`DCloud`公司拥有600万开发者用户，几十万应用案例、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开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
......@@ -25,7 +25,7 @@
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/uni-h5-hosting-qr.png" width="160" />
</div>
<b>H5版</b>
<b>Web版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg" width="160" /></div>
......@@ -90,7 +90,7 @@
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">开发者/案例数量更多</h5>
<p class="uniapp-home-content-item-text">几十万应用、uni统计月活10亿、70+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">几十万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">跨端完善度更高，真正落地的提高生产力</p>
</div>
</div>
......@@ -110,8 +110,8 @@
</div>
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">性能体验优秀</h5>
<p class="uniapp-home-content-item-text">体验更好的Hybrid框架，加载新页面速度更快。</p>
<p class="uniapp-home-content-item-text">App端支持weex原生渲染，可支撑更流畅的用户体验。</p>
<p class="uniapp-home-content-item-text">加载新页面速度更快、自动diff更新数据。</p>
<p class="uniapp-home-content-item-text">App端支持原生渲染，可支撑更流畅的用户体验。</p>
<p class="uniapp-home-content-item-text">小程序端的性能优于市场其他框架。<a href="https://ask.dcloud.net.cn/article/35947" target="_blank">评测</a></p>
</div>
</div>
......@@ -122,7 +122,7 @@
<div class="uniapp-home-content-item-header">
<h5 class="uniapp-home-content-item-title">周边生态丰富</h5>
<p class="uniapp-home-content-item-text"><a href="https://ext.dcloud.net.cn/?orderBy=WeekDownload" target="_blank">插件市场</a>数千款插件。</p>
<p class="uniapp-home-content-item-text">支持NPM、支持小程序组件和SDK、兼容mpvue组件和项目、兼容weex组件。</p>
<p class="uniapp-home-content-item-text">支持NPM、支持小程序组件和SDK。</p>
<p class="uniapp-home-content-item-text">微信生态的各种sdk可直接用于跨平台App。</p>
</div>
</div>
......@@ -149,13 +149,13 @@
<!-- ```uni-app``` 使用```Vue.js```的语法 + 微信小程序的API，均为通用技术。
有一定 ```Vue.js``` 和微信小程序开发经验的开发者可快速上手 ```uni-app``` ，开发出兼容多端的应用。
有一定 ```Vue.js``` 和小程序开发经验的开发者可快速上手 ```uni-app``` ，开发出兼容多端的应用。
```uni-app```提供了条件编译机制，在跨端的同时，可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。这是能落地的真正一套代码的解决方案，而不是仅仅统一技术栈，实际项目仍然多套代码、各自升级。
```uni-app```打包到App时使用了小程序和weex双引擎，丰富的js扩展能力和高效的weex渲染都可以在```uni-app```中可以使用。同时支持以sdk方式嵌入原生项目中混合开发。生成的App性能体验优秀且扩展能力丰富。
```uni-app```打包到App时使用了使用独立v8引擎，渲染层支持原生渲染和webview渲染双选，内置大量常用原生功能，支持原生插件扩展，并且插件市场有丰富的插件生态，无需懂原生开发亦可完成复杂应用。
```uni-app```支持将小程序生态丰富的组件和js sdk引用到App开发中，大幅强化了跨平台开发的三方生态，开发者可直接使用大量原sdk厂商维护的高质量sdk。
`uni-app`提供了`uni小程序sdk`，支持以sdk方式嵌入原生项目中混合开发，帮助原生App得到小程序能力，并可享受`uni-app`的开发者生态。
```uni-app```被DCloud定义为**终极跨平台开发框架**，拥有极强的竞争优势。
......
docs/_sidebar.md
浏览文件 @ d25ea6ec
......@@ -65,7 +65,7 @@
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群7：942061423 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=cMlWEzWJGM0f6uVyINfEmTB4yjfGPgxH&jump_from=webapi">点此加入</a></div>
<div>群6：697264024 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=SP8-OAARtiYc3heIMYDBNfffG3I5utCy&jump_from=webapi">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
......@@ -94,8 +94,8 @@
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（2000人已满）</div>
<div>群8：695442854（2000人已满）</div>
<!-- <div>群7：942061423（2000人已满）</div> -->
<div>群6：697264024（2000人已满）</div>
<div>群7：942061423（2000人已满）</div>
<!-- <div>群6：697264024（2000人已满）</div> -->
<div>群5：731951419（2000人已满）</div>
<div>群4：942702595（2000人已满）</div>
<div>群3：773794803（2000人已满） </div>
......
docs/adapt.md
浏览文件 @ d25ea6ec
......@@ -67,8 +67,9 @@ pages.json 配置样例
以新闻示例项目为例，预览地址[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，放置一个新页面right-window.vue。
首先在这个项目的`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": {
......@@ -80,12 +81,14 @@ pages.json 配置样例
}
```
rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑，只需要引入之前的详情页面组件。
`rightWindow`对应的页面不需要重写一遍新闻详情的页面逻辑，只需要引入之前的详情页面组件（详情页面`/pages/detail/detail`可自动转化为`pages-detail-detail`组件使用）。
```html
<!--responsive/right-window.vue-->
<template>
<view>
<!-- 这里将 /pages/detail/detail.nvue 页面作为一个组件使用 -->
<!-- 路径 “/pages/detail/detail” 转为 “pages-detail-detail” 组件 -->
<pages-detail-detail ref="detailPage"></pages-detail-detail>
</view>
</template>
......@@ -93,7 +96,9 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑，只
<script>
export default {
created(e) {
//监听自定义事件，该事件由详情页列表的点击触发
uni.$on('updateDetail', (e) => {
// 执行 detailPage组件，即：/pages/detail/detail.nvue 页面的load方法
this.$refs.detailPage.load(e.detail);
})
},
......@@ -104,14 +109,15 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑，只
```
然后在新闻列表页面，处理点击列表后与rightWindow交互通信的逻辑。
```js
// pages/news/news-page.nvue
goDetail(detail) {
if (this._isWidescreen) { //宽屏时与rightWindow通信
if (this._isWidescreen) { //若为宽屏，则触发右侧详情页的自定义事件，通知右侧窗体刷新新闻详情
uni.$emit('updateDetail', {
detail: encodeURIComponent(JSON.stringify(detail))
})
} else { // 窄屏时继续跳转新窗体，在新窗体打开详情页面
} else { // 若为窄评，则打开新窗体，在新窗体打开详情页面
uni.navigateTo({
url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))
});
......@@ -191,7 +197,7 @@ uni-app的屏幕适配推荐方案是运行时动态适配，而不是为PC版
}
```
通过上述配置中的前2个，即rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth，即可有效解决使用了rpx后，在宽屏下界面变的奇大无比的问题。如果你不需要特别定义这2个参数的数值，则完全可以不再pages.json配置它们，让它们保持默认的960和375即可。
通过上述配置中的前2个，即rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth，即可有效解决使用了rpx后，在宽屏下界面变的奇大无比的问题。如果你不需要特别定义这2个参数的数值，则无需在`pages.json`中配置它们，保持默认的960和375即可。
但是，rpx的最大适配宽度被限定后，会带来一个新问题：如果您的代码中把750rpx当做100%来使用（官方强烈不推荐这种写法，即便是nvue不支持百分比，也应该使用flex来解决撑满问题），此时不管屏幕宽度为多少，哪怕超过了960px，您的预期仍然是要占满整个屏幕宽度，但如果按rpxCalcBaseDeviceWidth的375px的策略执行将不再占满屏宽。
......@@ -265,3 +271,19 @@ uni-app理论上不限定浏览器。在HBuilderX 2.9发版时，就新闻示例
如果你发现了uni-app框架层面、内置组件有浏览器兼容问题，欢迎在github上给我们提交pr。
一般情况下，只要基础框架没有浏览器兼容问题，那么组件层面的问题也可以通过更换组件来解决。当uni-app编译到PC浏览器端时，支持所有的vue组件，包含那些操作了dom、window的ui库，比如elementUI等。
#### 一个让手机版网页临时可用于pc浏览器的方案
如果你的h5版已经开发完毕，还没来得及适配pc，但想在pc上先用起来。那么可以在pc网页里使用iframe，约定好宽度，在里面套用uni-app的窄屏版。
当然还可以在iframe旁边放置二维码，提供手机版扫码地址，如下：
![](https://vkceyugu.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)
docs/api/README.md
浏览文件 @ d25ea6ec
......@@ -133,11 +133,11 @@ function async request () {
|API|说明|
|:-|:-|
|[uni.chooseVideo](api/media/video?id=choosevideo)|从相册选择视频，或者拍摄|
|[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)|视频组件管理|
|[uni.createVideoContext](/api/media/video-context?id=createvideocontext)|视频组件管理|
##### 相机组件管理
|API|说明|
......@@ -220,6 +220,7 @@ function async request () {
|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)|停止监听加速度数据|
##### 罗盘
......@@ -227,6 +228,7 @@ function async request () {
|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)|停止监听罗盘数据|
##### 陀螺仪
......@@ -312,8 +314,8 @@ function async request () {
|[uni.startBeaconDiscovery](/api/system/ibeacon?id=startbeacondiscovery)|停止搜索附近的 iBeacon 设备|
|[uni.stopBeaconDiscovery](/api/system/ibeacon?id=stopbeacondiscovery)|开始搜索附近的 iBeacon 设备|
##### 生物认证
##### 生物认证
|API|说明|
|:-|:-|
|[uni.startSoterAuthentication](/api/system/authentication?id=startsoterauthentication)|开始生物认证|
......@@ -356,13 +358,13 @@ function async request () {
|API|说明|
|:-|:-|
|[uni.setBackgroundColor](/api/ui/bgcolor?id=setbackgroundcolor)|动态设置窗口的背景色。|
|[uni.setBackgroundTextStyle](/api/ui/bgcolor?id=setbackgroundtextstyle)|动态设置下拉背景字体、loading 图的样式。|
|[uni.setBackgroundTextStyle](/api/ui/bgcolor?id=setbackgroundtextstyle)|动态设置下拉背景字体、loading 图的样式。|
##### 动画
|API|说明|
|:-|:-|
|[uni.createAnimation](/api/ui/animation?id=createanimation)|创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。|
|[uni.createAnimation](/api/ui/animation?id=createanimation)|创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。|
##### 滚动
......@@ -370,17 +372,17 @@ function async request () {
|:-|:-|
|[uni.pageScrollTo](/api/ui/scroll?id=pagescrollto)|将页面滚动到目标位置。|
##### 绘画
##### 绘画
|API|说明|
|API|说明|
|:-|:-|
|[uni.createCanvasContext](/api/canvas/createCanvasContext)|创建绘图上下文|
|[uni.canvasToTempFilePath](/api/canvas/canvasToTempFilePath)|将画布内容保存成文件|
|[uni.canvasGetImageData](/api/canvas/canvasGetImageData)|获取画布图像数据|
|[uni.canvasPutImageData](/api/canvas/canvasPutImageData)|设置画布图像数据|
##### 下拉刷新
##### 下拉刷新
|API|说明|
|API|说明|
|:-|:-|
|[onPullDownRefresh](/api/ui/pulldown?id=onpulldownrefresh)|监听该页面用户下拉刷新事件|
|[uni.startPullDownRefresh](/api/ui/pulldown?id=startpulldownrefresh)|开始下拉刷新|
......@@ -427,7 +429,7 @@ function async request () {
|[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.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)|开启推送|
......
docs/api/_sidebar.md
浏览文件 @ d25ea6ec
......@@ -110,6 +110,7 @@
* [CanvasGradient](api/canvas/CanvasGradient.md)
* 广告
* [激励视频广告](api/a-d/rewarded-video.md)
* [全屏视频广告](api/a-d/full-screen-video.md)
* [插屏广告](api/a-d/interstitial.md)
* 第三方服务
* [获取服务供应商](api/plugins/provider.md)
......@@ -136,86 +137,86 @@
* [调试](api/other/set-enable-debug.md)
* [获取第三方平台数据](api/other/get-extconfig.md)
<li></li>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/uniad-520.png" width="20" height="20"/>
<div class="contact-smg">
<div>uniAD</div>
</div>
</a>
<a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-tongji-icon.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库：<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a>、<a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群7：942061423 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=cMlWEzWJGM0f6uVyINfEmTB4yjfGPgxH&jump_from=webapi">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
<div>群32：166188631（2000人已满）</div>
<div>群31：567471669（2000人已满）</div>
<div>群30：371046920（2000人已满）</div>
<div>群29：202965481（2000人已满）</div>
<div>群28：166188776（2000人已满）</div>
<div>群27：811363410（2000人已满）</div>
<div>群26：147867597（2000人已满）</div>
<div>群25：165297000（2000人已满）</div>
<div>群24：672494800（2000人已满）</div>
<div>群23：599958679（2000人已满）</div>
<div>群22：687186952（2000人已满）</div>
<div>群21：717019120（2000人已满）</div>
<div>群20：165796402（2000人已满）</div>
<div>群19：165657124（2000人已满）</div>
<div>群18：698592271（2000人已满）</div>
<div>群17：951348804（2000人已满）</div>
<div>群16：719211033（2000人已满）</div>
<div>群15：516984120（2000人已满）</div>
<div>群14：465953250（2000人已满）</div>
<div>群13：699478442（2000人已满）</div>
<div>群12：884860657（2000人已满）</div>
<div>群11：296811328（2000人已满）</div>
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（2000人已满）</div>
<div>群8：695442854（2000人已满）</div>
<!-- <div>群7：942061423（2000人已满）</div> -->
<div>群6：697264024（2000人已满）</div>
<div>群5：731951419（2000人已满）</div>
<div>群4：942702595（2000人已满）</div>
<div>群3：773794803（2000人已满） </div>
<div>群2：901474938（2000人已满） </div>
<div>群1：531031261（2000人已满）</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/uniad-520.png" width="20" height="20"/>
<div class="contact-smg">
<div>uniAD</div>
</div>
</a>
<a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-tongji-icon.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库：<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a>、<a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群6：697264024 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=SP8-OAARtiYc3heIMYDBNfffG3I5utCy&jump_from=webapi">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
<div>群32：166188631（2000人已满）</div>
<div>群31：567471669（2000人已满）</div>
<div>群30：371046920（2000人已满）</div>
<div>群29：202965481（2000人已满）</div>
<div>群28：166188776（2000人已满）</div>
<div>群27：811363410（2000人已满）</div>
<div>群26：147867597（2000人已满）</div>
<div>群25：165297000（2000人已满）</div>
<div>群24：672494800（2000人已满）</div>
<div>群23：599958679（2000人已满）</div>
<div>群22：687186952（2000人已满）</div>
<div>群21：717019120（2000人已满）</div>
<div>群20：165796402（2000人已满）</div>
<div>群19：165657124（2000人已满）</div>
<div>群18：698592271（2000人已满）</div>
<div>群17：951348804（2000人已满）</div>
<div>群16：719211033（2000人已满）</div>
<div>群15：516984120（2000人已满）</div>
<div>群14：465953250（2000人已满）</div>
<div>群13：699478442（2000人已满）</div>
<div>群12：884860657（2000人已满）</div>
<div>群11：296811328（2000人已满）</div>
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（2000人已满）</div>
<div>群8：695442854（2000人已满）</div>
<div>群7：942061423（2000人已满）</div>
<!-- <div>群6：697264024（2000人已满）</div> -->
<div>群5：731951419（2000人已满）</div>
<div>群4：942702595（2000人已满）</div>
<div>群3：773794803（2000人已满） </div>
<div>群2：901474938（2000人已满） </div>
<div>群1：531031261（2000人已满）</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
docs/api/a-d/full-screen-video.md 0 → 100644
浏览文件 @ d25ea6ec
### 全屏视频广告
全屏视频广告是一个原生组件，层级比普通组件高。全屏视频广告每次创建都会返回一个全新的实例，默认是隐藏的，需要调用 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|
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)`
示例代码
```
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<button :loading="loading" :disabled="loading" type="primary" class="btn" @click="showAd">显示广告</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '全屏视频广告',
loading: false,
loadError: false
}
},
onReady() {
// #ifdef APP-PLUS
// HBuilderX标准基座真机运行测试全屏视频广告位标识（adpid）为：1507000611
// adpid: 1507000611 仅用于测试，发布时需要改为广告后台（https://uniad.dcloud.net.cn/）申请的 adpid
// 广告后台申请的广告位(adpid)需要自定义基座/云打包/本地打包后生效
this.adOption = {
adpid: '1507000611'
};
// #endif
this.createAd();
},
methods: {
createAd() {
var _ad = this._ad = uni.createFullScreenVideoAd(this.adOption);
_ad.onLoad(() => {
this.loading = false;
this.loadError = false;
_ad.show();
console.log('onLoad event')
});
_ad.onClose((res) => {
// 用户点击了【关闭广告】按钮
if (res && res.isEnded) {
// 正常播放结束
console.log("onClose " + res.isEnded);
} else {
// 播放中途退出
console.log("onClose " + res.isEnded);
}
setTimeout(() => {
uni.showToast({
title: "全屏视频" + (res.isEnded ? "成功" : "未") + "播放完毕",
duration: 10000,
position: 'bottom'
})
}, 500)
});
_ad.onError((err) => {
this.loading = false;
if (err.code) {
this.loadError = true;
}
console.log('onError event', err)
uni.showToast({
title: err.errMsg,
position: 'bottom'
})
});
},
showAd() {
this.loading = true;
this._ad.load();
}
}
}
</script>
<style>
.btn {
margin-bottom: 20px;
}
.ad-tips {
color: #999;
padding: 30px 0;
text-align: center;
}
</style>
```
docs/api/media/record-manager.md
浏览文件 @ d25ea6ec
......@@ -89,9 +89,11 @@ const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
data: {
text: 'uni-app',
voicePath: ''
data() {
return {
text: 'uni-app',
voicePath: ''
}
},
onLoad() {
let self = this;
......
docs/api/media/video.md
浏览文件 @ d25ea6ec
......@@ -51,8 +51,10 @@
```
```javascript
export default {
data: {
src: ''
data() {
return {
src: ''
}
},
methods: {
test: function () {
......@@ -195,8 +197,10 @@ uni.chooseMedia({
```
```javascript
export default {
data: {
src: ''
data() {
return {
src: ''
}
},
methods: {
test: function () {
......
docs/api/request/request.md
浏览文件 @ d25ea6ec
......@@ -129,6 +129,6 @@ requestTask.abort();
- debug 模式，安卓端暂时无法获取响应头，url中含有非法字符（如未编码为%20的空格）时会请求失败
- iOS App第一次安装启动后，会弹出是否允许联网的询问框，在用户点击同意前，调用联网API会失败。请注意判断这种情况。比如官方提供的新闻模板示例（HBuilderX新建项目可选择），会判断如果无法联网，则提供一个错误页，提示用户设置网络及下拉刷新重试。
- 良好体验的App，还会判断当前是否处于飞行模式（[参考](https://ext.dcloud.net.cn/plugin?id=594)）、是wifi还是3G（[参考](https://uniapp.dcloud.io/api/system/network)）
- 部分安卓设备，真机运行或debug模式下的网络，低于release模式很多。
- 部分安卓设备，真机运行或debug模式下的网速，低于release模式很多。
- 使用一些比较小众的证书机构（如：CFCA OV OCA）签发的 ssl 证书在安卓设备请求会失败，因为这些机构的根证书不在系统内置根证书库，可以更换其他常见机构签发的证书（如：Let's Encrypt），或者配置 sslVerify 为 false 关闭 ssl 证书验证（不推荐）。
- 单次网络请求数据量建议控制在50K以下（仅指json数据，不含图片），过多数据应分页获取，以提升应用体验。
docs/api/request/websocket.md
浏览文件 @ d25ea6ec
......@@ -8,9 +8,9 @@
|参数名|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|url|String|是|服务器接口地址|小程序中必须是 `wss://` 协议|
|header|Object|否|HTTP Header , header 中不能设置 Referer|小程序|
|method|String|否|默认是GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT|微信小程序|
|protocols|Array&lt;String&gt;|否|子协议数组|H5、微信小程序、百度小程序、字节跳动小程序|
|header|Object|否|HTTP Header , header 中不能设置 Referer|仅小程序支持|
|method|String|否|默认是GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT|仅微信小程序支持|
|protocols|Array&lt;String&gt;|否|子协议数组|App、H5、微信小程序、百度小程序、字节跳动小程序|
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）|&nbsp;|
......
docs/api/system/accelerometer.md
浏览文件 @ d25ea6ec
### uni.onAccelerometerChange(CALLBACK)
监听加速度数据，频率：5次/秒，接口调用后会自动开始监听，可使用 ``uni.stopAccelerometer`` 停止监听。
监听加速度数据，频率：5次/秒，接口调用后会自动开始监听，可使用 ``uni.offAccelerometer`` 取消监听。
**CALLBACK 返回参数**
......@@ -23,6 +23,15 @@ uni.onAccelerometerChange(function (res) {
});
```
### uni.offAccelerometerChange(CALLBACK)
取消监听加速度数据。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|HBuilderX 2.9.6+|HBuilderX 2.9.6+|基础库 2.9.3+|x|x|x|x|
### uni.startAccelerometer(OBJECT)
开始监听加速度数据。
......
docs/api/system/bluetooth.md
浏览文件 @ d25ea6ec
......@@ -81,7 +81,7 @@ uni.openBluetoothAdapter({
**注意：**
* App 端目前仅支持发现ble蓝牙设备，更多蓝牙设备发现需使用 Native.js，参考：[https://ask.dcloud.net.cn/article/114](https://ask.dcloud.net.cn/article/114)。
* App 端目前仅支持发现ble蓝牙设备，更多蓝牙设备发现，可以使用 Native.js，参考：[https://ask.dcloud.net.cn/article/114](https://ask.dcloud.net.cn/article/114)。也可以在插件市场获取[原生插件](https://ext.dcloud.net.cn/search?q=%E8%93%9D%E7%89%99&cat1=5&cat2=51&orderBy=UpdatedDate)
**示例代码**
......
docs/api/system/compass.md
浏览文件 @ d25ea6ec
### uni.onCompassChange(CALLBACK)
监听罗盘数据，频率：5次/秒，接口调用后会自动开始监听，可使用 ``uni.stopCompass`` 停止监听。
监听罗盘数据，频率：5次/秒，接口调用后会自动开始监听，可使用 ``uni.offCompassChange`` 取消监听。
**CALLBACK 返回参数**
......@@ -18,6 +18,15 @@ uni.onCompassChange(function (res) {
});
```
### uni.offCompassChange(CALLBACK)
取消监听罗盘数据。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|HBuilderX 2.9.6+|HBuilderX 2.9.6+|基础库 2.9.3+|x|x|x|x|
### uni.startCompass(OBJECT)
开始监听罗盘数据。
......
docs/api/ui/animation.md
浏览文件 @ d25ea6ec
......@@ -120,8 +120,10 @@ var animation = uni.createAnimation({
```javascript
export default{
data: {
animationData: {}
data() {
return {
animationData: {}
}
},
onShow: function(){
var animation = uni.createAnimation({
......
docs/api/ui/media-query-observer.md
浏览文件 @ d25ea6ec
......@@ -11,12 +11,14 @@ MediaQueryObserver 对象，用于监听页面 media query 状态的变化，如
|app|微信小程序|支付宝小程序|qq小程序|百度小程序|字节小程序|360小程序|快应用|
|:-|:-|:-|:-|:-|:-|:-|:-|
|2.8.12+，app-vue|基础库 2.11.1+|√|√|√|√|√|
|2.8.12+，app-vue|基础库 2.11.1+|√|√|√|√|√|X|
注意：支付宝小程序、qq小程序、百度小程序、字节小程序，暂不支持监听屏幕动态改变，即只执行一次媒体查询。
### MediaQueryObserver 对象的方法列表
>tips: 和 UI 相关的 api 在组件 mountd 后执行
|方法|说明|
|:-|:-|:-|
|MediaQueryObserver.observe(Object descriptor, function callback)|开始监听页面 media query 变化情况|
......@@ -53,13 +55,11 @@ MediaQueryObserver 对象，用于监听页面 media query 状态的变化，如
<view>
要求屏幕方向为纵向，是否匹配: {{landscape}}
</view>
<button type="success" @click="remove">停止监听</button>
</view>
</view>
</template>
<script>
let landscapeObs
let landscapeOb
export default {
data() {
return {
......@@ -71,10 +71,11 @@ MediaQueryObserver 对象，用于监听页面 media query 状态的变化，如
onLoad() {
},
// 和 UI 相关的 api 在组件 mountd 后执行
mounted() {
this.testMediaQueryObserver()
this.landscapeObserver()
},
methods: {
......@@ -89,8 +90,8 @@ MediaQueryObserver 对象，用于监听页面 media query 状态的变化，如
})
},
landscapeObserver() {
landscapeObs = uni.createMediaQueryObserver(this)
landscapeObs.observe({
landscapeOb = uni.createMediaQueryObserver(this)
landscapeOb.observe({
orientation: 'landscape' //屏幕方向为纵向
}, matches => {
this.landscape = matches
......@@ -98,7 +99,7 @@ MediaQueryObserver 对象，用于监听页面 media query 状态的变化，如
},
destroyed () {
this.mediaQueryOb.disconnect() //组件销毁时停止监听
landscapeObs.disconnect()
landscapeOb.disconnect()
}
}
}
......
docs/api/ui/prompt.md
浏览文件 @ d25ea6ec
......@@ -44,9 +44,6 @@ uni.showToast({
**Tips**
- App端可通过[plus.nativeUI.toast API](https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast)实现更多功能。
- `showToast` 和 `showLoading` 是底层同一个（按的小程序的设计），所以 `showToast` 和 `showLoading` 会相互覆盖，而 `hideLoading` 也会关闭 `showToast` 。冲突解决方案：
+ App：使用 [plus.nativeUI.toast](http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast) 接口
+ 非App：其中一个使用自定义组件实现。
### uni.hideToast()
......@@ -97,12 +94,6 @@ setTimeout(function () {
}, 2000);
```
**注意**
- `showToast` 和 `showLoading` 是底层同一个（按的小程序的设计），所以 `showToast` 和 `showLoading` 会相互覆盖，而 `hideLoading` 也会关闭 `showToast` 。冲突解决方案：
+ App：使用 [plus.nativeUI.toast](http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast) 接口
+ 非App：其中一个使用自定义组件实现。
### uni.showModal(OBJECT)
显示模态弹窗，类似于标准 html 的消息框：alert、confirm。
......
docs/api/ui/pulldown.md
浏览文件 @ d25ea6ec
......@@ -51,8 +51,10 @@ index.vue
```javascript
// 仅做示例，实际开发中延时根据需求来使用。
export default {
data: {
text: 'uni-app'
data() {
return {
text: 'uni-app'
}
},
onLoad: function (options) {
setTimeout(function () {
......
docs/api/window/communication.md
浏览文件 @ d25ea6ec
> 自 HBuilderX 2.0.0 起自定义组件编译模式支持，[使用指南](https://ask.dcloud.net.cn/article/36010)
> 自 HBuilderX 2.0.0 起自定义组件编译模式支持，[使用指南](https://ask.dcloud.net.cn/article/36010)
### uni.$emit(eventName,OBJECT)
触发全局的自定事件。附加参数都会传给监听器回调。
触发全局的自定义事件，附加参数都会传给监听器回调函数。
|属性 |类型 |描述 |
|--- |--- |--- |
|eventName |String |事件名 |
|OBJECT |Object |触发事件携带的附加参数 |
**代码示例**
```javascript
uni.$emit('update',{msg:'页面更新'})
```
### uni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
**代码示例**
```javascript
uni.$emit('update',{msg:'页面更新'})
```
### uni.$on(eventName,callback)
监听全局的自定义事件，事件由 `uni.$emit` 触发，回调函数会接收事件触发函数的传入参数。
|属性 |类型 |描述 |
|--- |--- |--- |
|eventName |String |事件名 |
|callback |Function |事件的回调函数 |
**代码示例**
```javascript
uni.$on('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})
```
### uni.$once(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。
**代码示例**
```javascript
uni.$on('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})
```
### uni.$once(eventName,callback)
监听全局的自定义事件，事件由 `uni.$emit` 触发，但仅触发一次，在第一次触发之后移除该监听器。
|属性 |类型 |描述 |
|--- |--- |--- |
|eventName |String |事件名 |
|callback |Function |事件的回调函数 |
**代码示例**
```javascript
uni.$once('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})
```
### uni.$off([eventName, callback])
移除全局自定义事件监听器。
**代码示例**
```javascript
uni.$once('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})
```
### uni.$off([eventName, callback])
移除全局自定义事件监听器。
|属性 |类型 |描述 |
|--- |--- |--- |
|eventName |Array＜String＞ |事件名 |
|callback |Function |事件的回调函数 |
**Tips**
- 如果没有提供参数，则移除所有的事件监听器；
- 如果只提供了事件，则移除该事件所有的监听器；
- 如果同时提供了事件与回调，则只移除这个回调的监听器；
- 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
**代码示例**
`$emit`、`$on`、`$off`常用于跨页面、跨组件通讯，这里为了方便演示放在同一个页面
```html
<template>
<view class="content">
<view class="data">
<text>{{val}}</text>
</view>
<button type="primary" @click="comunicationOff">结束监听</button>
</view>
</template>
<script>
export default {
data() {
return {
val: 0
}
},
onLoad() {
setInterval(()=>{
uni.$emit('add', {
data: 2
})
},1000)
uni.$on('add', this.add)
},
methods: {
comunicationOff() {
uni.$off('add', this.add)
},
add(e) {
this.val += e.data
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.data {
text-align: center;
line-height: 40px;
margin-top: 40px;
}
button {
width: 200px;
margin: 20px 0;
}
</style>
```
**注意事项**
- uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
- 使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听
|callback |Function |事件的回调函数 |
**Tips**
- 如果uni.$off没有传入参数，则移除App级别的所有事件监听器；
- 如果只提供了事件名（eventName），则移除该事件名对应的所有监听器；
- 如果同时提供了事件与回调，则只移除这个事件回调的监听器；
- 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
**代码示例**
`$emit`、`$on`、`$off`常用于跨页面、跨组件通讯，这里为了方便演示放在同一个页面
```html
<template>
<view class="content">
<view class="data">
<text>{{val}}</text>
</view>
<button type="primary" @click="comunicationOff">结束监听</button>
</view>
</template>
<script>
export default {
data() {
return {
val: 0
}
},
onLoad() {
setInterval(()=>{
uni.$emit('add', {
data: 2
})
},1000)
uni.$on('add', this.add)
},
methods: {
comunicationOff() {
uni.$off('add', this.add)
},
add(e) {
this.val += e.data
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.data {
text-align: center;
line-height: 40px;
margin-top: 40px;
}
button {
width: 200px;
margin: 20px 0;
}
</style>
```
**注意事项**
- uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
- 使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听
docs/case.md
浏览文件 @ d25ea6ec
DCloud有**500万**开发者，[uni统计](https://tongji.dcloud.net.cn/)手机端月活**10亿**。是开发者数量和案例最丰富的多端开发框架。
DCloud有**600万**开发者，[uni统计](https://tongji.dcloud.net.cn/)手机端月活**10亿**。是开发者数量和案例最丰富的多端开发框架。
欢迎知名开发商[提交案例](https://github.com/dcloudio/uni-app/issues/6)或接入[uni统计](https://tongji.dcloud.net.cn/)。
......@@ -41,7 +41,7 @@ uni-app助力数百家单位快速上线**抗疫系统**，开源众多项目，
### 第三方开发者案例
#### 推荐案例
#### 典型案例
<a href="https://m.qinxuan.honor.cn/" target="_blank" class="clear-style"><b>华为荣耀亲选商城：</b></a> 华为公司旗下荣耀品牌精品电商平台。
<div style="display:flex;justify-content: space-around;">
......@@ -74,13 +74,13 @@ uni-app助力数百家单位快速上线**抗疫系统**，开源众多项目，
<b>星巴克：</b>全球最大的咖啡连锁店，世界领先的特种咖啡零售商
<div style="display:flex;justify-content: space-around;">
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<a href="javascript:;" target="_self" class="clear-style barcode-view">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/734f5c50-d3df-11ea-81ea-f115fe74321c.jpg" width="200"/>
<span style="margin-top:15px;">微信小程序</span>
</a>
</div>
<b>Crimaster犯罪大师：</b>火爆的全球推理侦探专属社区。优秀App案例，Appstore娱乐分类排名曾排**第1位**。[报道](https://baijiahao.baidu.com/s?id=1667788917828125742&wfr=spider&for=pc)
<b>Crimaster犯罪大师：</b>火爆的全球推理侦探专属社区。优秀App案例，Appstore娱乐分类排名曾排**第1位**。[详见报道](https://baijiahao.baidu.com/s?id=1667788917828125742&wfr=spider&for=pc)
<div style="display:flex;justify-content: space-around;">
<a href="https://android.myapp.com/myapp/detail.htm?apkName=com.ultron.crimaster" target="_blank" class="clear-style barcode-view">
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-alicdn/83bc24b0-c55c-11ea-b244-a9f5e5565f30.png" width="200"/>
......@@ -92,6 +92,22 @@ uni-app助力数百家单位快速上线**抗疫系统**，开源众多项目，
</a>
</div>
<b>中国教育发布：</b>中国人民共和国教育部官方App。<a href="https://uniapp.dcloud.io/uniCloud/README">uniCloud云开发</a>案例。[详见报道](http://www.moe.gov.cn/jyb_xwfb/gzdt_gzdt/s5987/202009/t20200904_485105.html)
<div style="display:flex;justify-content: space-around;">
<a href="http://www.moe.gov.cn/jyb_xwfb/gzdt_gzdt/s5987/202009/t20200904_485105.html" target="_blank" class="clear-style barcode-view">
<img src="https://static-eefb4127-9f58-4963-a29b-42856d4205ee.bspapp.com/jiaoyubuapp.jpg" width="200"/>
<span style="margin-top:15px;">iOS、Android通用扫码地址</span>
</a>
</div>
<b>CSDN：</b> Appstore新闻类榜单前十。<a href="https://nativesupport.dcloud.net.cn/">uni小程序SDK</a>案例。App内部众多栏目做成小程序形式。
<div style="display:flex;justify-content: space-around;">
<a href="https://www.csdn.net/apps/download" target="_blank" class="clear-style barcode-view">
<img src="https://static-eefb4127-9f58-4963-a29b-42856d4205ee.bspapp.com/csdnappdown.jpg" width="200"/>
<span style="margin-top:15px;">App码</span>
</a>
</div>
<!--
<a href="https://www.csdn.net/" target="_blank" class="clear-style"><b>CSDN：</b></a> 专业 IT 技术社区，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
<div style="display:flex;justify-content: space-around;">
......@@ -100,7 +116,6 @@ uni-app助力数百家单位快速上线**抗疫系统**，开源众多项目，
<span style="margin-top:15px;">微信小程序码</span>
</a>
</div>
-->
<a href="https://www.oschina.net/" target="_blank" class="clear-style"><b>开源中国：</b></a> 中文开源技术交流社区，提供最新的开源软件资讯。
<div style="display:flex;justify-content: space-around;">
......@@ -113,14 +128,15 @@ uni-app助力数百家单位快速上线**抗疫系统**，开源众多项目，
<span style="margin-top:15px;">百度小程序码</span>
</a>
</div>
-->
<b>vivo官方商城：</b> vivo公司旗下的官方自营商城。
<div style="display:flex;justify-content: space-around;">
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/vivo-weixin.jpg" width="200"/>
<span style="margin-top:15px;">微信小程序码</span>
</a>
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<img src="https://img.cdn.aliyun.dcloud.net.cn/uni-app/case/vivo-mall.png" width="200"/>
<span style="margin-top:15px;">支付宝小程序码</span>
</a>
......@@ -132,7 +148,7 @@ uni-app助力数百家单位快速上线**抗疫系统**，开源众多项目，
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-alicdn/bda036a0-c55f-11ea-b997-9918a5dda011.png" width="200"/>
<span style="margin-top:15px;">Web及H5码</span>
</a>
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<a href="javascript:;" target="_self" class="clear-style barcode-view">
<img src="https://duolingo.91ddedu.com/static/miniapp.4a4ddf6b.jpg" width="200"/>
<span style="margin-top:15px;">微信小程序码</span>
</a>
......@@ -208,13 +224,15 @@ uni-app助力数百家单位快速上线**抗疫系统**，开源众多项目，
**华为：** 微信小程序搜索“荣耀亲选商城”、[H5](https://m.qinxuan.honor.cn/)、[App部分栏目使用DCloud SDK](https://appgallery1.huawei.com/#/app/C100382765)
**华为：** [华为大学H5版](https://developer.huaweiuniversity.com/m/)
**字节跳动：** 抖音小游戏中心。
**美团：** 微信小程序搜索“美团充电宝”、App内充电宝栏目
**快手：** App中搜索“快手每日一答”
**腾讯：** 微信小程序搜索“腾讯全民模拟炒股大赛”、[H5（需使用微信打开）](https://zqact.tenpay.com/chaogu/)
**腾讯：** 微信小程序搜索“腾讯全民模拟炒股大赛”、[H5（需使用微信浏览器打开）](https://zqact.tenpay.com/chaogu/)
**京东：** 京东开发的新冠抗疫服务平台：[H5](http://yingji-h5.chanye.jdcloud.com/)、京东金融羊羊大作战：[H5](https://u.jr.jd.com/uc-fe-wxgrowing/sheep-fight/)
......@@ -326,6 +344,8 @@ uni-app助力数百家单位快速上线**抗疫系统**，开源众多项目，
**大量新冠抗疫项目，详见专题：**[xinguan2020.dcloud.net.cn](https://dcloud.io/ncp.html)
**中国教育发布：**中国人民共和国教育部官方App。使用uniCloud云开发。[详见](http://www.moe.gov.cn/jyb_xwfb/gzdt_gzdt/s5987/202009/t20200904_485105.html)
**共青团全国青少年弘扬中华优秀传统文化交流展示活动专题网站：**[同时适配PC和手机版的H5](https://chuancheng.xwhdw.com/)
**登记注册身份验证（5+App）：**国家工商总局，企业登记注册身份验证。[Android](https://android.myapp.com/myapp/detail.htm?apkName=gov.zwfw.samr.djzc)、[iOS](https://apps.apple.com/cn/app/%E7%99%BB%E8%AE%B0%E6%B3%A8%E5%86%8C%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81/id1466043859)
......
docs/collocation/_sidebar.md
浏览文件 @ d25ea6ec
......@@ -53,7 +53,7 @@
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群7：942061423 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=cMlWEzWJGM0f6uVyINfEmTB4yjfGPgxH&jump_from=webapi">点此加入</a></div>
<div>群6：697264024 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=SP8-OAARtiYc3heIMYDBNfffG3I5utCy&jump_from=webapi">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
......@@ -82,8 +82,8 @@
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（2000人已满）</div>
<div>群8：695442854（2000人已满）</div>
<!-- <div>群7：942061423（2000人已满）</div> -->
<div>群6：697264024（2000人已满）</div>
<div>群7：942061423（2000人已满）</div>
<!-- <div>群6：697264024（2000人已满）</div> -->
<div>群5：731951419（2000人已满）</div>
<div>群4：942702595（2000人已满）</div>
<div>群3：773794803（2000人已满） </div>
......
docs/collocation/pages.md
浏览文件 @ d25ea6ec
......@@ -388,11 +388,11 @@ uni-app 2.9+ 新增 leftWindow, topWindow, rightWindow 配置。用于解决宽
|softinputNavBar|String|auto|iOS软键盘上完成工具栏的显示模式，设置为 "none" 时关闭工具栏。|仅ios生效|
|softinputMode|String|adjustPan|软键盘弹出模式，支持 adjustResize、adjustPan 两种模式|App|
|pullToRefresh|Object||下拉刷新|App|
|scrollIndicator|String||滚动条显示策略，设置为 "none" 时不显示滚动条。|App-vue|
|scrollIndicator|String||滚动条显示策略，设置为 "none" 时不显示滚动条。|App|
|animationType|String|pop-in|窗口显示的动画效果，详见：[窗口动画](api/router?id=animation)。|App|
|animationDuration|Number|300|窗口显示动画的持续时间，单位为 ms。|App|
**Tips**
- `.nvue` 页面仅支持 `titleNView、pullToRefresh` 配置，其它配置项暂不支持
- `.nvue` 页面仅支持 `titleNView、pullToRefresh、scrollIndicator` 配置，其它配置项暂不支持
#### 导航栏@app-titleNView
|属性|类型|默认值|描述|版本兼容性|
......
docs/component/_sidebar.md
浏览文件 @ d25ea6ec
......@@ -89,86 +89,86 @@
* [配置小程序插件](component/mp-weixin-plugin.md)
* [原生组件说明](component/native-component.md)
<li></li>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/uniad-520.png" width="20" height="20"/>
<div class="contact-smg">
<div>uniAD</div>
</div>
</a>
<a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-tongji-icon.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库：<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a>、<a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群7：942061423 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=cMlWEzWJGM0f6uVyINfEmTB4yjfGPgxH&jump_from=webapi">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
<div>群32：166188631（2000人已满）</div>
<div>群31：567471669（2000人已满）</div>
<div>群30：371046920（2000人已满）</div>
<div>群29：202965481（2000人已满）</div>
<div>群28：166188776（2000人已满）</div>
<div>群27：811363410（2000人已满）</div>
<div>群26：147867597（2000人已满）</div>
<div>群25：165297000（2000人已满）</div>
<div>群24：672494800（2000人已满）</div>
<div>群23：599958679（2000人已满）</div>
<div>群22：687186952（2000人已满）</div>
<div>群21：717019120（2000人已满）</div>
<div>群20：165796402（2000人已满）</div>
<div>群19：165657124（2000人已满）</div>
<div>群18：698592271（2000人已满）</div>
<div>群17：951348804（2000人已满）</div>
<div>群16：719211033（2000人已满）</div>
<div>群15：516984120（2000人已满）</div>
<div>群14：465953250（2000人已满）</div>
<div>群13：699478442（2000人已满）</div>
<div>群12：884860657（2000人已满）</div>
<div>群11：296811328（2000人已满）</div>
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（2000人已满）</div>
<div>群8：695442854（2000人已满）</div>
<!-- <div>群7：942061423（2000人已满）</div> -->
<div>群6：697264024（2000人已满）</div>
<div>群5：731951419（2000人已满）</div>
<div>群4：942702595（2000人已满）</div>
<div>群3：773794803（2000人已满） </div>
<div>群2：901474938（2000人已满） </div>
<div>群1：531031261（2000人已满）</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/uniad-520.png" width="20" height="20"/>
<div class="contact-smg">
<div>uniAD</div>
</div>
</a>
<a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-tongji-icon.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库：<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a>、<a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群6：697264024 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=SP8-OAARtiYc3heIMYDBNfffG3I5utCy&jump_from=webapi">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
<div>群32：166188631（2000人已满）</div>
<div>群31：567471669（2000人已满）</div>
<div>群30：371046920（2000人已满）</div>
<div>群29：202965481（2000人已满）</div>
<div>群28：166188776（2000人已满）</div>
<div>群27：811363410（2000人已满）</div>
<div>群26：147867597（2000人已满）</div>
<div>群25：165297000（2000人已满）</div>
<div>群24：672494800（2000人已满）</div>
<div>群23：599958679（2000人已满）</div>
<div>群22：687186952（2000人已满）</div>
<div>群21：717019120（2000人已满）</div>
<div>群20：165796402（2000人已满）</div>
<div>群19：165657124（2000人已满）</div>
<div>群18：698592271（2000人已满）</div>
<div>群17：951348804（2000人已满）</div>
<div>群16：719211033（2000人已满）</div>
<div>群15：516984120（2000人已满）</div>
<div>群14：465953250（2000人已满）</div>
<div>群13：699478442（2000人已满）</div>
<div>群12：884860657（2000人已满）</div>
<div>群11：296811328（2000人已满）</div>
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（2000人已满）</div>
<div>群8：695442854（2000人已满）</div>
<div>群7：942061423（2000人已满）</div>
<!-- <div>群6：697264024（2000人已满）</div> -->
<div>群5：731951419（2000人已满）</div>
<div>群4：942702595（2000人已满）</div>
<div>群3：773794803（2000人已满） </div>
<div>群2：901474938（2000人已满） </div>
<div>群1：531031261（2000人已满）</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
docs/component/ad.md
浏览文件 @ d25ea6ec
......@@ -42,7 +42,7 @@
|@load|EventHandle||广告加载成功的回调||
|@error|EventHandle||广告加载失败的回调，event.detail = {errCode: }||
|@close|EventHandle||广告关闭的回调||
|@downloadchange|EventHandle||下载类广告的状态, event.detail = {status: }|仅App Android 支持|
**type属性 百度**
......@@ -85,19 +85,6 @@ App和微信小程序的ad组件没有type属性，可以用于banner，也可
- 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)
**@downloadchange status**
|代码|说明|
|:-|:-|
|-1| 非下载|
|0|未开始下载|
|1|下载中|
|2|下载暂停|
|3|下载完成后|
|4|下载失败|
|5| 下载取消|
|6|已安装|
**示例：**
......@@ -108,7 +95,7 @@ App和微信小程序的ad组件没有type属性，可以用于banner，也可
<!-- App平台 示例 1 -->
<!-- adpid="1111111111" 此广告位标识仅在HBuilderX标准基座中有效，仅用于测试，替换为自己申请获取的广告位标识 -->
<view class="ad-view">
<ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror" @downloadchange="ondownloadchange"></ad>
<ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror"></ad>
</view>
<!-- App平台 示例 2 -->
......@@ -187,9 +174,6 @@ export default {
},
onerror(e) {
console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
},
ondownloadchange(e) {
console.log("downloadchanged: " + JSON.stringify(e.detail));
}
}
}
......
docs/component/barcode.md
浏览文件 @ d25ea6ec
......@@ -104,8 +104,10 @@ message|string|失败描述
onLoad() {
},
data: {
fil: [0, 2, 1]
data() {
return {
fil: [0, 2, 1]
}
},
methods: {
......
docs/component/cover-view.md
浏览文件 @ d25ea6ec
......@@ -58,6 +58,7 @@ app-vue上可覆盖的原生组件：`<video>`、`<map>`
**Tips**
- App端vue页面 `cover-view`、`cover-image` 中不支持嵌套其它组件，包括再次嵌套`cover-view`，仅可覆盖`video`、`map`。App端nvue页面自2.1.5起没有这些限制。
- App端 `cover-image` 使用本地图像的话，打包前需要设置资源为释放模式，在manifest文件内app-plus新增runmode节点，设置值为liberate。
- App端还可以使用plus.nativeObj.view绘制原生内容，参考:[uni-app中使用5+界面控件](https://ask.dcloud.net.cn/article/35036)、[plus.nativeObj.view规范](https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View)
- App端还提供了更灵活和强大的`subNvue`，参考[原生子窗体subNvue](/api/window/subNVues)
- 在 video 组件中使用时，若想在全屏模式下使用`cover-view`，只有在微信小程序、App端的nvue页面可实现。
......
docs/component/live-pusher.md
浏览文件 @ d25ea6ec
......@@ -138,8 +138,8 @@ message|string| 具体的网络状态信息
```javascript
<script>
export default {
data: {
fil: true
data() {
return {}
},
onReady() {
// 注意：需要在onReady中 或 onLoad 延时
......
docs/component/map.md
浏览文件 @ d25ea6ec
......@@ -83,8 +83,8 @@
|fontSize|文字大小|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|x|label的坐标，原点是 marker 对应的经纬度|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|y|label的坐标，原点是 marker 对应的经纬度|Number|App-nvue 2.1.5+、微信小程序、H5、百度小程序|
|borderWidth|边框宽度|Number|App-nvue 2.1.5+、微信小程序、百度小程序|
|borderColor|边框颜色|String|App-nvue 2.1.5+、微信小程序、百度小程序|
|borderWidth|边框宽度|Number|微信小程序、百度小程序|
|borderColor|边框颜色|String|微信小程序、百度小程序|
|borderRadius|边框圆角|Number|App-nvue 2.1.5+、微信小程序、百度小程序|
|bgColor|背景色|String|App-nvue 2.1.5+、微信小程序、百度小程序|
|padding|文本边缘留白|Number|App-nvue 2.1.5+、微信小程序、百度小程序|
......@@ -192,11 +192,13 @@ export default {
```
map 组件相关操作的 JS API：[uni.createMapContext](api/location/map?id=createmapcontext)
nvue map 更换箭头图标格式参考: [https://ask.dcloud.net.cn/article/37901](https://ask.dcloud.net.cn/article/37901)
**注意事项**
- 小程序和app-vue中，`<map>` 组件是由引擎创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。在`<map>`上绘制内容，可使用组件自带的marker、controls等属性，也可以使用`<cover-view>`组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容，[参考](/component/native-component)。另外App端nvue文件不存在层级问题。从微信基础库2.8.3开始，支持map组件的同层渲染，不再有层级问题。
- App端nvue文件的map和小程序拉齐度更高。vue里的map则与plus.map功能一致，和小程序的地图略有差异。**App端使用map推荐使用nvue。**
- App端使用到本地图像的话，打包前需要设置资源为释放模式，在manifest文件内app-plus新增runmode节点，设置值为liberate。
- 在涉及层级问题的小程序中和app-vue中，请勿在 scroll-view、swiper、picker-view、movable-view 中使用 `<map>` 组件。
- 小程序和 app-vue 中，css 动画对 `<map>` 组件无效。
- map 组件使用的经纬度是国测局坐标，调用 uni.getLocation 接口需要指定 type 为 gcj02。
......
docs/component/match-media.md
浏览文件 @ d25ea6ec
......@@ -10,7 +10,7 @@ media query 匹配检测节点。
|app|微信小程序|支付宝小程序|qq小程序|百度小程序|字节小程序|360小程序|快应用|
|:-|:-|:-|:-|:-|:-|:-|:-|
|2.8.12+，app-vue|基础库 2.11.1+|√|√|√|√|√|
|2.8.12+，app-vue|基础库 2.11.1+|√|√|√|√|√|×|
注意：支付宝小程序、qq小程序、百度小程序、字节小程序，暂不支持监听屏幕动态改变，即只执行一次媒体查询。
......
docs/component/video.md
浏览文件 @ d25ea6ec
......@@ -21,6 +21,7 @@
|show-fullscreen-btn|Boolean|true|是否显示全屏按钮||
|show-play-btn|Boolean|true|是否显示视频底部控制栏的播放按钮||
|show-center-play-btn|Boolean|true|是否显示视频中间的播放按钮|字节跳动小程序不支持|
|show-loading|Boolean|true|是否显示loading控件|仅app 2.8.12+|
|enable-progress-gesture|Boolean|true|是否开启控制进度的手势|字节跳动小程序不支持|
|object-fit|String|contain|当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖|微信小程序、字节跳动小程序、H5|
|poster|String||视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效||
......@@ -163,7 +164,7 @@ export default {
**注意**
- 视频播放格式说明：
* H5平台：支持支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。（``<video/>`` 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。
* H5平台：支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。（``<video/>`` 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。
* 小程序平台：各小程序平台支持程度不同，详见各家文档：[微信小程序视频组件文档](https://developers.weixin.qq.com/miniprogram/dev/component/video.html)、[支付宝小程序video组件](https://docs.alipay.com/mini/component/video)、[百度小程序视频组件文档](https://smartprogram.baidu.com/docs/develop/component/media/#video/)、[字节跳动小程序视频组件文档](https://developer.toutiao.com/dev/cn/mini-app/develop/component/media-component/video)、[QQ小程序视频组件文档](https://q.qq.com/wiki/develop/miniprogram/component/media/camera.html)、[华为快应用视频组件文档](https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-component-video)
* App平台： 支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。
......
docs/component/web-view.md
浏览文件 @ d25ea6ec
......@@ -12,7 +12,7 @@
|allow|String|用于为 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 指定其[特征策略](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/策略特征)|H5|
|sandbox|String|该属性对呈现在 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 框架中的内容启用一些额外的限制条件。|H5|
|webview-styles|Object|webview 的样式|App-vue|
|@message|EventHandler|网页向应用 `postMessage` 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。|H5 暂不支持|
|@message|EventHandler|网页向应用 `postMessage` 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。|H5 暂不支持（可以直接使用 [window.postMessage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)）|
|@onPostMessage|EventHandler|网页向应用实时 `postMessage`|App-nvue|
**src**
......@@ -109,7 +109,7 @@
|uni.reLaunch|[reLaunch](/api/router?id=relaunch)||
|uni.switchTab|[switchTab](/api/router?id=switchtab)||
|uni.navigateBack|[navigateBack](/api/router?id=navigateback)||
|uni.postMessage|向应用发送消息|字节跳动小程序不支持|
|uni.postMessage|向应用发送消息|字节跳动小程序不支持、H5 暂不支持（可以直接使用 [window.postMessage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)）|
|uni.getEnv|获取当前环境|字节跳动小程序不支持|
##### uni.postMessage(OBJECT)
......@@ -136,35 +136,92 @@
在 `<web-view>` 加载的 HTML 中，添加以下代码：
```html
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent) || /MicroMessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
```
待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
```html
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>网络网页</title>
<style type="text/css">
.btn {
display: block;
margin: 20px auto;
padding: 5px;
background-color: #007aff;
border: 0;
color: #ffffff;
height: 40px;
width: 200px;
}
.btn-red {
background-color: #dd524d;
}
.btn-yellow {
background-color: #f0ad4e;
}
.desc {
padding: 10px;
color: #999999;
}
.post-message-section {
visibility: hidden;
}
</style>
</head>
<body>
<p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。</p>
<div class="btn-list">
<button class="btn" type="button" data-action="navigateTo">navigateTo</button>
<button class="btn" type="button" data-action="redirectTo">redirectTo</button>
<button class="btn" type="button" data-action="navigateBack">navigateBack</button>
<button class="btn" type="button" data-action="reLaunch">reLaunch</button>
<button class="btn" type="button" data-action="switchTab">switchTab</button>
</div>
<div class="post-message-section">
<p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p>
<div class="btn-list">
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
</div>
</div>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write(
'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
);
} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
document.write(
'<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write(
'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
);
} else if (/quickapp/i.test(userAgent)) {
// quickapp
document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
action: 'message'
......@@ -173,8 +230,47 @@
uni.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
});
</script>
document.querySelector('.btn-list').addEventListener('click', function(evt) {
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
switch (action) {
case 'switchTab':
uni.switchTab({
url: '/pages/tabBar/API/API'
});
break;
case 'reLaunch':
uni.reLaunch({
url: '/pages/tabBar/component/component'
});
break;
case 'navigateBack':
uni.navigateBack({
delta: 1
});
break;
default:
uni[action]({
url: '/pages/component/button/button'
});
break;
}
}
});
document.getElementById('postMessage').addEventListener('click', function() {
uni.postMessage({
data: {
action: 'message'
}
});
});
});
</script>
</body>
</html>
```
......@@ -282,3 +378,31 @@ A：加载的 HTML 中是有 5+ 环境的，在 plusready 后调用即可。参
Q: web-view 加载 uni-app H5，内部跳转冲突如何解决
A：使用 uni.webView.navigateTo...
uni.webView.navigateTo 示例，注意uni sdk放到body下面
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
...
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
uni.webView.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
// uni.webView.navigateTo(...)
});
</script>
</html>
```
docs/frame.md
浏览文件 @ d25ea6ec
......@@ -313,7 +313,7 @@ switch(uni.getSystemInfoSync().platform){
`uni-app` 支持的通用 css 单位包括 px、rpx
- px 即屏幕像素
- rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
- rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：[rpx计算配置](https://uniapp.dcloud.io/collocation/pages?id=globalstyle) 。
vue页面支持普通H5单位，但在nvue里不支持：
- rem 根字体大小可以通过 [page-meta](/component/page-meta?id=page-meta) 配置<span style="display:none">字节跳动小程序：屏幕宽度/20、百度小程序：16px、支付宝小程序：50px</span>
......@@ -338,7 +338,7 @@ nvue中，uni-app 模式（[nvue 不同编译模式介绍](https://ask.dcloud.ne
而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。
微信小程序设计了 rpx 解决这个问题，`uni-app` 在 App 端、H5 端都支持了 `rpx`。
微信小程序设计了 rpx 解决这个问题。`uni-app` 在 App 端、H5 端都支持了 `rpx`，并且可以配置不同屏幕宽度的计算方式，具体参考：[rpx计算配置](https://uniapp.dcloud.io/collocation/pages?id=globalstyle)。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。```uni-app``` 规定屏幕基准宽度 750rpx。
......
docs/platform.md
浏览文件 @ d25ea6ec
......@@ -36,9 +36,9 @@ uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-
|MP-QQ|QQ小程序|
|MP-360|360小程序|
|MP|微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序|
|quickapp-webview|快应用通用(包含联盟、华为)|
|quickapp-webview-union|快应用联盟|
|quickapp-webview-huawei|快应用华为|
|QUICKAPP-WEBVIEW|快应用通用(包含联盟、华为)|
|QUICKAPP-WEBVIEW-UNION|快应用联盟|
|QUICKAPP-WEBVIEW-HUAWEI|快应用华为|
**支持的文件**
......
docs/quickstart.md
浏览文件 @ d25ea6ec
......@@ -300,11 +300,11 @@ npm run build:%PLATFORM%
- 原生渲染方式：[https://ask.dcloud.net.cn/article/37145](https://ask.dcloud.net.cn/article/37145)
### 运行并发布快应用(webview)@quickapp-webview
#### 运行并发布快应用(webview)@quickapp-webview
HBuilderX 2.7.12+ 版支持
### 运行并发布快应用(webview)-华为@quickapp-webview-huawei
#### 运行并发布快应用(webview)-华为@quickapp-webview-huawei
HBuilderX 2.7.10+ 版支持
华为快应用文档-小程序转快应用 [https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-filestructure](https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-filestructure)
......
docs/release-note-alpha.md
浏览文件 @ d25ea6ec
此差异已折叠。
docs/release.md
浏览文件 @ d25ea6ec
此差异已折叠。
docs/uniCloud/_sidebar.md
浏览文件 @ d25ea6ec
* [什么是uniCloud](uniCloud/README.md)
* [快速上手](uniCloud/quickstart.md)
* [购买指南](uniCloud/price.md)
* [免费版和商用版](uniCloud/price.md)
* 基本概念
* [服务空间](uniCloud/concepts/space.md)
* [数据库](uniCloud/concepts/database.md)
* [云函数](uniCloud/concepts/cloudfunction.md)
* 云数据库
* [传统nosql云数据库](uniCloud/cf-database.md)
* [clientDB及JQL](uniCloud/database.md)
* [uni-clientDB组件](uniCloud/uni-clientdb-component.md)
* [DB-Schema](uniCloud/schema.md)
* [openDB](https://gitee.com/dcloud/opendb)
* 云函数
* [开发云函数](uniCloud/cf-functions.md)
* [云函数公共模块](uniCloud/cf-common.md)
......@@ -12,25 +18,23 @@
* [身份认证](uniCloud/cf-authentication.md)
* [定时触发](uniCloud/trigger.md)
* [云函数URL化](uniCloud/http.md)
* [云数据库](uniCloud/cf-database.md)
* [云存储](uniCloud/storage.md)
* 云存储
* [云存储](uniCloud/storage.md)
* [腾讯云自定义登录](uniCloud/authentication.md)
* [腾讯云权限管理](uniCloud/policy-tcb.md)
* 扩展能力
* [uni-id](uniCloud/uni-id.md)
* [uni-clientDB](uniCloud/uni-clientDB.md)
* [DB-Schema](uniCloud/schema.md)
* [uniCloud admin](uniCloud/admin.md)
* [unipay](uniCloud/unipay.md)
* [发送短信](uniCloud/send-sms.md)
* [旧版clientDB插件](uniCloud/uni-clientDB.md)
* [前端网页托管](uniCloud/hosting.md)
* [腾讯云自定义登录](uniCloud/authentication.md)
* [日志输出](uniCloud/cf-logger.md)
* [同时连多服务空间](uniCloud/init.md)
* [案例源码](uniCloud/resource.md)
* [学习资料](uniCloud/learning.md)
* [常见问题](uniCloud/faq.md)
<!-- * [云存储](uniCloud/cf-storage.md) -->
* 权限管理
* [腾讯云](uniCloud/policy-tcb.md)
<!-- * [阿里云](uniCloud/policy-ali.md) -->
* [uniCloud产品服务协议](uniCloud/agreement.md)
* [更新日志](uniCloud/release.md)
<li></li>
<div class="contact-box">
......
docs/uniCloud/admin.md 0 → 100644
浏览文件 @ d25ea6ec
# uniCloud admin 基础框架
### 什么是 uniCloud admin
uniCloud admin 基础框架，是基于 uni-app 和 uniCloud 的应用后台管理框架。HBuilderX 2.9.5+ 支持，请更新到最新版本使用。
- 它使用 uni-app 的宽屏适配，可自动适配 PC 宽屏和手机各端。了解[宽屏适配](https://uniapp.dcloud.io/adapt)
- 它基于 uniCloud，是 serverless 的云开发。了解[uniCloud](https://uniapp.dcloud.io/uniCloud/README)
- 它基于 uni-id，admin 框架使用的是 uni-id 的用户账户、权限系统。了解[uni-id](https://uniapp.dcloud.io/uniCloud/uni-id)
### 内置的功能
- 管理员账户初始化、登录、修改密码
- 顶部 topWindow 的设置：比如 logo 更换、右上角部分链接更换。详见项目根目录的`admin.config.js`文件
- 左侧 leftWindow 的菜单设置：菜单包括两类，一类是动态菜单，具备业务和权限功能；另一类是静态菜单，不会根据登录用户角色变化
- 开发模式下的 debug 功能，帮助开发者及时发现报错和搜索错误信息，可在`admin.config.js`文件中配置
> uniCloud admin 是一个框架，具体业务需要开发者自己开发或从插件市场导入相关插件
### 支持响应式布局
uniCloud admin 同时支持 PC 端 和移动端。
PC 端如下图：
![pc](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2a69410-15db-11eb-880a-0db19f4f74bb.png)
移动端如下图：
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2766a010-11d7-11eb-8bd0-2998ac5bbf7e.png" width="375"/>
### 使用
#### 创建
[HBuilderX](https://www.dcloud.io/hbuilderx.html) 2.9.5+版本新建 uni-app 项目，选择 uniCloud admin 项目模板，如下图
![download-admin](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2085840-15db-11eb-880a-0db19f4f74bb.png)
创建完成后，可以跟随`云服务空间初始化向导`初始化项目，创建并绑定云服务空间
![download-admin](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2baaddd0-11f5-11eb-81ea-f115fe74321c.png)
#### 运行
1. 进入 admin 项目
2. 右键 cloudfuntions 运行云服务空间初始化向导（如已创建并绑定云服务空间，则跳过此步）
3. 点击工具栏的运行 -> 运行到浏览器
4. 登录页面底部进入创建管理员页面（仅允许注册一次管理员账号）
### 目录结构
```bash
├── cloudfunctions # 云函数
├── common
│ │── uni.css # 公共样式
│ └── uni-icons.css # icon样式
├── components # 自定义组件
├── js_sdk # js sdk
├── pages # 页面
│ │── index # 首页
│ └── login # 登录页
├── static
├── store # vuex
├── windows
│ │── component # 项目中使用的组件
│ │── leftWindow.vue # 左侧窗口（菜单栏）
│ └── topWindow.vue # 顶部窗口（导航栏）
├── admin.config.js # 系统配置（配置导航，菜单等）
├── App.vue
├── main.js
├── mainfest.json
├── pages.json
├── postcss.config.js # postcss 配置（浏览器兼容性）
└── uni.scss
```
### 登录页
首次使用，可以通过登录页面底部链接创建一个超级管理员（仅允许创建一次），注册完毕后，建议从登录页面移除该链接
![login](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c3f33850-15db-11eb-8ff1-d5dcf8779628.png)
### admin 窗体结构介绍
登录后我们会看到如下窗体, 窗体分为三个部分，topWindow 顶部窗口（导航栏），leftwindow 左侧窗口（菜单栏），右侧的内容主窗体
![index](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c3591b30-15db-11eb-8ff1-d5dcf8779628.png)
#### 顶部窗口（导航栏）
顶部窗口默认在左侧展示系统Logo、右侧显示导航链接，效果如上图。展示内容可通过项目根目录下的`admin.config.js`文件进行配置，如下为示例：
```js
# admin.config.js
export default {
navBar: {// 顶部导航
logo:"https://www.example.com/logo.png",//左侧 Logo
links: [ // 右侧链接
{
text: "Admin框架文档",
url: "https://uniapp.dcloud.net.cn/uniCloud/admin",
},
{
text: "浏览更多Admin插件",
url: "https://ext.dcloud.net.cn/?cat1=7&cat2=74",
}
],
},
};
```
顶部导航栏的样式，可通过项目根目录下的`uni.scss`进行自定义，如下：
```css
# uni.scss
$top-window-bg-color: #fff; /* 背景色 */
$top-window-text-color: #999; /* 文字颜色 */
```
#### 左侧窗口（菜单栏）
左侧窗口内主要是菜单，菜单包含静态菜单和动态菜单，支持无限层级嵌套，但建议层级不要超过三级
- 静态菜单: 所有登录用户角色都能看到
- 动态菜单: 根据角色的权限自动生成
> 用户登录时，会根据用户的 _角色_ 去查找其拥有的 _权限_ ，再根据 _权限_ 去查找对应的 _菜单_
##### 管理静态菜单
通过 [admin.config.js](https://github.com/dcloudio/uni-template-admin/blob/master/admin.config.js) 配置侧边栏内容，所有用户都能看到静态菜单。
```js
export default {
// 侧边栏
sideBar: {
// 配置静态菜单列表（放置在用户被授权的菜单列表下边）
staticMenu: [
{
menu_id: "demo",
name: "静态功能演示",
icon: "uni-icons-list",
children: [
{
menu_id: "icons",
name: "图标",
url: "/pages/demo/icons/icons",
},
{
menu_id: "table",
name: "表格",
url: "/pages/demo/table/table",
},
],
},
],
},
};
```
##### 管理动态菜单
在云后台数据库的 `opendb-admin-menus` 表中管理菜单， 对菜单增删改查。如下图：
![add-menu](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/aa7adb00-152a-11eb-81ea-f115fe74321c.png)
_菜单字段解释:_
| 字段 | 类型 | 必填 | 描述 |
| :---------- | :-------- | :--- | :--------------------------------------------------- |
| menu_id | Object ID | 是 | 系统自动生成的 Id |
| name | String | 是 | 菜单文字 |
| icon | String | 否 | 菜单图标 |
| url | String | 否 | 菜单对应的页面链接（只有没有子菜单的菜单项可以配置） |
| sort | Integer | 否 | 在同级菜单中的排序，数组越大越靠后 |
| parent_id | String | 否 | 父级菜单 Id |
| permission | Array | 否 | 菜单权限（只有没有子菜单的菜单项可以配置） |
| enable | Boolean | 是 | 菜单状态：false 禁用 true 启用 |
| create_date | Timestamp | 是 | 创建时间 |
_添加菜单记录需要注意：_
- 无子菜单，则需 `url` 字段不能为空，该菜单才能在页面显示
- 有子菜单，则需至少一个子菜单的 `url` 字段不能为空，该菜单才能在页面显示
例如，如需增加如下菜单：
```bash
订单管理 # 父菜单
└── 手机 # 子菜单
```
1. 添加一条父菜单记录
菜单的 `parent_id` 字段为空, 即为一级菜单
```json
{
"menu_id": "order",
"name": "订单管理",
"icon": "uni-icons-cart-filled",
"url": "",
"sort": 2,
"parent_id": "",
"permission": [],
"enable": true,
"create_date": "1602662469396"
}
```
2. 添加一条子菜单记录
将子菜单的 `parent_id` 指向父菜单的 `menu_id`即可，孙菜单就是将子菜单的 `menu_id` 当做父菜单
```json
{
"menu_id": "phone",
"name": "手机",
"icon": "uni-icons-phone",
"url": "pages/phone",
"sort": 3,
"parent_id": "order",
"permission": [],
"enable": true,
"create_date": "1602662469492"
}
```
##### 侧边栏样式管理
通过 [uni.scss](https://github.com/dcloudio/uni-template-admin/blob/master/uni.scss) 配置侧边栏样式
> 调整菜单颜色时，只需设置菜单背景色 `$menu-bg-color`，自行搭配文字前景色即可
```css
$left-window-bg-color: #fff; /* 左侧窗口背景色 */
$menu-bg-color: #fff; /* 一级菜单背景色 */
$sub-menu-bg-color: darken($menu-bg-color, 8%); /* 二级以下菜单背景色 */
$menu-bg-color-hover: darken($menu-bg-color, 15%); /* 菜单 hover 背景颜色 */
$menu-text-color: #333; /* 菜单前景色 */
$menu-text-color-actived: #409eff; /* 菜单激活前景色 */
```
#### 右侧窗口（内容主窗体)
右侧窗口是内容主窗体，和 uni-app 保持一致，用户登录后看到的第一个页面，默认是 pages 数组中第一项表示应用启动页。
如果想将自己开发的页面调到登录后首页，可在 page.json 调整。
### icon 图标的使用
admin 内置了一套图标以供使用，开发者也可以使用第三方图标
#### 使用内置 icon
前往静态功能演示-图标菜单中，点击图标即可复制图标代码
> `<view class="uni-icons-gear"></view>`
或直接在标签上使用图标的 class 名称，即：
> `class='uni-icons-gear'`
#### 使用第三方 icon
以使用 elementUI 的图标为例，在 `app.vue` 中应用图标库的样式文件：
```javascript
<style>
/* 注意此处仅为 icon 使用示例，建议引入纯净图标库，避免增加不必要的 css */
@import 'https://unpkg.com/element-ui/lib/theme-chalk/index.css';
</style>
```
在标签上使用图标的 class 名称，即：
> `<view class="el-icon-s-tools"></view>`
### 用户系统
> 基于 [uni-id](https://uniapp.dcloud.io/uniCloud/uni-id) 用户登录
### 权限系统
> 基于 [uni-id](https://uniapp.dcloud.io/uniCloud/uni-id?id=rbac-api) 角色权限, uni-id 是 uniCloud 之上的用户账户、权限系统
- 用户表 `uni-id-users` [详情](https://uniapp.dcloud.io/uniCloud/uni-id?id=%e7%94%a8%e6%88%b7%e8%a1%a8)
- 角色表 `uni-id-roles` [详情](https://uniapp.dcloud.io/uniCloud/uni-id?id=%e8%a7%92%e8%89%b2%e8%a1%a8)
- 权限表 `uni-id-permissions` [详情](https://uniapp.dcloud.io/uniCloud/uni-id?id=%e6%9d%83%e9%99%90%e8%a1%a8)
- 菜单表 `opendb-admin-menus`
| 字段 | 类型 | 必填 | 描述 |
| :--------- | :-------- | :--- | :--------------------------------------------------- |
| menu_id | Object ID | 是 | 系统自动生成的 Id |
| name | String | 是 | 菜单文字 |
| icon | String | 否 | 菜单图标 |
| url | String | 否 | 菜单对应的页面链接（只有没有子菜单的菜单项可以配置） |
| sort | Integer | 否 | 在同级菜单中的排序，数组越大越靠后 |
| parent_id | String | 否 | 父级菜单 Id |
| permission | Array | 否 | 菜单权限（只有没有子菜单的菜单项可以配置） |
| enable | Boolean | 是 | 菜单状态：false 禁用 true 启用 |
| create_date | Timestamp | 是 | 创建时间 |
- 验证码表 `uni-verify` [详情](https://uniapp.dcloud.io/uniCloud/uni-id?id=%e7%94%a8%e6%88%b7%e8%a1%a8)
- 权限验证
admin 提供了两个内置方法，方便在页面中鉴定登录用户权限和角色:
| 方法 | 作用 | 入参 | 返回值 |
| :--------------- | :------------------------- | :----- | :------ |
| `$hasPermission` | 鉴定登录用户是否具有某权限 | String | Boolean |
| `$hasRole` | 鉴定登录用户是否具有某角色 | String | Boolean |
```html
<template>
<view>
<!-- 包含 user/add 权限的用户可以看到新增按钮 -->
<button v-if="$hasPermission('USER_ADD')">新增</button>
<!-- 包含 admin 角色的用户可以看到删除按钮 -->
<button v-if="$hasRole('admin')">删除</button>
</view>
</template>
```
### 新增页面
新增页面可以自己开发页面，也可以从插件市场下载插件。页面如需添加菜单，参见上文的[菜单管理](#静态菜单和动态菜单)。
开发页面不局限开发方式：
- 可以新增普通的页面，在前端 callfunction，后台搭配云函数操作
- 可以使用 uni-clientdb，在前端直接操作数据库，后台配置 db schema 进行权限和格式校验
- 可以使用云函数单文件路由，在项目中默认包含了一个[uni-cloud-router](https://uniapp.dcloud.io/uniCloud/uni-cloud-router) 的单文件路由，也可以使用插件市场的其他单文件路由
#### 自己开发页面
admin 中开发页面，和 uni-app 开发 vue 页面是一致的。
#### 从插件市场下载插件，并注册到 admin 菜单
以[uniCloud admin 管理项目-权限管理插件](https://ext.dcloud.net.cn/plugin?id=3269)为例
_使用步骤:_
1. 从[插件市场](https://ext.dcloud.net.cn/)导入插件
2. 在 HBuilder X 2.9.5 中选择添加插件的项目
3. 覆盖项目的 db_init.json 文件, 点击“确定覆盖”
4. 在 db_init.json 文件上右键，点击“初始化云数据库”
5. 刷新 admin 即可在菜单栏看到新增的菜单
---------------------------------- 分割线 ----------------------------------------
### 插件开发
我们不仅是插件的使用者，也可以是插件的开发者，那么如何开发一款插件呢？参考 [DCloud 插件开发指南汇总](https://ask.dcloud.net.cn/article/35408) 及其中的 `admin 插件`部分.
### 使用三方组件库
uniCloud admin 支持所有三方的 Vue UI 库，包括 elementUI 等非 uni-app 的 UI 库，但注意这些 for h5 的 ui 库只能在浏览器中使用，无法适配 App 和小程序，按如下操作。
以使用 element-ui 框架为例：
1. 安装 UI 框架
> npm i element-ui -S
2. 在 main.js 中引用
```javascript
import elementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(elementUI);
```
docs/uniCloud/agreement.md 0 → 100644
浏览文件 @ d25ea6ec
此差异已折叠。
docs/uniCloud/cf-database.md
浏览文件 @ d25ea6ec
此差异已折叠。
docs/uniCloud/cf-functions.md
浏览文件 @ d25ea6ec
......@@ -160,7 +160,7 @@ uniCloud.callFunction({
## 云函数中调用云函数@callbyfunction
用法同客户端调用云函数，不支持callback形式
用法同客户端调用云函数，不支持callback形式。**云函数本地运行时使用callFunction会调用云端的云函数而不是本地云函数**
#### 请求参数
......@@ -202,13 +202,13 @@ serverless默认是没有固定的服务器IP的，因为有很多服务器在
**注意**
- 同一个服务空间内所有开启固定出口IP的云函数使用的是同一个IP。
- 如果你是免费版升配到付费版，开启之后会导致付费版到期之后无法自动降级到免费版，请注意续费
- 如果你是免费版升配到付费版，开启`固定IP`功能后，会导致付费版到期无法自动降级到免费版，请注意按时续费
## 使用cloudfunctions_init初始化云函数@init
自`HBuilderX 2.9`起`uniCloud`提供了`cloudfunctions_init.json`来方便开发者快速进行云函数的初始化操作，即在HBuilderX工具中，一次性完成所有云函数的配置。
这个功能尤其适合插件作者，不用再使用说明文档一步一步引到用户去配置云函数定时触发器、内存、url化路径等。
这个功能尤其适合插件作者，不用再使用说明文档一步一步引导用户去配置云函数定时触发器、内存、url化路径等。
**使用方式**
- 在`cloudfucntions`目录右键即可创建`cloudfunctions_init.json`，
......
docs/uniCloud/database.md 0 → 100644
浏览文件 @ d25ea6ec
此差异已折叠。
docs/uniCloud/faq.md
浏览文件 @ d25ea6ec
......@@ -4,7 +4,14 @@
`uniCloud`和微信小程序云开发、支付宝小程序云开发使用相同的基础建设平台，微信小程序云开发背后是腾讯云的TCB团队，支付宝小程序云开发背后是阿里小程序云团队。`uniCloud`是DCloud和阿里小程序云团队、腾讯云的TCB团队直接展开深层次合作，在他们底层资源的基础上进行二次封装，提供的跨端云开发方案。
简单来说，uniCloud和微信小程序云开发、支付宝小程序云开发一样稳定健壮，但可以跨更多平台。不管你在uniCloud里选择了阿里还是腾讯的serverless，均可以跨端使用。
简单来说，uniCloud和微信小程序云开发、支付宝小程序云开发一样稳定健壮，但有更多优势：
- 跨平台。不管你在uniCloud里选择了阿里还是腾讯的serverless，均可以跨uni-app的全端使用。从pc到h5，从Android到iOS，以及各家小程序快应用，十几个平台全端支持
- uniCloud提供了`clientDB`神器，减少90%的服务器开发工作量，且保障数据安全。[详见](https://uniapp.dcloud.io/uniCloud/database)
- uniCloud提供了[uni-id](https://uniapp.dcloud.io/uniCloud/uni-id)、[uniPay](https://uniapp.dcloud.io/uniCloud/unipay)等重要框架，大幅减少开发者的相应功能开发量。
- uniCloud提供了[uniCloud admin](https://uniapp.dcloud.io/uniCloud/admin)，管理端开发工作量大幅减少。
- 更易学。uniCloud提供了`JQL`查询语言，比SQL和MongoDB的查询语法更简单易掌握，尤其是联表查询非常简单。[详见](https://uniapp.dcloud.io/uniCloud/database?id=jsquery)
- 更完善的工具链。前端uni-app、云端uniCloud、还有ide端的HBuilderX，互相紧密搭配，打造闭环的优秀开发体验
- 更丰富的生态。插件市场有大量现成的轮子和资源 [详见](https://ext.dcloud.net.cn/?cat1=7&orderBy=TotalDownload)
### uniCloud稳定吗？DCloud服务器异常会影响我的线上业务吗？
......@@ -12,6 +19,8 @@
用户终端上的应用在运行时，直连云服务商serverless平台，不会经过DCloud服务器，开发者无需担心因DCloud服务器负载而影响自己业务的问题。
尤其是腾讯云付费版，享受腾讯云的SLA。如果真出问题，腾讯云会负责赔偿（实际上不太会出现故障）
### 云函数 和 传统 Node.js 开发有何区别？
云函数相当于 Node.js + Serverless + DCloud改进。
......@@ -24,24 +33,15 @@
另外，在 Node.js 代码实现上，云函数每次执行的宿主环境（可简单理解为虚拟机或服务器硬件）可能相同，也可能不同，因此传统`Node.js`开发中将部分信息存储本地硬盘或内存的方案就不再适合，建议通过云数据库或云存储的方案替代。
### uniCloud只支持uni-app，怎么开发web界面？
当然还有最重要的一点，在uniCloud中，推荐大量业务使用clientDB，一个应用中写不了太多云函数。
uni-app本来也可以开发web界面，只是内置组件对宽屏没有自动适配而已。你可以：
1. 新建uni-app项目，但不使用内置组件，而是直接用三方ui库，比如elementUI。这些基于vue的、适合宽屏使用的ui库可以直接用。至于js api，仍然使用uni的，比如uni.setStorage等。
2. 继续使用内置组件，自己处理pc适配：
- 如果要多端适配界面，使用css的媒体查询处理适配。
- 2.6.3起，uni内置组件支持了pc鼠标的滚动和drag。老版可以使用三方库替换touch的拖动为pc上的drag，比如touch-emulator.js。
- uni-app的内置组件和api仅适配了webkit内核浏览器，ie和firefox可能有兼容问题。如有问题需自己写额外css或js适配。
### uniCloud只支持uni-app，怎么开发web界面？
后续DCloud会进一步强化内置组件和uni-ui对PC浏览器的适配。
uni-app本来可以开发web界面，详见：[uni-app宽屏适配指南](https://uniapp.dcloud.io/adapt)
如果是需要pc版admin的话，已经有很多现成插件了：
- [baseCloud](https://ext.dcloud.net.cn/plugin?id=2481)
- [coolAdmin](https://ext.dcloud.net.cn/plugin?id=2444)
- [GraceAdmin](https://ext.dcloud.net.cn/plugin?id=1347)
- [基于elementUI的uniCloud示例](https://ext.dcloud.net.cn/plugin?id=1585)，均是基于uniCloud的pc端管理后台框架。
如果是需要pc版admin的话，uniCloud提供了[uniCloud admin](https://uniapp.dcloud.io/uniCloud/admin)
更多uniCloud Admin系统可搜索：[https://ext.dcloud.net.cn/search?q=admin&cat1=7&orderBy=UpdatedDate](https://ext.dcloud.net.cn/search?q=admin&cat1=7&orderBy=UpdatedDate)
插件市场有很多uniCloud Admin系统可搜索：[https://ext.dcloud.net.cn/search?q=admin&cat1=7&orderBy=UpdatedDate](https://ext.dcloud.net.cn/search?q=admin&cat1=7&orderBy=UpdatedDate)
### 可否通过http url方式访问云函数或云数据库？
......@@ -51,7 +51,7 @@ uni-app本来也可以开发web界面，只是内置组件对宽屏没有自动
uniCloud提供了`云函数URL化`，来满足上述需求。[详见](https://uniapp.dcloud.io/uniCloud/http)
### 微信云开发支持客户端直接操作数据库，uniCloud不支持？
uniCloud提供了比微信云开发更优秀的前端操作数据库方案，见：[https://uniapp.dcloud.io/uniCloud/uni-clientDB](https://uniapp.dcloud.io/uniCloud/uni-clientDB)
uniCloud提供了比微信云开发更优秀的前端操作数据库方案，见：[clientDB](https://uniapp.dcloud.net.cn/uniCloud/database)
### 云开发是nodejs+MongoDB组合，对比php+mysql的传统组合怎么样？
nodejs的性能高于php，MongoDB的性能也优于mysql。
......@@ -61,7 +61,7 @@ nodejs的性能高于php，MongoDB的性能也优于mysql。
对于喜欢传统数据库的开发者而言，仍然可以按传统方式设计数据库表结构。对于希望增加数据冗余以提高性能的开发者而言，nosql数据库则是利器。
php+mysql的优势在于生态，有很多现成的开源项目，可以大幅提高开发效率。而uniCloud将通过插件市场等一系列手段强化生态，给开发者提供更高效率的各种轮子。
uniCloud提供了`JQL`，它更符合js开发者的习惯，并且极大的降低了联表查询的复杂度，其他方案相比`JQL`都复杂很多。[详见](https://uniapp.dcloud.net.cn/uniCloud/database?id=jsquery)
### 支持websocket吗？
websocket的实时特性导致serverless化比较复杂，目前曲线方案有：
......@@ -87,9 +87,10 @@ websocket的实时特性导致serverless化比较复杂，目前曲线方案有
资源回收策略方面，阿里云是15分钟内没有第二次访问的云函数，就会被回收。腾讯云是半小时。
两家云厂商仍然在优化这个问题。目前如果开发者在意这个问题，给开发者的建议是：
1. 非高频访问的云函数，合并到高频云函数中。有的开发者使用纯单页方式编写云函数，即在一个云函数中通过路由处理实现了整个应用的所有后台逻辑。参考[插件](https://ext.dcloud.net.cn/search?q=%E8%B7%AF%E7%94%B1&cat1=7&orderBy=UpdatedDate)
2. 非高频访问的云函数，可以通过定时任务持续运行它（注意阿里云的定时任务最短周期大于资源回收周期）
3. 向service@dcloud.io发邮件，申请预留资源不销毁
1. 使用clientDB可以减少遇到问题的概率
2. 非高频访问的云函数，合并到高频云函数中。有的开发者使用纯单页方式编写云函数，即在一个云函数中通过路由处理实现了整个应用的所有后台逻辑。参考[插件](https://ext.dcloud.net.cn/search?q=%E8%B7%AF%E7%94%B1&cat1=7&orderBy=UpdatedDate)
3. 非高频访问的云函数，可以通过定时任务持续运行它（注意腾讯云可以使用这个方式完全避开冷启动，而阿里云的定时任务最短周期大于资源回收周期）
4. 向service@dcloud.io发邮件，申请预留资源不销毁
### 发布H5时还得自己找个服务器部署前端网页，可以不用自己再找服务器吗？
......@@ -132,56 +133,18 @@ uniCloud.httpclient.request('https://example.com',{
- 微信小程序云开发，已经有50万开发者，包括腾讯自有的很多大日活应用都构建在腾讯云serverless上，如微信生活缴费、乘车码、微信读书、腾讯新闻、腾讯相册等。
- 2019年双11，阿里部分业务已经迁移在serverless上。支付宝小程序也提供了云开发功能。
### uniCloud费用贵不贵？
uniCloud的阿里云目前是完全免费的。
uniCloud的腾讯云免费提供一个服务空间，更多服务空间或更多资源消耗需要付费。付费价格同微信云开发定价。整体成本远低于传统服务器租用成本。详见：[https://uniapp.dcloud.io/uniCloud/price](https://uniapp.dcloud.io/uniCloud/price)
uniCloud的免费服务空间，为避免资源滥用，有使用限制，见下。
**阿里云免费版限制如下**
|资源类目 |限制 |说明 |
|:-: |:-: |:-: |
|云函数并发限制 |1000个/服务空间|- |
|每个服务空间的云函数数量 |49个 |如何合并云函数见下一节 |
**腾讯云免费版限制如下**
|资源类别 |子类目 |限制 |说明 |
|:-: |:-: |:-: |:-: |
|云函数 |硬件资源用量 |4万GBs/月 |腾讯云最小计费粒度为256MB*100ms，即使用内存固定为256MB，运行时间以100ms为阶梯计算 |
| |外网出流量 |1GB/月 |- |
| |云函数并发限制 |1000个/云函数 |超出此连接数的请求会直接失败。如有需求突破此限制，请发邮件到service@dcloud.io申请 |
| |云函数数目 |50个 |如何合并云函数见下一节 |
|云存储 |容量 |3GB |- |
| |下载操作次数 |150万/月 |- |
| |上传操作次数 |60万/月 |- |
| |CDN回源流量 |5GB/月 |- |
|CDN |CDN流量 |4GB/月 |- |
|云数据库 |容量 |2GB |- |
| |读操作数 |5万次/天 |- |
| |写操作数 |3万次/天 |- |
**关于数据库读写次数：**修改或读取条数为0时也计算一次读写，即只要调用接口就计算一次。
阿里云如有需求突破资源限制，请发邮件到service@dcloud.io请求协助。如果属于标杆案例，可以特批扩大免费资源。
### 如何控制云函数数量？云函数是否可以按多级目录整理@merge-functions
每个云函数是一个独立进程，不存在云函数级别的多级目录概念。
其实不需要控制数量，实际开发中不会突破限制。
每个云函数下可以有子目录，但它们都属于这个云函数的一部分，而不是另一个云函数。
因为大多数项目，会使用clientDB和单路由云函数框架。
hx内置了资源管理器，可以在右边看云函数列表，界面更宽大。
uniCloud的每个云函数是一个独立进程，不存在云函数级别的多级目录概念。
并且uniCloud有云函数总量限制，多级目录没有意义。
每个云函数下可以有子目录，但它们都属于这个云函数的一部分，而不是另一个云函数。
实际开发中可以合并很多云函数，
- 比如数据库操作用一个云函数：[https://ext.dcloud.net.cn/plugin?id=2314](https://ext.dcloud.net.cn/plugin?id=2314)
- 比如用户相关的逻辑，应该使用uni-id插件，只占用一个云函数：[https://ext.dcloud.net.cn/plugin?id=2116](https://ext.dcloud.net.cn/plugin?id=2116)
- 比如用单页路由方式的云函数：[https://ext.dcloud.net.cn/plugin?id=2204](https://ext.dcloud.net.cn/plugin?id=2204)
当然也可以在一个云函数下实现单路由云函数开发框架，插件市场有很多类似框架：[详见](https://ext.dcloud.net.cn/search?q=%E8%B7%AF%E7%94%B1&cat1=7&orderBy=TotalDownload)
### 海外用户访问比较慢怎么办
......
docs/uniCloud/http.md
浏览文件 @ d25ea6ec
......@@ -5,7 +5,7 @@
- 场景1：比如App端微信支付，需要配服务器回调地址，此时需要一个HTTP URL。
- 场景2：非uni-app开发的系统，想要连接uniCloud，读取数据，也需要通过HTTP URL方式访问。
云函数默认是只有自己的app在前端通过`uniCloud.callfuntion`来调用的，不会暴露到外网。一旦URL化后，开发者需要关注业务和资源安全。
云函数默认是只有自己的app在前端通过`uniCloud.callFunction`来调用的，不会暴露到外网。一旦URL化后，开发者需要关注业务和资源安全。
- 安全：为了保障业务安全性，开发者需在代码中做好权限控制和安全防护，避免未授权访问触发敏感操作。
- 计费：云函数开启了URL化后，如果遇到大量恶意访问，消耗云函数资源，开发者可以将云函数访问地址设置为空即可停止 HTTP 访问支持。
......
docs/uniCloud/price.md
浏览文件 @ d25ea6ec
......@@ -2,33 +2,51 @@
选择阿里云作为服务商时，服务空间资源完全免费，每个账号最多允许创建50个服务空间。
选择腾讯云作为服务商时，可以创建一个免费的服务空间，资源详情参考[腾讯云免费额度](uniCloud/price?id=price-free)；如想提升免费空间资源配额，或创建更多服务空间，则需付费购买（灰度发布中）。
选择腾讯云作为服务商时，可以创建一个免费的服务空间，资源详情参考[腾讯云免费额度](uniCloud/price?id=price-free)；如想提升免费空间资源配额，或创建更多服务空间，则需付费购买。
uniCloud提供包年包月、按量计费两种计费方式（仅腾讯云），具体说明如下：
付费用户享受腾讯云提供的SLA，[详见](https://uniapp.dcloud.net.cn/uniCloud/agreement)
uniCloud提供包月、按量计费两种计费方式（仅腾讯云），具体说明如下：
|计费方式 |付费方式 |计费单位 |
|:-: |:-: |:-: |
|包年包月 |预付费 |参考 [腾讯云包月套餐](uniCloud/price?id=price-month) |
|包月 |预付费 |参考 [腾讯云包月套餐](uniCloud/price?id=price-month) |
|按量计费 |结算时冻结费用，每日结算 |参考 [腾讯云按量计费](uniCloud/price?id=price-info)|
**注意：**腾讯云购买付费服务空间的功能正在灰度发布中，如因资源消耗过大，希望付费购买更多CDN、数据库资源，或者想提前体验付费创建多服务空间的，可以发邮件到 `service@dcloud.io` 申请开通付费功能。目前企业认证用户支持按量计费模式，个人认证用户支持包年包月的预付费模式。
## 腾讯云免费额度@price-free
|资源类别 |子类目 |免费额度 |
|:-: |:-: |:-: |
|云函数 |硬件资源用量 |4万GBs/月 |
| |外网出流量 |1GB/月 |
| |云函数并发限制 |1000个/云函数|
| |云函数数目 |50个 |
|云存储 |容量 |3GB |
| |下载操作次数 |150万/月 |
| |上传操作次数 |60万/月 |
| |CDN回源流量 |5GB/月 |
|CDN |CDN流量 |4GB/月 |
|云数据库 |容量 |2GB |
| |读操作数 |5万次/天 |
| |写操作数 |3万次/天 |
## 阿里云
阿里云的服务空间是纯免费的。但为避免资源滥用，有一些限制，见下。
|资源类目 |限制 |说明 |
|:-: |:-: |:-: |
|云函数并发限制 |1000个/服务空间 |实际普通项目很难达到这个并发数 |
|每个服务空间的云函数数量 |48个 |实际项目中由于clientDB和单路由云函数，只会用到几个云函数，达不到限制数字 |
尤其注意阿里云的cdn确实是全免费的。
如有超大型应用突破阿里云资源限制，请发邮件到service@dcloud.io请求协助，可以特批扩大资源。
## 腾讯云
### 腾讯云免费空间的额度@price-free
|资源类别 |子类目 |限制 |说明 |
|:-: |:-: |:-: |:-: |
|云函数 |硬件资源用量 |4万GBs/月 |腾讯云最小计费粒度为256MB*100ms，即使用内存固定为256MB，运行时间以100ms为阶梯计算 |
| |外网出流量 |1GB/月 |- |
| |云函数并发限制 |1000个/云函数 |超出此连接数的请求会直接失败。如有需求突破此限制，请发邮件到service@dcloud.io申请 |
| |云函数数目 |49个 |实际项目中由于clientDB和单路由云函数，只会用到几个云函数，达不到限制数字 |
|云存储 |容量 |3GB |- |
| |下载操作次数 |150万/月 |- |
| |上传操作次数 |60万/月 |- |
| |CDN回源流量 |5GB/月 |- |
|CDN |CDN流量 |4GB/月 |- |
|云数据库 |容量 |2GB |- |
| |读操作数 |5万次/天 |- |
| |写操作数 |3万次/天 |- |
**关于数据库读写次数：**修改或读取条数为0时也计算一次读写，即只要调用接口就计算一次。
关于免费额度，有如下注意事项：
......@@ -36,62 +54,76 @@ uniCloud提供包年包月、按量计费两种计费方式（仅腾讯云），
- 如果已创建了预付费的免费版服务空间，则其他预付费空间及按量计费空间，均无法再享受免费额度。
- 免费版服务空间付费升级为更高档的包月套餐时，系统会将该空间设置为到期自动降配免费空间，故此时免费额度依然被占用中，其他预付费空间及按量计费空间，亦无法再享受免费额度
- 按量计费服务空间在开通时可以选择指定是否占用免费额度（如果当前账号还有免费额度的话），如果选择占用免费额度，则不可再创建预付费的免费服务空间。
- 免费版最多允许50个云函数，可通过一些方案将相同模块云函数合并，详情参考[控制云函数数量](uniCloud/faq?id=merge-functions)
关于计费颗粒度，注意：
- 腾讯云的云函数最小计费粒度为`256MB*100ms`，即使用内存固定为`256MB`，运行时间以`100ms`为阶梯计算
- 云函数的并发限制为1000，并发超出1000的请求会直接失败，如因业务需要突破此限制，请发邮件到`service@dcloud.io`申请人工调配
## 腾讯云包月套餐@price-month
|资源分类 |资源细项 |免费版（基础版1）|基础版2 |专业版1 |专业版2 |旗舰版1 |
|:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|云存储 |容量 |5GB |10GB |50GB |100GB |500GB |
| |下载操作次数 |150万/月 |200万/月 |750万/月 |1500万/月|3750万/月|
| |上传操作次数 |60万/月 |100万/月 |300万/月 |600万/月 |1500万/月|
| |CDN 回源流量 |5GB/月 |10GB/月 |50GB/月 |150GB/月 |500GB/月 |
|CDN |CDN 流量 |5GB/月 |25GB/月 |50GB/月 |150GB/月 |500GB/月 |
|云函数 |资源使用量 GBs |4万/月 |20万/月 |40万/月 |150万/月 |400万/月 |
| |外网出流量 |1GB/月 |3GB/月 |5GB/月 |10GB/月 |25GB/月 |
| |函数数量限制 |50个 |80个 |100个 |100个 |150个 |
| |固定外网 IP |× |√ |√ |√ |√ |
|数据库 |容量 |2GB |3GB |5GB |10GB |10GB |
| |同时连接数 |20个 |50个 |100 |200个 |400个 |
| |读操作数 |5万/天 |25万/天 |50万/天 |150万/天 |500万/天 |
| |写操作数 |3万/天 |15万/天 |30万/天 |100万/天 |300万/天 |
| |集合限制 |100个 |150个 |200个 |300个 |400个 |
| |备份保留天数 |7天 |14天 |14天 |14天 |14天 |
| |指定回档时间 |× |√ |√ |√ |√ |
|售价（元/月）|- |免费 |30 |104 |390 |860 |
## 腾讯云按量计费@price-info
目前仅支持腾讯云按量计费服务空间（暂定为仅企业认证用户可以开通）。腾讯云按量计费服务空间定价如下：
|资源分类 |资源细项 |售价（元） |
|:-: |:-: |:-: |
|云存储 |容量（GB/天） |0.0043 |
| |下载操作次数（万次） |0.01 |
| |上传操作次数（万次） |0.01 |
| |CDN 回源流量（GB） |0.15 |
|CDN |CDN 流量（GB） |0.18 |
|云函数 |资源使用量（GBs） |0.00011108 |
| |外网出流量（GB） |0.8 |
| |函数数量限制150个 | |
| |支持固定外网 IP | |
|数据库 |容量（GB/天） |0.07 |
| |读操作数（万次） |0.015 |
| |写操作数（万次） |0.05 |
| |同时连接数1000个 | |
| |集合限制800个 | |
| |备份保留天数14天 | |
| |支持指定回档时间 | |
|前端网站托管 |容量（GB/天） |0.0043 |
| |流量（GB） |0.21 |
### 腾讯云付费版包月套餐@price-month
包月套餐是指每个月的支付固定价格，购买一定量的服务器资源。
如果资源超限，则相应资源不可使用。需立即升配套餐。
包月套餐支持升配、降配。以满足资源用量上升或下降的价格调整需求。具体操作见[web控制台](https://unicloud.dcloud.net.cn)的购买套餐界面。
|资源分类 |资源细项 |免费版（基础版1） |基础版2 |专业版1 |专业版2 |旗舰版1 |
|:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|云存储 |容量 |5GB |10GB |50GB |100GB |500GB |
| |下载操作次数 |150万/月 |200万/月 |750万/月 |1500万/月 |3750万/月 |
| |上传操作次数 |60万/月 |100万/月 |300万/月 |600万/月 |1500万/月 |
| |CDN 回源流量 |5GB/月 |10GB/月 |50GB/月 |150GB/月 |500GB/月 |
|CDN |CDN 流量 |5GB/月 |25GB/月 |50GB/月 |150GB/月 |500GB/月 |
|云函数 |资源使用量 GBs |4万/月 |20万/月 |40万/月 |150万/月 |400万/月 |
| |外网出流量 |1GB/月 |3GB/月 |5GB/月 |10GB/月 |25GB/月 |
| |函数数量限制 |49个 |79个 |99个 |99个 |149个 |
| |固定外网 IP |× |√ |√ |√ |√ |
|数据库 |容量 |2GB |3GB |5GB |10GB |10GB |
| |同时连接数 |20个 |50个 |100 |200个 |400个 |
| |读操作数 |5万/天 |25万/天 |50万/天 |150万/天 |500万/天 |
| |写操作数 |3万/天 |15万/天 |30万/天 |100万/天 |300万/天 |
| |集合限制 |100个 |150个 |200个 |300个 |400个 |
| |备份保留天数 |7天 |14天 |14天 |14天 |14天 |
| |指定回档时间 |× |√ |√ |√ |√ |
|售价（元/月） |- |免费 |30 |104 |390 |860 |
除了资源配量不同外，注意只有付费版才有 固定外网IP。如需在微信网页里调用js sdk，需要配置固定外网ip。
### 腾讯云付费版按量计费@price-info
按量计费，意味着不是每个月支付固定套餐，而是根据使用量付费。
按量付费需要预存一定金额，每日根据前一日资源消耗生成账单，从预存金额中扣除。
如果预存金额不足，则服务空间将不可用，需要立即充值。
按量付费目前仅企业认证用户可以开通，个人用户无法购买。
腾讯云按量计费服务空间定价如下：
|资源分类 |资源细项 |售价（元） |
|:-: |:-: |:-: |
|云存储 |容量（GB/天） |0.0043 |
| |下载操作次数（万次） |0.01 |
| |上传操作次数（万次） |0.01 |
| |CDN 回源流量（GB） |0.15 |
|CDN |CDN 流量（GB） |0.18 |
|云函数 |资源使用量（GBs） |0.00011108 |
| |外网出流量（GB） |0.8 |
| |函数数量限制150个 | |
| |支持固定外网 IP | |
|数据库 |容量（GB/天） |0.07 |
| |读操作数（万次） |0.015 |
| |写操作数（万次） |0.05 |
| |同时连接数1000个 | |
| |集合限制800个 | |
| |备份保留天数14天 | |
| |支持指定回档时间 | |
|前端网站托管 |容量（GB/天） |0.0043 |
| |流量（GB） |0.21 |
**注意**
- 如果之前没有开通免费版腾讯云服务空间，则新开通的一个按量付费服务空间可以选择是否占用免费资源。如果选择了占用免费资源将无法创建预付费免费版。
- 按量计费服务空间开通时会自动开通前端网页托管，如果按量付费服务空间拥有免费额度，会默认赠送一个月前端网站托管（容量1GB、流量5GB），一个月之后会正常按量收费。
- 按量计费服务空间删除有次数限制，每个月最多删除一次，每个账号一共可以删除4次，删除之前需要关闭前端网页托管服务并删除所有云端资源（包括云函数、数据库、云存储）
- 按量计费是延迟结算，可能存在余额超支的情况，故创建按量付费服务空间时，需支付一定的保证金，用以抵消超支结算的情况。如果您不再申请使用uniCloud服务，可以申请退还保证金。
\ No newline at end of file
- 按量计费是延迟结算，可能存在余额超支的情况，故创建按量付费服务空间时，需支付一定的保证金，用以抵消超支结算的情况。如果您不再申请使用uniCloud服务，可以申请退还保证金。
- 目前使用腾讯云包月套餐会默认自动续费，如果包月套餐到期时uniCloud腾讯云账户余额够用则自动从余额中扣除一个月的费用，近期会提供关闭选项
docs/uniCloud/quickstart.md
浏览文件 @ d25ea6ec
......@@ -141,9 +141,9 @@ const hour = getOffsetDate(8).getHours()
服务空间所使用的nodejs版本为8.9，本地运行时使用的本地nodejs可能与服务空间的nodejs版本并不一致，在本地测试之后部署到云端也务必测试一下兼容性。
**协作者**
**日志打印**
目前只开放了协作者本地使用腾讯云服务空间，协作者使用阿里云服务空间后续会开放。
目前本地运行云函数只能打印字符串类型的值，其他类型请注意转换为字符串
## 运行云函数时配置运行测试参数@runparam
......@@ -245,6 +245,7 @@ uniCloud的[web控制台](https://unicloud.dcloud.net.cn/)可以查看线上云
|阿里云 |api.bspapp.com |bsppub.oss-cn-shanghai.aliyuncs.com|需要从云存储下载文件的时候才需要配置，不同服务空间域名不同，可以在web控制台查看文件详情里面看到|
|腾讯云 |tcb-api.tencentcloudapi.com|cos.ap-shanghai.myqcloud.com |需要从云存储下载文件的时候才需要配置，不同服务空间域名不同，可以在web控制台查看文件详情里面看到|
**如果需要用uni.request请求云存储内的文件，需要将云存储域名（即上表中的download合法域名）配置到request合法域名内**
小程序开发工具的真机预览功能，必须添加上述域名白名单，否则无法调用云函数。模拟器的PC端预览、真机调试不受此影响。
......
docs/uniCloud/release.md
浏览文件 @ d25ea6ec
# uniCloud 更新日志
======================================
#### 2020-10-13
+ 腾讯云 全面开放企业用户按量计费服务空间的购买 [详情](https://uniapp.dcloud.net.cn/uniCloud/price?id=price-info)
#### 2020-09-29
+ 腾讯云 开放包年包月套餐购买 [详情](https://uniapp.dcloud.net.cn/uniCloud/price?id=price-month)
#### 2020-09-16
+ 腾讯云 支持云函数固定出口IP，支持微信公众号开发 [详情](https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=eip)
......
docs/uniCloud/resource.md
浏览文件 @ d25ea6ec
......@@ -10,6 +10,14 @@
更多项目源码，见**插件市场**：[https://ext.dcloud.net.cn/?cat1=7](https://ext.dcloud.net.cn/?cat1=7)
### 商用案例
- 中国教育发布：中国教育部官方App。[详见报道](http://www.moe.gov.cn/jyb_xwfb/gzdt_gzdt/s5987/202009/t20200904_485105.html)
<div style="display:flex;justify-content: space-around;">
<a href="javascript:;" target="_blank" class="clear-style barcode-view">
<img src="http://www.moe.gov.cn/jyb_xwfb/gzdt_gzdt/s5987/202009/W020200904300248750807.jpg" width="200"/>
<span style="margin-top:15px;">iOS、Android通用扫码地址</span>
</a>
</div>
- 登登多邻国：是登登教育公司为外语学习者提供的题库软件。其服务端整体基于uniCloud，前端包括PC和H5网站、微信小程序，均连接uniCloud。日请求量**百万级**。
web体验地址：[https://duolingo.91ddedu.com](https://duolingo.91ddedu.com)；
......@@ -27,3 +35,4 @@ web体验地址：[https://duolingo.91ddedu.com](https://duolingo.91ddedu.com)
- OYAN听书：外文书籍音频FM小程序。微信小程序搜索“OYAN听书”
- 优悦学课堂：高效学习考证。支持iOS、Android App及小程序多端连接uniCloud，[详见](https://school.youyuexue.com/#/downLoad)
- 柠檬趣味测：心理性格测试。微信小程序搜索“柠檬趣味测”、QQ小程序搜索“柠檬测试”
- 小森林集：壁纸、皮肤小程序。微信小程序搜索“小森林集”
docs/uniCloud/schema.md
浏览文件 @ d25ea6ec
此差异已折叠。
docs/uniCloud/storage.md
浏览文件 @ d25ea6ec
......@@ -31,7 +31,7 @@
**各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。[参考](https://uniapp.dcloud.io/uniCloud/quickstart?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e4%b8%ad%e4%bd%bf%e7%94%a8unicloud%e7%9a%84%e7%99%bd%e5%90%8d%e5%8d%95%e9%85%8d%e7%bd%ae)**
阿里云uploadFile API方式只允许上传以下文件类型（后续可能会调整），如果要上传其他类型可以通过web控制台上传（HBuilderX 2.8.10-alpha及以后版本已去除此限制）。腾讯云没有文件类型限制。
阿里云uploadFile API方式只允许上传以下文件类型，如果要上传其他类型可以通过web控制台上传（**HBuilderX 2.8.10-alpha及以后版本已去除此限制**）。腾讯云没有文件类型限制。
```js
{
......@@ -63,6 +63,21 @@
- 使用阿里云时，`cloudPath`为云端文件名，请勿使用非法字符
- 腾讯云`cloudPath` 为文件的绝对路径，包含文件名 foo/bar.jpg、foo/bar/baz.jpg 等，不能包含除[0-9 , a-z , A-Z]、/、!、-、\_、.、、\*和中文以外的字符，使用 / 字符来实现类似传统文件系统的层级结构。
- 腾讯云`cloudPath`为文件标识，相同的`cloudPath`会覆盖，如果没有权限覆盖则会上传失败。阿里云以自动生成的ID为文件标识，不会存在覆盖问题
- 阿里云目前由于安全原因暂时禁止云存储内上传html文件
**关于腾讯云是否有权限覆盖/删除云端文件**
腾讯云使用[自定义登录](uniCloud/authentication.md)的方式确定用户身份。以下以默认权限”所有用户可读，仅创建者及管理员可写“为例进行讲解
默认情况下用户以匿名身份登录（为了方便暂时称此身份为“匿名用户A”）
- 云端路径不存在则可以成功上传。
- 云端路径存在并且是匿名用户A创建的可以成功上传
- 云端路径存在并且并非匿名用户A创建的会上传失败
匿名用户A身份过期之后再次获取的身份并不是”匿名用户A“（暂记为”匿名用户B“），这时匿名用户B是没有权限覆盖匿名用户A上传的文件的。
如果使用了[自定义登录](uniCloud/authentication.md)，那么云存储就可以确定用户身份，这时候用户可以覆盖自己上传的文件，删除同理。
#### 响应参数
......@@ -152,11 +167,6 @@ uni.chooseImage({
|字段 |类型 |必填 |说明 |
|:-: |:-: |:-: |:-: |
|fileID |String |是 |文件 ID |
<!-- |maxAge |Number |是 |文件链接有效期，单位：秒 | -->
<!-- **注意**
- `maxAge`在配置所有人可读权限时不生效 -->
#### 响应参数
......
docs/uniCloud/uni-clientDB.md
浏览文件 @ d25ea6ec
## 简介
**重要：** clientDB重大升级，在HBuilderX 2.9.5+中已经内置，不再需要单独下载插件。并且新版增加大量功能。本文已过期，推荐使用clientDB的开发者升级到HBuilderX 2.9.5+，并阅读新文档：[https://uniapp.dcloud.net.cn/uniCloud/database](https://uniapp.dcloud.net.cn/uniCloud/database)
**重要：uni-clientDB 2.0.0版本不兼容旧版，如果你依然需要使用旧版本请在此链接下载 [uni-clientDB 1.0.8](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/839b6a50-fe54-11ea-81ea-f115fe74321c.zip)**
## 旧版clientDB简介
uni-clientDB 2.0.0版本不兼容旧版，如果你依然需要使用旧版本请在此链接下载 [uni-clientDB 1.0.8](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/839b6a50-fe54-11ea-81ea-f115fe74321c.zip)
clientDB框架的目标：减少服务端代码开发。
......@@ -99,7 +101,7 @@ clientDB的前端js-sdk主要负责提供API，允许前端编写数据库操作
**示例代码**
这段示例代码，在一个前端页面，直接查询了云数据库的list表，并且指定了name和time的where条件，then的res即为返回的查询结果。
这段示例代码，在一个前端页面，直接查询了云数据库的`list`表，并且指定了`name`和`time`的`where`查询条件，then的res即为返回的查询结果。
```js
// 引入公共模块
......@@ -107,16 +109,12 @@ import db from '@/js_sdk/uni-clientDB/index.js'
const dbCmd = db.command
// 使用uni-clientDB
db.action('get-info') // 不使用action时可以不调用action方法
.collection('list')
db.collection('list')
.where({
name: new RegExp('龚','g'),
time: dbCmd.gt(1105885393581)
}).field({
extra: false
name: "hello-uni-app"
}).get()
.then((res)=>{
// res 为数据库查询结果
}).catch((err)=>{
})
......@@ -126,7 +124,7 @@ db.action('get-info') // 不使用action时可以不调用action方法
语法与云函数写查询数据库一致，目前有以下限制：
- 不可使用db.serverDate、db.Geo、db.RegExp
- uni-clientDB 2.0.3以下版本，不可使用db.serverDate、db.Geo、db.RegExp，建议升级新版本
- 上传时会对query进行序列化，除Date类型、RegExp之外的所有不可序列化的参数类型均不支持（例如：undefined）
- 为方便控制禁止前端使用set方法，一般情况下也不需要前端使用set
- 更新数据库时不可使用更新操作符`db.command.inc`等
......@@ -144,6 +142,75 @@ clientDB目前内置了3个变量可以供客户端使用，客户端并非直
使用这些变量，将可以避免过去在服务端代码中写代码获取用户uid、时间和客户端ip的麻烦。
### 查询条件扩展@jsquery
自uni-clientDB 2.0.5版本起，支持使用类js语法进行查询条件的编写。具体看以下示例
```js
import db from '@/js_sdk/uni-clientDB/index.js'
const dbCmd = db.command
// 上面的示例中的where条件可以使用以下写法
db.collection('list')
.where('name == "hello-uni-app"')
.get()
.then((res)=>{
// res 为数据库查询结果
}).catch((err)=>{
})
```
**条件内可以使用的变量**
|变量名 |说明 |
|:-: |:-: |
|auth.uid |用户id |
|auth.role |用户角色数组，参考[uni-id 角色权限](/uniCloud/uni-id?id=rbac)，注意`admin`为clientDB内置的角色，如果用户角色列表里包含`admin`则认为此用户有完全数据访问权限|
|auth.permission|用户权限数组，参考[uni-id 角色权限](/uniCloud/uni-id?id=rbac) |
|now |当前时间戳（单位：毫秒），时间戳可以进行额外运算，如publish\_date > now - 60000表示publish\_date在最近一分钟 |
**条件语句内可以使用的运算符**
|运算符 |说明 |示例 |示例解释(集合查询) |
|:-: |:-: |:-: |:-: |
|== |等于 |name == 'abc' |查询name属性为abc的记录，左侧为数据库字段 |
|!= |不等于 |name != 'abc' |查询name属性不为abc的记录，左侧为数据库字段 |
|> |大于 |age>10 |查询条件的 age 属性大于 10，左侧为数据库字段 |
|>= |大于等于 |age>=10 |查询条件的 age 属性大于等于 10，左侧为数据库字段 |
|< |小于 |age<10 |查询条件的 age 属性小于 10，左侧为数据库字段 |
|<= |小于等于 |age<=10 |查询条件的 age 属性小于等于 10，左侧为数据库字段 |
|in |存在在数组中 |status in ['a','b'] |查询条件的 status 是['a','b']中的一个，左侧为数据库字段 |
|! |非 |!(status in ['a','b']) |查询条件的 status 不是['a','b']中的任何一个 |
|&& |与 |uid == auth.uid && age > 10 |查询记录uid属性 为 当前用户uid 并且查询条件的 age 属性大于 10|
|&#124;&#124; |或 |uid == auth.uid&#124;&#124;age>10|查询记录uid属性 为 当前用户uid 或者查询条件的 age 属性大于 10|
|test |正则校验 |/abc/.test(content) |查询 content 内包含abc的记录 。可用于替代sql中的like。还可以写更多正则实现更复杂的功能 |
### 刷新token
透传uni-id自动刷新的token给客户端
**用法**
```js
// 引入公共模块
import db from '@/js_sdk/uni-clientDB/index.js'
function refreshToken({
token,
tokenExpired
}) {
uni.setStorageSync('uni_id_token', token)
uni.setStorageSync('uni_id_token_expired', tokenExpired)
}
// 绑定刷新token事件
db.auth.on('refreshToken', refreshToken)
// 解绑刷新token事件
db.auth.off('refreshToken', refreshToken)
```
## 云端部分
clientDB的云端部分较多，包含一个公共模块uni-curd，还有一个很大的云函数uni-clientDB。
......@@ -154,7 +221,7 @@ clientDB的云端部分较多，包含一个公共模块uni-curd，还有一个
1. db-permission目录用于存放权限规则。db-permission下每个文件对应一个表的权限，文件名为对应的表名。所谓数据权限，即什么样的用户身份，可以访问、操作哪些表、哪些字段。
2. validator目录用于存放字段数据校验规则。和db-permission一样，validator目录下每个文件的文件名对应一个表名。
3. action目录下存放各种action，action的作用是额外触发一段云函数逻辑。支持在操作数据库前触发action.before，也称为预处理，支持在操作数据库后触发action.afer，也称为后处理。action下每个目录对应一个action操作，前端页面在执行数据库操作时，可使用.action方法传入action参数，这样就会执行action目录下的云函数。还可以在权限规则内指定某些操作必须使用指定的action，比如`"action in ['action-a','action-b']"`，来达到更灵活的权限控制。
3. action目录下存放各种action，action的作用是额外触发一段云函数逻辑。支持在操作数据库前触发action.before，也称为预处理，支持在操作数据库后触发action.after，也称为后处理。action下每个目录对应一个action操作，前端页面在执行数据库操作时，可使用.action方法传入action参数，这样就会执行action目录下的云函数。还可以在权限规则内指定某些操作必须使用指定的action，比如`"action in ['action-a','action-b']"`，来达到更灵活的权限控制。
**注意**
......@@ -205,7 +272,7 @@ db-permission目录内存放数据表权限的配置文件，以表名作为文
2. 然后从云端配置，也即db-permission目录下的配置，读取数据表、字段、增删改查动作的权限配置
3. 最后根据用户身份和权限配置进行比对，以决定是否有权进行前端发起的这次数据库操作
db-permission规则，可以对整个表的增删改查进行控制，也可以针对字段进行控制；可以简单的配置true/false，也可以配置
db-permission规则，可以对整个表的增删改查进行控制，也可以针对字段进行控制；可以简单的配置true/false，也可以配置更具体的规则
比如db-permission内规定doc.a > 1,那么查询条件里面就必须有a且条件内的a也满足a>1，`{a:2}`、`{a:db.command.gt(3)}`都是满足条件的查询。
......@@ -303,18 +370,18 @@ db-permission为对数据的操作权限，如果要封装业务权限，可以
**权限规则内可以使用的运算符**
|运算符 |说明 |示例 |示例解释(集合查询) |
|:-: |:-: |:-: |:-: |
|== |等于 |auth.uid == 'abc' |用户id为abc |
|!= |不等于 |auth.uid != 'abc' |用户id不为abc |
|> |大于 |doc.age>10 |查询条件的 age 属性大于 10 |
|>= |大于等于 |doc.age>=10 |查询条件的 age 属性大于等于 10 |
|< |小于 |doc.age<10 |查询条件的 age 属性小于 10 |
|<= |小于等于 |doc.age<=10 |查询条件的 age 属性小于等于 10 |
|in |存在在数组中 |doc.status in ['a','b'] |查询条件的 status 是['a','b']中的一个，数组中所有元素类型需一致 |
|nin |不存在在数组中 |doc.status nin ['a','b'] |查询条件的 status 不是['a','b']中的任何一个，数组中所有元素类型需一致 |
|&& |与 |auth.uid == 'abc' && doc.age>10 |用户id 为 abc 并且查询条件的 age 属性大于 10|
|&#124;&#124;|或 |auth.uid == 'abc'&#124;&#124;doc.age>10 |用户Id为abc或者查询条件的 age 属性大于 10|
|运算符 |说明 |示例 |示例解释(集合查询) |
|:-: |:-: |:-: |:-: |
|== |等于 |auth.uid == 'abc' |用户id为abc |
|!= |不等于 |auth.uid != 'abc' |用户id不为abc |
|> |大于 |doc.age>10 |查询条件的 age 属性大于 10 |
|>= |大于等于 |doc.age>=10 |查询条件的 age 属性大于等于 10 |
|< |小于 |doc.age<10 |查询条件的 age 属性小于 10 |
|<= |小于等于 |doc.age<=10 |查询条件的 age 属性小于等于 10 |
|in |存在在数组中 |doc.status in ['a','b'] |查询条件的 status 是['a','b']中的一个，数组中所有元素类型需一致 |
|! |非 `2.0.5+` |!(doc.status in ['a','b']) |查询条件的 status 不是['a','b']中的任何一个，数组中所有元素类型需一致|
|&& |与 |auth.uid == 'abc' && doc.age>10 |用户id 为 abc 并且查询条件的 age 属性大于 10 |
|&#124;&#124; |或 |auth.uid == 'abc'&#124;&#124;doc.age>10|用户Id为abc或者查询条件的 age 属性大于 10 |
**权限规则内可以使用的方法**
......@@ -346,7 +413,6 @@ db.collection('street').where(dbCmd.or([
])).get()
```
db-permission的配置文件是js，虽然主要配置方式为json，但可以编程，实现批处理等操作。
### validator
......@@ -509,34 +575,6 @@ module.exports = {
}
```
<!-- ## 参考
在线通讯录项目，完整的演示了如何基于clientDB在客户端代码里实现数据的增删改查，是学习clientDB的重要示例项目。该项目插件地址：[https://ext.dcloud.net.cn/plugin?id=2574](https://ext.dcloud.net.cn/plugin?id=2574) -->
// getMethod({name:'where',index: 0}) 获取第1个where方法的参数，结果为数组形式，例：[{a:1}]
getParam,
// setParam({name:'where',index: 0, param: [{a:1}]}) 设置第1个where方法的参数，调用之后where方法实际形式为：where({a:1})
setParam
},
// 需要注意的是clientDB可能尚未获取用户信息，如果权限规则内没使用auth对象且数据库指令里面没使用db.env.uid则clientDB不会自动取获取用户信息
auth: {
uid, // 用户ID，如果未获取或者获取失败uid值为null
role, // 通过uni-id获取的用户角色，需要使用1.1.9以上版本的uni-id，如果未获取或者获取失败role值为[]
permission, // 通过uni-id获取的用户权限，需要使用1.1.9以上版本的uni-id，如果未获取或者获取失败permission值为[]，注意登录时传入needPermission才可以获取permission，请参考 https://uniapp.dcloud.net.cn/uniCloud/uni-id?id=rbac
checked // 是否已经获取了用户信息
},
// 事务对象，如果需要用到事务可以在action的before内使用state.transaction = await db.startTransaction()传入
transaction,
// 更新或新增的数据
newData,
// 访问的集合
collection,
// 操作类型，可能的值'read'、'create'、'update'、'delete'
type
}
```
### validator
validator主要是用于数据校验以及在新增数据时指定默认值，validator下的文件可以由web控制台数据库表结构生成。
......
docs/uniCloud/uni-clientdb-component.md 0 → 100644
浏览文件 @ d25ea6ec
此差异已折叠。
docs/uniCloud/uni-cloud-router.md 0 → 100644
浏览文件 @ d25ea6ec
# uni-cloud-router
> 基于 koa 风格的 uniCloud 云函数路由库，同时支持 uniCloud 客户端及 URL 化访问
---
- [云函数端](#云函数端)
- [安装](#安装)
- [目录结构](#目录结构)
- [控制器（Controller）](#控制器controller)
- [如何编写 Controller](#如何编写-controller)
- [获取请求参数](#获取请求参数)
- [调用 Service](#调用-service)
- [定制 URL 化返回的状态码](#定制-url-化返回的状态码)
- [服务（Service）](#服务service)
- [使用场景](#使用场景)
- [如何编写 Service](#如何编写-service)
- [使用 Service](#使用-service)
- [中间件（Middleware）](#中间件middleware)
- [开发中间件](#开发中间件)
- [使用中间件](#使用中间件)
- [Context](#context)
- [获取方式](#获取方式)
- [客户端](#客户端)
- [发送请求](#发送请求)
- [返回结果](#返回结果)
## 云函数端
### 安装
```bash
npm install --save uni-cloud-router
```
### 目录结构
```bash
├── package.json
├── index.js // 云函数入口文件
├── config.js // 用于配置 router 应用根目录、中间件等
├── controller // 用于解析用户的输入，处理后返回相应的结果
| ├── user.js
├── service (可选) //用于编写业务逻辑层，建议使用
| ├── user.js
```
```js
// index.js (通常无需改动)
const Router = require('uni-cloud-router').Router // 引入 Router
const router = new Router(require('./config.js')) // 根据 config 初始化 Router
exports.main = async (event, context) => {
return router.serve(event, context) // 由 Router 接管云函数
}
```
```js
// config.js
module.exports = {
debug: true, // 调试模式时，将返回 stack 错误堆栈
baseDir: __dirname, // 必选，应用根目录
middleware: [], // 自定义中间件
}
```
```js
// controller/user.js
const uniID = require('uni-id')
const Controller = require('uni-cloud-router').Controller
// 必须继承 Controller
module.exports = class UserController extends Controller {
async login() {
const { username, password } = this.ctx.data // 获取请求参数
// 使用 uni-id 登录
return uniID.login({
username,
password,
})
}
}
```
### 控制器（Controller）
负责解析用户的输入，处理后返回相应的结果。
推荐 Controller 层主要对用户的请求参数进行处理（校验、转换），然后调用对应的 service 方法处理业务，得到业务结果后封装并返回：
1. 获取用户传递过来的请求参数。
2. 校验、组装参数。
3. 调用 Service 进行业务处理，必要时处理转换 Service 的返回结果，让它适应用户的需求。
4. 将结果响应给用户。
#### 如何编写 Controller
所有的 Controller 文件都必须放在 `controller` 目录下，可以支持多级目录，访问的时候可以通过目录名级联访问。
```js
// controller/post.js
const Controller = require('uni-cloud-router').Controller
// 必须继承 Controller 类
module.exports = class PostController extends Controller {
async create() {
const { ctx, service } = this
// 校验参数
ctx.validate({
title: { type: 'string' },
content: { type: 'string' },
})
// 组装参数
const author = ctx.auth.uid
const post = Object.assign(ctx.data, { author })
// 调用 Service 进行业务处理
return service.post.create(post)
}
}
```
定义的 Controller 类，会在每一个请求访问时实例化一个全新的对象，会有下面几个属性挂在 `this` 上。
- `this.ctx`：当前请求的上下文对象的实例，通过它我们可以拿到各种便捷属性和方法。
- `this.service`：应用定义的 service，通过它我们可以访问到抽象出的业务层，等同于 `this.ctx.service`。
- `this.db`：等同于 `uniCloud.database()`。
- `this.curl`：等同于 `uniCloud.httpclient.request`。
- `this.throw`：抛出异常信息，等同于 `this.ctx.throw`。
#### 获取请求参数
通过在 Controller 上绑定的 Context 实例的 data 属性，获取请求发送过来的参数
```js
class PostController extends Controller {
async listPosts() {
const data = this.ctx.data
// {
// username: 'demo',
// password: 'demo',
// }
}
}
```
#### 调用 Service
通过 Service 层进行业务逻辑的封装，不仅能提高代码的复用性，同时可以让业务逻辑更好测试。
Controller 中可以调用任何一个 Service 上的任何方法，同时 Service 是懒加载的，只有当访问到它的时候才会去实例化它。
```js
class PostController extends Controller {
async create() {
const { ctx, service } = this
const author = ctx.auth.uid
const post = Object.assign(ctx.data, { author })
// 调用 service 进行业务处理
return service.post.create(post)
}
}
```
Service 的具体写法，请查看 [Service](#服务service) 章节。
#### 定制 URL 化返回的状态码
```js
class PostController extends Controller {
async create() {
// 设置状态码为 201
this.ctx.status = 201 // 仅当使用 HTTP/HTTPS 请求时生效
}
}
```
### 服务（Service）
业务逻辑封装的一个抽象层，有以下几个好处：
- 保持 Controller 中的逻辑更加简洁。
- 保持业务逻辑的独立性，抽象出来的 Service 可以被多个 Controller 重复调用。
- 将逻辑和展现分离，更容易编写测试用例。
#### 使用场景
- 复杂数据的处理，比如要展现的信息需要从数据库获取，还要经过一定的规则计算，才能返回用户显示。或者计算完成后，更新到数据库。
- 第三方服务的调用，比如 微信模板消息推送 等。
#### 如何编写 Service
所有的 Service 文件都必须放在 `service` 目录下，可以支持多级目录，访问的时候可以通过目录名级联访问。
```js
// service/post.js
const Service = require('uni-cloud-router').Service
// 必须继承 Service
module.exports = class PostService extends Service {
async create(data) {
return this.db.add(data)
}
}
```
定义的 Service 类是懒加载的，只有当访问到它的时候才会去实例化它，会有下面几个属性挂在 `this` 上。
- `this.ctx`：当前请求的上下文对象的实例，通过它我们可以拿到各种便捷属性和方法。
- `this.service`：应用定义的 service，通过它我们可以访问到抽象出的业务层，等同于 `this.ctx.service`。
- `this.db`：等同于 `uniCloud.database()`。
- `this.curl`：等同于 `uniCloud.httpclient.request`。
- `this.throw`：抛出异常信息，等同于 `this.ctx.throw`。
#### 使用 Service
[在 Controller 中调用 Service](#调用-service)
### 中间件（Middleware）
在路由请求前，后添加处理逻辑，实现一些特定功能，如：用户登录，权限校验等
#### 开发中间件
与 koa 保持一致，参考：[koa 中间件](https://demopark.github.io/koa-docs-Zh-CN/guide.html)
```js
// middleware/auth.js
const uniID = require('uni-id')
module.exports = (options) => {
// 初始化 uniID 配置
uniID.init(options)
// 返回中间件函数
return async function auth(ctx, next) {
// 校验 token
const auth = uniID.checkToken(ctx.event.uniIdToken)
if (auth.code) {
// 校验失败，抛出错误信息
throw { code: auth.code, message: auth.message }
}
ctx.auth = auth // 设置当前请求的 auth 对象
await next() // 执行后续中间件
}
}
```
示例：
- [uni-id 校验 token 中间件](https://github.com/dcloudio/uni-template-admin/blob/master/cloudfunctions-aliyun/uni-admin/middleware/auth.js)
- [uni-id 校验 permission 中间件](https://github.com/dcloudio/uni-template-admin/blob/master/cloudfunctions-aliyun/uni-admin/middleware/permission.js)
- [云函数 URL 化中间件](https://github.com/fxy060608/uni-cloud-router/blob/master/src/middleware/http.ts)
#### 使用中间件
1. 通过 config.js 配置
```js
const auth = require('./middleware/auth.js') // 引入 auth 中间件
module.exports = {
debug: true, // 调试模式时，将返回 stack 错误堆栈
baseDir: __dirname, // 指定应用根目录
middleware: [
[
//数组格式，第一个元素为中间件，第二个元素为中间件生效规则配置
auth({ tokenSecret: 'tokenSecret-demo' }), // 注册中间件
{ enable: true, ignore: /\/login$/ }, // 配置当前中间件生效规则，该规则表示以`/login`结尾的路由不会执行 auth 中间件校验 token
],
],
}
```
2. 中间件配置项
- enable 控制中间件是否开启。
- match 设置
\ No newline at end of file
docs/uniCloud/uni-id.md
浏览文件 @ d25ea6ec
此差异已折叠。
docs/use-weex.md
浏览文件 @ d25ea6ec
......@@ -379,8 +379,10 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够
<script>
const Binding = uni.requireNativePlugin('bindingx');
module.exports = {
data: {
isExpanded: false
data() {
return {
isExpanded: false
}
},
methods: {
getEl: function(el) {
......
docs/use.md
浏览文件 @ d25ea6ec
......@@ -260,6 +260,7 @@ export default {
* 为兼容各端，事件需使用 ``v-on`` 或 ``@`` 的方式绑定，请勿使用小程序端的``bind`` 和 ``catch`` 进行事件绑定。
* 事件修饰符
* ``.stop``：各平台均支持， 使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为
* ``.native``：监听原生事件，仅在 H5 平台支持
* ``.prevent`` 仅在 H5 平台支持
* ``.self``：仅在 H5 平台支持
* ``.once``：仅在 H5 平台支持
......
lerna.json
浏览文件 @ d25ea6ec
此差异已折叠。
lib/apis.js
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-app-plus/dist/view.css
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-app-plus/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-automator/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-h5-ui/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-h5/dist/index.css
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-h5/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-migration/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-mp-alipay/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-mp-baidu/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-mp-qq/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-mp-vue/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-mp-weixin/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
packages/uni-stat/package.json
浏览文件 @ d25ea6ec
此差异已折叠。
src/core/helpers/api.js
浏览文件 @ d25ea6ec
此差异已折叠。
src/core/service/api/device/accelerometer.js 已删除 100644 → 0
浏览文件 @ 1df0788c
此差异已折叠。
src/core/service/api/device/compass.js 已删除 100644 → 0
浏览文件 @ 1df0788c
此差异已折叠。
src/core/service/api/ui/window.js
浏览文件 @ d25ea6ec
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或