Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
96b900c3
U
uni-app
项目概览
DCloud
/
uni-app
4 个月 前同步成功
通知
726
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
96b900c3
编写于
8月 16, 2019
作者:
C
changan12
提交者:
GitHub
8月 16, 2019
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request
#1
from dcloudio/master
sync from dcloudio
上级
d89af5f9
c07d24ae
变更
39
显示空白变更内容
内联
并排
Showing
39 changed file
with
289 addition
and
133 deletion
+289
-133
README.md
README.md
+20
-3
docs/README.md
docs/README.md
+1
-1
docs/api/file/file.md
docs/api/file/file.md
+3
-3
docs/api/key.md
docs/api/key.md
+1
-1
docs/api/lifetime.md
docs/api/lifetime.md
+4
-4
docs/api/location/map.md
docs/api/location/map.md
+2
-2
docs/api/media/image.md
docs/api/media/image.md
+1
-1
docs/api/media/video-context.md
docs/api/media/video-context.md
+1
-1
docs/api/media/video.md
docs/api/media/video.md
+1
-1
docs/api/other/get-extconfig.md
docs/api/other/get-extconfig.md
+2
-2
docs/api/other/setting.md
docs/api/other/setting.md
+2
-2
docs/api/other/update.md
docs/api/other/update.md
+1
-1
docs/api/request/request.md
docs/api/request/request.md
+2
-1
docs/api/request/websocket.md
docs/api/request/websocket.md
+6
-6
docs/api/ui/intersection-observer.md
docs/api/ui/intersection-observer.md
+1
-1
docs/case.md
docs/case.md
+2
-0
docs/collocation/manifest.md
docs/collocation/manifest.md
+2
-2
docs/collocation/package.md
docs/collocation/package.md
+1
-1
docs/collocation/vue-config.md
docs/collocation/vue-config.md
+41
-1
docs/component/_sidebar.md
docs/component/_sidebar.md
+1
-0
docs/component/barcode.md
docs/component/barcode.md
+2
-2
docs/component/button.md
docs/component/button.md
+1
-1
docs/component/canvas.md
docs/component/canvas.md
+3
-2
docs/component/input.md
docs/component/input.md
+4
-4
docs/component/label.md
docs/component/label.md
+4
-1
docs/component/map.md
docs/component/map.md
+33
-33
docs/component/movable-view.md
docs/component/movable-view.md
+2
-1
docs/component/mp-weixin-plugin.md
docs/component/mp-weixin-plugin.md
+61
-0
docs/component/navigator.md
docs/component/navigator.md
+3
-1
docs/component/official-account.md
docs/component/official-account.md
+1
-1
docs/component/picker-view.md
docs/component/picker-view.md
+2
-1
docs/component/picker.md
docs/component/picker.md
+1
-0
docs/component/rich-text.md
docs/component/rich-text.md
+6
-2
docs/component/scroll-view.md
docs/component/scroll-view.md
+1
-0
docs/component/textarea.md
docs/component/textarea.md
+9
-9
docs/ecosystem.md
docs/ecosystem.md
+10
-10
docs/performance.md
docs/performance.md
+20
-11
src/core/view/components/input/index.vue
src/core/view/components/input/index.vue
+2
-1
src/platforms/mp-toutiao/service/api/protocols.js
src/platforms/mp-toutiao/service/api/protocols.js
+29
-19
未找到文件。
README.md
浏览文件 @
96b900c3
...
...
@@ -2,7 +2,7 @@
`uni-app`
是一个使用
`Vue.js`
开发小程序、H5、App的统一前端框架。官网地址:
[
https://uniapp.dcloud.io
](
https://uniapp.dcloud.io
)
开发者使用
`Vue`
语法编写代码,
`uni-app`
框架将其编译到 小程序(微信/支付宝/百度/字节跳动/QQ)、App(iOS/Android)、H5等多个平台,保证其正确运行并达到优秀体验。
开发者使用
`Vue`
语法编写代码,
`uni-app`
框架将其编译到 小程序(微信/支付宝/百度/字节跳动/QQ
/钉钉
)、App(iOS/Android)、H5等多个平台,保证其正确运行并达到优秀体验。
# uni-app的特点
...
...
@@ -45,9 +45,26 @@
`uni-app`
有丰富的插件生态,众多开发者提交了各种组件、sdk、项目模板,详见:
[
https://ext.dcloud.net.cn/
](
https://ext.dcloud.net.cn/
)
##
更多资料
##
现有项目如何迁移到uni-app体系
-
评测:
[
深入测试一周,主流多端框架大比武
](
https://mp.weixin.qq.com/s/jIDEHfuMnED6HTfNgjsW4w
)
-
微信小程序转换uni-app指南及转换器:
[
https://ask.dcloud.net.cn/article/35786
](
https://ask.dcloud.net.cn/article/35786
)
-
vue h5项目转换uni-app指南:
[
https://ask.dcloud.net.cn/article/36174
](
https://ask.dcloud.net.cn/article/36174
)
-
mpvue 项目(组件)迁移指南、示例及资源汇总:
[
https://ask.dcloud.net.cn/article/34945
](
https://ask.dcloud.net.cn/article/34945
)
## 常见疑问
-
问:不同端有不同的需求、不同的特色,登陆支付也不一样,如何统一?
-
答:差异部分使用条件编译。uni-app提供了灵活强大的
[
条件编译
](
https://uniapp.dcloud.io/platform
)
。可以完美处理复用部分和差异部分。真正一套工程源码。当业务升级时,不再需要多端维护。如果多端维护,经常会因为某些端的流量不大,就一直拖延无法让那些用户享受到最新服务。另外登陆支付在客户端部分,已经被uni-app统一成一样的api了。
-
问:多端是不是一种妥协,是否会造成性能下降?
-
答:good question。多端且不影响性能,确实很难,但uni-app做到了。在h5端,它的性能、包体积与直接使用vue.js开发一致; 在小程序端,它的性能比大多数开发框架更好,uni-app底层自动处理的setdata差量同步机制,比开发者手动写setdata更好,就像使用vue.js更新界面比手动写js修改dom更高效一样; 在App,uni-app支持webview渲染和原生渲染双引擎,启用原生渲染时,css写法受限,但性能是很接近原生开发的效果的,在当前的手机环境下,千万日活以下的应用在App使用uni-app也不会遇到任何压力。当然也可以在已经做好的原生App中将部分页面改为uni-app实现; 此外,我们会把很多跨端处理放在编译期完成的,这样会减少对运行期的效率影响。
-
问:不做多端,是不是不需要uni-app。
-
答:不是。大量开发者用uni-app只做一个端,详见
[
案例
](
https://uniapp.dcloud.io/case
)
。对于开发者而言,一个优秀工具在手,做什么都不愁。
## 更多资料
-
评测:
[
深入测试一周,主流多端框架大比武
](
https://mp.weixin.qq.com/s/jIDEHfuMnED6HTfNgjsW4w
)
-
[
uni-app在App端和flutter、react native的比较
](
https://ask.dcloud.net.cn/article/36083
)
docs/README.md
浏览文件 @
96b900c3
```
uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/
阿里/百度/头条/QQ
)等多个平台。
```
uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/
支付宝/百度/头条/QQ/钉钉
)等多个平台。
即使不跨端,```uni-app```同时也是更好的小程序开发框架。详见[评测](https://ask.dcloud.net.cn/article/35947)
...
...
docs/api/file/file.md
浏览文件 @
96b900c3
...
...
@@ -47,7 +47,7 @@ uni.chooseImage({
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|
x
|
|√|x|√|√|√|
√
|
**OBJECT 参数说明:**
...
...
@@ -127,7 +127,7 @@ uni.getSavedFileInfo({
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|
x
|
|√|x|√|√|√|
√
|
**OBJECT 参数说明:**
...
...
@@ -162,7 +162,7 @@ uni.getSavedFileList({
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|√|
x
|
|√|x|√|√|√|
√
|
**OBJECT 参数说明:**
...
...
docs/api/key.md
浏览文件 @
96b900c3
...
...
@@ -5,6 +5,6 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|x|
x
|
|√|√|√|√|x|
√
|
隐藏已经显示的软键盘,如果软键盘没有显示则不做任何操作。
docs/api/lifetime.md
浏览文件 @
96b900c3
...
...
@@ -27,7 +27,7 @@
|onUnload|监听页面卸载|||
|onResize|监听窗口尺寸变化|5+App、微信小程序||
|onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考
[
示例
](
api/ui/pulldown
)
|||
|onReachBottom|页面滚动到底部的事件(不是scroll-view滚到底),常用于
下拉
下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发|||
|onReachBottom|页面滚动到底部的事件(不是scroll-view滚到底),常用于
上拉加载
下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发|||
|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、5+App(自定义组件模式)||
|onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、头条小程序、支付宝小程序||
|onPageScroll|监听页面滚动,参数为Object|||
...
...
docs/api/location/map.md
浏览文件 @
96b900c3
...
...
@@ -17,8 +17,8 @@ mapContext
|:-|:-|:-|:-|:-|
|getCenterLocation|OBJECT|获取当前地图中心的经纬度,返回的是 gcj02 坐标系,可以用于
[
uni.openLocation
](
api/location/location?id=getlocation
)
|||
|moveToLocation||将地图中心移动到当前定位点,需要配合map组件的show-location使用|||
|translateMarker|OBJECT|平移marker,带动画|||
|includePoints|OBJECT|缩放视野展示所有经纬度|||
|translateMarker|OBJECT|平移marker,带动画|
App-nvue 2.1.5+、微信小程序带动画
||
|includePoints|OBJECT|缩放视野展示所有经纬度|
App-nvue 2.1.5+
||
|getRegion|OBJECT|获取当前地图的视野范围|||
|getScale|OBJECT|获取当前地图的缩放级别|||
|$getAppMap||获取原生地图对象
[
plus.maps.Map
](
https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map
)
|5+App自定义组件模式|1.9.3|
...
...
docs/api/media/image.md
浏览文件 @
96b900c3
...
...
@@ -130,7 +130,7 @@ uni.chooseImage({
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|
x
|
|√|√|√|√|√|
√
|
**OBJECT 参数说明**
...
...
docs/api/media/video-context.md
浏览文件 @
96b900c3
...
...
@@ -5,7 +5,7 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|
x
|
|√|√|√|x|√|
√
|
**videoContext 对象的方法列表**
...
...
docs/api/media/video.md
浏览文件 @
96b900c3
...
...
@@ -5,7 +5,7 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|
x
|√|√|
|√|√|√|
√
|√|√|
**OBJECT 参数说明**
...
...
docs/api/other/get-extconfig.md
浏览文件 @
96b900c3
...
...
@@ -6,7 +6,7 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|
x
|
|x|x|√|x|√|
√
|
**OBJECT参数说明**
...
...
@@ -47,7 +47,7 @@ if (uni.getExtConfig) {
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|
x
|
|x|x|√|x|√|
√
|
**返回值(Object)**
...
...
docs/api/other/setting.md
浏览文件 @
96b900c3
...
...
@@ -6,7 +6,7 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|
x
|√|√|
|x|x|√|
√
|√|√|
|属性|类型|必填|说明|
|---|---|---|---|---|
...
...
@@ -37,7 +37,7 @@ uni.openSetting({
|5+App|H5|微信小程序|支付宝小程序|百度小程序|
|:-:|:-:|:-:|:-:|:-:|
|x|x|√|
x
|√|
|x|x|√|
√
|√|
|属性|类型|必填|说明|
|---|---|---|---|---|
...
...
docs/api/other/update.md
浏览文件 @
96b900c3
...
...
@@ -10,7 +10,7 @@ App的更新不使用本API,另见文档:
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|
x
|√|√|
|x|x|√|
√
|√|√|
**updateManager 对象的方法列表:**
...
...
docs/api/request/request.md
浏览文件 @
96b900c3
...
...
@@ -119,3 +119,4 @@ requestTask.abort();
-
[
uni-app 插件市场
](
https://ext.dcloud.net.cn/search?q=%E6%8B%A6%E6%88%AA%E5%99%A8
)
有flyio、axios等三方封装的拦截器可用
-
低版本手机自身不支持 ipv6,如果服务器仅允许 ipv6,会导致老手机无法正常运行或访问速度非常慢
-
localhost、127.0.0.1等服务器地址,只能在电脑端运行,手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络
-
debug 模式,安卓端暂时无法获取响应头,url中含有非法字符(如未编码为%20的空格)时会请求失败
\ No newline at end of file
docs/api/request/websocket.md
浏览文件 @
96b900c3
...
...
@@ -66,7 +66,7 @@ var socketTask = uni.connectSocket({
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|
x
|
|√|√|√|√|√|
√
|
**CALLBACK 返回参数**
...
...
@@ -93,7 +93,7 @@ uni.onSocketOpen(function (res) {
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|
x
|
|√|√|√|√|√|
√
|
**示例代码**
...
...
@@ -116,7 +116,7 @@ uni.onSocketError(function (res) {
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|
x
|
|√|√|√|√|√|
√
|
**OBJECT 参数说明:**
...
...
@@ -163,7 +163,7 @@ function sendSocketMessage(msg) {
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|
x
|
|√|√|√|√|√|
√
|
**CALLBACK 返回参数**
...
...
@@ -190,7 +190,7 @@ uni.onSocketMessage(function (res) {
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|
x
|
|√|√|√|√|√|
√
|
**OBJECT 参数说明**
...
...
@@ -209,7 +209,7 @@ uni.onSocketMessage(function (res) {
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|
x
|
|√|√|√|√|√|
√
|
```
javascript
uni
.
connectSocket
({
...
...
docs/api/ui/intersection-observer.md
浏览文件 @
96b900c3
...
...
@@ -7,7 +7,7 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|HBuilderX 2.0.4+|√|
x|√|x
|
|√|HBuilderX 2.0.4+|√|
√|√|√
|
**options 的可选参数为:**
...
...
docs/case.md
浏览文件 @
96b900c3
...
...
@@ -392,6 +392,8 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
**摸鱼:**
职场生活圈。
[
微信小程序
](
http://m3w.cn/moyu
)
**千家找房:**
专业的二手房、新房买卖租赁平台。
[
App、小程序、H5通用链接
](
http://m3w.cn/qjzf
)
**超英预告:**
超级英雄预告,腾讯课堂Next学院的uni-app课程示例,
[
H5
](
http://www.imovietrailer.com
)
、微信小程序搜索“NEXT超英预告”。
**垃圾分类帮帮团:**
[
微信小程序码地址
](
https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/ljfl.png
)
...
...
docs/collocation/manifest.md
浏览文件 @
96b900c3
...
...
@@ -47,8 +47,8 @@
|distribute|Object|5+App 发布信息,
[
详见
](
/collocation/manifest?id=distribute
)
||
|usingComponents|Boolean|是否启用自定义组件模式,默认为false,
[
编译模式区别详情
](
https://ask.dcloud.net.cn/article/35843
)
|1.9.0|
|nvueCompiler|String|切换 nvue 编译模式,可选值,
`weex`
:老编译模式,
`uni-app`
: 新编译模式,默认为
`weex`
。
[
编译模式区别详情
](
http://ask.dcloud.net.cn/article/36074
)
|2.0.3 Alpha|
|renderer|String|可不加载基于 webview 的运行框架,减少包体积、提升启动速度。可选值
`native`
| App-nvue 2.2.0+|
|nvue|Object|nvue 页面布局初始配置,
[
详见
](
/collocation/manifest?id=nvue
)
|2.0.3 Alpha|
PS:这里只列出了核心部分,更多内容请参考
[
完整的 manifest.json
](
/collocation/manifest?id=完整-manifestjson
)
。
**Tips**
...
...
docs/collocation/package.md
浏览文件 @
96b900c3
通过在
`package.json`
文件中增加
`uni-app`
扩展节点,可实现自定义条件编译平台(如钉钉小程序、微信服务号等平台)。
package.json扩展配置用法:
package.json扩展配置用法
(拷贝代码记得去掉注释!)
:
```
json
{
...
...
docs/collocation/vue-config.md
浏览文件 @
96b900c3
...
...
@@ -16,3 +16,43 @@ vue.config.js 是一个可选的配置文件,如果项目的根目录中存在
*
productionSourceMap 固定 false
*
css.extract H5 平台固定 false,其他平台固定 true
*
parallel 固定 false
**使用示例**
**自定义静态资源目录**
```
js
const
path
=
require
(
'
path
'
)
const
CopyWebpackPlugin
=
require
(
'
copy-webpack-plugin
'
)
module
.
exports
=
{
configureWebpack
:
{
plugins
:
[
new
CopyWebpackPlugin
([
{
from
:
path
.
join
(
__dirname
,
'
src/images
'
),
to
:
path
.
join
(
__dirname
,
'
dist
'
,
process
.
env
.
NODE_ENV
===
'
production
'
?
'
build
'
:
'
dev
'
,
process
.
env
.
UNI_PLATFORM
,
'
images
'
)
}
])
]
}
}
```
**注入全局依赖**
```
js
const
webpack
=
require
(
'
webpack
'
)
module
.
exports
=
{
configureWebpack
:
{
plugins
:
[
new
webpack
.
ProvidePlugin
({
'
localStorage
'
:
[
'
mp-storage
'
,
'
localStorage
'
],
'
window.localStorage
'
:
[
'
mp-storage
'
,
'
localStorage
'
]
})
]
}
}
```
docs/component/_sidebar.md
浏览文件 @
96b900c3
...
...
@@ -72,6 +72,7 @@
*
[
SwiperDot 轮播图指示点
](
https://ext.dcloud.net.cn/plugin?id=284
)
*
[
Tag 标签
](
https://ext.dcloud.net.cn/plugin?id=35
)
*
[
更多插件市场的组件
](
https://ext.dcloud.net.cn/?cat1=2
)
*
[
配置微信小程序插件
](
component/mp-weixin-plugin.md
)
*
[
原生组件说明
](
component/native-component.md
)
<div
class=
"contact-box"
>
<a
href=
"//ask.dcloud.net.cn/explore/"
target=
"_blank"
class=
"contact-item"
>
...
...
docs/component/barcode.md
浏览文件 @
96b900c3
...
...
@@ -54,10 +54,10 @@ sound|扫码成功时播放的提示音|String|否|可取值: "none" - 不播
:--|:--|:--|:--|
无|无| 无| 结束对摄像头获取图片数据进行条码识别操作,同时关闭摄像头的视频捕获。 结束后可调用start方法重新开始识别。
##### setFlash(
object
)
##### setFlash(
boolean
)
> 操作闪光灯
######
Object object
######
Boolean boolean
类型 |必填|说明|备注
:--|:--|:--|:--|
Boolean| 是| 是否开启闪光灯|可取值true或false,true表示打开闪光灯,false表示关闭闪光灯。
...
...
docs/component/button.md
浏览文件 @
96b900c3
...
...
@@ -10,7 +10,7 @@
|type|String|default|按钮的样式类型|||
|plain|Boolean|false|按钮是否镂空,背景色透明|||
|disabled|Boolean|false|是否禁用|||
|loading|Boolean|false|名称前是否带 loading 图标|||
|loading|Boolean|false|名称前是否带 loading 图标||
app-nvue 平台,在 ios 上为雪花,Android上为圆圈
|
|form-type|String||用于
``<form>``
组件,点击分别会触发
``<form>``
组件的 submit/reset 事件|||
|open-type|String||开放能力|||
|hover-class|String|button-hover|指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果|||
...
...
docs/component/canvas.md
浏览文件 @
96b900c3
...
...
@@ -20,6 +20,7 @@
1.
canvas 标签默认宽度 300px、高度 225px。
2.
同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。
3.
canvas在微信、百度小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,
[
参考
](
/component/native-component
)
。canvas在App端vue页面不是原生组件,目前App端nvue还不支持canvas组件。
-
App-nvue 暂不支持 canvas 组件
**示例:**
...
...
@@ -63,7 +64,7 @@ export default {
}
```
相关 api:
[
uni.createCanvasContext
](
api/
ui/canvas?id=createcanvasc
ontext
)
相关 api:
[
uni.createCanvasContext
](
api/
canvas/createCanvasC
ontext
)
**扩展阅读**
...
...
docs/component/input.md
浏览文件 @
96b900c3
...
...
@@ -14,16 +14,16 @@
|placeholder-class|String|"input-placeholder"|指定 placeholder 的样式类||
|disabled|Boolean|false|是否禁用||
|maxlength|Number|140|最大输入长度,设置为 -1 的时候不限制最大长度||
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|
微信小程序、百度
小程序|
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|
5+App、微信小程序、百度小程序、QQ
小程序|
|focus|Boolean|false|获取焦点。在 H5 平台聚焦后软键盘是否跟随弹出,取决于当前浏览器本身的规范(策略)。||
|confirm-type|String|done|设置键盘右下角按钮的文字,仅在 type="text" 时生效。||
|confirm-hold|Boolean|false|点击键盘右下角按钮时是否保持键盘不收起|
App、微信小程序、支付宝小程序、百度
小程序|
|confirm-hold|Boolean|false|点击键盘右下角按钮时是否保持键盘不收起|
5+App、微信小程序、支付宝小程序、百度小程序、QQ
小程序|
|cursor|Number||指定focus时的光标位置||
|selection-start|Number|-1|光标起始位置,自动聚集时有效,需与selection-end搭配使用||
|selection-end|Number|-1|光标结束位置,自动聚集时有效,需与selection-start搭配使用||
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|
微信小程序、百度
小程序|
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|
5+App、微信小程序、百度小程序、QQ
小程序|
|@input|EventHandle||当键盘输入时,触发input事件,event.detail = {value}|差异见下方 Tips|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|
微信小程序(基础库 1.9.90 起)
|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|
仅微信小程序、5+App(HBuilderX 2.0+
[
nvue uni-app模式
](
http://ask.dcloud.net.cn/article/36074
)
) 、QQ小程序支持 height
|
|@blur|EventHandle||输入框失去焦点时触发,event.detail = {value: value}||
|@confirm|EventHandle||点击完成按钮时触发,event.detail = {value: value}|
|
...
...
docs/component/label.md
浏览文件 @
96b900c3
...
...
@@ -12,6 +12,9 @@ for优先级高于内部控件,内部有多个控件的时候默认触发第
|:-|:-|:-|
|for|String|绑定控件的 id|
**注:**
-
app-nvue平台 暂不支持for属性
**示例**
```
html
...
...
docs/component/map.md
浏览文件 @
96b900c3
...
...
@@ -19,9 +19,9 @@
|polyline|Array||路线||
|circles|Array||圆||
|controls|Array||控件||
|include-points|Array||缩放视野以包含所有给定的坐标点|微信小程序、H5、百度小程序、支付宝小程序|
|include-points|Array||缩放视野以包含所有给定的坐标点|
App-nvue 2.1.5+、
微信小程序、H5、百度小程序、支付宝小程序|
|show-location|Boolean||显示带有方向的当前定位点|微信小程序、H5、百度小程序、支付宝小程序|
|@markertap|EventHandle||点击标记点时触发||
|@markertap|EventHandle||点击标记点时触发|
App平台需要指定 marker 对象属性 id
|
|@callouttap|EventHandle||点击标记点对应的气泡时触发||
|@controltap|EventHandle||点击控件时触发||
|@regionchange|EventHandle||视野发生变化时触发|微信小程序、H5、百度小程序、支付宝小程序|
...
...
@@ -42,44 +42,44 @@
|id|标记点id|Number|是|marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。||
|latitude|纬度|Number|是|浮点数,范围 -90 ~ 90||
|longitude|经度|Number|是|浮点数,范围 -180 ~ 180||
|title|标注点名|String|否|
|
微信小程序、H5、支付宝小程序、百度小程序|
|title|标注点名|String|否|
点击时显示,callout存在时将被忽略|App-nvue 2.1.5+、
微信小程序、H5、支付宝小程序、百度小程序|
|iconPath|显示的图标|String|是|项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径||
|rotate|旋转角度|Number|否|顺时针旋转的角度,范围 0 ~ 360,默认为 0|微信小程序、支付宝小程序、百度小程序|
|alpha|标注的透明度|Number|否|默认1,无透明,范围 0 ~ 1|微信小程序、支付宝小程序、百度小程序|
|width|标注图标宽度|Number|否|默认为图片实际宽度|微信小程序、H5、支付宝小程序、百度小程序|
|height|标注图标高度|Number|否|默认为图片实际高度|微信小程序、H5、支付宝小程序、百度小程序|
|callout|自定义标记点上方的气泡窗口|Object|否|支持的属性见下表,可识别换行符。||
|label|为标记点旁边增加标签|Object|否|支持的属性见下表,可识别换行符。|微信小程序、H5、5+APP、百度小程序|
|anchor|经纬度在标注图标的锚点,默认底边中点|Object|否|{x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点|微信小程序、H5、百度小程序|
|rotate|旋转角度|Number|否|顺时针旋转的角度,范围 0 ~ 360,默认为 0|
App-nvue 2.1.5+、
微信小程序、支付宝小程序、百度小程序|
|alpha|标注的透明度|Number|否|默认1,无透明,范围 0 ~ 1|
App-nvue 2.1.5+、
微信小程序、支付宝小程序、百度小程序|
|width|标注图标宽度|Number|否|默认为图片实际宽度|
App-nvue 2.1.5+、
微信小程序、H5、支付宝小程序、百度小程序|
|height|标注图标高度|Number|否|默认为图片实际高度|
App-nvue 2.1.5+、
微信小程序、H5、支付宝小程序、百度小程序|
|callout|自定义标记点上方的气泡窗口|Object|否|支持的属性见下表,可识别换行符。|
App-nvue 2.1.5+
|
|label|为标记点旁边增加标签|Object|否|支持的属性见下表,可识别换行符。|
App-nvue 2.1.5+、
微信小程序、H5、5+APP、百度小程序|
|anchor|经纬度在标注图标的锚点,默认底边中点|Object|否|{x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点|
App-nvue 2.1.5+、
微信小程序、H5、百度小程序|
**marker 上的气泡 callout**
|属性|说明|类型|平台差异说明|
|:-|:-|:-|:-|
|content|文本|String||
|color|文本颜色|String|微信小程序、H5、百度小程序|
|fontSize|文字大小|Number|微信小程序、H5、百度小程序|
|borderRadius|callout边框圆角|Number|微信小程序、H5、百度小程序|
|bgColor|背景色|String|微信小程序、H5、百度小程序|
|padding|文本边缘留白|Number|微信小程序、H5、百度小程序|
|color|文本颜色|String|
App-nvue 2.1.5+、
微信小程序、H5、百度小程序|
|fontSize|文字大小|Number|
App-nvue 2.1.5+、
微信小程序、H5、百度小程序|
|borderRadius|callout边框圆角|Number|
App-nvue 2.1.5+、
微信小程序、H5、百度小程序|
|bgColor|背景色|String|
App-nvue 2.1.5+、
微信小程序、H5、百度小程序|
|padding|文本边缘留白|Number|
App-nvue 2.1.5+、
微信小程序、H5、百度小程序|
|display|'BYCLICK':点击显示; 'ALWAYS':常显|String|微信小程序、H5、百度小程序|
|textAlign|文本对齐方式。有效值: left, right, center|String|微信小程序、百度小程序|
|textAlign|文本对齐方式。有效值: left, right, center|String|
App-nvue 2.1.5+、
微信小程序、百度小程序|
**marker 上的
气泡
label**
**marker 上的
标签
label**
|属性|说明|类型|平台差异说明|
|:-|:-|:-|:-|
|content|文本|String||
|color|文本颜色|String|微信小程序、H5、百度小程序|
|fontSize|文字大小|Number|微信小程序、H5、百度小程序|
|x|label的坐标,原点是 marker 对应的经纬度|Number|微信小程序、H5、百度小程序|
|y|label的坐标,原点是 marker 对应的经纬度|Number|微信小程序、H5、百度小程序|
|borderWidth|边框宽度|Number|微信小程序、百度小程序|
|borderColor|边框颜色|String|微信小程序、百度小程序|
|borderRadius|边框圆角|Number|微信小程序、百度小程序|
|bgColor|背景色|String|微信小程序、百度小程序|
|padding|文本边缘留白|Number|微信小程序、百度小程序|
|textAlign|文本对齐方式。有效值: left, right, center|String|微信小程序、百度小程序|
|color|文本颜色|String|
App-nvue 2.1.5+、
微信小程序、H5、百度小程序|
|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+、
微信小程序、百度小程序|
|borderRadius|边框圆角|Number|
App-nvue 2.1.5+、
微信小程序、百度小程序|
|bgColor|背景色|String|
App-nvue 2.1.5+、
微信小程序、百度小程序|
|padding|文本边缘留白|Number|
App-nvue 2.1.5+、
微信小程序、百度小程序|
|textAlign|文本对齐方式。有效值: left, right, center|String|
App-nvue 2.1.5+、
微信小程序、百度小程序|
**polyline**
...
...
@@ -90,11 +90,11 @@
|points|经纬度数组|Array|是|[{latitude: 0, longitude: 0}]||
|color|线的颜色|String|否|8位十六进制表示,后两位表示alpha值,如:#0000AA||
|width|线的宽度|Number|否|||
|dottedLine|是否虚线|Boolean|否|默认false|微信小程序、H5、百度小程序、支付宝小程序|
|arrowLine|带箭头的线|Boolean|否|默认false,微信小程序开发者工具暂不支持该属性|微信小程序、百度小程序|
|arrowIconPath|更换箭头图标|String|否|在arrowLine为true时生效|微信小程序、百度小程序|
|borderColor|线的边框颜色|String|否||微信小程序、H5、百度小程序|
|borderWidth|线的厚度|Number|否||微信小程序、H5、百度小程序|
|dottedLine|是否虚线|Boolean|否|默认false|
App-nvue 2.1.5+、
微信小程序、H5、百度小程序、支付宝小程序|
|arrowLine|带箭头的线|Boolean|否|默认false,微信小程序开发者工具暂不支持该属性|
App-nvue 2.1.5+、
微信小程序、百度小程序|
|arrowIconPath|更换箭头图标|String|否|在arrowLine为true时生效|
App-nvue 2.1.5+、
微信小程序、百度小程序|
|borderColor|线的边框颜色|String|否||
App-nvue 2.1.5+、
微信小程序、H5、百度小程序|
|borderWidth|线的厚度|Number|否||
App-nvue 2.1.5+、
微信小程序、H5、百度小程序|
**circles**
...
...
docs/component/movable-view.md
浏览文件 @
96b900c3
...
...
@@ -15,6 +15,7 @@
|scale-area|Boolean|false|当里面的 movable-view 设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个 movable-area|
**注意:movable-area 必须设置 width 和 height 属性,不设置默认为 10px**
-
movable-area app-nvue平台 暂不支持手势缩放
#### movable-view
...
...
docs/component/mp-weixin-plugin.md
0 → 100644
浏览文件 @
96b900c3
#### 配置微信小程序插件
#### 注意事项
*
正式开始使用微信小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件
*
要保证项目内微信小程序appid和申请插件的微信小程序appid一致插件才可使用
#### 引入插件代码包
使用插件之前开发者需要在
``manifest.json``
中的
``mp-weixin``
内声明使用的插件,具体配置参照所用插件的开发文档
**代码示例**
```
"plugins": {
"pluginName": {
"version": "1.0.0",
"provider": "wxidxxxxxxxxxxxxxxxx"
}
}
```
#### 在分包内引入插件代码包
如果插件只在(同一个插件不能被多个分包同时引用)一个分包用到,可以单独配置到分包中,这样插件不会随主包加载,开发者可以在
``pages.json``
的
[
subPackages
](
/collocation/pages?id=subpackages
)
中声明插件
**代码示例**
```
"subPackages": [{
"root": "pagesA",
"pages": [{
"path": "list/list"
}]
"plugins": {
"pluginName": {
"version": "1.0.0",
"provider": "wxidxxxxxxxxxxxxxxxx"
}
}
}]
```
**在分包内使用插件的限制**
*
仅能在这个分包内使用该插件;
*
同一个插件不能被多个分包同时引用;
*
不能从分包外的页面直接跳入分包内的插件页面,需要先跳入分包内的非插件页面、再跳入同一分包内的插件页面。
#### 在页面中使用
请参照
[
微信小程序-使用插件
](
https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html
)
#### 可能遇到的问题
*
某些插件可能会需要一些权限才能正常运行,请在
``manifest.json``
中的
``mp-weixin``
内配置
``permission``
[
详见
](
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission
)
*
微信开发工具提示 “插件版本不存在”,可能是插件开发文档示例代码中使用的版本已经不存在,请在声明插件处更改版本
docs/component/navigator.md
浏览文件 @
96b900c3
...
...
@@ -26,7 +26,9 @@
|reLaunch|对应 uni.reLaunch 的功能|头条小程序不支持|
|navigateBack|对应 uni.navigateBack 的功能|
|
**注:navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, ``<navigator>`` 的子节点背景色应为透明色。**
**注意**
-
navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;},
``<navigator>``
的子节点背景色应为透明色。
**
-
app-nvue 平台暂不支持
`<navigator>`
**示例**
...
...
docs/component/official-account
→
docs/component/official-account
.md
浏览文件 @
96b900c3
docs/component/picker-view.md
浏览文件 @
96b900c3
...
...
@@ -88,4 +88,5 @@ export default {
![
uniapp
](
https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/picker-view.png
)
**Tips**
微信小程序端,滚动时在iOS自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
\ No newline at end of file
-
微信小程序端,滚动时在iOS自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
-
app-nvue 暂不支持
``<picker-view>``
\ No newline at end of file
docs/component/picker.md
浏览文件 @
96b900c3
...
...
@@ -227,3 +227,4 @@ export default {
**注意**
-
在picker内容还在滚动时或滚动回弹动画还未结束时,点确定关闭弹出的picker,数据无法及时更新。需等待一下,或手动触停滚动再点确定。所有平台均如此
-
app-nvue 平台,mode 目前仅支持
``selector``
``time``
``date``
\ No newline at end of file
docs/component/rich-text.md
浏览文件 @
96b900c3
...
...
@@ -9,7 +9,11 @@
**注意**
支付宝小程序 nodes 属性只支持使用 Array 类型。如果需要支持 HTML String,则需要自己将 HTML String转化为 nodes 数组,可使用
[
html-parser
](
https://github.com/dcloudio/hello-uniapp/blob/master/common/html-parser.js
)
转换。
-
app-nvue 平台 nodes 属性只支持使用 Array 类型
-
支付宝小程序 nodes 属性只支持使用 Array 类型。
如果需要支持 HTML String,则需要自己将 HTML String转化为 nodes 数组,可使用
[
html-parser
](
https://github.com/dcloudio/hello-uniapp/blob/master/common/html-parser.js
)
转换。
支持默认事件,包括:click、touchstart、touchmove、touchcancel、touchend、longpress。
...
...
docs/component/scroll-view.md
浏览文件 @
96b900c3
...
...
@@ -15,6 +15,7 @@
|scroll-into-view |String | |值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 | |
|scroll-with-animation |Boolean |false |在设置滚动条位置时使用动画过渡 | |
|enable-back-to-top |Boolean |false |iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 |微信小程序 |
|show-scrollbar |Boolean |false |控制是否出现滚动条| App-nvue 2.1.5+ |
|@scrolltoupper |EventHandle| |滚动到顶部/左边,会触发 scrolltoupper 事件 | |
|@scrolltolower |EventHandle| |滚动到底部/右边,会触发 scrolltolower 事件 | |
|@scroll |EventHandle| |滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
|
...
...
docs/component/textarea.md
浏览文件 @
96b900c3
...
...
@@ -14,18 +14,18 @@
|maxlength|Number|140|最大输入长度,设置为 -1 的时候不限制最大长度||
|focus|Boolean|false|获取焦点||
|auto-height|Boolean|false|是否自动增高,设置auto-height时,style.height不生效||
|fixed|Boolean|false|如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true|微信小程序、百度小程序、头条小程序|
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|
微信小程序、百度小程序、头条
小程序|
|cursor|Number||指定focus时的光标位置|微信小程序、5+App、H5、百度小程序、头条小程序|
|show-confirm-bar|Boolean|true|是否显示键盘上方带有”完成“按钮那一栏|微信小程序、百度小程序|
|selection-start|Number|-1|光标起始位置,自动聚集时有效,需与selection-end搭配使用|微信小程序、5+App、H5、百度小程序、头条小程序|
|selection-end|Number|-1|光标结束位置,自动聚集时有效,需与selection-start搭配使用|微信小程序、5+App、H5、百度小程序、头条小程序|
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|
微信小程序、百度小程序|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|
微信小程序(基础库 1.9.90 起)
|
|fixed|Boolean|false|如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true|微信小程序、百度小程序、头条小程序
、QQ小程序
|
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|
5+App、微信小程序、百度小程序、头条小程序、QQ
小程序|
|cursor|Number||指定focus时的光标位置|微信小程序、5+App、H5、百度小程序、头条小程序
、QQ小程序
|
|show-confirm-bar|Boolean|true|是否显示键盘上方带有”完成“按钮那一栏|微信小程序、百度小程序
、QQ小程序
|
|selection-start|Number|-1|光标起始位置,自动聚集时有效,需与selection-end搭配使用|微信小程序、5+App、H5、百度小程序、头条小程序
、QQ小程序
|
|selection-end|Number|-1|光标结束位置,自动聚集时有效,需与selection-start搭配使用|微信小程序、5+App、H5、百度小程序、头条小程序
、QQ小程序
|
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|
5+App、微信小程序、百度小程序、QQ小程序|
|@focus|EventHandle||输入框聚焦时触发,event.detail = { value, height },height 为键盘高度|
仅微信小程序、5+App(HBuilderX 2.0+
[
nvue uni-app模式
](
http://ask.dcloud.net.cn/article/36074
)
) 、QQ小程序支持 height
|
|@blur|EventHandle||输入框失去焦点时触发,event.detail = {value, cursor}||
|@linechange|EventHandle||输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}|头条小程序不支持|
|@input|EventHandle||当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上||
|@confirm|EventHandle||点击完成时, 触发 confirm 事件,event.detail = {value: value}|微信小程序、百度小程序|
|@confirm|EventHandle||点击完成时, 触发 confirm 事件,event.detail = {value: value}|微信小程序、百度小程序
、QQ小程序
|
**示例**
...
...
docs/ecosystem.md
浏览文件 @
96b900c3
...
...
@@ -3,7 +3,7 @@
- [uni-app插件市场](https://ext.dcloud.net.cn),支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型,并为插件作者提供了荣誉+经济回报的双激励模式,打造最强大的开放生态。
- 兼容微信小程序 JS SDK,丰富的小程序生态内容可直接引入```uni-app```,并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK,由于大量SDK厂商均原厂维护小程序SDK,使得```uni-app```成为跨平台开发框架里生态最丰富的平台[参考](htt
sp://ask.dcloud.net.cn/article/35070)
- 兼容微信小程序 JS SDK,丰富的小程序生态内容可直接引入```uni-app```,并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK,由于大量SDK厂商均原厂维护小程序SDK,使得```uni-app```成为跨平台开发框架里生态最丰富的平台[参考](htt
ps://ask.dcloud.net.cn/article/35070)
- 兼容微信小程序自定义组件,并且App侧通用,[参考](https://uniapp.dcloud.io/frame?id=小程序组件支持)
...
...
docs/performance.md
浏览文件 @
96b900c3
...
...
@@ -2,9 +2,8 @@
``uni-app``
在 App 端或小程序端运行时,从架构上分为逻辑层和视图层两个部分。逻辑层负责储存数据和执行业务逻辑,视图层负责页面渲染。
目前,视图层以 WebView 作为渲染载体进行渲染,以 evaluateJavascript 的方式在视图层和逻辑层进行数据通讯,evaluateJavascript 通讯是异步操作,所以数据到达视图层不是实时
的。
页面加载时,联网和逻辑运算在逻辑层,然后会传递数据给视图层渲染。这种通信有损耗。同样,在视图层操作时,比如拖动页面,要实时传递事件给逻辑层接收,也是有损耗
的。
数据通讯时,框架会将要传递的数据转换为字符串进行传递,然后将字符串接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到逻辑层和视图层,此操作意味着数据的大小会影响性能。
#### 优化建议
...
...
@@ -16,7 +15,7 @@
在App端,除了上述好处,自定义组件模式还新增了一个独立的js引擎,加快启动速度、减少js阻塞。
之前的非自定义组件模式已经不再推荐,
请尽快升级你的应用
。
之前的非自定义组件模式已经不再推荐,
如果你的应用还是非自定义组模式,请尽快升级
。
**避免使用大图**
...
...
@@ -28,9 +27,15 @@
在
``uni-app``
中,定义在 data 里面的数据每次变化时都会通知视图层重新渲染页面。 所以如果不是视图所需要的变量,可以不定义在 data 中,可在外部定义变量或直接挂载在vue实例上,以避免造成资源浪费。
**长列表**
-
长列表中如果每个item有一个点赞按钮,点击后点赞数字+1,此时点赞组件必须是一个单独引用的组件,才能做到差量数据更新。否则会造成整个列表数据重载。(要求自定义组件模式)
-
长列表中每个item并不一定需要做成组件,取决于你的业务中是否需要差量更新某一行item的数据,如没有此类需求则不应该引入大量组件。(点击item后背景变色,属于css调整,没有更新data数据和渲染,不涉及这个问题)
-
app端nvue的长列表应该使用list组件,有自动的渲染资源回收机制。
-
如需要左右滑动的长列表,请在HBuilderX新建uni-app项目选新闻模板,那是一个标杆实现。自己用swiper和scroll-view做很容易引发性能问题。
**减少一次性渲染的节点数量**
页面初始化时,逻辑层如果一次性向视图层传递很大的数据,使视图层一次性渲染大量节点,可能造成通讯变慢、页面切换卡顿,所以建议以局部更新页面的方式渲染页面。如:服务端返回100条数据,可进行分批加载,一次加载
2
0条,500ms 后进行下一次加载。
页面初始化时,逻辑层如果一次性向视图层传递很大的数据,使视图层一次性渲染大量节点,可能造成通讯变慢、页面切换卡顿,所以建议以局部更新页面的方式渲染页面。如:服务端返回100条数据,可进行分批加载,一次加载
5
0条,500ms 后进行下一次加载。
**减少节点嵌套层级**
...
...
@@ -41,15 +46,16 @@
*
减少 scroll-view 组件的 scroll 事件监听,当监听 scroll-view 的滚动事件时,视图层会频繁的向逻辑层发送数据;
*
监听 scroll-view 组件的滚动事件时,不要实时的改变 scroll-top/scroll-left 属性,因为监听滚动时,视图层向逻辑层通讯,改变 scroll-top/scroll-left 时,逻辑层又向视图层通讯,这样就可能造成通讯卡顿。
*
注意 onPageScroll 的使用,onPageScroll 进行监听时,视图层会频繁的向逻辑层发送数据;
*
多使用css动画,而不是通过js的定时器操作界面做动画
**优化页面切换动画**
*
页面初始化时若存在大量图片渲染和大量数据通讯,很有可能造成页面切换卡顿、掉帧。建议延时100ms~300ms渲染图片,分批进行数据通讯,以减少一次性渲染的节点数量。
*
App端动画效果可以
设置,
popin/popout的双窗体联动挤压动画效果对资源的消耗更大,如果动画期间页面里在执行耗时的js,可能会造成动画掉帧。此时可以使用消耗资源更小的动画效果,比如slide-in-right/slide-out-right。
*
App端动画效果可以
自定义。
popin/popout的双窗体联动挤压动画效果对资源的消耗更大,如果动画期间页面里在执行耗时的js,可能会造成动画掉帧。此时可以使用消耗资源更小的动画效果,比如slide-in-right/slide-out-right。
**优化样式渲染速度**
将样式写在
``App.vue``
里,可以加速页面样式渲染速度。
``App.vue``
里面的样式是全局样式,每次新开页面会优先加载
``App.vue``
里面的样式,然后加载普通 vue 页面的样式。尤其是背景为深色的页面,如果不能及时设置样式,会造成进入转场动画时闪烁
。
如果页面背景是深色,在vue页面中可能会发生新窗体刚开始动画时是灰白色背景,动画结束时才变为深色背景,造成闪屏。这是因为webview的背景生效太慢的问题。此时需将样式写在
``App.vue``
里,可以加速页面样式渲染速度。
``App.vue``
里面的样式是全局样式,每次新开页面会优先加载
``App.vue``
里面的样式,然后加载普通 vue 页面的样式。另外nvue页面不存在此问题,也可以更改为nvue页面
。
**使用 nvue 代替 vue**
...
...
@@ -58,11 +64,14 @@
**优化App启动速度的注意**
*
工程代码越多,包括背景图和本地字体文件越大,对App的启动速度有影响,应注意控制体积。
<image>
组件引用的前景图不影响性能。
*
App端的 splash 关闭有白屏检测机制,如果首页一直白屏或首页本身就是一个空的中转页面,可能会造成 splash 10秒才关闭,可参考此文解决
[
http://ask.dcloud.net.cn/article/35565
](
http://ask.dcloud.net.cn/article/35565
)
*
App端使用自定义组件模式的话,首页为nvue页面可比vue页面大幅提升启动速度,nvue页面一般2、3秒即可完成启动。
*
App端的 splash 关闭有白屏检测机制,如果首页一直白屏或首页本身就是一个空的中转页面,可能会造成 splash 10秒才关闭,可参考此文解决
[
https://ask.dcloud.net.cn/article/35565
](
https://ask.dcloud.net.cn/article/35565
)
*
App端使用自定义组件模式时启动速度更快,首页为nvue页面时启动速度更快
*
App设置为纯nvue项目(manifest里设置app-plus下的renderer:"native"),这种项目的启动速度更快,2秒即可完成启动。因为它整个应用都使用原生渲染,不加载基于webview的那套框架。
**优化包体积**
*
uni-app发行到小程序时,自带引擎只有几十K,主要是一个定制过的vue.js核心库。如果使用了es6转es5、css对齐的功能,可能会增大代码体积,目前可以在cli中配置这些编译功能是否开启,后续在HBuilderX中也会提供配置。
*
uni-app的App端,因为自带了一个独立v8引擎和小程序框架,所以比HTML5Plus或mui等普通hybrid的App引擎体积要大。基础引擎约10M+。App还提供了扩展模块,比如地图、蓝牙等,打包时如不需要这些模块,可以裁剪掉,以缩小发行包体积。在 manifest.json-App模块权限 里可以选择。
*
uni-app的H5端,自带了vue.js、小程序ui库(如picker、switch等)、小程序的对齐js api,目前包体积比较大。下版会提供裁剪方案,按需加载组件和API。
\ No newline at end of file
*
uni-app发行到小程序时,自带引擎只有几十K,主要是一个定制过的vue.js核心库。如果使用了es6转es5、css对齐的功能,可能会增大代码体积,可以配置这些编译功能是否开启。
*
uni-app的H5端,自带了vue.js、vue-rooter、小程序ui库(如picker、switch等)、小程序的对齐js api。默认包体积约500k,服务器部署gzip后162k。可以在manifest配置
[
摇树优化
](
https://uniapp.dcloud.io/collocation/manifest?id=optimization
)
,按需使用组件和API。进行摇树优化后,且gzip后,框架体积仅92k,只是相当于vue.js和vue-root及部分es6 polyfill库的体积。
*
uni-app的App端,因为自带了一个独立v8引擎和小程序框架,所以比HTML5Plus或mui等普通hybrid的App引擎体积要大。Android基础引擎约15M。App还提供了扩展模块,比如地图、蓝牙等,打包时如不需要这些模块,可以裁剪掉,以缩小发行包体积。在 manifest.json-App模块权限 里可以选择。
*
App端支持如果选择纯nvue项目(manifest里设置app-plus下的renderer:"native"),包体积可以进一步减少2M左右。
*
uni-app的App端默认包含arm32和x86两个cpu的支持so库。这会增大包体积。如果你在意体积控制,可以在manifest里去掉x86 cpu的支持(manifest可视化界面-App其他设置里选择cpu),这可以减少包体积到9M。但代价是不支持intel的cpu了。一般手机都是arm的,仅个别少见的Android pad使用x86 cpu。另外as的模拟器里如果选择x86时也无法运行这种apk。
src/core/view/components/input/index.vue
浏览文件 @
96b900c3
...
...
@@ -275,7 +275,8 @@ uni-input[hidden] {
text-decoration
:
inherit
;
}
.uni-input-wrapper
{
.uni-input-wrapper
,
.uni-input-form
{
display
:
block
;
position
:
relative
;
width
:
100%
;
...
...
src/platforms/mp-toutiao/service/api/protocols.js
浏览文件 @
96b900c3
...
...
@@ -2,22 +2,10 @@ import previewImage from '../../../mp-weixin/helpers/normalize-preview-image'
// 不支持的 API 列表
const
todos
=
[
'
hideKeyboard
'
,
'
onSocketOpen
'
,
'
onSocketError
'
,
'
sendSocketMessage
'
,
'
onSocketMessage
'
,
'
closeSocket
'
,
'
onSocketClose
'
,
'
getImageInfo
'
,
'
getBackgroundAudioManager
'
,
'
createVideoContext
'
,
'
createCameraContext
'
,
'
createLivePlayerContext
'
,
'
getSavedFileList
'
,
'
getSavedFileInfo
'
,
'
removeSavedFile
'
,
'
getFileInfo
'
,
'
openDocument
'
,
'
chooseLocation
'
,
'
createMapContext
'
,
...
...
@@ -66,7 +54,6 @@ const todos = [
'
hideTabBarRedDot
'
,
'
setBackgroundColor
'
,
'
setBackgroundTextStyle
'
,
'
createIntersectionObserver
'
,
'
chooseInvoiceTitle
'
,
'
navigateToMiniProgram
'
,
'
navigateBackMiniProgram
'
,
...
...
@@ -77,14 +64,30 @@ const todos = [
'
getTemplateList
'
,
'
sendTemplateMessage
'
,
'
setEnableDebug
'
,
'
getExtConfig
'
,
'
getExtConfigSync
'
,
'
onWindowResize
'
,
'
offWindowResize
'
'
offWindowResize
'
,
'
compressImage
'
,
'
createOffscreenCanvas
'
]
// 存在兼容性的 API 列表
const
canIUses
=
[]
// 头条小程序不支持canIUses
const
canIUses
=
[
// 'createIntersectionObserver',
// 'getSavedFileList',
// 'removeSavedFile',
// 'hideKeyboard',
// 'getImageInfo',
// 'createVideoContext',
// 'onSocketOpen',
// 'onSocketError',
// 'sendSocketMessage',
// 'onSocketMessage',
// 'closeSocket',
// 'onSocketClose',
// 'getExtConfig',
// 'getExtConfigSync',
]
// 需要做转换的 API 列表
const
protocols
=
{
...
...
@@ -101,7 +104,7 @@ const protocols = {
},
chooseVideo
:
{
args
:
{
maxDuration
:
false
camera
:
false
}
},
scanCode
:
{
...
...
@@ -150,8 +153,15 @@ const protocols = {
}
},
requestPayment
:
{
args
:
{
orderInfo
:
'
data
'
}
},
getFileInfo
:
{
args
:
{
digestAlgorithm
:
false
}
}
}
export
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录