diff --git a/README.md b/README.md index de288c5611aa37e2c1de5d97b3d4c35d7ecf199a..11924526df2f0cca8aaaa134618808c187691045 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,9 @@ # uni-app的特点 -- 开发者和案例更多：HBuilder装机量380万台，开发者社区月活百万，70多个QQ微信群承载10万人。案例众多（[详见](https://uniapp.dcloud.io/case)） +- 开发者和案例更多：HBuilder装机量380万台，开发者社区月活百万，70多个QQ微信群承载10万人。案例众多，uni统计月活2亿+（[详见](https://uniapp.dcloud.io/case)） - 性能更高（见[评测](https://juejin.im/post/5ca1736af265da30ae314248)） -- 更丰富的周边生态（见[插件市场](https://ext.dcloud.net.cn/)近千款插件） +- 更丰富的周边生态（见[插件市场](https://ext.dcloud.net.cn/)数千款插件） - 提供比小程序原生开发更好的开发体验和更高的工程化效率 - 跨端抹平度更完善，且各端特色发挥更灵活，可真正实现一套代码多端覆盖，无需各端多头维护升级 - 权威认可：被阿里小程序官方工具内置（[详见](https://docs.alipay.com/mini/ide/0.70-stable)） diff --git a/docs/README.md b/docs/README.md index b429ac37cc58e02fbc3df06e3ddfb55effb9a5a5..3c12b2e4c93b56ac28d297165eead09e377c80f4 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,9 +1,9 @@ ```uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 -即使不跨端，```uni-app```同时也是更好的小程序开发框架。详见[评测](https://ask.dcloud.net.cn/article/35947) +`DCloud`公司拥有380万开发者，几十万应用案例、8.5亿手机端用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（[详见](https://docs.alipay.com/mini/ide/0.70-stable)），腾讯课堂官方为uni-app录制培训课程（[详见](https://ask.dcloud.net.cn/article/35640)），开发者可以放心选择。 -`DCloud`公司拥有380万开发者，几十万应用案例、近千款插件、70+微信/qq群，并且被阿里小程序工具内置（[详见](https://docs.alipay.com/mini/ide/0.70-stable)），开发者可以放心选择。 +`uni-app`在手，做啥都不愁。即使不跨端，```uni-app```也是更好的小程序开发框架（[详见](https://ask.dcloud.net.cn/article/35947)）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

快速体验

@@ -74,7 +74,7 @@
开发者/案例数量更多
-

10万+案例、900+插件、70+微信/qq群、更高的百度指数

+

10万+案例、uni统计月活过2亿、70+微信/qq群、更高的百度指数

跨端完善度更高，真正落地的提高生产力

@@ -105,7 +105,7 @@
周边生态丰富
-

丰富的插件市场，各种轮子拿来即用。

+

插件市场数千款插件。

支持NPM、支持小程序组件和SDK、兼容mpvue组件和项目、兼容weex组件。

微信生态的各种sdk可直接用于跨平台App。

diff --git a/docs/api/location/location.md b/docs/api/location/location.md index ea9d4f5783e53558036313e25e7ec92354c840a1..1fb5720eaaed7bac065189dcc3f83c6f6c379f09 100644 --- a/docs/api/location/location.md +++ b/docs/api/location/location.md @@ -113,7 +113,7 @@ uni.chooseLocation({ ``` **注意** -- 不同端，使用地图选择时基于的底层地图引擎不一样，如微信小程序和H5是腾讯地图，App和阿里小程序是高德地图，百度小程序是百度地图，详见地图map组件的使用注意事项 +- 不同端，使用地图选择时基于的底层地图引擎不一样，如微信小程序和H5是腾讯地图，App和阿里小程序是高德地图（注意app端不支持百度地图），百度小程序是百度地图，详见地图map组件的使用注意事项 - 微信内置浏览器中可使用微信js sdk，[详见](https://ask.dcloud.net.cn/article/35380) - chooseLocation属于封装型API，开发者若觉得不够灵活，可自行基于原始的map组件进行封装 - 若Android App端位置不准，见上文uni.getLocation的注意事项 diff --git a/docs/api/location/open-location.md b/docs/api/location/open-location.md index 595b260d1a8555a37eedf7be0593394625c57f3e..3a8120962599a187619ed98f3a81249f202c00e8 100644 --- a/docs/api/location/open-location.md +++ b/docs/api/location/open-location.md @@ -46,7 +46,7 @@ uni.getLocation({ - ```` 组件默认为国测局坐标，调用 ``uni.getLocation`` 返回结果传递给 ```` 组件时，需指定 type 为 gcj02。 - App 端使用地图组件需要向高德等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南，详见：[https://ask.dcloud.net.cn/article/29](https://ask.dcloud.net.cn/article/29)。 - iOS端 如需使用第三方地图进行导航，需要在 manifest.json 文件内增加 ``urlschemewhitelist`` 节点，在线打包即可 -- 不同平台打开的地图不一样，App端是高德地图、H5端是腾讯地图、微信小程序端是腾讯地图、百度小程序是百度地图、阿里小程序是高德地图、头条小程序是高德地图。 +- 不同平台打开的地图不一样，App端是高德地图（不支持百度地图）、H5端是腾讯地图、微信小程序端是腾讯地图、百度小程序是百度地图、阿里小程序是高德地图、头条小程序是高德地图。 ```json { diff --git a/docs/api/media/image.md b/docs/api/media/image.md index 7030635f65f9c45ba1512fc3ff9ff3f860b7cd73..90a6b3d5f7ac1e9d0c82fbecc3fdce986f0a18d6 100644 --- a/docs/api/media/image.md +++ b/docs/api/media/image.md @@ -18,7 +18,8 @@ App端如需要更丰富的相机拍照API（如直接调用前置摄像头） **Tips** -- count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。 +- count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。 +- sourceType 在H5端对应`input`的`capture`属性，设置为`['album']`无效，依然可以使用相机。 - 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限[https://uniapp.dcloud.io/api/other/authorize](https://uniapp.dcloud.io/api/other/authorize) **注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 [uni.saveFile](api/file/file?id=savefile)，在应用下次启动时才能访问得到。** @@ -241,7 +242,7 @@ uni.chooseImage({ |5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序 |:-:|:-:|:-:|:-:|:-:|:-:| -|1.9.7+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|√|√|x|√| +|1.9.7+ [自定义组件编译模式](https://ask.dcloud.net.cn/article/35843)|x|√|√|√(基础库版本>=3.110.3)|√| **OBJECT 参数说明** diff --git a/docs/api/media/video-context.md b/docs/api/media/video-context.md index 10992ced33e1f3195adc4f81b803fc9979e78f51..7ff57c96406be0e70c4f402a2a755a6820fae0a5 100644 --- a/docs/api/media/video-context.md +++ b/docs/api/media/video-context.md @@ -5,7 +5,7 @@ |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|x|√|√|√| +|√|√|√|基础库版本>=1.10.0|√|√|√| **videoContext 对象的方法列表** diff --git a/docs/api/storage/storage.md b/docs/api/storage/storage.md index dd3e136bfa879d50247f6a2812dec145aa2f7830..cb6f827969abaf1f183ec4bda6b754d15f880178 100644 --- a/docs/api/storage/storage.md +++ b/docs/api/storage/storage.md @@ -97,7 +97,7 @@ try { **平台差异说明** -|5+App|H5|微信小程序|支付宝小程序|百度小程序| +|App|H5|微信小程序|支付宝小程序|百度小程序| |:-:|:-:|:-:|:-:|:-:| |HBuilderX 2.0.3+|√|√|√|√| @@ -134,7 +134,7 @@ uni.getStorageInfo({ **平台差异说明** -|5+App|H5|微信小程序|支付宝小程序|百度小程序| +|App|H5|微信小程序|支付宝小程序|百度小程序| |:-:|:-:|:-:|:-:|:-:| |HBuilderX 2.0.3+|√|√|√|√| @@ -219,10 +219,12 @@ try { uni-app的Storage在不同端的实现不同： - H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理 -- App端为原生的plus.storage，无大小限制，不是缓存，持久化 +- App端为原生的plus.storage，无大小限制，不是缓存，是持久化的 - 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。 - 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。 - 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。 - 百度、头条小程序文档未说明大小限制 -除此之外，H5端还支持websql、indexedDB、sessionStorage；App端还支持[SQLite](https://www.html5plus.org/doc/zh_cn/sqlite.html)、[IO文件](https://www.html5plus.org/doc/zh_cn/io.html)等本地存储方案。 +除此之外，其他数据存储方案： +- H5端还支持websql、indexedDB、sessionStorage +- App端还支持[SQLite](https://www.html5plus.org/doc/zh_cn/sqlite.html)、[IO文件](https://www.html5plus.org/doc/zh_cn/io.html)等本地存储方案。 diff --git a/docs/api/ui/navigationbar.md b/docs/api/ui/navigationbar.md index 852681f42d949b230110518428b9e090db453625..457d685a7ad8493c7ec3ceac289fbbbaaeee108b 100644 --- a/docs/api/ui/navigationbar.md +++ b/docs/api/ui/navigationbar.md @@ -130,3 +130,34 @@ App平台调用此API时会关闭屏幕中间悬浮显示的loading ```javascript uni.hideNavigationBarLoading() ``` + + +### uni.hideHomeButton(OBJECT) + +在当前页面隐藏导航条加载动画。 + +**平台差异说明** + +|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| +|:-:|:-:|:-:|:-:|:-:|:-:|:-:| +|x|x|√|x|x|x|x| + +隐藏返回首页按钮。 + +**OBJECT参数说明** + +|参数|类型|必填|说明| +|---|---|---|---| +|success|Function|否|接口调用成功的回调函数| +|fail|Function|否|接口调用失败的回调函数| +|complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| + +**示例** + +```javascript +uni.hideHomeButton() +``` + +**说明** +- 微信小程序自基础库版本2.8.3开始支持 +- 当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面`onShow`中调用`hideHomeButton`进行隐藏。 \ No newline at end of file diff --git a/docs/api/ui/prompt.md b/docs/api/ui/prompt.md index afdf4ece388735ba28da5a8669ad88acfe61c106..bea5e0175098169d40908985aa54638bb11ffa9d 100644 --- a/docs/api/ui/prompt.md +++ b/docs/api/ui/prompt.md @@ -8,10 +8,10 @@ |:-|:-|:-|:-|:-|:-| |title|String|是|提示的内容，长度与 icon 取值有关。|| |icon|String|否|图标，有效值详见下方说明。|| -|image|String|否|自定义图标的本地路径|5+App、H5、微信小程序、百度小程序| -|mask|Boolean|否|是否显示透明蒙层，防止触摸穿透，默认：false|5+App、微信小程序| -|duration|Number|否|提示的延迟时间，单位毫秒，默认：1500|| -|position|String|否|纯文本轻提示显示位置，填写有效值后只有 `title` 属性生效， 有效值详见下方说明。|5+App| +|image|String|否|自定义图标的本地路径|App、H5、微信小程序、百度小程序| +|mask|Boolean|否|是否显示透明蒙层，防止触摸穿透，默认：false|App、微信小程序| +|duration|Number|否|提示的延迟时间，单位毫秒，默认：1500|| +|position|String|否|纯文本轻提示显示位置，填写有效值后只有 `title` 属性生效， 有效值详见下方说明。|App| |success|Function|否|接口调用成功的回调函数|| |fail|Function|否|接口调用失败的回调函数|| |complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| | @@ -22,7 +22,7 @@ |:-|:-|:-| |success|显示成功图标，此时 title 文本最多显示 7 个汉字长度。默认值|| |loading|显示加载图标，此时 title 文本最多显示 7 个汉字长度。|支付宝小程序不支持| -|none|不显示图标，此时 title 文本在`小程序`最多可显示两行，`5+App`仅支持单行显示。| | +|none|不显示图标，此时 title 文本在`小程序`最多可显示两行，`App`仅支持单行显示。| | **示例** @@ -32,14 +32,14 @@ uni.showToast({ duration: 2000 }); ``` - -**position 值说明** + +**position 值说明（仅App生效）** |值|说明| |:-|:-| |top|居上显示| |center|居中显示| -|bottom|居底显示| +|bottom|居底显示| **Tips** @@ -65,7 +65,7 @@ uni.hideToast(); |参数|类型|必填|说明|平台差异说明| |:-|:-|:-|:-|:-| |title|String|是|提示的内容|| -|mask|Boolean|否|是否显示透明蒙层，防止触摸穿透，默认：false|5+App、微信小程序、百度小程序| +|mask|Boolean|否|是否显示透明蒙层，防止触摸穿透，默认：false|App、微信小程序、百度小程序| |success|Function|否|接口调用成功的回调函数|| |fail|Function|否|接口调用失败的回调函数|| |complete|Function|否|接口调用结束的回调函数（调用成功、失败都会执行）| | @@ -181,5 +181,5 @@ App端实现原生的、复杂的底部图文菜单，例如分享菜单，可 **注意** - 本章的所有弹出控件都是原生控件，层级最高，可覆盖video、map、tabbar等原生控件。 -- [uni-app插件市场](https://ext.dcloud.net.cn/)有很多封装好的前端组件，但注意前端组件层级不是最高，无法覆盖原生组件。 -- App端还有原生的[prompt API](https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.prompt) \ No newline at end of file +- [uni-app插件市场](https://ext.dcloud.net.cn/)有很多封装好的前端组件，但注意前端组件层级不是最高，无法覆盖原生组件，除非使用cover-view或nvue。 +- App端还有原生的[prompt API](https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.prompt) diff --git a/docs/case.md b/docs/case.md index 708b5f5791141b4f196adaef9ae969db0b66f767..870946cd8917a7a0b13d454b805a4be7e9b8b6fe 100644 --- a/docs/case.md +++ b/docs/case.md @@ -1,7 +1,7 @@ 如关心App端案例，注意uni-app编译到App时，其实是使用了DCloud的5+App引擎，该引擎拥有众多案例（包括中国工商总局、公安部、中国邮政、湖北银行、360等），有3亿手机用户在使用基于5+引擎开发的应用。详见[https://dcloud.io/case/](https://dcloud.io/case/) -uni-app已经有几十万开发者，是开发者数量和案例最丰富的多端开发框架。 -我们相信还有更多优秀案例，没有被我们采集到，欢迎大家到[项目案例征集](https://github.com/dcloudio/uni-app/issues/6)提交。 +uni-app已经有几十万开发者，uni统计月活2亿，是开发者数量和案例最丰富的多端开发框架。 +欢迎知名开发商提交案例或接入uni统计，越多人加入uni-app生态，这个生态会发展的更好，[项目案例征集](https://github.com/dcloudio/uni-app/issues/6)提交。 ### 官方示例 @@ -17,7 +17,7 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多 -新闻/资讯类App模板：nvue 典型案例，App端纯原生渲染，可左右拖动的复杂长列表，满足苛刻的性能要求。并同时能编译为小程序和H5。本项目源码在HBuilderX中新建项目可获得，并可进一步运行到各端小程序。 +新闻/资讯类App模板：nvue 典型案例，App端纯原生渲染，可左右拖动的复杂长列表，满足苛刻的性能要求。并同时能编译为小程序和H5。本项目源码在HBuilderX中新建项目选新闻模块可获得。
@@ -151,6 +151,8 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多 **张亮麻辣烫：** 百度小程序搜索 “张亮麻辣烫” +**西祠胡同：** [App及H5版](https://www.xici.net/) + **上铁12306：** [Android](https://android.myapp.com/myapp/detail.htm?apkName=com.shentie.app)、[iOS](https://apps.apple.com/cn/app/shang-tie12306/id1080296082) **浙江移动境外出行指南：**[H5](https://wap.zj.10086.cn/szhy/business/20190610gmh5/#/) @@ -169,11 +171,13 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多 **拉卡拉收款宝：** App部分页面使用uni-app制作 +**汕头公交：** 广东移动出品。[Android](https://android.myapp.com/myapp/detail.htm?apkName=com.gmcc.stgj)、[iOS](https://apps.apple.com/cn/app/%E6%B1%95%E5%A4%B4%E5%85%AC%E4%BA%A4/id1091442840)、微信小程序搜索“汕头智慧公交” + **香橙：** 餐馆SaaS服务，手机点餐、下单、排队叫号、营销推广。[官网](http://ivcvc.com) **围棋战场：**围棋对弈，游戏类的小程序（非小游戏）。[微信小程序码](https://user-images.githubusercontent.com/16237216/65005363-327a9f80-d932-11e9-9be6-68cdbcdfdbf1.png) -**波比英语课堂：**幼儿英语启蒙神器培养国际宝宝。[App、小程序通用链接](http://m3w.cn/bbyykt) +**波比英语课堂：**幼儿英语启蒙，培养国际宝宝。[App、小程序通用链接](http://m3w.cn/bbyykt) **桂聘：**广西区域招聘。[Android和iOS](http://www.guipin.com/jihui/) @@ -243,6 +247,8 @@ uni-app已经有几十万开发者，是开发者数量和案例最丰富的多 **同济医院官方App：** [iOS和Android下载页](https://tjhapp.com.cn/app/appdown.html) +**碧桂园：**凤凰云[h5](https://fhyhub.bgy.com.cn/h5/activity/#/) + **随州便民网：**服务全随州人的便民信息平台。[App、小程序通用链接](//m3w.cn/szbmw) diff --git a/docs/collocation/App.md b/docs/collocation/App.md index ddbbc117be20ab4e482944c28671ef0da19b53b4..1f862722b885ca162a4336601d9ee8f720650949 100644 --- a/docs/collocation/App.md +++ b/docs/collocation/App.md @@ -1,19 +1,19 @@ -`App.vue`是我们的主组件，所有页面都是在`App.vue`下进行切换的，是页面入口文件。 +`App.vue`是uni-app的主组件，所有页面都是在`App.vue`下进行切换的，是页面入口文件。但`App.vue`本身不是页面，这里不能编写视图元素。 -在这个文件里，你可以初始化一些通用的组件，调用一些应用生命周期函数。 +这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData -应用生命周期仅可在`App.vue`中监听，在其它页面监听无效。 +应用生命周期仅可在`App.vue`中监听，在页面监听无效。 ### 应用生命周期 `uni-app` 支持如下应用生命周期函数： -|函数名 |说明 | -|:- |:- | -|onLaunch |当`uni-app` 初始化完成时触发（全局只触发一次） | -|onShow |当 `uni-app` 启动，或从后台进入前台显示 | -|onHide |当 `uni-app` 从前台进入后台 | -|onError |当 `uni-app` 报错时触发 | -|onUniNViewMessage|对 `nvue` 页面发送的数据进行监听，可参考 [nvue 向 vue 通讯](/use-weex?id=nvue-向-vue-通讯) | +|函数名 |说明 |平台兼容| +|:- |:- |:- | +|onLaunch |当`uni-app` 初始化完成时触发（全局只触发一次） || +|onShow |当 `uni-app` 启动，或从后台进入前台显示 || +|onHide |当 `uni-app` 从前台进入后台 || +|onError |当 `uni-app` 报错时触发 || +|onUniNViewMessage|对 `nvue` 页面发送的数据进行监听，可参考 [nvue 向 vue 通讯](/use-weex?id=nvue-向-vue-通讯) |App| 在`App.vue`文件里使用生命周期函数，如下： @@ -21,13 +21,13 @@ @@ -39,7 +39,7 @@ - `App.vue` 不能写模板 ### globalData -小程序有globalData机制，这套机制在uni-app里也可以使用，全端通用。 +小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。 **以下是 App.vue 中定义globalData的相关配置：** @@ -58,15 +58,20 @@ js中操作globalData的方式如下： 在应用onLaunch时，getApp对象还未获取，暂时可以使用this.$scope.globalData获取globalData。 -如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。HBuilderX 2.0.3起，nvue页面在`uni-app`编译模式下，也支持onShow。 +如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。 -weex编译模式中使用globalData的话，由于weex生命周期不支持onShow，但熟悉5+的话，可利用监听webview的addEventListener show事件实现onShow效果，或者直接使用weex生命周期中的beforeCreate。 +nvue的weex编译模式中使用globalData的话，由于weex生命周期不支持onShow，但熟悉5+的话，可利用监听webview的addEventListener show事件实现onShow效果，或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式，而不是weex编译模式。 + +globalData是简单的全局变量，如果使用状态管理，请使用`vuex`（main.js中定义） ### 全局样式 在`App.vue`中，可以一些定义全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在App.vue中。 -**例如：** - -现在有个页面背景是深色在vue页面中，可能会发生新窗体刚开始动画时是灰白色背景，动画结束时才变为深色背景，造成闪屏。这种情况就可以使用全局样式来解决。 -- 造成这种现象的原因是因为webview的背景生效太慢。此时可将样式写在 `App.vue` 里，来加速页面样式的渲染速度。因为`App.vue` 里面的样式是全局样式，每次新开页面会优先加载 `App.vue` 里面的样式，然后加载普通 vue 页面的样式去覆盖`App.vue` 里面的样式。 -- 另外nvue页面不存在此问题，也可以更改为nvue页面。 +注意如果工程下同时有vue和nvue文件，全局样式的所有css会应用于所有文件，而nvue支持的css有限，编译器会在控制台报警，提示某些css无法在nvue中支持。此时需要把nvue不支持的css写在单独的条件编译里。如： +```html + +``` diff --git a/docs/collocation/main.md b/docs/collocation/main.md index f07d9f3d0df431914efc76fa9309d119a6bd2b0e..2f5ccf16d15344df08ca5ed19e8d27d618350e17 100644 --- a/docs/collocation/main.md +++ b/docs/collocation/main.md @@ -1,13 +1,13 @@ -`main.js`是我们的入口文件，主要作用是初始化`vue`实例并使用需要的插件。 +`main.js`是uni-app的入口文件，主要作用是初始化`vue`实例、定义全局组件、使用需要的插件如vuex。 首先引入了`Vue`库和`App.vue`，创建了一个`vue`实例，并且挂载`vue`实例。 ``` import Vue from 'vue' import App from './App' -import pageHead from './components/page-head.vue' //引用page-head组件 +import pageHead from './components/page-head.vue' //全局引用page-head组件 Vue.config.productionTip = false -Vue.component('page-head', pageHead) //全局注册page-head组件 +Vue.component('page-head', pageHead) //全局注册page-head组件，每个页面将可以直接使用该组件 App.mpType = 'app' const app = new Vue({ @@ -15,9 +15,11 @@ const app = new Vue({ }) app.$mount() //挂载Vue实例 ``` -也可以引用`vuex`，使用`Vue.use`引用插件，使用`Vue.prototype`添加全局变量，使用`Vue.component`注册全局组件。 +使用`Vue.use`引用插件，使用`Vue.prototype`添加全局变量，使用`Vue.component`注册全局组件。 -不过无法使用`vue-router`，路由须在`pages.json`中进行配置。 +可以引用`vuex`，因涉及多个文件，此处没有提供示例，详见`hello uni-app`示例工程。 + +无法使用`vue-router`，路由须在`pages.json`中进行配置。如果开发者坚持使用`vue-router`，可以在[插件市场](https://ext.dcloud.net.cn/search?q=vue-router)找到转换插件。 **注意** diff --git a/docs/collocation/manifest.md b/docs/collocation/manifest.md index 6f717b2406b3bfd8df483731bf40205603052e62..abec5f7fcc3d5da24c7bee1ee555696ae90eab57 100644 --- a/docs/collocation/manifest.md +++ b/docs/collocation/manifest.md @@ -298,6 +298,7 @@ Tips：关于摇树优化（treeShaking）原理及优化结果，参考：[http |permission|Object|微信小程序接口权限相关设置，比如申请位置权限必须填此处[详见](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html)| |workers|String|Worker 代码放置的目录。 [详见](https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html)| |optimization|Object| 对微信小程序的优化配置 | +|cloudfunctionRoot|String| 配置云开发目录，参考[setting](/collocation/manifest?id=cloudfunctionRoot)| #### setting @@ -316,8 +317,38 @@ Tips：关于摇树优化（treeShaking）原理及优化结果，参考：[http |属性|类型|说明| |:-|:-|:-| -|subPackages|Boolean|是否开启分包优化| - +|subPackages|Boolean|是否开启分包优化| + +#### cloudfunctionRoot + +如果需要使用微信小程序的云开发，需要在 mp-weixin 配置云开发目录 + +```javascript +"mp-weixin":{ + // ... + "cloudfunctionRoot": "cloudfunctions/", // 配置云开发目录 + // ... +} +``` + +配置目录之后，需要在项目根目录新建 `vue.config.js` 配置对应的文件编译规则 + +```javascript + +{ + + plugins: [ + new CopyWebpackPlugin([ + { + from: path.join(__dirname, '../cloudfunctions'), + to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'cloudfunctions'), + }, + ]), + ], +} + +``` + ### mp-alipay |属性|类型|说明| diff --git a/docs/component/input.md b/docs/component/input.md index 2990b1af2a9ba6fdad5407822831e83f14a69edc..e1e0c21398bf5b41c25733325ed8e186799ac111 100644 --- a/docs/component/input.md +++ b/docs/component/input.md @@ -46,11 +46,12 @@ - 小程序平台，`number` 类型只支持输入整型数字。微信开发者工具上体现不出效果，请使用真机预览。 - 如果需要在小程序平台输入浮点型数字，请使用 `digit` 类型。 +- 小程序端input在置焦时，会表现为原生控件，此时会层级变高。如需前端组件遮盖input，需让input失焦，或使用cover-view等覆盖原生控件的方案，[参考](https://uniapp.dcloud.io/component/native-component)。具体来讲，阿里小程序的input为text且置焦为原生控件；微信、头条、QQ所有input置焦均为原生控件；百度小程序置焦时仍然是非原生的。也可以参考[原生控件](https://uniapp.dcloud.io/component/native-component)文档 - input组件若不想弹出软键盘，可设置为disable - App平台的vue页面及 H5平台 的弹出键盘使用的是浏览器控制的键盘，丰富程度略低。可通过插件市场找到更多类型的键盘。 - 插件市场有各种类型的模拟键盘，比如车牌键盘、身份证键盘，可去插件市场搜索 [键盘](https://ext.dcloud.net.cn/search?q=%E9%94%AE%E7%9B%98)。 - 搜索框ui组件，可参考uni ui的search组件或封装好的页面模板。[详见](https://ext.dcloud.net.cn/search?q=search) -- [uni-app插件市场](https://ext.dcloud.net.cn/)有输入文字后自动提示候选的组件，可搜索 [autocomplete](https://ext.dcloud.net.cn/search?q=autocomplete) 查看。 +- uni-app插件市场有输入文字后自动提示候选的组件，可搜索 [autocomplete](https://ext.dcloud.net.cn/search?q=autocomplete) 查看。 **confirm-type 有效值** diff --git a/docs/component/list.md b/docs/component/list.md index 19a9a6a4fd63528a73a9e7903c50f073f0e28f98..2d8ff09d25fddfac36ba814d97affc497a581172 100644 --- a/docs/component/list.md +++ b/docs/component/list.md @@ -4,7 +4,7 @@ app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件 原生渲染的资源回收机制，与webview渲染不同。webview不需要数据有规则格式，长页面处于不可视的部分，其渲染资源会自动回收，除非webview使用区域滚动而不是页面滚动。所以vue页面只要不用scroll-view，就不需要关注这个问题。而原生渲染则必须注意。 -如果需要跨端，建议使用uni-ui的uni-list组件，它会自动处理webview渲染和原生渲染的情况，在app-nvue下使用list组件，而在其他平台则使用页面滚动。详见[https://ext.dcloud.net.cn/plugin?id=24](https://ext.dcloud.net.cn/plugin?id=24) +**如果需要跨端，建议使用uni-ui的uni-list组件，它会自动处理webview渲染和原生渲染的情况，在app-nvue下使用list组件，而在其他平台则使用页面滚动。详见[https://ext.dcloud.net.cn/plugin?id=24](https://ext.dcloud.net.cn/plugin?id=24)** `` 组件是提供垂直列表功能的核心组件，拥有平滑的滚动和高效的内存管理，非常适合用于长列表的展示。最简单的使用方法是在 `` 标签内使用一组由简单数组循环生成的 `` 标签填充。 diff --git a/docs/component/native-component.md b/docs/component/native-component.md index f461d50947e2f40c007441e72808703db4475136..a731b53f3d38ebec9f07f455e6d80839b2e1d04c 100644 --- a/docs/component/native-component.md +++ b/docs/component/native-component.md @@ -2,7 +2,11 @@ 小程序和App的vue页面，主体是webview渲染的。为了提升性能，小程序和App的vue页面下部分ui元素，比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。 -虽然提升了性能，但原生组件带来了其他问题：1) 前端组件无法覆盖原生控件的层级问题、2) 原生组件不能嵌入特殊前端组件(如scroll-view)、3) 原生控件无法灵活自定义。 +虽然提升了性能，但原生组件带来了其他问题： +1. 前端组件无法覆盖原生控件的层级问题 +2. 原生组件不能嵌入特殊前端组件(如scroll-view) +3. 原生控件ui无法灵活自定义 +4. 原生控件在Android上，字体会渲染为rom的主题字体，而webview如果不经过单独改造不会使用rom主题字体 H5、App的nvue页面，不存在混合渲染的情况，它们或者全部是前端渲染、或者全部是原生渲染，不涉及层级问题。 @@ -11,7 +15,7 @@ H5、App的nvue页面，不存在混合渲染的情况，它们或者全部是 * [video](/component/video) * [camera](/component/camera)（仅微信小程序、百度小程序支持） * [canvas](/component/canvas)（仅在微信小程序、百度小程序表现为原生组件） -* [input](/component/input)（仅在微信小程序、百度小程序、支付宝小程序、头条小程序中且input置焦时表现为原生组件） +* [input](/component/input)（仅在微信小程序、支付宝小程序、头条小程序、QQ小程序中且input置焦时表现为原生组件，其中支付宝小程序的input仅为text且置焦时才表现为原生组件） * [textarea](/component/textarea)（仅在微信小程序、百度小程序、头条小程序表现为原生组件） * [live-player](/component/live-player)（仅微信小程序、百度小程序支持，App端直接使用video组件可同时实现拉流） * [live-pusher](/component/live-pusher)（仅微信小程序、百度小程序、app-nvue支持，app-vue使用plus.video.LivePusher可实现推流） @@ -34,26 +38,27 @@ H5、App的nvue页面，不存在混合渲染的情况，它们或者全部是 #### 其他原生界面元素 除了原生组件外，uni-app在非H5端还有其他原生界面元素，清单如下： -* 原生导航栏和tabbar（pages.json里配置的）。 +* 原生navigationBar和tabbar（pages.json里配置的）。 * web-view组件虽然不是原生的，但这个组件相当于一个原生webview覆盖在页面上，并且小程序上web-view组件是强制全屏的，无法在上面覆盖前端元素 * 弹出框：picker、showModal、showToast、showLoading、showActionSheet、previewImage、chooseImage、chooseVideo等弹出元素也无法被前端组件覆盖 * plus下的plus.nativeObj.view、plus.video.LivePusher、plus.nativeUI、plus.webview，层级均高于前端元素 -注意：app的nvue页面里的组件虽然不涉及map、video等原生组件的层级遮挡问题，但上述“其他原生界面元素”，一样是nvue里的组件也无法遮挡的。 +注意：app的nvue页面里的组件虽然不涉及map、video等原生组件的层级遮挡问题，但pages.json中配置的原生tabbar、原生navigationBar，一样是nvue里的组件也无法遮挡的。 #### vue页面层级覆盖解决方案 为了解决webview渲染中原生组件层级最高的限制，uni-app提供了 [cover-view](/component/cover-view) 和 [cover-image](/component/cover-view?id=cover-image) 组件，让其覆盖在原生组件上。 -除了跨端的cover-view，App端还提供了2种方案：plus.nativeObj.view、subNVue。详述如下 +除了跨端的cover-view，App端还提供了3种方案：plus.nativeObj.view、subNVue、新开半透明nvue页面。详述如下 - [cover-view](https://uniapp.dcloud.io/component/cover-view?id=cover-view) `cover-view`只能覆盖原生组件，不能覆盖其他原生界面元素。比如cover-view可以覆盖video、map，但无法覆盖原生导航栏、tabbar、web-view。 -微信小程序在基础库 2.4.0 起已支持 video 组件的同层渲染。也就是video在非全屏时，可以被前端元素通过调节zindex来遮挡。但video全屏时，仍需要cover-view覆盖。 +微信小程序在基础库 2.4.0 起已支持 video 组件的同层渲染，2.7.0 起支持 map 组件的同层渲染。可以被前端元素通过调节zindex来遮挡，也支持在scroll-view等组件中内嵌这2个原生组件。但video全屏时，仍需要cover-view覆盖。 -vue页面的`cover-view`在App端相比小程序端还有一些限制，1) 无法嵌套、 2) 无法内部滚动，即cover-view无法内部出现滚动条、 3) 无法覆盖到视频的全屏界面。nvue页面的`cover-view`无这些限制。 +app-vue的`cover-view`相比小程序端还有一些限制，1) 无法嵌套、 2) 无法内部滚动，即cover-view无法内部出现滚动条、 3) 无法覆盖到视频的全屏界面。 +app-nvue的`cover-view`无这些限制。 另外cover-view无论如何都无法解决原生导航栏、tabbar、web-view组件的覆盖，为此App端补充了2个层级覆盖方案plus.nativeObj.view和subNVue @@ -73,9 +78,11 @@ subNVue是把weex渲染的原生子窗体，覆盖在vue页面上，它解决了 uni-app支持在App端弹出半透明的nvue窗体。即看起来是在本窗体弹出一个元素，但实际上是弹出了一个部分区域蒙灰透明的新窗体。这样的窗体比subnvue有个优势就是可以全局复用。具体参考这个[插件](https://ext.dcloud.net.cn/plugin?id=953) -subNVue或弹出部分区域透明的nvue页面，会比plus.nativeObj.view多占用一些内存。所以如果你要覆盖的内容很简单，cover-view或plus.nativeObj.view可以简单实现，也没必要用subNVue或nvue。 +subNVue或弹出部分区域透明的nvue页面，会比plus.nativeObj.view多占用一些内存。所以如果你要覆盖的内容很简单，cover-view或plus.nativeObj.view可以简单实现的话，就没必要用subNVue或nvue。 +所以如果你的层级覆盖问题比较简单，不用嵌套，且有跨端需求，就使用cover-view。 +如果App端cover-view无法满足需求，且需要覆盖的原生界面比较简单，可以用plus.nativeObj.view。否则，就使用subnvue或部分区域透明的nvue吧。 **关于subNVue和Webview的层级问题** subNVue的层级高于前端元素，但多个subNVue以及Webview，它们之间的也存在层级关系。 @@ -92,7 +99,14 @@ nvue页面全部都是原生组件，互相之间没有层级问题。 如果仅开发App，不跨端，不愿涉及层级问题，也可以不使用pages.json里的原生导航栏和tabbar，nvue页面不需要这些来强化性能。 -#### 总结 -所以如果你的层级覆盖问题比较简单，不用嵌套，且有跨端需求，就使用cover-view。 +#### Android系统主题字体对原生组件渲染的影响 -如果App端cover-view无法满足需求，且需要覆盖的原生界面比较简单，可以用plus.nativeObj.view。否则，就使用subnvue或部分区域透明的nvue吧。 +在Android手机上，调整系统主题字体，所有原生渲染的控件的字体都会变化，而webview渲染的字体则不会变化。 + +如果原生渲染和webview渲染出现在同一页面，就会发现字体不一致。 + +部分小程序通过修改了自带的webview内核，实现了webview也可以使用rom主题字体，比如微信、qq、支付宝；其他小程序及app-vue下，webview仍然无法渲染为rom主题字体。 + +app端若在意字体不一致的问题，建议直接使用nvue。 + +不管Android字体问题、还是同层渲染问题，微信小程序都是依靠自带一个几十M的定制webview实现的，这对于App而言增加了太大的体积，不如使用nvue解决这类问题。 diff --git a/docs/component/navigator.md b/docs/component/navigator.md index 1b27140e96e8ad4302219170d6188de1a1418c64..31b56ee25f6ef57e5a0fd7b30040ce2cc59ad4ea 100644 --- a/docs/component/navigator.md +++ b/docs/component/navigator.md @@ -10,11 +10,12 @@ |open-type|String|navigate|跳转方式|| |delta|Number||当 open-type 为 'navigateBack' 时有效，表示回退的层数|| |animation-type|String|pop-in/out|当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：[窗口动画](api/router?id=animation)|5+App| -|animation-duration|Number|300|当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。|5+App| +|animation-duration|Number|300|当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。|App| |hover-class|String|navigator-hover|指定点击时的样式类，当hover-class="none"时，没有点击态效果|| |hover-stop-propagation|Boolean|false|指定是否阻止本节点的祖先节点出现点击态|微信小程序| |hover-start-time|Number|50|按住后多久出现点击态，单位毫秒|| |hover-stay-time|Number|600|手指松开后点击态保留时间，单位毫秒| | +|target|String|self|在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram|微信2.0.7+、百度2.5.2+、QQ| **open-type 有效值** @@ -24,11 +25,13 @@ |redirect|对应 uni.redirectTo 的功能|| |switchTab|对应 uni.switchTab 的功能|| |reLaunch|对应 uni.reLaunch 的功能|头条小程序不支持| -|navigateBack|对应 uni.navigateBack 的功能| | +|navigateBack|对应 uni.navigateBack 的功能|| +|exit|退出小程序，target="miniProgram"时生效|微信2.1.0+、百度2.5.2+、QQ1.4.7+| **注意** - navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, ```` 的子节点背景色应为透明色。** - app-nvue 平台只有纯nvue项目（render为native）才支持 ``。非render为native的情况下，nvue暂不支持navigator组件，请使用API跳转。 +- app下退出应用，Android平台可以使用[plus.runtime.quit](https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.quit) **示例** [查看示例](https://uniapp.dcloud.io/h5/pages/component/navigator/navigator) diff --git a/docs/component/picker.md b/docs/component/picker.md index 4c0c702fe23ba8d63064a6693c73070ed88eca7e..f54ec5c0fbb111a699e03073b9bb6b262b5aa844 100644 --- a/docs/component/picker.md +++ b/docs/component/picker.md @@ -112,7 +112,7 @@ |:-:|:-:|:-:|:-:|:-:|:-:|:-:| |x|x|√|x|√|√|√| -- 因省市区选择器包含大量数据，占用体积，并非所有应用都需要，且很多城市数据有自维护需求，所以在App和H5平台没有内置。可以基于多列picker或picker-view，自行填充城市数据，插件市场有较多类似插件，[详见](https://ext.dcloud.net.cn/search?q=%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9)。注意基于多列picker方式的地区选择不能运行在支付宝小程序上，只有基于picker-view的可以全端运行。已知mpvue-picker插件是基于picker-view的。 +- 因省市区选择器包含大量数据，占用体积，并非所有应用都需要，且很多城市数据有自维护需求，所以在App和H5平台没有内置。可以基于多列picker或picker-view，自行填充城市数据，插件市场有较多类似插件，[详见](https://ext.dcloud.net.cn/search?q=%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9)。注意基于多列picker方式的地区选择不能运行在支付宝小程序上，只有基于picker-view的可以全端运行。这些插件中，比较推荐的是[SimpleJalon的地址联动选择插件](https://ext.dcloud.net.cn/plugin?id=1084)，它可以同时兼容app-nvue、app-vue、h5、及各端小程序。 |属性名|类型|默认值|说明| |:-|:-|:-|:-| diff --git a/docs/component/progress.md b/docs/component/progress.md index 0468ffc6c9f2ebafa8b6dc98845a7ae11ebc5481..53adf4a97565b8b90577d4cd4ea308d0780266a3 100644 --- a/docs/component/progress.md +++ b/docs/component/progress.md @@ -7,11 +7,14 @@ |:- |:- |:- |:- |:- | |percent |Float |无 |百分比0~100 | | |show-info |Boolean |false |在进度条右侧显示百分比 | | +|border-radius|number/string|0|圆角大小|微信基础库2.3.1+、QQ小程序| +|font-size|number/string|16|右侧百分比字体大小|微信基础库2.3.1+、QQ小程序| |stroke-width |Number |6 |进度条线的宽度，单位px | | -|activeColor |Color |#09BB07 |已选择的进度条的颜色 | | +|activeColor |Color |#09BB07（百度为#E6E6E6） |已选择的进度条的颜色 | | |backgroundColor|Color |#EBEBEB |未选择的进度条的颜色 | | |active |Boolean |false |进度条从左往右的动画 | | -|active-mode |String |backwards |backwards: 动画从头播；forwards：动画从上次结束点接着播|微信小程序、5+APP、H5 | +|active-mode |String |backwards |backwards: 动画从头播；forwards：动画从上次结束点接着播|App、H5、微信小程序、QQ小程序 | +|duration|number|30|进度增加1%所需毫秒数|微信基础库2.8.2+| |@activeend |EventHandle| |动画完成事件 |微信小程序 | **示例** [查看演示](https://uniapp.dcloud.io/h5/pages/component/progress/progress) @@ -36,4 +39,4 @@ ``` -![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/propress.png) \ No newline at end of file +![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/propress.png) diff --git a/docs/component/rich-text.md b/docs/component/rich-text.md index cf53cf43fcacedadc95cb6fe5cf383d5dcbfd90e..55f4b8deceabf4e7a9de085dabe506170f0ab79c 100644 --- a/docs/component/rich-text.md +++ b/docs/component/rich-text.md @@ -3,9 +3,11 @@ **属性说明** -|属性名|类型|默认值|说明| -|:-|:-|:-|:-| -|nodes|Array / String|[]|节点列表 / HTML String| +|属性名|类型|默认值|说明|平台兼容| +|:-|:-|:-|:-|:-| +|nodes|Array / String|[]|节点列表 / HTML String|| +|[space](https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html)|string||显示连续空格|微信基础库2.4.1+、QQ小程序| +|selectable|Boolean|false|富文本是否可以长按选中，可用于复制，粘贴等场景|百度APP 11.10+| **注意** diff --git a/docs/component/video.md b/docs/component/video.md index 7d0115d11af982663c058f47a32adee50b6ee43f..de71d7ac4a2208328cd8d943c8f38a3ed5cb1590 100644 --- a/docs/component/video.md +++ b/docs/component/video.md @@ -5,7 +5,7 @@ |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |:-:|:-:|:-:|:-:|:-:|:-:|:-:| -|√|√|√|x|√|√|√| +|√|√|√|基础库1.10.0+|√|√|√| **属性说明** @@ -141,7 +141,7 @@ export default { - 视频播放格式说明： * H5平台：支持支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。（``