diff --git a/README.md b/README.md index b1b79d2a3ec58f6823bb73ad2b0c3a82bc6a9825..3a95f92819d4a5177c46d566077ffc7de463e80a 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ `uni-app` 是一个使用 `Vue.js` 开发小程序、H5、App的统一前端框架。官网地址：[https://uniapp.dcloud.io](https://uniapp.dcloud.io) -开发者使用 `Vue` 语法编写代码，`uni-app` 框架将其编译到 小程序（微信/支付宝/百度/字节跳动/QQ）、App（iOS/Android）、H5等多个平台，保证其正确运行并达到优秀体验。 +开发者使用 `Vue` 语法编写代码，`uni-app` 框架将其编译到 小程序（微信/支付宝/百度/字节跳动/QQ/钉钉）、App（iOS/Android）、H5等多个平台，保证其正确运行并达到优秀体验。 # uni-app的特点 @@ -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) diff --git a/docs/README.md b/docs/README.md index 0936ad2d69a1794d79897b0abfdc34bf45cef52d..6c4845d5fd936eb39a713a6b927266b7f622f8ae 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,5 +1,5 @@ -```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) diff --git a/docs/api/file/file.md b/docs/api/file/file.md index e9b64ac716c630603423e2eb2338053dbf604d22..b5006944e5ea1881e1d47446f93ebc470db356fc 100644 --- a/docs/api/file/file.md +++ b/docs/api/file/file.md @@ -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 参数说明：** diff --git a/docs/api/key.md b/docs/api/key.md index 68deba7c57b812791e3a73e3c71237203809b778..72799fe761ceca8cfec6dd3e9356cf2c373ae801 100644 --- a/docs/api/key.md +++ b/docs/api/key.md @@ -5,6 +5,6 @@ |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|x|x| +|√|√|√|√|x|√| 隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。 diff --git a/docs/api/lifetime.md b/docs/api/lifetime.md index 70dddc415bb7d38397fbcf2eee6c543d4f2fb86d..eed16deb550ac3022c10dfaab41428ff31522708 100644 --- a/docs/api/lifetime.md +++ b/docs/api/lifetime.md @@ -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=生命周期)。 diff --git a/docs/api/location/map.md b/docs/api/location/map.md index 95b46bcf0693320364a09f78a5f0c628a6d57d33..0fc0ce14bf7aa91a4dd62e1458daf9489ac13ce2 100644 --- a/docs/api/location/map.md +++ b/docs/api/location/map.md @@ -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| diff --git a/docs/api/media/image.md b/docs/api/media/image.md index 291e834d3a1cb5006084888fb3c0f04f876bbd35..f7fe4aebdfe56d00c8767cb12cdb1318c6b11c8e 100644 --- a/docs/api/media/image.md +++ b/docs/api/media/image.md @@ -130,7 +130,7 @@ uni.chooseImage({ |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|√|√|x| +|√|√|√|√|√|√| **OBJECT 参数说明** diff --git a/docs/api/media/video-context.md b/docs/api/media/video-context.md index 40fd643457b3bf6f20a1a8d7778edae508d9e2aa..303400fdfae13b1d5f0f9aacd62e62e4c8e18c8d 100644 --- a/docs/api/media/video-context.md +++ b/docs/api/media/video-context.md @@ -5,7 +5,7 @@ |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|x|√|x| +|√|√|√|x|√|√| **videoContext 对象的方法列表** diff --git a/docs/api/media/video.md b/docs/api/media/video.md index c7ece076b2bd37a27841b8eccb4fa583f6ccc71a..9426a12147abb05e3e6500bd34492f4784338893 100644 --- a/docs/api/media/video.md +++ b/docs/api/media/video.md @@ -5,7 +5,7 @@ |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|x|√|√| +|√|√|√|√|√|√| **OBJECT 参数说明** diff --git a/docs/api/other/get-extconfig.md b/docs/api/other/get-extconfig.md index c714dd58a76bcfb3f0affceb47cfe432a82f01c9..5a46ff914bb3a31584de52e068c682b6637d1594 100644 --- a/docs/api/other/get-extconfig.md +++ b/docs/api/other/get-extconfig.md @@ -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)** diff --git a/docs/api/other/setting.md b/docs/api/other/setting.md index 168c1ba24e8b9bcdc9fac6f17231d6f9d45d8e72..f64d072f468eb51a45b217bb6fd453c6140612c7 100644 --- a/docs/api/other/setting.md +++ b/docs/api/other/setting.md @@ -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|√|√|√| |属性|类型|必填|说明| |---|---|---|---|---| diff --git a/docs/api/other/update.md b/docs/api/other/update.md index dbf50414fc2bc42d6016fab9185f916fab1b81e4..71ae914fa7a32d77dddf8aa663641521aa579755 100644 --- a/docs/api/other/update.md +++ b/docs/api/other/update.md @@ -10,7 +10,7 @@ App的更新不使用本API，另见文档： |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |:-:|:-:|:-:|:-:|:-:|:-:| -|x|x|√|x|√|√| +|x|x|√|√|√|√| **updateManager 对象的方法列表：** diff --git a/docs/api/request/request.md b/docs/api/request/request.md index d50cef0ca08041649a864fb190d5d1a720f24b0a..61bc20d8e265ec562db99c9e08883e07cc9ac675 100644 --- a/docs/api/request/request.md +++ b/docs/api/request/request.md @@ -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 diff --git a/docs/api/request/websocket.md b/docs/api/request/websocket.md index 90d61afae550950a28d764be51d0351accff183a..2c464fd48c97f72ce1193515c0ed721750df7747 100644 --- a/docs/api/request/websocket.md +++ b/docs/api/request/websocket.md @@ -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({ diff --git a/docs/api/ui/intersection-observer.md b/docs/api/ui/intersection-observer.md index ab467bb48376ac87ce8d652765bc08e59cca6c80..c6e515d7ba052350c83e26f01556c4ee0abf20aa 100644 --- a/docs/api/ui/intersection-observer.md +++ b/docs/api/ui/intersection-observer.md @@ -7,7 +7,7 @@ |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序| |:-:|:-:|:-:|:-:|:-:|:-:| -|√|HBuilderX 2.0.4+|√|x|√|x| +|√|HBuilderX 2.0.4+|√|√|√|√| **options 的可选参数为：** diff --git a/docs/case.md b/docs/case.md index 29da9b73ad2eebec51ad8d7c4e3380101986b5ec..615e5b6448875d767f92ac81a31577b5ea9f94f9 100644 --- a/docs/case.md +++ b/docs/case.md @@ -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) diff --git a/docs/collocation/manifest.md b/docs/collocation/manifest.md index aaee7f912270fe2010db90341f810d4c497b5949..6f44122b48c38677db6acccdbc4385b3779e235c 100644 --- a/docs/collocation/manifest.md +++ b/docs/collocation/manifest.md @@ -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** diff --git a/docs/collocation/package.md b/docs/collocation/package.md index 0d585d0b0bfff9ccbcfec5cc8aca34e7be4a86dc..4fbaaa4e2ba1ba5876679b8d8a229edf9b96b422 100644 --- a/docs/collocation/package.md +++ b/docs/collocation/package.md @@ -1,6 +1,6 @@ 通过在`package.json`文件中增加`uni-app`扩展节点，可实现自定义条件编译平台（如钉钉小程序、微信服务号等平台）。 -package.json扩展配置用法： +package.json扩展配置用法（拷贝代码记得去掉注释！）： ```json { diff --git a/docs/collocation/vue-config.md b/docs/collocation/vue-config.md index 3d4d19c8fa71aa60a8df3cf64892af8c73bdd590..792948ce888ce5385ccb1d15e58941b565d656c3 100644 --- a/docs/collocation/vue-config.md +++ b/docs/collocation/vue-config.md @@ -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'] + }) + ] + } +} +``` + diff --git a/docs/component/_sidebar.md b/docs/component/_sidebar.md index e73be05c92e401619fba9113e529bb2d05a3a1ec..5c7f8e60795fe9b9681149e5b6573d7c3f559712 100644 --- a/docs/component/_sidebar.md +++ b/docs/component/_sidebar.md @@ -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)
diff --git a/docs/component/barcode.md b/docs/component/barcode.md index 7646ee1b8dd31cb0cb83136037e1c5f19eaace12..437e1761fd653a2503430126c33c6be57c82fbec 100644 --- a/docs/component/barcode.md +++ b/docs/component/barcode.md @@ -54,10 +54,10 @@ sound|扫码成功时播放的提示音|String|否|可取值： "none" - 不播 :--|:--|:--|:--| 无|无| 无| 结束对摄像头获取图片数据进行条码识别操作，同时关闭摄像头的视频捕获。 结束后可调用start方法重新开始识别。 -##### setFlash(object) +##### setFlash(boolean) > 操作闪光灯 -###### Object object +###### Boolean boolean 类型 |必填|说明|备注 :--|:--|:--|:--| Boolean| 是| 是否开启闪光灯|可取值true或false，true表示打开闪光灯，false表示关闭闪光灯。 diff --git a/docs/component/button.md b/docs/component/button.md index 220701611e96c3c37e5e8b23dc45bb729f5c675b..69c505b60a9a037198658775b66ca417d13ff74c 100644 --- a/docs/component/button.md +++ b/docs/component/button.md @@ -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||用于 ``
`` 组件，点击分别会触发 ```` 组件的 submit/reset 事件||| |open-type|String||开放能力||| |hover-class|String|button-hover|指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果||| diff --git a/docs/component/canvas.md b/docs/component/canvas.md index c6f1804a9574ef1fbebf68b5c6d38a7e1ac8af24..978037b66d873f9970b88787395d968e8f33f768 100644 --- a/docs/component/canvas.md +++ b/docs/component/canvas.md @@ -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) **扩展阅读** diff --git a/docs/component/input.md b/docs/component/input.md index 79207663f427f72790f007a4101db7611296b911..4397cf4649caa423ee3d37bcec5b7e15223e7558 100644 --- a/docs/component/input.md +++ b/docs/component/input.md @@ -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}| | diff --git a/docs/component/label.md b/docs/component/label.md index b6fa70ff5435b3cbdd5f52997d63d718bd93eb59..98080870402e8296764717892412bf8302b6b540 100644 --- a/docs/component/label.md +++ b/docs/component/label.md @@ -10,7 +10,10 @@ for优先级高于内部控件，内部有多个控件的时候默认触发第 |属性名|类型|说明| |:-|:-|:-| -|for|String|绑定控件的 id| +|for|String|绑定控件的 id| + +**注：** +- app-nvue平台 暂不支持for属性 **示例** diff --git a/docs/component/map.md b/docs/component/map.md index d33ec6fa7fb5824c37f42dac83d31d16f317c004..8d828d46415a79099dbf3f8b7ac57e59a990ce57 100644 --- a/docs/component/map.md +++ b/docs/component/map.md @@ -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：应用中使用了 `` 组件，打包为原生应用时，提示缺少 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插件市场的原生插件开发教程 diff --git a/docs/component/movable-view.md b/docs/component/movable-view.md index 28312e4936e99888192e5d5680818cb699cbbbc4..7f6910d304aa212e118fa0a2d02a8a2a4084a869 100644 --- a/docs/component/movable-view.md +++ b/docs/component/movable-view.md @@ -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 diff --git a/docs/component/mp-weixin-plugin.md b/docs/component/mp-weixin-plugin.md new file mode 100644 index 0000000000000000000000000000000000000000..22337272bdb4eea822d728d204514e10107edbd6 --- /dev/null +++ b/docs/component/mp-weixin-plugin.md @@ -0,0 +1,61 @@ +#### 配置微信小程序插件 + +#### 注意事项 + +* 正式开始使用微信小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件 +* 要保证项目内微信小程序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) +* 微信开发工具提示 “插件版本不存在”，可能是插件开发文档示例代码中使用的版本已经不存在，请在声明插件处更改版本 + + + + diff --git a/docs/component/navigator.md b/docs/component/navigator.md index 6bfc4a65e2f3369e7f4e0d01b1b22a558714cfb6..55fecd4fd6c0c6dd8914be99c7c8108f8c45368e 100644 --- a/docs/component/navigator.md +++ b/docs/component/navigator.md @@ -26,7 +26,9 @@ |reLaunch|对应 uni.reLaunch 的功能|头条小程序不支持| |navigateBack|对应 uni.navigateBack 的功能| | -**注：navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, ```` 的子节点背景色应为透明色。** +**注意** +- navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, ```` 的子节点背景色应为透明色。** +- app-nvue 平台暂不支持 `` **示例** diff --git a/docs/component/official-account b/docs/component/official-account.md similarity index 97% rename from docs/component/official-account rename to docs/component/official-account.md index 32f6aca03fa0435740441780367970b5138f5f19..f75c8ccb3d4f7bcdd5520261404b6e337848fcdc 100644 --- a/docs/component/official-account +++ b/docs/component/official-account.md @@ -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) diff --git a/docs/component/picker-view.md b/docs/component/picker-view.md index a8788328bcb0385b10315daddfe7a6a4ab46b0f9..2eb305ff1947ad5e12ed1d740af71cbdcef66eb4 100644 --- a/docs/component/picker-view.md +++ b/docs/component/picker-view.md @@ -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 暂不支持 ```` \ No newline at end of file diff --git a/docs/component/picker.md b/docs/component/picker.md index 63517ef8ffb926de3a83d08c810a80b216422b22..f48a3d98f0361ed1976d98372641dadf00b4c9a8 100644 --- a/docs/component/picker.md +++ b/docs/component/picker.md @@ -227,3 +227,4 @@ export default { **注意** - 在picker内容还在滚动时或滚动回弹动画还未结束时，点确定关闭弹出的picker，数据无法及时更新。需等待一下，或手动触停滚动再点确定。所有平台均如此 +- app-nvue 平台，mode 目前仅支持 ``selector`` ``time`` ``date`` \ No newline at end of file diff --git a/docs/component/rich-text.md b/docs/component/rich-text.md index 5c6e95409530e36aadd33ca77996ba7dd5232d58..81af856165116e47f163da3c17c219f4bdd9d975 100644 --- a/docs/component/rich-text.md +++ b/docs/component/rich-text.md @@ -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。 diff --git a/docs/component/scroll-view.md b/docs/component/scroll-view.md index f8cf2095f1526f832c4713d5560ca1c17a581e46..83652e7f04d7055d526e3182121196a150df887b 100644 --- a/docs/component/scroll-view.md +++ b/docs/component/scroll-view.md @@ -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} | | diff --git a/docs/component/textarea.md b/docs/component/textarea.md index 81c3b895d0f273ca47c6cf8bd5a6b4be06e832b7..c6af89d50f50df61ccf4a0cffccec4a540333a5d 100644 --- a/docs/component/textarea.md +++ b/docs/component/textarea.md @@ -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小程序| **示例** diff --git a/docs/ecosystem.md b/docs/ecosystem.md index 5257a0bd9e382a0f10fd3da157fc84f71b5375cb..3b9b3199b548b99a416f5d61197c7ec3b4fd7363 100644 --- a/docs/ecosystem.md +++ b/docs/ecosystem.md @@ -1,20 +1,20 @@ - -```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) diff --git a/docs/performance.md b/docs/performance.md index 1be6a58ad90ee234f43226428e2d214d287248db..1c8d90efbbdf936c0f431d9ce06118b6d8e38d8d 100644 --- a/docs/performance.md +++ b/docs/performance.md @@ -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的启动速度有影响，应注意控制体积。组件引用的前景图不影响性能。 -* 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。 diff --git a/src/core/view/components/input/index.vue b/src/core/view/components/input/index.vue index a6d6ff9ad4ef48d3c670fa3e614b2267a118fba9..41042d2273168759e2cc1271c90444e778dde67a 100644 --- a/src/core/view/components/input/index.vue +++ b/src/core/view/components/input/index.vue @@ -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%; diff --git a/src/platforms/mp-toutiao/service/api/protocols.js b/src/platforms/mp-toutiao/service/api/protocols.js index 205e4dc1cb997280c4e408fcfa6434432d851938..63fa041e627e2a64666ea166c4a9fd225328d9c9 100644 --- a/src/platforms/mp-toutiao/service/api/protocols.js +++ b/src/platforms/mp-toutiao/service/api/protocols.js @@ -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 + } } }