未验证 提交 96b900c3 编写于 作者: C changan12 提交者: GitHub

Merge pull request #1 from dcloudio/master

sync from dcloudio
......@@ -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)
```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)
......
......@@ -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 参数说明:**
......
......@@ -5,6 +5,6 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|x|x|
|√|√|√|√|x||
隐藏已经显示的软键盘,如果软键盘没有显示则不做任何操作。
......@@ -24,10 +24,10 @@
|onShow|监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面|||
|onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发|||
|onHide|监听页面隐藏|||
|onUnload|监听页面卸载|||
|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|||
......@@ -36,7 +36,7 @@
|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|5+App、H5|1.6.0|
|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|5+App、H5|1.6.0|
|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|5+App、H5|1.6.0|
``onPageScroll`` 参数说明:
|属性|类型|说明|
......@@ -80,4 +80,4 @@ export default {
**注意**
- nvue 页面支持的生命周期参考:[nvue 生命周期介绍](/use-weex?id=生命周期)
\ No newline at end of file
- nvue 页面支持的生命周期参考:[nvue 生命周期介绍](/use-weex?id=生命周期)
......@@ -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|
......
......@@ -130,7 +130,7 @@ uni.chooseImage({
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|
|√|√|√|√|√||
**OBJECT 参数说明**
......
......@@ -5,7 +5,7 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|x|
|√|√|√|x|√||
**videoContext 对象的方法列表**
......
......@@ -5,7 +5,7 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|√|√|
|√|√|√||√|√|
**OBJECT 参数说明**
......
......@@ -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)**
......
......@@ -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|√||√|
|属性|类型|必填|说明|
|---|---|---|---|---|
......
......@@ -10,7 +10,7 @@ App的更新不使用本API,另见文档:
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|
|x|x|√||√|√|
**updateManager 对象的方法列表:**
......
......@@ -118,4 +118,5 @@ requestTask.abort();
- 按照 W3C 规范,H5 端无法获取 response header 中 Set-Cookie、Set-Cookie2 这2个字段,对于跨域请求,允许获取的 response header 字段只限于“simple response header”和“Access-Control-Expose-Headers”([详情](https://www.w3.org/TR/cors/#access-control-allow-credentials-response-header)
- [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并保证手机能连接电脑网络
\ No newline at end of file
- localhost、127.0.0.1等服务器地址,只能在电脑端运行,手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络
- debug 模式,安卓端暂时无法获取响应头,url中含有非法字符(如未编码为%20的空格)时会请求失败
\ No newline at end of file
......@@ -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({
......
......@@ -7,7 +7,7 @@
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|HBuilderX 2.0.4+|√|x|√|x|
|√|HBuilderX 2.0.4+|√|√|√|√|
**options 的可选参数为:**
......
......@@ -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)
......
......@@ -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|
|nvue|Object|nvue 页面布局初始配置,[详见](/collocation/manifest?id=nvue)|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**
......
通过在`package.json`文件中增加`uni-app`扩展节点,可实现自定义条件编译平台(如钉钉小程序、微信服务号等平台)。
package.json扩展配置用法:
package.json扩展配置用法(拷贝代码记得去掉注释!)
```json
{
......
......@@ -15,4 +15,44 @@ vue.config.js 是一个可选的配置文件,如果项目的根目录中存在
* runtimeCompiler 固定 false
* productionSourceMap 固定 false
* css.extract H5 平台固定 false,其他平台固定 true
* parallel 固定 false
\ No newline at end of file
* 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']
})
]
}
}
```
......@@ -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">
......
......@@ -54,10 +54,10 @@ sound|扫码成功时播放的提示音|String|否|可取值: "none" - 不播
:--|:--|:--|:--|
无|无| 无| 结束对摄像头获取图片数据进行条码识别操作,同时关闭摄像头的视频捕获。 结束后可调用start方法重新开始识别。
##### setFlash(object)
##### setFlash(boolean)
> 操作闪光灯
###### Object object
###### Boolean boolean
类型 |必填|说明|备注
:--|:--|:--|:--|
Boolean| 是| 是否开启闪光灯|可取值true或false,true表示打开闪光灯,false表示关闭闪光灯。
......
......@@ -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" 时,没有点击态效果|||
......
......@@ -19,7 +19,8 @@
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组件。
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=createcanvascontext)
相关 api:[uni.createCanvasContext](api/canvas/createCanvasContext)
**扩展阅读**
......
......@@ -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}|&nbsp;|
......
......@@ -10,7 +10,10 @@ for优先级高于内部控件,内部有多个控件的时候默认触发第
|属性名|类型|说明|
|:-|:-|:-|
|for|String|绑定控件的 id|
|for|String|绑定控件的 id|
**注:**
- app-nvue平台 暂不支持for属性
**示例**
......
......@@ -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**
......@@ -191,4 +191,4 @@ Q:应用中使用了 `<map>` 组件,打包为原生应用时,提示缺少
A:原生的地图,依赖第三方的 SDK,因此打包移动应用时,需要勾选相关的权限并填写 key 信息。详见:[http://ask.dcloud.net.cn/article/35090](http://ask.dcloud.net.cn/article/35090)
Q:国外应用想使用谷歌地图/google地图怎么办?
A:1. 可以在web-view下调用谷歌的web地图;2. 可以写一个原生插件封装谷歌原生地图,具体参考uni-app插件市场的原生插件开发教程
\ No newline at end of file
A:1. 可以在web-view下调用谷歌的web地图;2. 可以写一个原生插件封装谷歌原生地图,具体参考uni-app插件市场的原生插件开发教程
......@@ -14,7 +14,8 @@
|:-|:-|:-|:-|
|scale-area|Boolean|false|当里面的 movable-view 设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个 movable-area|
**注意:movable-area 必须设置 width 和 height 属性,不设置默认为 10px**
**注意:movable-area 必须设置 width 和 height 属性,不设置默认为 10px**
- movable-area app-nvue平台 暂不支持手势缩放
#### movable-view
......
#### 配置微信小程序插件
#### 注意事项
* 正式开始使用微信小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件
* 要保证项目内微信小程序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)
* 微信开发工具提示 “插件版本不存在”,可能是插件开发文档示例代码中使用的版本已经不存在,请在声明插件处更改版本
......@@ -26,7 +26,9 @@
|reLaunch|对应 uni.reLaunch 的功能|头条小程序不支持|
|navigateBack|对应 uni.navigateBack 的功能|&nbsp;|
**注: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>`
**示例**
......
......@@ -4,4 +4,4 @@
仅微信小程序平台支持,[规范详情](https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html)
支付宝平台另提供了`lifestyle`组件,可关注支付宝生活号,[规范详情](https://docs.alipay.com/mini/component/lifestyle)
\ No newline at end of file
支付宝平台另提供了`lifestyle`组件,可关注支付宝生活号,[规范详情](https://docs.alipay.com/mini/component/lifestyle)
......@@ -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
......@@ -227,3 +227,4 @@ export default {
**注意**
- 在picker内容还在滚动时或滚动回弹动画还未结束时,点确定关闭弹出的picker,数据无法及时更新。需等待一下,或手动触停滚动再点确定。所有平台均如此
- app-nvue 平台,mode 目前仅支持 ``selector`` ``time`` ``date``
\ No newline at end of file
......@@ -7,9 +7,13 @@
|:-|:-|:-|:-|
|nodes|Array / String|[]|节点列表 / HTML String|
**注意**
**注意**
- 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) 转换。
- 支付宝小程序 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。
......
......@@ -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} |&nbsp;|
......
......@@ -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小程序|
**示例**
......
```uni-app``` 积极拥抱前端社区,创建了开放、兼容的生态系统。
```uni-app``` 积极拥抱前端社区,创建了开放、兼容的生态系统。
- [uni-app插件市场](https://ext.dcloud.net.cn),支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型,并为插件作者提供了荣誉+经济回报的双激励模式,打造最强大的开放生态。
- 兼容微信小程序 JS SDK,丰富的小程序生态内容可直接引入```uni-app```,并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK,由于大量SDK厂商均原厂维护小程序SDK,使得```uni-app```成为跨平台开发框架里生态最丰富的平台[参考](httsp://ask.dcloud.net.cn/article/35070)
- 兼容微信小程序自定义组件,并且App侧通用,[参考](https://uniapp.dcloud.io/frame?id=小程序组件支持)
- 兼容微信小程序 JS SDK,丰富的小程序生态内容可直接引入```uni-app```,并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK,由于大量SDK厂商均原厂维护小程序SDK,使得```uni-app```成为跨平台开发框架里生态最丰富的平台[参考](https://ask.dcloud.net.cn/article/35070)
- 兼容微信小程序自定义组件,并且App侧通用,[参考](https://uniapp.dcloud.io/frame?id=小程序组件支持)
- 支持 NPM 包管理系统,[参考](https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81)
- 支持 NPM 包管理系统,[参考](https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81)
- 支持 mpvue 项目及组件,全端通用,[参考](https://ask.dcloud.net.cn/article/34945)
- 支持通用 HTML 和 js 库,虽然小程序不支持通用 HTML 和 DOM,但```uni-app```的web-view组件支持load本地 HTML,可以在需要时引入相关库(注意 HTML 的性能不如 vue 页面)。参考[https://uniapp.dcloud.io/component/web-view](https://uniapp.dcloud.io/component/web-view)
- 支持通用 HTML 和 js 库,虽然小程序不支持通用 HTML 和 DOM,但```uni-app```的web-view组件支持load本地 HTML,可以在需要时引入相关库(注意 HTML 的性能不如 vue 页面)。参考[https://uniapp.dcloud.io/component/web-view](https://uniapp.dcloud.io/component/web-view)
- App端支持和原生混合编码,支持 [Native.js](https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88) 直接调用原生api、支持 [第三方原生sdk](https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/104)
- App端支持和原生混合编码,支持 [Native.js](https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88) 直接调用原生api、支持 [第三方原生sdk](https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/104)
- App端支持 ```weex``` ,```uni-app``` 内置了 ```weex``` ,并在 ```weex``` 引擎中实现了常用的 uni api 的封装,比如 uni.request 可以在 ```weex``` 引擎中联网。这样的文件后缀名为 nvue。```uni-app```还支持 nvue 和 vue 复用 js 和 css。
- App端支持 ```weex``` ,```uni-app``` 内置了 ```weex``` ,并在 ```weex``` 引擎中实现了常用的 uni api 的封装,比如 uni.request 可以在 ```weex``` 引擎中联网。这样的文件后缀名为 nvue。```uni-app```还支持 nvue 和 vue 复用 js 和 css。
- App端支持原生插件云打包,[参考](https://ask.dcloud.net.cn/article/35412)
......@@ -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条数据,可进行分批加载,一次加载20条,500ms 后进行下一次加载。
页面初始化时,逻辑层如果一次性向视图层传递很大的数据,使视图层一次性渲染大量节点,可能造成通讯变慢、页面切换卡顿,所以建议以局部更新页面的方式渲染页面。如:服务端返回100条数据,可进行分批加载,一次加载50条,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。
......@@ -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%;
......
......@@ -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,7 +153,14 @@ const protocols = {
}
},
requestPayment: {
orderInfo: 'data'
args: {
orderInfo: 'data'
}
},
getFileInfo: {
args: {
digestAlgorithm: false
}
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册