-
diff --git a/docs/component/web-view.md b/docs/component/web-view.md
index 65371743307db33f4ba6484679df25a339292db9..334eaa275f4c77ec50be4d06f2cc58063eb79ad2 100644
--- a/docs/component/web-view.md
+++ b/docs/component/web-view.md
@@ -1,6 +1,6 @@
#### web-view
-`web-view` 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面。
+`web-view` 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指的宽高)。
> 各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次 iframe 内嵌的其他 url 。
@@ -9,12 +9,12 @@
|属性名|类型|说明|平台差异说明|
|:-|:-|:-|:|
|src|String|webview 指向网页的链接| |
-|webview-styles|Object|webview 的样式|5+App|
+|webview-styles|Object|webview 的样式|App|
|@message|EventHandler|网页向应用 `postMessage` 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。|H5 暂不支持|
**src**
-|来源|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
+|来源|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|网络|√|√|√|√|√|√|√|
|本地|√|暂不支持|x|x|x|x|x|
@@ -61,7 +61,9 @@
- 小程序仅支持加载网络网页,不支持本地html
- 小程序端 web-view 组件一定有原生导航栏,下面一定是全屏的 web-view 组件,navigationStyle: custom 对 web-view 组件无效。
- App 端使用 `自定义组件模式` 时,uni.web-view.js 的最低版为 [uni.webview.1.5.2.js](https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js)
-- App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在 `uni-app 项目根目录->hybrid->html` 文件夹下,如下为一个加载本地网页的`uni-app`项目文件目录示例:
+- App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在 `uni-app 项目根目录->hybrid->html` 文件夹下,如下为一个加载本地网页的`uni-app`项目文件目录示例:
+- nvue `web-view` 必须指定样式宽高, @message 暂时写成 @onPostMessage,示例:
+- V3 编译模式,网页向应用 `postMessage` 为实时消息
@@ -121,7 +123,7 @@
|属性|类型|说明|
|:-|:-|:-|
-|plus|Boolean|5+App|
+|plus|Boolean|App|
|miniprogram|Boolean|微信小程序|
|smartprogram|Boolean|百度小程序|
|miniprogram|Boolean|支付宝小程序|
@@ -131,29 +133,29 @@
在 `` 加载的 HTML 中,添加以下代码:
```html
-
-
+
+
```
待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
@@ -264,7 +266,7 @@ web-view组件在App和小程序中层级较高,如需要在vue页面中写代
- App端,web-view加载的html页面可以运行plus的api,但注意如果该页面调用了plus.key的API监听了back按键(或使用mui的封装),会造成back监听冲突。需要该html页面移除对back的监听。或按照上面的示例代码禁止网页使用plus对象
- `uni.webview.js` 最新版地址:[https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js](https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js)
- 小程序平台,个人类型与海外类型的小程序使用 `web-view` 组件,提交审核时注意微信等平台是否允许使用
-- 小程序平台, `src` 指向的链接需登录小程序管理后台配置域名白名单。`5+App`和`H5` 无此限制。
+- 小程序平台, `src` 指向的链接需登录小程序管理后台配置域名白名单。`App`和`H5` 无此限制。
##### FAQ
diff --git a/docs/ecosystem.md b/docs/ecosystem.md
index b58caa0b8876f5a8d7610db17f1bfb1e10408cf9..c374a29ba7f7362f158a16f2fbeadfe0ac0a892f 100644
--- a/docs/ecosystem.md
+++ b/docs/ecosystem.md
@@ -1,20 +1,39 @@
-```uni-app``` 积极拥抱前端社区,创建了开放、兼容的生态系统。
+```uni-app``` 积极拥抱社区,创建了开放、兼容的生态系统。
-- [uni-app插件市场](https://ext.dcloud.net.cn),有数千款插件,支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型,并为插件作者提供了荣誉+经济回报的双激励模式,打造最强大的开放生态。
+- [uni-app插件市场](https://ext.dcloud.net.cn),有数千款插件,支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型。在生态建设上远远领先于竞品。
-- 兼容微信小程序 JS SDK,丰富的小程序生态内容可直接引入```uni-app```,并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK,由于大量SDK厂商均原厂维护小程序SDK,使得```uni-app```成为跨平台开发框架里生态最丰富的平台[参考](https://ask.dcloud.net.cn/article/35070)
+- 兼容 微信小程序 JS SDK
+丰富的小程序生态内容可直接引入```uni-app```,并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK,由于大量SDK厂商均原厂维护小程序SDK,使得```uni-app```成为跨平台开发框架里生态最丰富的平台[参考](https://ask.dcloud.net.cn/article/35070)
-- 兼容微信小程序自定义组件,并且App侧通用,[参考](https://uniapp.dcloud.io/frame?id=小程序组件支持)
+- 兼容 微信小程序自定义组件
+小程序自定义组件是一种ui组件,uni-app里可以在App、H5、微信小程序、QQ小程序同时兼容微信小程序自定义组件,[参考](https://uniapp.dcloud.io/frame?id=小程序组件支持)
-- 支持 NPM 包管理系统,[参考](https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81)
+- 兼容 NPM 包管理系统
+uni-app完整支持 NPM ,[详见](https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81)
-- 支持 mpvue 项目及组件,全端通用,[参考](https://ask.dcloud.net.cn/article/34945)
+- 兼容 mpvue 项目及组件
+mpvue同样基于vue语法,但支持完善度不如`uni-app`,是`uni-app`的子集。mpvue的组件可以在uni-app里直接使用并全端通用。项目代码可以快速移植到uni-app,[参考](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)
+- 兼容 weex 插件生态
+uni-app内置了`weex`,`weex`的原生插件或ui库均可使用。注意`weex`的生态不如`uni-app`丰富,一般情况建议使用`uni-app`的插件市场。
-- 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)
+- 兼容 普通 web 库
+```uni-app```的H5端支持所有浏览器API。但众所周知,由于小程序的js不运行在浏览器里,所以小程序里不支持 HTML 和 DOM 的 API。
-- App端支持 ```weex``` ,```uni-app``` 内置了 ```weex``` ,并在 ```weex``` 引擎中实现了常用的 uni api 的封装,比如 uni.request 可以在 ```weex``` 引擎中联网。这样的文件后缀名为 nvue。```uni-app```还支持 nvue 和 vue 复用 js 和 css。
+`uni-app`的App端虽然和小程序是相同的架构,逻辑层也运行在独立jscore而不是浏览器里,但一方面可通过web-view组件加载HTML,引入web相关库;
+另一方面可通过[renderjs](frame?id=renderjs)实现在渲染层执行js,此时完整echart、threejs等web库均可使用。
+(但为了全端使用,仍然建议减少对dom库的依赖,在uni-app的插件市场可寻找全端可以的库来替代)
+
+- App端支持各种调用原生能力的方式
+1. 支持 原生[混合开发](hybrid)
+2. 支持 比小程序能力更多的[plus JSAPI](http://www.html5plus.org/doc/h5p.html)
+3. 支持 [Native.js](https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88) 直接调用原生api
+4. 支持 [原生插件扩展](https://ask.dcloud.net.cn/article/35428)
+5. 支持 [云打包原生插件](https://ask.dcloud.net.cn/article/35412)。
+
+- App端支持双渲染引擎
+`uni-app`逻辑层在独立jscore,而渲染层可选webview渲染和weex引擎渲染。
+1. 使用webview渲染则整个架构与小程序相同,此时页面后缀为vue文件。
+2. 使用weex引擎(经过改造)渲染,则整个架构与快应用相同,此时页面后缀为nvue文件。使用webview渲染时,可以指定由系统webview渲染还是由x5引擎渲染。
-- App端支持原生插件云打包,[参考](https://ask.dcloud.net.cn/article/35412)
diff --git a/docs/faq.md b/docs/faq.md
index 70577b7c911fa8a3bcb138cca7010b4b7380e7f8..55e67ca09eca010d45b2b5bffcced47755d8453a 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -38,6 +38,8 @@
**App初期启动的引导轮播:** 因为是App专用,为了更好的性能,推荐使用nvue制作。参考插件市场已经封装的插件[https://ext.dcloud.net.cn/plugin?id=676](https://ext.dcloud.net.cn/plugin?id=676)
+**原生App和uni-app混合开发:** [详见](hybrid)
+
## H5常见问题
**uni-app 的 H5 版使用注意事项:**[https://ask.dcloud.net.cn/article/35232](https://ask.dcloud.net.cn/article/35232)
diff --git a/docs/frame.md b/docs/frame.md
index 943ab3b2d398a14fd3c5209720e5a4ba4fac9035..6e72f917b2bb79fd0ff2d21538f4176369a0d821 100644
--- a/docs/frame.md
+++ b/docs/frame.md
@@ -43,7 +43,7 @@
|有效目录|说明|
|:-:|:-:|
-|app-plus|5+App|
+|app-plus|App|
|h5|H5|
|mp-weixin|微信小程序|
|mp-alipay|支付宝小程序|
@@ -80,17 +80,17 @@
|onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发|||
|onHide|监听页面隐藏|||
|onUnload|监听页面卸载|||
-|onResize|监听窗口尺寸变化|5+App、微信小程序||
+|onResize|监听窗口尺寸变化|App、微信小程序||
|onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)|||
|onReachBottom|页面上拉触底事件的处理函数|||
-|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、5+App(自定义组件模式)||
+|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、App(自定义组件模式)||
|onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、头条小程序、支付宝小程序||
|onPageScroll|监听页面滚动,参数为Object|||
|onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|5+ App、H5||
-|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|5+App、H5||
-|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|5+App、H5|1.6.0|
-|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|5+App、H5|1.6.0|
-|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|5+App、H5|1.6.0|
+|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|App、H5||
+|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|App、H5|1.6.0|
+|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|App、H5|1.6.0|
+|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|App、H5|1.6.0|
``onPageScroll`` 参数说明:
@@ -139,11 +139,11 @@ export default {
## 路由
-``uni-app``路由全部交给框架统一管理,开发者需要在[pages.json](/collocation/pages?id=pages)里配置每个路由页面的路径及页面样式,不支持 ``Vue Router``。
+``uni-app``页面路由为框架统一管理,开发者需要在[pages.json](/collocation/pages?id=pages)里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 `uni-app` 的路由用法与 ``Vue Router`` 不同,如仍希望采用 `Vue Router` 方式管理路由,可在插件市场搜索 [Vue-Router](https://ext.dcloud.net.cn/search?q=vue-router)。
### 路由跳转
-``uni-app`` 有两种路由跳转方式:使用[navigator](/component/navigator)组件跳转、调用[API](/api/router)跳转。
+``uni-app`` 有两种页面路由跳转方式:使用[navigator](/component/navigator)组件跳转、调用[API](/api/router)跳转。
### 页面栈
@@ -324,8 +324,8 @@ rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应
|#id|#firstname|选择拥有 id="firstname" 的组件|
|element|view|选择所有 view 组件|
|element, element|view, checkbox|选择所有文档的 view 组件和所有的 checkbox 组件|
-|::after|view::after|在 view 组件后边插入内容,**仅微信小程序和5+App生效**|
-|::before|view::before|在 view 组件前边插入内容,**仅微信小程序和5+App生效**|
+|::after|view::after|在 view 组件后边插入内容,**仅微信小程序和App生效**|
+|::before|view::before|在 view 组件前边插入内容,**仅微信小程序和App生效**|
**注意:**
- 在 ```uni-app``` 中不能使用 ```*``` 选择器。
@@ -349,7 +349,7 @@ page {
uni-app 提供内置 CSS 变量
-|CSS变量|描述|5+App|小程序|H5|
+|CSS变量|描述|App|小程序|H5|
|:-|:-|:-|:-|:-|
|--status-bar-height|系统状态栏高度|[系统状态栏高度](http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight)、nvue注意见下|25px|0|
|--window-top|内容区域距离顶部的距离|0|0|NavigationBar 的高度|
@@ -357,7 +357,7 @@ uni-app 提供内置 CSS 变量
**注意:**
-- ``var(--status-bar-height)`` 此变量在微信小程序环境为固定 ``25px``,在 5+App 里为手机实际状态栏高度。
+- ``var(--status-bar-height)`` 此变量在微信小程序环境为固定 ``25px``,在 App 里为手机实际状态栏高度。
- 当设置 ``"navigationStyle":"custom"`` 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 ``var(--status-bar-height)`` 的 view 放在页面顶部,避免页面内容出现在状态栏。
- 由于在H5端,不存在原生导航栏和tabbar,也是前端div模拟。如果设置了一个固定位置的居底view,在小程序和App端是在tabbar上方,但在H5端会与tabbar重叠。此时可使用`--window-bottom`,不管在哪个端,都是固定在tabbar上方。
- 目前 nvue 在App端,还不支持 `--status-bar-height`变量,替代方案是在页面onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度,然后通过style绑定方式给占位view设定高度。下方提供了示例代码
@@ -439,15 +439,15 @@ uni-app 提供内置 CSS 变量
### 背景图片
-``uni-app`` 支持使用在 css 里设置背景图片,使用方式与普通 ``web`` 项目相同,需要注意以下几点:
+``uni-app`` 支持使用在 css 里设置背景图片,使用方式与普通 ``web`` 项目大体相同,但需要注意以下几点:
- 支持 base64 格式图片。
- 支持网络路径图片。
+- 小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前,也有相同限制。v3编译模式起支持直接使用本地背景图和字体。
- 使用本地路径背景图片需注意:
- 1. 图片小于 40kb,``uni-app`` 会自动将其转化为 base64 格式
- 2. 图片大于等于 40kb, 需开发者自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。
+ 1. 为方便开发者,在背景图片小于 40kb 时,``uni-app`` 编译到不支持本地背景图的平台时,会自动将其转化为 base64 格式;
+ 2. 图片大于等于 40kb,会有性能问题,不建议使用太大的背景图,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。
3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
- 4. `uni-app v3`版本设定为不自动将图片转 base64 格式
```css
.test2 {
background-image: url('~@/static/logo.png');
@@ -456,7 +456,7 @@ uni-app 提供内置 CSS 变量
**注意**
- 微信小程序不支持相对路径(真机不支持,开发工具支持)
-- 其他端使用本地背景图片作为背景图没有限制
+
### 字体图标
@@ -464,11 +464,12 @@ uni-app 提供内置 CSS 变量
- 支持 base64 格式字体图标。
- 支持网络路径字体图标。
+- 小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前,也有相同限制。v3编译模式起支持直接使用本地背景图和字体。
- 网络路径必须加协议头 ``https``。
- 从 [http://www.iconfont.cn](http://www.iconfont.cn) 上拷贝的代码,默认是没加协议头的。
-- ``uni-app`` 本地路径图标字体支持情况:
- 1. 字体文件小于 40kb,``uni-app`` 会自动将其转化为 base64 格式;
- 2. 字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效;
+- 使用本地路径图标字体需注意:
+ 1. 为方便开发者,在字体文件小于 40kb 时,``uni-app`` 会自动将其转化为 base64 格式;
+ 2. 字体文件大于等于 40kb,仍转换为 base64 方式使用的话可能有性能问题,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用;
3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
```css
@font-face {
@@ -731,13 +732,13 @@ const package = require('packageName')
```
## 小程序组件支持
-``uni-app`` 支持在 App 和 小程序 中使用**小程序自定义组件**。
+``uni-app`` 支持在 App 和 小程序 中使用**小程序自定义组件**,从HBuilderX2.4.7起,H5端也可以运行微信小程序组件。
**平台差异说明**
|平台|支持情况|小程序组件存放目录|
|---|---|---|
-|H5|不支持||
+|H5|支持微信小程序组件(2.4.7+)|wxcomponents|
|App(不含nvue)|支持微信小程序组件|wxcomponents|
|微信小程序|支持微信小程序组件|wxcomponents|
|支付宝小程序|支持支付宝小程序组件|mycomponents|
@@ -964,7 +965,7 @@ WXS是一套运行在视图层的脚本语言,[微信端的规范详见](https
它的特点是运行在视图层。当需要避免逻辑层和渲染层交互通信折损时,可采用wxs。
-uni-app可以将wxs代码编译到微信小程序、QQ小程序、APP、H5上(`HBuilderX 2.2.5`及以上版本)
+uni-app可以将wxs代码编译到微信小程序、QQ小程序、app-vue、H5上(`uni-app 2.2.5`及以上版本)
与wxs类似,百度小程序提供了Filter、阿里小程序提供了SJS,uni-app也支持使用这些功能,并将它们编译到百度和阿里的小程序端。不过它们的功能还不如wxs强大。此外头条系小程序自身不支持类似功能。
@@ -1177,12 +1178,25 @@ export default {
- `nvue`页面暂不支持wxs、sjs、filter.js
- 各个`script`标签会分别被打包至对应支持平台,不需要额外写条件编译
- 自`HBuilderX 2.2.5`开始,不推荐使用各个小程序自有的引入方式,推荐使用`script`标签引入
+- App和H5端,提供了wxs的升级版,更加强大,见下面的 [renderjs](?id=renderjs) 章节
## renderjs
+`renderjs`是一个运行在视图层的js。它比[WXS](?id=wxs)更加强大。它只支持app-vue和h5。
+
+`renderjs`的主要作用有2个:
+- 大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
+- 在视图层操作dom,运行for web的js库
-uni-app 2.5.5+ 在 [WXS](?id=wxs) 的基础上扩展了 renderjs,以 vue 组件的写法运行在 view 层。仅支持 App([V3](https://ask.dcloud.net.cn/article/36599) 且不含 nvue)、H5。
+**平台差异说明**
+
+|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
+|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+|√(2.5.5+,仅支持vue,并要求v3编译器)|√|x|x|x|x|x|
+
+renderjs,以 vue 组件的写法运行在 view 层。
### 使用方式
+
设置 script 节点的 lang 为 renderjs
```html
-```
-
-### 注意事项
-* 在H5平台 使用 v-for 循环整数时和其他平台存在差异,如 `v-for="(item, index) in 10"` 中,在H5平台 item 从 1 开始,其他平台 item 从 0 开始,可使用第二个参数 index 来保持一致。
+```
+
+### 注意事项
+* 在H5平台 使用 v-for 循环整数时和其他平台存在差异,如 `v-for="(item, index) in 10"` 中,在H5平台 item 从 1 开始,其他平台 item 从 0 开始,可使用第二个参数 index 来保持一致。
* 在非H5平台 循环对象时不支持第三个参数,如 `v-for="(value, name, index) in object"` 中,index 参数是不支持的。
## 事件处理器
@@ -210,7 +211,7 @@ export default {
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
- longtap: 'longtap',
+ longtap: 'longtap', //推荐使用longpress代替
input: 'input',
change: 'change',
submit: 'submit',
@@ -323,7 +324,7 @@ export default {
## v-html指令
-由于非H5端,不支持dom和普通html元素,所以自然非H5端也不支持v-html。
+App端(vue页面[V3编译模式](https://ask.dcloud.net.cn/article/36599))和H5端支持v-html,其他端不支持v-html。
跨端的富文本处理方案详见:[https://ask.dcloud.net.cn/article/35772](https://ask.dcloud.net.cn/article/35772)
@@ -355,7 +356,9 @@ export default {
```
-**uni-app只支持vue单文件组件(.vue 组件)**。其他的诸如:动态组件,自定义 ``render``,和``