未验证 提交 aefafd30 编写于 作者: hbcui1984's avatar hbcui1984 提交者: GitHub

Merge branch 'master' into patch-1

......@@ -77,5 +77,6 @@
## 更多资料
- 评测:[跨端开发框架深度横评之2020版](https://juejin.im/post/5e8e8d5a6fb9a03c6d3d9f42)
- 评测:[深入测试一周,主流多端框架大比武](https://mp.weixin.qq.com/s/jIDEHfuMnED6HTfNgjsW4w)
- [uni-app在App端和flutter、react native的比较](https://ask.dcloud.net.cn/article/36083)
```uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉等多个平台。
```uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
`DCloud`公司拥有420万开发者,几十万应用案例、6.5亿手机端月活用户,数千款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`公司拥有470万开发者,几十万应用案例、8.4亿手机端月活用户,数千款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开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
......@@ -74,7 +74,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统计月活6.5亿、70+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">几十万应用、uni统计月活8.4亿、70+微信/qq群、更高的百度指数</p>
<p class="uniapp-home-content-item-text">跨端完善度更高,真正落地的提高生产力</p>
</div>
</div>
......
......@@ -99,8 +99,8 @@ uni.getLocation({
|:-|:-|
|name|位置名称|
|address|详细地址|
|latitude|纬度,浮点数,范围为-90~90,负数表示南纬|
|longitude|经度,浮点数,范围为-180~180,负数表示西经|
|latitude|纬度,浮点数,范围为-90~90,负数表示南纬,使用 gcj02 国测局坐标系。|
|longitude|经度,浮点数,范围为-180~180,负数表示西经,使用 gcj02 国测局坐标系。|
**示例**
......
......@@ -251,4 +251,4 @@ pages.json 中配置的是窗口显示的动画
**注意**
- 纯nvue项目(render为native),窗体动画默认进入动画为popin,返回为pop-out。如果想修改动画类型,只能通过uni.navigateTo API修改,在组件或pages.json里配置动画类型无效
- 非纯nvue项目,App端窗体动画,默认进入动画为slider-in-right,默认返回动画为pop-out
- webview 中嵌入 uni-app H5时,使用 uni.webView.navigateTo... 跳转页面
......@@ -43,7 +43,10 @@ uni.showToast({
**Tips**
App端可通过[plus.nativeUI.toast API](https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast)实现更多功能。
- 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()
......@@ -93,13 +96,12 @@ setTimeout(function () {
uni.hideLoading();
}, 2000);
```
**注意**
- `showToast``showLoading` 是底层同一个(按的小程序的设计),所以 `showToast``showLoading` 会相互覆盖,而 `hideLoading` 也会关闭 `showToast`
- 冲突解决方案:
+ App:使用 `plus` 接口或者 `uni.showToast` 配置 `position` 参数
+ 非App:其中一个使用自定义组件实现。
**注意**
- `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)
......
......@@ -6,3 +6,4 @@
- 字节跳动小程序:[规范详情](https://developer.toutiao.com/docs/game/worker/tt.createWorker.html)
- QQ小程序:[规范详情](https://q.qq.com/wiki/develop/miniprogram/API/worker/worker.html)
- H5:标准H5的worker仍然可以使用
- App:App的js是在独立的jscore运行的,如果需要在另一个线程运行js,可以使用web-view组件或renderjs,这样的js运行在webview里,和jscore里的js是两个线程。但注意多个webview之间的js是一个进程,使用webview里的js时注意会影响视图层的渲染。
......@@ -54,7 +54,7 @@ export default {
},
onLoad() {
// #ifdef APP-PLUS
const currentWebview = this.$mp.page.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里,直接使用plus.webview.currentWebview()无效
const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); //动态重设bounce效果
// #endif
}
......
......@@ -50,7 +50,8 @@
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"pageOrientation": "portrait"//横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape
"renderingMode": "seperated", // 仅微信小程序,webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait"//横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape
},
"tabBar": {
"color": "#7A7E83",
......@@ -120,6 +121,7 @@
|mp-toutiao|Object||设置编译到 mp-toutiao 平台的特定样式|字节跳动小程序|
|mp-qq|Object||设置编译到 mp-qq 平台的特定样式|QQ小程序|
|usingComponents|Object| |引用小程序组件,参考 [小程序组件](/frame?id=小程序组件支持)||
|renderingMode|String| |同层渲染,webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层|微信小程序|
**注意**
......@@ -310,8 +312,8 @@
#### SplitLineStyles@app-titleNView-splitLineStyles
|属性|类型|默认值|描述|版本兼容性|
|:-|:-|:-|:-|:-|
|coloe|String|#CCCCCC|底部分割线颜色,可取值: "#RRGGBB"格式字符串,如"#FF0000"表示绘制红色分割线; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明||
|height|String|"1px"|可取值:像素值(逻辑像素),支持小数点,如"1px"表示1像素高;百分比,如"1%",相对于标题栏控件的高度。||
|color|String|#CCCCCC|底部分割线颜色,可取值: "#RRGGBB"格式字符串,如"#FF0000"表示绘制红色分割线; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明| |
|height|String|"1px"|可取值:像素值(逻辑像素),支持小数点,如"1px"表示1像素高;百分比,如"1%",相对于标题栏控件的高度。| |
**Tips**
......@@ -825,10 +827,9 @@ midButton没有pagePath,需监听点击事件,自行处理点击后的行为
- 代码跳转到tabbar页面,api只能使用[uni.switchTab](https://uniapp.dcloud.io/api/router?id=switchtab),不能使用uni.navigateTo、uni.redirectTo;使用navigator组件跳转时必须设置[open-type="switchTab"](https://uniapp.dcloud.io/component/navigator)
- tabbar 在H5端是div模拟的,属于前端屏幕窗口的一部分,如果要使用bottom居底定位方式,应该使用css变量`--window-bottom`,比如悬浮在tabbar上方10px的按钮,样式如下`bottom: calc(var(--window-bottom) + 10px)`
- 中间带+号的tabbar模板例子,[参考](https://ext.dcloud.net.cn/plugin?id=98)。可跨端,但+号不凸起。如需中间凸起,配置tabbar的midButton。
- App端若使用nvue,自定义tabbar,没有性能体验问题。
- 纯nvue项目(manifest里renderer为native),目前使用pages.json里的tabbar反而影响性能,建议使用前端自己实现单页面的tabbar。后续会解决这个bug。
- Android App上弹出键盘顶起tabbar的问题。升级到HBuilderX 2.2后不再存在。
- 原生的tabbar有且只有一个且在首页。二级页如需的tab,前端自行实现。
- 若App端自定义tabbar,建议使用nvue并做成单页方式,即所有tabbar的页面内容其实写在一个nvue页面里,这样的性能体验更好。
- 微信通过webview自定义tabbar,在uni-app也支持,但仅支持微信。因该功能体验不佳,app上没有实现这个方式,而是推荐使用app提供的自定义tabbar方式,不管是原生tabbar额外的自定义配置还是nvue的单页自定义tabbar。
- 如果是需要先登录、后进入tab页面,不需要把登陆页设为首页,首页仍然是tabbar页,可参考HBuilderX新建uni-app项目时的登陆模板
- 前端弹出遮罩层挡不住tabbar的问题,跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩,可参考这个[底部原生图标分享菜单例子](https://ext.dcloud.net.cn/plugin?id=69)
- 微信小程序模拟器1.02.1904090版有bug,在缩放模拟器页面百分比后,tabbar点击多次后就会卡死。真机无碍,使用时注意。[详见](https://developers.weixin.qq.com/community/develop/doc/0002e6e6bf0d602d8c783e10756400)
......
......@@ -6,6 +6,8 @@ vue.config.js 是一个可选的配置文件,如果项目的根目录中存在
**注意事项**
- 仅vue页面生效
部分配置项会被编译配置覆盖,例如:
* publicPath 不支持,如果需要配置,请在 manifest.json->h5->router->base 中配置,参考文档:[h5-router](collocation/manifest?id=h5-router)
......@@ -15,7 +17,7 @@ vue.config.js 是一个可选的配置文件,如果项目的根目录中存在
* runtimeCompiler 固定 false
* productionSourceMap 固定 false
* css.extract H5 平台固定 false,其他平台固定 true
* parallel 固定 false
* parallel 固定 false
* 使用cli项目时,默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在transpileDependencies中列出来。[详情参考](https://cli.vuejs.org/zh/config/#transpiledependencies)
**使用示例**
......@@ -57,14 +59,16 @@ module.exports = {
}
```
**发布时删除console**
```js
**发布时删除console**
`HBuilderX 2.6.8+`支持
```js
module.exports = {
chainWebpack: (config) => {
// 发行或运行时启用了压缩时会生效
config.optimization.minimizer('terser').tap((args) => {
const compress = args[0].terserOptions
const compress = args[0].terserOptions.compress
// 非 App 平台移除 console 代码(包含所有 console 方法,如 log,debug,info...)
compress.drop_console = true
compress.pure_funcs = [
......@@ -74,5 +78,9 @@ module.exports = {
return args
})
}
}
```
\ No newline at end of file
}
```
启用压缩的方法:
- HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
- cli创建的项目可以在`pacakge.json`中添加参数`--minimize`,示例:`"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"`
......@@ -94,6 +94,66 @@
```
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/form.png?t=201857)
**小程序端注意事项**
小程序端在`from`内的自定义组件内有`input`等表单控件时,无法在`form``submit`事件内获取组件内表单控件值,此时可以使用`behaviors`,示例如下:
```html
<!-- /pages/index/index.vue -->
<template>
<view class="content">
<form @submit="onSubmit">
<comp-input name="test" v-model="testValue"></comp-input>
<button form-type="submit">Submit</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
testValue: 'Hello'
}
},
methods: {
onSubmit(e) {
console.log(e)
}
}
}
</script>
<style>
</style>
```
```html
<!-- /components/compInput/compInput.vue -->
<template>
<view>
<input name="test" style="border: solid 1px #999999;height: 80px;" type="text" @input="onInput" :value="value" />
</view>
</template>
<script>
export default {
name: 'compInput',
behaviors: ['uni://form-field'],
methods: {
onInput(e) {
this.$emit('input', e.detail.value)
}
}
}
</script>
<style>
</style>
```
**tips**
- [插件市场](http://ext.dcloud.net.cn/search?q=%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C)有表单校验插件
......@@ -83,9 +83,10 @@ App平台在iOS上,webview中的软键盘弹出时,默认在软键盘上方
- 如需使用js动态设置softinputNavBar
```javascript
this.$mp.page.$getAppWebview().setStyle({
this.$scope.$getAppWebview().setStyle({
softinputNavBar: 'none'
})
})
//this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
```
如果是nvue页面,默认就没有键盘上方的横条,无需任何设置。
......
......@@ -28,7 +28,7 @@
|touchable|Boolean|true|是否监听用户的触摸事件,只在初始化时有效,不能动态变更|字节跳动小程序(uni-app 2.5.5+ 推荐统一使用 disable-touch)|
|easing-function|String|default|指定 swiper 切换缓动动画类型,有效值:default、linear、easeInCubic、easeOutCubic、easeInOutCubic|微信小程序|
|@change|EventHandle||current 改变时会触发 change 事件,event.detail = {current: current, source: source}||
|@transition|EventHandle||swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}|App、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序|
|@transition|EventHandle||swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy},支付宝小程序暂不支持dx, dy|App、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序|
|@animationfinish|EventHandle||动画结束时会触发 animationfinish 事件,event.detail = {current: current, source: source}|字节跳动小程序不支持|
change 事件返回 detail 中包含一个 source 字段,表示导致变更的原因,可能值如下:
......
......@@ -194,7 +194,7 @@ var wv;//计划创建的webview
export default {
onReady() {
// #ifdef APP-PLUS
var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
setTimeout(function() {
wv = currentWebview.children()[0]
wv.setStyle({top:150,height:300})
......@@ -222,7 +222,7 @@ export default {
top:uni.getSystemInfoSync().statusBarHeight+44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
})
wv.loadURL("https://www.baidu.com")
var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
currentWebview.append(wv);//一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭
setTimeout(function() {
console.log(wv.getStyle())
......@@ -276,3 +276,6 @@ A:调用 uni 相关的 API,就可以实现页面切换及发送消息。参
Q:web-view 加载的 HTML 中,能够调用 5+ 的能力么?
A:加载的 HTML 中是有 5+ 环境的,在 plusready 后调用即可。参考:[一个简单实用的 plusready 方法](https://ask.dcloud.net.cn/article/34922)
Q: web-view 加载 uni-app H5,内部跳转冲突如何解决
A:使用 uni.webView.navigateTo...
......@@ -178,49 +178,71 @@ vue页面在App端的渲染引擎默认是系统webview(不是手机自带浏
* 为避免和内置组件冲突,自定义组件请加上前缀(但不能是 u 和 uni)。比如可使用的自定义组件名称:``my-view````m-input````we-icon``,例如不可使用的自定义组件名称:``u-view````uni-input``,如果已有项目使用了可能造成冲突的名称,请修改名称,另外微信小程序下自定义组件名称不能以 wx 开头。
### 小程序开发注意@mp
#### 各家小程序实现机制不同,可能存在的平台兼容问题
### 微信小程序开发注意
1.浏览器内核差异
* [微信小程序当前bug列表](https://developers.weixin.qq.com/community/develop/issueList?type=%E4%BF%AE%E5%A4%8D%E4%B8%AD&block=bug)
* [微信小程序更新日志](https://developers.weixin.qq.com/miniprogram/dev/framework/release/)
### 支付宝小程序开发注意
各家小程序的浏览器内核不同,可能会造成css兼容性问题,更多细节参考:[https://ask.dcloud.net.cn/article/1318](https://ask.dcloud.net.cn/article/1318)
* [支付宝小程序更新日志](https://docs.alipay.com/mini/ide/framework-changelog)
* 支付宝小程序开发工具:[https://docs.alipay.com/mini/ide/download](https://docs.alipay.com/mini/ide/download)
* 目前无分包的配置,并且包体积限制在 3M。
* showLoading 是不透传的,也就是说 loading 显示的时候无法点击页面内容。
* 文件名或文件夹名中不允许出现 @ 符号。
* 网络请求返回的数据会严格按照 ``dataType`` 进行处理,如果不符合规范则会抛出错误,而不是按照原格式返回。
* ``canvas`` 组件的标识是 ``id``,而不是 ``canvas-id``。目前还未进行处理,所以需要主动添加 id 属性。
* 目前测试的结果,导航栏只有设置背景颜色为 #FFF(FFF) 时才会变成黑色文字。
* 支付宝小程序的导航栏是支持透明渐变效果的,后面会提供相关的配置。
* 使用伪元素做边框时,高度值不能用 ``1rpx``,需要直接用 ``1px``
* 不支持 ECharts。
* 支付功能模拟不了,需要真机测试。
2.自定义组件渲染差异
### 百度小程序开发注意
微信/QQ/百度/字节跳动这四家小程序,自定义组件在渲染时会比App/H5端多一级节点,在写样式时需要注意:
* [百度小程序更新日志](https://smartprogram.baidu.com/docs/develop/swan/swanchangelog/)
* 百度小程序开发工具:[https://smartprogram.baidu.com/docs/introduction/tool/](https://smartprogram.baidu.com/docs/introduction/tool/)
* 不支持属性选择器。
* 不支持 ``scoped``
* login / getUserInfo /支付等功能在模拟器(开发工具)上不能模拟。
* ``map`` 组件在开发工具上预览效果不对,但是手机上是对的。
* ``getSystemInfo`` 获取到的 ``windowHeight`` 在模拟器中值不正确,真机预览是正确的。
* ``v-if````v-for`` 不可在同一标签下同时使用。
* 页面中引入自定义组件时,渲染的结果中外层会有一个 ``template`` 标签,这会导致部分选择器对应的样式匹配不上。
* 使用`flex`布局时,直接给自定义组件的父元素设置为`display:flex`不能影响到自定义组件内部的根节点,需要设置当前自定义组件为`display:flex`才可以。
* 在自定义组件内部设置根元素高度为100%,不能撑满自定义组件父元素。需要同时设置当前自定义组件高度为100%才可以。
### 各家小程序的浏览器内核不同,会造成css兼容性问题
查阅细节参考:[https://ask.dcloud.net.cn/article/1318](https://ask.dcloud.net.cn/article/1318)
支付宝小程序不会插入节点,不存在如上问题。
### vendor.js过大的处理方式
#### vendor.js 过大的处理方式
小程序工具提示vendor.js过大,已经跳过es6向es5转换。这个转换问题本身不用理会,因为vendor.js已经是es5的了。
小程序工具提示`vendor.js`过大,已经跳过es6向es5转换。这个转换问题本身不用理会,因为`vendor.js`已经是es5的了。
关于体积控制,参考如下:
- 使用运行时代码压缩
+ `HBuilderX`创建的项目勾选`运行-->运行到小程序模拟器-->运行时是否压缩代码`
+ `cli`创建的项目可以在`pacakge.json`中添加参数`--minimize`,示例:`"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"`
- 使用分包优化,[关于分包优化的说明](/collocation/manifest?id=关于分包优化的说明)
#### 各家小程序开发工具下载地址
* [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)
* [支付宝开发者工具](https://docs.alipay.com/mini/ide/download)
* [百度开发者工具](https://smartprogram.baidu.com/docs/introduction/tool/)
* [字节跳动开发者工具](https://developer.toutiao.com/dev/cn/mini-app/develop/developer-instrument/developer-instrument-update-and-download)
#### 各家小程序更新日志列表
* [微信小程序更新日志](https://developers.weixin.qq.com/miniprogram/dev/framework/release/)
* [支付宝小程序更新日志](https://docs.alipay.com/mini/ide/framework-changelog)
* [百度小程序更新日志](https://smartprogram.baidu.com/docs/develop/swan/swanchangelog/)
* [字节跳动小程序更新日志](https://developer.toutiao.com/dev/cn/mini-app/develop/basic-library/update-log)
#### 微信小程序开发注意
- 建议关注[微信小程序当前bug列表](https://developers.weixin.qq.com/community/develop/issueList?type=%E4%BF%AE%E5%A4%8D%E4%B8%AD&block=bug),对已知Bug,想办法避让。
#### 支付宝小程序开发注意
* `showLoading` 是不透传的,也就是说 `loading` 显示的时候无法点击页面内容。
* 文件名或文件夹名中不允许出现 `@` 符号。
* 网络请求返回的数据会严格按照 `dataType` 进行处理,如果不符合规范则会抛出错误,而不是按照原格式返回。
* `canvas` 组件的标识是 `id`,而不是 `canvas-id`。目前还未进行处理,所以需要主动添加 id 属性。
* 目前测试的结果,导航栏只有设置背景颜色为 #FFF(FFF) 时才会变成黑色文字。
* 支付宝小程序的导航栏是支持透明渐变效果的,后面会提供相关的配置。
* 使用伪元素做边框时,高度值不能用 `1rpx`,需要直接用 `1px`
* 不支持 ECharts。
* 支付功能模拟不了,需要真机测试。
#### 百度小程序开发注意
* 不支持属性选择器。
* 不支持 `scoped`
* login / getUserInfo /支付等功能在模拟器(开发工具)上不能模拟。
* `map` 组件在开发工具上预览效果不对,但是手机上是对的。
* `getSystemInfo` 获取到的 `windowHeight` 在模拟器中值不正确,真机预览是正确的。
* `v-if``v-for` 不可在同一标签下同时使用。
* 页面中引入自定义组件时,渲染的结果中外层会有一个 `template` 标签,这会导致部分选择器对应的样式匹配不上。
此差异已折叠。
此差异已折叠。
此差异已折叠。
......@@ -24,6 +24,7 @@
* [《uni-app仿小米商城实战》](https://study.163.com/course/courseMain.htm?courseId=1209401825&share=2&shareId=480000001892585),出品人:帝莎IT学院。首页使用nvue开发,目前支持app端和小程序端。
* [《uni-app多端调试环境配置》](https://study.163.com/course/courseMain.htm?courseId=1209401924&share=2&shareId=480000001892585),出品人:帝莎IT学院。
* [《uni-app实战仿微信app全栈开发》](https://study.163.com/course/courseMain.htm?courseId=1209487898&share=2&shareId=480000001892585),出品人:帝莎IT学院。
* [《uni-app实战视频点播app小程序》](https://study.163.com/course/courseMain.htm?courseId=1209644880&share=2&shareId=480000001892585),出品人:帝莎IT学院。
目前各大视频学习网站都有不少uni-app的学习资源,更多资源请点击搜索链接:
- [腾讯课堂的uni-app相关课程](https://ke.qq.com/course/list/uni-app?tuin=269fe6b)
......@@ -56,5 +57,5 @@ uni-app并不难学,但我们注意到很多新人在适应各个平台的规
- 如果你的App要使用三方sdk,比如定位、地图、支付、推送...还要遵循他们的规则和限制;
#### uni-app的底层框架实现原理及优化策略(高级)
通过[评测对比](https://juejin.im/post/5ca1736af265da30ae314248),我们知道uni-app的性能比其他小程序开发框架好,但底层原理是什么?
通过[评测对比](https://juejin.im/post/5e8e8d5a6fb9a03c6d3d9f42),我们知道uni-app的性能比其他小程序开发框架好,但底层原理是什么?
这篇视频就是讲解uni-app框架底层的实现思路和优化策略:[《uni-app框架如何实现高性能》](https://v.qq.com/x/page/r0886mn8v6l.html)
#### uni-app选型评估23问
如果你关心竞品对比,这里有几份详尽对比:
1. 多端开发框架对比横评,参考:[https://juejin.im/post/5ca1736af265da30ae314248](https://juejin.im/post/5ca1736af265da30ae314248)
1. 多端开发框架对比横评,参考:[https://juejin.im/post/5e8e8d5a6fb9a03c6d3d9f42](https://juejin.im/post/5e8e8d5a6fb9a03c6d3d9f42)
2. 只做App,flutter、react native等App跨平台框架对比,参考:[https://ask.dcloud.net.cn/article/36083](https://ask.dcloud.net.cn/article/36083)
3. 只做小程序,原生wxml开发、wepy、mpvue、taro的对比,[https://ask.dcloud.net.cn/article/35867](https://ask.dcloud.net.cn/article/35867)
4. uni-app和微信原生开发的详细比较评测,参考:[https://ask.dcloud.net.cn/article/36484](https://ask.dcloud.net.cn/article/36484)
......@@ -129,7 +129,7 @@ plus api的结合解决了这个问题,大多数App的开发不再需要原生
**uni-app 支持的手机版本最低到多少?**
Android4.4、iOS8是官方会保障兼容的。
Android4.4、iOS9是官方会保障兼容的。
要知道Android4.4已经是2013年发布的手机了,正常用户不会还在用这么久远的手机。
**uni-app成熟度高吗?**
......
......@@ -30,6 +30,24 @@ const IP = auth.getClientIP()
<span id="createticket"></span>
### auth.createTicket(String customUserId, Object createTicketOptions)
此Api现在直接调用有问题,正在修复。可以先使用下面的方式调用
```js
const app = uniCloud.init({
spaceId: 'your-space-id',
credentials: require('./credentials.json')
})
const auth = app.auth();
let customUserId = '123456';
const ticket = auth.createTicket(customUserId, {
refresh: 10 * 60 * 1000 // 每十分钟刷新一次登录态, 默认为一小时
});
```
开发者可以使用云函数创建登录凭证,提供给客户端进行登录操作。[详见](uniCloud/authentication.md#自定义登录)
**createTicketOptions参数说明**
......
......@@ -252,7 +252,7 @@ let res = await collection.add([{
如果文档不存在,`set` 方法会创建一个新文档。
```js
let res = await collection.doc().set({
let res = await collection.doc('doc-id').set({
name: "Hey"
});
```
......@@ -268,10 +268,10 @@ let res = await collection.doc().set({
### 添加查询条件
collection.where()
参数
设置过滤条件
where 可接收对象作为参数,表示筛选出拥有和传入对象相同的 key-value 的文档。比如筛选出所有类型为计算机的、内存为 8g 的商品:
**在聚合操作中请使用match**
设置过滤条件,where 可接收对象作为参数,表示筛选出拥有和传入对象相同的 key-value 的文档。比如筛选出所有类型为计算机的、内存为 8g 的商品:
```js
let res = await db.collection('goods').where({
......@@ -304,7 +304,6 @@ db.collection('user').where({
collection.count()
参数
```js
let res = await db.collection('goods').where({
category: 'computer',
......@@ -314,6 +313,17 @@ let res = await db.collection('goods').where({
}).count()
```
**注意**
使用阿里云时,count必须搭配where使用,此问题阿里云正在修复。如果要count所有记录可以使用一个必然满足的条件,比如下面这样:
```js
const dbCmd = db.command
let res = await db.collection('goods').where({
_db: dbCmd.exists(true)
}).count()
```
响应参数
| 字段 | 类型 | 必填 | 说明 |
......
......@@ -30,6 +30,12 @@ exports.main = async (event, context) => {
}
```
云函数中如果要使用其他服务(比如mysql数据库、redis等),可以按照nodejs的写法即可。
**注意事项**
- 服务商为阿里云时,暂不可使用相对路径读取文件(比如`fs.readFileSync('./info.txt')`),可以使用绝对路径`fs.readFileSync(path.resolve(__dirname,'./info.txt'))`
### 访问数据库
云函数中支持访问本服务空间下的数据库,调用方式详见[规范](uniCloud/cf-database.md)
......
### uniCloud和微信小程序云开发、支付宝小程序云开发有何区别?
微信、支付宝、百度的小程序,均提供了云开发。但它们都仅支持自家小程序,无法跨端
微信、支付宝、百度的小程序,均提供了云开发。但它们都仅支持自家小程序,无法在其他端使用
`uniCloud`和微信小程序云开发、支付宝小程序云开发使用相同的基础建设平台,微信小程序云开发背后是腾讯云的TCB团队,支付宝小程序云开发背后是阿里小程序云团队。`uniCloud`是DCloud和阿里小程序云团队、腾讯云的TCB团队展开深层次合作,在他们底层资源的基础上进行二次封装,提供的跨端云开发方案。
`uniCloud`和微信小程序云开发、支付宝小程序云开发使用相同的基础建设平台,微信小程序云开发背后是腾讯云的TCB团队,支付宝小程序云开发背后是阿里小程序云团队。`uniCloud`是DCloud和阿里小程序云团队、腾讯云的TCB团队直接展开深层次合作,在他们底层资源的基础上进行二次封装,提供的跨端云开发方案。
简单来说,uniCloud和微信小程序云开发、支付宝小程序云开发一样稳定健壮,但可以跨更多平台。不管你在uniCloud里选择了阿里还是腾讯的serverless,均可以跨端使用。
......@@ -25,7 +25,7 @@
### uniCloud只支持uni-app,怎么开发web界面?
uni-app本来也可以开发web界面,只是内置组件对宽屏没有自动适配。你可以:
1. 新建uni-app项目,但不使用内置组件,而是直接用三方ui库,比如elementUI。这些基于vue的、适合宽屏使用的ui库可以直接用。至于js api,仍然使用uni的,比如uni.setStorage等。有一个可参考插件[GraceAdmin](https://ext.dcloud.net.cn/plugin?id=1347)是基于uniCloud的pc端管理后台框架。
1. 新建uni-app项目,但不使用内置组件,而是直接用三方ui库,比如elementUI。这些基于vue的、适合宽屏使用的ui库可以直接用。至于js api,仍然使用uni的,比如uni.setStorage等。有多个可参考插件[GraceAdmin](https://ext.dcloud.net.cn/plugin?id=1347)[基于elementUI的uniCloud示例](https://ext.dcloud.net.cn/plugin?id=1585),均是基于uniCloud的pc端管理后台框架。
2. 继续使用内置组件,自己处理pc适配:
- 如果要多端适配界面,使用css的媒体查询处理适配。
- 2.6.3起,uni内置组件支持了pc鼠标的滚动和drag。老版可以使用三方库替换touch的拖动为pc上的drag,比如touch-emulator.js。
......@@ -48,10 +48,15 @@ uniCloud提供了`云函数URL化`,来满足上述需求。[详见](https://un
### 云函数支持websocket和定时任务吗?
腾讯云已支持定时任务,很快阿里云也会补齐
腾讯云和阿里云均支持定时任务,可定期运行云函数
至于websocket,它的实时特性导致serverless化比较复杂。还需要继续寻找合适方案。如果使用三方sdk服务,比如推送、腾讯或声网等实时音视频方案,由于是连接三方服务器,不是连接uniCloud,这些方案仍然可以继续使用。
### 如何导入老数据库的数据?
- 方式1:可以在HBuilderX里用db_init.json来批量创建云数据库和插入表内容,[详见](https://uniapp.dcloud.io/uniCloud/cf-database?id=%e4%bd%bf%e7%94%a8db_initjson%e5%88%9d%e5%a7%8b%e5%8c%96%e9%a1%b9%e7%9b%ae%e6%95%b0%e6%8d%ae%e5%ba%93)
- 方式2:在云函数里,使用nodejs标准写法,连接老数据库(如mysql等均支持),把数据读出来,再批量写入云数据库
- 方式3:将一个云函数URL化,用其他语言读取老数据库,通过http方式提交到云函数,云函数将接收到的数据存入云数据库
### 云函数访问时快时慢怎么回事?
云函数对应的资源,如果长时间不使用,会被阿里云或腾讯云平台从内存中释放。一旦被释放,启动云函数时会有一个冷启动的过程。
......@@ -63,7 +68,7 @@ uniCloud提供了`云函数URL化`,来满足上述需求。[详见](https://un
两家云厂商仍然在优化这个问题。目前如果开发者在意这个问题,给开发者的建议是:
1. 非高频访问的云函数,合并到高频云函数中。有的开发者使用纯单页方式编写云函数,即在一个云函数中通过路由处理实现了整个应用的所有后台逻辑。
2. 非高频访问的云函数,可以通过定时任务持续运行它(限腾讯云,同时注意别超过腾讯云的免费GBs限制)
3. 向service@dcloud.io发邮件,申请预留资源
3. 向service@dcloud.io发邮件,申请预留资源不销毁
### 发布H5时还得自己找个服务器部署前端网页,可以不用自己再找服务器吗?
......@@ -92,17 +97,17 @@ uniCloud提供了`云函数URL化`,来满足上述需求。[详见](https://un
**腾讯云免费版限制如下**
|资源类别 |子类目 |限制 |说明 |
|:-: |:-: |:-: |:-: |
|云函数 |硬件资源用量 |4万GBs/月 |腾讯云最小计费粒度为256MB*100ms,即使用内存固定为256MB,运行时间以100ms为阶梯计算 |
| |外网出流量 |1GB/月 |- |
| |云函数同时连接数 |1000个/云函数 |超出此连接数的请求会直接失败。如有需求突破此限制,请发邮件到service@dcloud.io申请 |
| |云函数数目 |50个 |- |
|云存储 |容量 |5GB |- |
| |下载操作次数 |150万/月 |- |
| |上传操作次数 |60万/月 |- |
| |CDN回源流量 |5GB/月 |- |
|CDN |CDN流量 |5GB/月 |- |
|云数据库 |容量 |2GB |- |
| |读操作数 |5万次/天 |- |
| |写操作数 |3万次/天 |- |
|资源类别 |子类目 |限制 |说明 |
|:-: |:-: |:-: |:-: |
|云函数 |硬件资源用量 |4万GBs/月 |腾讯云最小计费粒度为256MB*100ms,即使用内存固定为256MB,运行时间以100ms为阶梯计算|
| |外网出流量 |1GB/月 |- |
| |云函数同时连接数 |1000个/云函数|超出此连接数的请求会直接失败。如有需求突破此限制,请发邮件到service@dcloud.io申请|
| |云函数数目 |50个 |- |
|云存储 |容量 |3GB |- |
| |下载操作次数 |150万/月 |- |
| |上传操作次数 |60万/月 |- |
| |CDN回源流量 |5GB/月 |- |
|CDN |CDN流量 |4GB/月 |- |
|云数据库 |容量 |2GB |- |
| |读操作数 |5万次/天 |- |
| |写操作数 |3万次/天 |- |
......@@ -105,7 +105,7 @@ $ curl https://${spaceId}.service.tcloudbase.com/${path}
使用POST请求`https://${spaceId}.service.tcloudbase.com/${functionPath}`,云函数接收到的`event`为请求发送的数据,**uni.request默认content-type为application/json**
```
```js
// 以uni.request为例
uni.request({
method: 'POST',
......@@ -121,6 +121,8 @@ uni.request({
// 云函数收到的event为, 注意如果直接return此格式数据可能会被作为集成响应处理,参考下面的集成响应文档
```
```js
{
path: '/',
httpMethod: 'GET',
......@@ -134,7 +136,12 @@ uni.request({
body: '{"a":1,"b":2}',
}
```
```
**注意**
- 阿里云目前请求与响应有如下限制
+ 请求Body大小限制,不能超过4K。
+ 响应Body大小限制,不能超过4K。
### 云函数的返回值
......
......@@ -24,7 +24,7 @@ function init(options):uniCloud
|:-: |:-: |:-: |:-: |:-: |
|provider |String |是 |- |目前仅支持aliyun |
|spaceId |String |是 |- |服务空间ID,**注意是服务空间ID,不是服务空间名称** |
|clientSecret |String |是 |- |可以在[uniCloud控制台](https://unicloud.dcloud.net.cn)服务空间列表中查看 |
|clientSecret |String |是 |- |仅阿里云支持,可以在[uniCloud控制台](https://unicloud.dcloud.net.cn)服务空间列表中查看 |
<!-- |endpoint |String |否 |https://api.bspapp.com |服务空间地址 |仅阿里云侧支持 | -->
<!-- |autoSignIn |Boolean|否 |true |是否自动匿名登录 |仅腾讯云侧支持 |
|debugFunction|Boolean|否 |true |是否启用云函数日志输出 |仅开发阶段生效,平台支持:APP、H5(使用`HBuilderX`内置浏览器获得更好的调试体验) | -->
......@@ -46,8 +46,3 @@ myCloud.uploadFile()
**Tips:**
- 云函数会自动识别自己所属的服务空间,无需初始化。
- `HBuilderX 2.5.8`版本在`main.js`使用`uniCloud`时,运行到H5端会报错,可以先使用其他平台进行调试。此问题会在`HBuilderX 2.5.9`修复
<!-- **注意**
- 服务提供商为腾讯云时,需要开发者手动去管理控制台开启匿名登录才可以操作云函数[详情](/uniCloud/authentication#匿名登录) -->
......@@ -171,9 +171,15 @@ uniCloud的[web控制台](https://unicloud.dcloud.net.cn/)可以查看线上云
|阿里云 |api.bspapp.com |bsppub.oss-cn-shanghai.aliyuncs.com|
|腾讯云 |tcb-api.tencentcloudapi.com|cos.ap-shanghai.myqcloud.com |
小程序开发工具的真机预览功能,必须添加上述域名白名单,否则无法调用云函数。模拟器的PC端预览、真机调试不受此影响。
使用腾讯云时,开发期间会使用dcloud的服务器访问云函数来时时返回云函数运行日志,最好在开发期间忽略域名检查。
使用腾讯云作为服务供应商时,开发调试期间(在HBuilderX内点击运行)会访问DCloud服务器获取云函数运行日志,可以在开发调试期间忽略域名检查。发行(在HBuilderX内点击发行)之后会直接请求腾讯云服务器访问云函数。使用腾讯云运行期间访问云函数速度会慢于发行,原因有以下两点:
- 获取日志需要从管理端调用云函数,速度比sdk直接调用慢。
- 访问DCloud服务器也有时间损耗。
后续会对此流程进行优化
<span id="useinh5"></span>
## H5中使用uniCloud
......
# uniCloud 更新日志
======================================
#### 2020-04-08
* 【web 控制台】
+ 阿里云 新增 支持云函数定时触发
+ 阿里云 优化 云函数上传并运行时会运行更新之前的云函数的问题
#### 2020-03-27
* 【web 控制台】
+ 阿里云 新增 支持云函数Url化
......
**本章内容仅选择腾讯云作为服务商时支持**
如果云函数需要定时/定期执行,即定时触发,您可以使用云函数定时触发器。已配置定时触发器的云函数,会在相应时间点被自动触发,函数的返回结果不会返回给调用方。
<!-- 在需要添加触发器的云函数目录下新建文件 `config.json`,格式如下:
......@@ -22,6 +20,8 @@
在uniCloud web控制台点击需要添加触发器的云函数详情,创建云函数触发器,格式如下:
**腾讯云**
```js
// 参数是触发器数组,目前仅支持一个触发器,即数组只能填写一个,不可添加多个
// 实际添加时请务必去除注释
......@@ -37,6 +37,17 @@
]
```
**阿里云**
```js
["cron:0 0 * * * *"]
```
**注意**
- 当前阿里云没有服务空间用量计费,为避免资源浪费,定时触发器限制为最低每小时触发一次,要求cron表达式中的秒和分仅支持配置固定的数字,不支持特殊字符。(如需提高调用频率可以发送邮件到service@dcloud.io进行申请)
- 阿里云的cron表达式为6位,腾讯云为7位。相比腾讯云,阿里云缺少代表年份的第7位
### 字段规则
- 定时触发器名称(name) :最大支持60个字符,支持 `a-z`, `A-Z`, `0-9`, `-``_`。必须以字母开头,且一个函数下不支持同名的多个定时触发器。
- 定时触发器触发周期 (config):指定的函数触发时间。填写自定义标准的 Cron 表达式来决定何时触发函数。有关 Cron 表达式的更多信息,请参考以下内容。
......@@ -78,3 +89,26 @@ Cron 表达式有七个字段,按空格分隔。其中,每个字段都有相
0 */30 9-17 * * * * 表示在每天上午9点到下午5点内每半小时触发
0 0 12 * * WED * 表示在每个星期三中午12点触发
```
### 云函数入参说明
使用定时触发器调用云函数时云函数会收到特定的参数。两个平台的参数如下:
**腾讯云**
```js
{
"Time":"2020-04-08T10:22:31Z", //调用的云函数的时间
"TriggerName":"myTrigger", //触发器名
"Type":"Timer" //触发器类型,目前只有Timer
}
```
**阿里云**
```js
{
"timingTriggerConfig": "cron:0 0 * * * *", //触发云函数的定时器配置内容
"timestamp": 1585670400006 //触发云函数时的时间戳,可能略晚于cron表达式时间
}
```
......@@ -592,7 +592,8 @@ canvas API使用,详见canvas文档。
下面有些正确和错误的写法示例对比:
- 选择器仅支持class 选择器
- 选择器仅支持class 选择器
```css
/* 错误 */
......@@ -637,7 +638,8 @@ canvas API使用,详见canvas文档。
}
```
- nvue的`uni-app`编译模式下,`App.vue` 中的样式,会编译到每个 `nvue文件`。对于共享样式,如果有不合法属性控制台会给出警告,可以通过条件编译`APP-PLUS-NVUE`屏蔽 `App` 中的警告。
- nvue的`uni-app`编译模式下,`App.vue` 中的样式,会编译到每个 `nvue文件`。对于共享样式,如果有不合法属性控制台会给出警告,可以通过条件编译`APP-PLUS-NVUE`屏蔽 `App` 中的警告。
```css
/* 错误 */
/* 控制台警告:
......@@ -659,7 +661,8 @@ WARNING: `-webkit-transform` is not a standard property name (may not be support
/* #endif*/
}
```
```
## Android平台阴影(box-shadow)问题
Android平台weex对阴影样式(`box-shadow`)支持不完善,如设置圆角边框时阴影样式显示不正常、设置动画时在`Android7`上显示不正常等。为解决这些问题,从HBuilderX 2.4.7起,新增`elevation`属性(组件的属性,不是css样式)设置组件的层级,`Number`类型,层级值越大阴影越明显,阴影效果也与组件位置有关,越靠近页面底部阴影效果越明显
......
......@@ -677,7 +677,7 @@ export default {
|vm.$children |支持 |支持 |支持 |支持 |- |
|vm.$slots |支持 |支持 |不支持 |支持 |App端旧版获取值为`{'slotName':true/false}`比如:`{"footer":true}` |
|vm.$scopedSlots|支持 |支持 |支持 |支持 |App端旧版获取值为`{'slotName':true/false}`比如:`{"footer":true}` |
|vm.$refs |支持 |支持 |支持 |支持 |- |
|vm.$refs |支持 |支持 |支持 |支持 |非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view、text)|
|vm.$isServer |支持 |不支持 |支持 |不支持 |App端V3总是返回false |
|vm.$attrs |支持 |不支持 |支持 |不支持 |- |
|vm.$listeners |支持 |不支持 |支持 |不支持 |- |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册