Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
良好的行为成为习惯
uni-app
提交
63e64be8
U
uni-app
项目概览
良好的行为成为习惯
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
63e64be8
编写于
8月 22, 2019
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'master' into fix-inner-audio
上级
f5af5520
9c438f5c
变更
15
隐藏空白更改
内联
并排
Showing
15 changed file
with
243 addition
and
145 deletion
+243
-145
README.md
README.md
+6
-6
docs/README.md
docs/README.md
+7
-1
docs/api/media/image.md
docs/api/media/image.md
+80
-76
docs/api/request/websocket.md
docs/api/request/websocket.md
+7
-5
docs/api/router.md
docs/api/router.md
+12
-2
docs/case.md
docs/case.md
+20
-4
docs/component/_sidebar.md
docs/component/_sidebar.md
+6
-2
docs/component/button.md
docs/component/button.md
+10
-9
docs/component/canvas.md
docs/component/canvas.md
+5
-5
docs/component/input.md
docs/component/input.md
+6
-24
docs/component/list.md
docs/component/list.md
+3
-1
docs/component/navigator.md
docs/component/navigator.md
+24
-3
docs/component/refresh.md
docs/component/refresh.md
+54
-0
docs/component/waterfall.md
docs/component/waterfall.md
+3
-1
docs/use.md
docs/use.md
+0
-6
未找到文件。
README.md
浏览文件 @
63e64be8
...
...
@@ -14,9 +14,9 @@
## 扫码体验
一套代码编译到
7个平台,开发一次、多处运行,这不是梦想,而是现实。依次扫描7
个二维码,亲自体验最全面的跨平台效果!
一套代码编译到
8个平台,开发一次、多处运行,这不是梦想,而是现实。依次扫描8
个二维码,亲自体验最全面的跨平台效果!
<img
src=
"http
://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/barcode-20190131.pn
g"
/>
<img
src=
"http
s://img-cdn-qiniu.dcloud.net.cn/uni-app-qr-all.jp
g"
/>
*注: Appstore、百度、头条平台不能提交简单demo,故iOS、百度小程序、头条小程序版补充了一些其他功能。*
...
...
@@ -29,17 +29,17 @@
## 项目案例
案例:
[
uniapp.dcloud.io/case
](
https://uniapp.dcloud.io/case
)
案例
展示
:
[
uniapp.dcloud.io/case
](
https://uniapp.dcloud.io/case
)
欢迎
广大开发者踊跃提交自己的应用案例
,
[
uni-app案例征集
](
https://github.com/dcloudio/uni-app/issues/6
)
欢迎
提交你的应用
,
[
uni-app案例征集
](
https://github.com/dcloudio/uni-app/issues/6
)
## 需求墙
`uni-app`
计划支持的功能点,会在需求墙上进行展示,
并允许开发者对需求进行投票
,
[
前往投票
](
https://dev.dcloud.net.cn/wish/
)
。
`uni-app`
计划支持的功能点,会在需求墙上进行展示,
征集开发者的投票意见
,
[
前往投票
](
https://dev.dcloud.net.cn/wish/
)
。
## 更新日志
`uni-app`
一直保持
极高的开发活跃度
,详见
[
uni-app 更新日志
](
docs/release.md
)
。
`uni-app`
一直保持
高频的更新迭代
,详见
[
uni-app 更新日志
](
docs/release.md
)
。
## 论坛
...
...
docs/README.md
浏览文件 @
63e64be8
...
...
@@ -7,7 +7,7 @@
<div class="quick">
<h3 id="快速体验"><a href="/README?id=%e5%bf%ab%e9%80%9f%e4%bd%93%e9%aa%8c" data-id="快速体验" class="anchor"><span>快速体验</span></a></h3>
<p>一套代码编到
7个平台,这不是梦想。眼见为实,扫描7
个二维码,亲自体验最全面的跨平台效果!</p>
<p>一套代码编到
8个平台,这不是梦想。眼见为实,扫描8
个二维码,亲自体验最全面的跨平台效果!</p>
<div class="flex-img-group-view">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
...
...
@@ -45,6 +45,12 @@
</div>
<b>头条小程序版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qq.png" width="160"/>
</div>
<b>QQ小程序版</b>
</a>
</div>
<p>
<em>注:Appstore、百度、头条平台不能提交简单demo,故补充了一些其他功能。</em></br>
...
...
docs/api/media/image.md
浏览文件 @
63e64be8
### uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。另外选择和上传非图像、视频文件参考:
[
https://ask.dcloud.net.cn/article/35547
](
https://ask.dcloud.net.cn/article/35547
)
。
从本地相册选择图片或使用相机拍照。
另外选择和上传非图像、视频文件参考:
[
https://ask.dcloud.net.cn/article/35547
](
https://ask.dcloud.net.cn/article/35547
)
。
App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考
[
plus.camera
](
https://www.html5plus.org/doc/zh_cn/camera.html
)
**OBJECT 参数说明**
...
...
@@ -55,7 +59,7 @@ uni.chooseImage({
|current|String/Number|详见下方说明|详见下方说明||
|urls|Array
<
String
>
|是|需要预览的图片链接列表||
|indicator|String|否|图片指示器样式,可取值:"default" - 底部圆点指示器; "number" - 顶部数字指示器; "none" - 不显示指示器。|5+App|
|loop|Boolean|否|是否可循环预览,默认值为 false|5+App|
|loop|Boolean|否|是否可循环预览,默认值为 false|5+App|
|longPressActions|Object|否|长按图片显示操作菜单,如不填默认为
**保存相册**
,1.9.5 起支持。|5+App|
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
...
...
@@ -78,47 +82,47 @@ current 为当前显示图片的链接/索引值,不填或填写的值无效
-
传 B2 的链接,预览的结果是 B1,前一张是 A,下一张是 C。
-
传 B2 的索引值 3,预览的结果是 B2,前一张是 C,下一张是 D。此时在微信/百度/头条小程序平台,最终传入的 urls 是
`[A, C, B2, D]`
,过滤掉了与 B2 重复的 B1。
**longPressActions 参数说明**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|itemList|Array
<
String
>
|是|按钮的文字数组|
|itemColor|String|否|按钮的文字颜色,字符串格式,默认为"#000000"|
|success|Function|否|接口调用成功的回调函数,详见返回参数说明|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
**longPressActions 参数说明**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|itemList|Array
<
String
>
|是|按钮的文字数组|
|itemColor|String|否|按钮的文字颜色,字符串格式,默认为"#000000"|
|success|Function|否|接口调用成功的回调函数,详见返回参数说明|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
**success 返回参数说明**
|参数|类型|说明|
|:-|:-|:-|
|:-|:-|:-|
|index|Number|用户长按图片的索引值|
|tapIndex|Number|用户点击按钮列表的索引值|
|tapIndex|Number|用户点击按钮列表的索引值|
**示例**
```
javascript
// 从相册选择6张图
uni
.
chooseImage
({
count
:
6
,
sizeType
:
[
'
original
'
,
'
compressed
'
],
sourceType
:
[
'
album
'
],
success
:
function
(
res
)
{
// 预览图片
uni
.
previewImage
({
urls
:
res
.
tempFilePaths
,
longPressActions
:
{
itemList
:
[
'
发送给朋友
'
,
'
保存图片
'
,
'
收藏
'
],
success
:
function
(
data
)
{
console
.
log
(
'
选中了第
'
+
(
data
.
tapIndex
+
1
)
+
'
个按钮,第
'
+
(
data
.
index
+
1
)
+
'
张图片
'
);
},
fail
:
function
(
err
)
{
console
.
log
(
err
.
errMsg
);
}
}
});
}
uni
.
chooseImage
({
count
:
6
,
sizeType
:
[
'
original
'
,
'
compressed
'
],
sourceType
:
[
'
album
'
],
success
:
function
(
res
)
{
// 预览图片
uni
.
previewImage
({
urls
:
res
.
tempFilePaths
,
longPressActions
:
{
itemList
:
[
'
发送给朋友
'
,
'
保存图片
'
,
'
收藏
'
],
success
:
function
(
data
)
{
console
.
log
(
'
选中了第
'
+
(
data
.
tapIndex
+
1
)
+
'
个按钮,第
'
+
(
data
.
index
+
1
)
+
'
张图片
'
);
},
fail
:
function
(
err
)
{
console
.
log
(
err
.
errMsg
);
}
}
});
}
});
```
...
...
@@ -221,54 +225,54 @@ uni.chooseImage({
});
}
});
```
# uni.compressImage(OBJECT)
压缩图片接口,可选压缩质量
```
# uni.compressImage(OBJECT)
压缩图片接口,可选压缩质量
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序
|:-:|:-:|:-:|:-:|:-:|:-:|
|1.9.7+
[
自定义组件编译模式
](
https://ask.dcloud.net.cn/article/35843
)
|x|√|√|x|x|
**OBJECT 参数说明**
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| :- | :- | :- | :- | :- |
| src | String | | 是 | 图片路径,图片的路径,可以是相对路径、临时文件路径、存储文件路径 |
| quality | Number | 80 | 否 | 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效) |
| success | Function | | 否 | 接口调用成功的回调函数 |
| fail | Function | | 否 | 接口调用失败的回调函数 |
| complete | Function | | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
**success 返回参数说明**
| 属性 | 类型 | 说明 |
| :- | :- | :- |
| tempFilePath | String | 压缩后图片的临时文件路径 |
**示例代码:**
```
js
|1.9.7+
[
自定义组件编译模式
](
https://ask.dcloud.net.cn/article/35843
)
|x|√|√|x|x|
**OBJECT 参数说明**
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| :- | :- | :- | :- | :- |
| src | String | | 是 | 图片路径,图片的路径,可以是相对路径、临时文件路径、存储文件路径 |
| quality | Number | 80 | 否 | 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效) |
| success | Function | | 否 | 接口调用成功的回调函数 |
| fail | Function | | 否 | 接口调用失败的回调函数 |
| complete | Function | | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
**success 返回参数说明**
| 属性 | 类型 | 说明 |
| :- | :- | :- |
| tempFilePath | String | 压缩后图片的临时文件路径 |
**示例代码:**
```
js
uni
.
compressImage
({
src
:
'
/static/logo.jpg
'
,
quality
:
80
,
success
:
res
=>
{
console
.
log
(
res
.
tempFilePath
)
}
})
```
# wx.chooseMessageFile(OBJECT)
从客户端会话选择文件。
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|x|x|
})
```
# wx.chooseMessageFile(OBJECT)
从客户端会话选择文件。
**平台差异说明**
|5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|x|x|
docs/api/request/websocket.md
浏览文件 @
63e64be8
...
...
@@ -47,15 +47,17 @@ var socketTask = uni.connectSocket({
如果没有传入 success / fail / complete 参数,则会返回封装后的 Promise 对象:
[
Promise 封装
](
/api/README?id=promise-%E5%B0%81%E8%A3%85
)
**注意**
-
网络请求的
``超时时间``
可以统一在
``manifest.json``
中配置
[
networkTimeout
](
/collocation/manifest?id=networktimeout
)
。
自定义组件模式下是基于
`weex`
的
`v8`
引擎运行,所有
`vue`
页面的
`js`
都是在同一个
`weex`
的
`js`
环境中运行。目前
`weex`
限制一个
`js`
环境中只支持一个
`websocket`
连接,所以导致所有
`vue`
页面只能使用一个
`websocket`
连接。
**注意事项**
-
网络请求的
``超时时间``
可以统一在
``manifest.json``
中配置
[
networkTimeout
](
/collocation/manifest?id=networktimeout
)
。
-
目前不支持
``ArrayBuffer``
类型的数据收发,可以使用
[
plus-websocket
](
http://ext.dcloud.net.cn/plugin?id=647
)
插件替代。
-
自定义组件模式下是基于
`weex`
的
`v8`
引擎运行,所有
`vue`
页面的
`js`
都是在同一个
`weex`
的
`js`
环境中运行。目前
`weex`
限制一个
`js`
环境中只支持一个
`websocket`
连接,所以导致所有
`vue`
页面只能使用一个
`websocket`
连接。
**临时解决方案:**
- 回退使用非自定义组件模式(不推荐)
- 多个websocket在独立的nvue页面中使用
- 多个 websocket 在独立的 nvue 页面中使用
- 使用 [plus-websocket](http://ext.dcloud.net.cn/plugin?id=647) 插件替代
后续我们会修改
`weex`
的限制,以支持多个
`websocket`
连接
...
...
docs/api/router.md
浏览文件 @
63e64be8
...
...
@@ -16,12 +16,13 @@
**示例**
```
javascript
//在起始页面跳转到test.vue页面并传递参数
uni
.
navigateTo
({
url
:
'
test?id=1&name=uniapp
'
});
```
```
javascript
//
test.vue
//
在test.vue页面接受参数
export
default
{
onLoad
:
function
(
option
)
{
//option为object类型,会序列化上个页面传递的参数
console
.
log
(
option
.
id
);
//打印出上个页面传递的参数。
...
...
@@ -30,11 +31,20 @@ export default {
}
```
url有长度限制,太长的字符串会传递失败,可使用
[
窗体通信
](
https://uniapp.dcloud.io/collocation/frame/communication
)
、
[
全局变量
](
https://ask.dcloud.net.cn/article/35021
)
,或
`encodeURIComponent`
等多种方式解决,如下为
`encodeURIComponent`
示例。
```
html
<navigator
:url=
"'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"
></navigator>
```
```
javascript
// 在test.vue页面接受参数
onLoad
:
function
(
option
)
{
const
item
=
JSON
.
parse
(
decodeURIComponent
(
option
.
item
));
}
```
**注意:**
*
页面跳转路径有层级限制,不能无限制跳转新页面
*
跳转到 tabBar 页面只能使用 switchTab 跳转
*
```App.vue```
的onlaunch里进行页面跳转,如遇白屏报错,请参考
[
https://ask.dcloud.net.cn/article/35942
](
https://ask.dcloud.net.cn/article/35942
)
*
路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url,在App平台可以使用
[
plus.runtime.openURL
](
http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.openURL
)
或web-view组件;H5平台使用 window.open;小程序平台使用web-view组件(url需在小程序的联网白名单中)。在hello uni-app中有个组件ulink.vue已对多端进行封装,可参考。
#### uni.redirectTo(OBJECT)
...
...
docs/case.md
浏览文件 @
63e64be8
...
...
@@ -43,9 +43,13 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
</a>
</div>
<a
href=
"https://www.oschina.net/"
target=
"_blank"
class=
"clear-style"
><b>
开源中国:
</b></a>
开源中国(oschina)百度小程序
,提供最新的开源软件资讯。
<a
href=
"https://www.oschina.net/"
target=
"_blank"
class=
"clear-style"
><b>
开源中国:
</b></a>
中文开源技术交流社区
,提供最新的开源软件资讯。
<div
style=
"display:flex;justify-content: space-around;"
>
<a
href=
"javascript:;"
target=
"_blank"
class=
"clear-style barcode-view"
>
<img
src=
"http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/oschina_weixin.jpg"
width=
"200"
/>
<span
style=
"margin-top:15px;"
>
微信小程序码
</span>
</a>
<a
href=
"javascript:;"
target=
"_blank"
class=
"clear-style barcode-view"
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/onchina.png"
width=
"200"
/>
<span
style=
"margin-top:15px;"
>
百度小程序码
</span>
</a>
...
...
@@ -91,10 +95,22 @@ uni-app已经有几十万开发者,创建了几十万个项目,是开发者
</a>
</div>
<
a
href=
"#"
target=
"_blank"
class=
"clear-style"
><b>
分秒律师:
</b></a>
律师咨询类应用。
<
b>
垃圾分类:
</b>
垃圾分一分,环境美十分。参与垃圾分类,保护地球家园,共创美好世界。(作者:怎么会这样)
<div
style=
"display:flex;justify-content: space-around;"
>
<a
href=
"https://www.cyb520.com/"
target=
"_blank"
class=
"clear-style barcode-view"
>
<img
src=
"http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/case-toutiao-fenmiaolvshi.png"
width=
"200"
/>
<a
href=
"#"
class=
"clear-style barcode-view"
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/wastesep-mp-weixin.png"
width=
"200"
/>
<span
style=
"margin-top:15px;"
>
微信小程序码
</span>
</a>
<a
href=
"#"
class=
"clear-style barcode-view"
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/wastesep-mp-qq.png"
width=
"200"
/>
<span
style=
"margin-top:15px;"
>
QQ小程序码
</span>
</a>
<a
href=
"#"
class=
"clear-style barcode-view"
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/wastesep-mp-douyin.png"
width=
"200"
/>
<span
style=
"margin-top:15px;"
>
抖音小程序码
</span>
</a>
<a
href=
"#"
class=
"clear-style barcode-view"
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/wastesep-mp-toutiao.png"
width=
"200"
/>
<span
style=
"margin-top:15px;"
>
头条小程序码
</span>
</a>
</div>
...
...
docs/component/_sidebar.md
浏览文件 @
63e64be8
...
...
@@ -44,8 +44,12 @@
*
[
official-account
](
component/official-account.md
)
*
[
open-data
](
component/open-data.md
)
*
App nvue专用组件
*
[
barcode
](
component/barcode.md
)
*
[
recycle-list
](
component/recycle-list.md
)
*
[
barcode
](
component/barcode.md
)
*
[
list
](
component/list.md
)
*
[
cell
](
component/cell.md
)
*
[
recycle-list
](
component/recycle-list.md
)
*
[
waterfall
](
component/waterfall.md
)
*
[
refresh
](
component/refresh.md
)
*
扩展组件(uni ui)
*
[
uni-ui整体介绍
](
component/README?id=uniui
)
*
[
Badge 数字角标
](
https://ext.dcloud.net.cn/plugin?id=21
)
...
...
docs/component/button.md
浏览文件 @
63e64be8
...
...
@@ -48,21 +48,22 @@
|:-|:-|:-|
|feedback|打开“意见反馈”页面,用户可提交反馈内容并上传日志|5+App、微信小程序|
|share|触发用户转发|微信小程序、百度小程序、支付宝小程序、头条小程序|
|getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息|微信小程序、百度小程序|
| contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |微信小程序|
| getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、头条小程序 |
| launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数|微信小程序|
| openSetting | 打开授权设置页 |微信小程序、百度小程序|
| getAuthorize | 支持小程序授权 | 支付宝小程序 |
| contactShare | 分享到通讯录好友 | 支付宝小程序 |
| lifestyle | 关注生活号 | 支付宝小程序 |
|getUserInfo|获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息|微信小程序、百度小程序|
| contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |微信小程序|
| getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息|微信小程序、百度小程序、头条小程序 |
| launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数|微信小程序|
| openSetting | 打开授权设置页 |微信小程序、百度小程序|
| getAuthorize | 支持小程序授权 | 支付宝小程序 |
| contactShare | 分享到通讯录好友 | 支付宝小程序 |
| lifestyle | 关注生活号 | 支付宝小程序 |
**注意**
-
在小程序中,开发者可以登录
[
小程序管理后台
](
https://mp.weixin.qq.com/
)
后进入左侧菜单“客服反馈”页面获取反馈内容。
-
在 App 中,开发者登录
[
DCloud开发者中心
](
https://dev.dcloud.net.cn/
)
后点击应用名称,进入左侧菜单“用户反馈”页面获取反馈内容。
-
点击 share 分享按钮时会触发
[
onShareAppMessage
](
/api/plugins/share
)
-
支付宝小程序平台,获取用户手机号时,建议先通过条件编译的方式,调用支付宝原生API,
[
参考
](
https://docs.alipay.com/mini/api/getphonenumber
)
**示例**
...
...
docs/component/canvas.md
浏览文件 @
63e64be8
...
...
@@ -15,12 +15,12 @@
|@longtap|EventHandle||手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动|头条小程序不支持|
|@error|EventHandle||当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}|头条小程序不支持|
**注:**
**注
意事项
:**
1.
canvas 标签默认宽度 300px、高度 225px
。
2.
同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。
3.
canvas在微信、百度小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,
[
参考
](
/component/native-component
)
。canvas在App端vue页面不是原生组件,目前App端nvue还不支持canvas组件。
-
App-nvue 暂不支持 canvas 组件
*
canvas 标签默认宽度 300px、高度 225px,动态修改 canvas 大小后需要重新绘制
。
*
同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。
*
canvas 在微信小程序、百度小程序中为原生组件,层级高于前端组件,请勿内嵌在 scroll-view、swiper、picker-view、movable-view 中使用。解决 canvas 层级过高无法覆盖,参考
[
native-component
](
/component/native-component
)
。
*
canvas 在App端 vue 页面不是原生组件,目前App端 nvue 还不支持 canvas 组件。
**示例:**
...
...
docs/component/input.md
浏览文件 @
63e64be8
...
...
@@ -21,7 +21,7 @@
|cursor|Number||指定focus时的光标位置||
|selection-start|Number|-1|光标起始位置,自动聚集时有效,需与selection-end搭配使用||
|selection-end|Number|-1|光标结束位置,自动聚集时有效,需与selection-start搭配使用||
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|5+App、微信小程序、百度小程序、QQ小程序|
|adjust-position|Boolean|true|键盘弹起时,是否自动上推页面|5+App
(softinputMode 为 adjustResize 时无效)
、微信小程序、百度小程序、QQ小程序|
|@input|EventHandle||当键盘输入时,触发input事件,event.detail = {value}|差异见下方 Tips|
|@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}||
...
...
@@ -99,34 +99,16 @@ this.$mp.page.$getAppWebview().setStyle({
#### 关于软键盘弹出的逻辑说明
App平台
,软键盘弹出有adjustResize|adjustPan 两种模式
App平台
软键盘弹出有 adjustResize|adjustPan 两种模式,默认为 adjustPan 模式,小程序平台只支持 adjustPan 模式,H5平台因不同浏览器而异
-
adjustResize:软键盘弹出时,webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度
-
adjustPan:软键盘弹出时,webview窗体高度不变,但窗体上推,以保证输入框不被软键盘盖住
除了App平台,其他平台只支持adjustPan模式。App平台两种模式都支持,具体如下:
-
Android:默认为adjustResize。配置修改只能在manifest中修改,全局生效。如果改为adjustPan,无法顺利上推窗体,底部的input会被软键盘盖住
-
iOS平台:默认为adjustPan。配置可以在manifest中全局修改,也可以单独页面设置style。没有类似Android的局限。
配置方式,在 pages.json 中配置 style
如下为全局或页面的配置方式:
-
在manifest中配置
```
json
"app-plus"
:
{
"softinput"
:
{
"mode"
:
"adjustResize|adjustPan"
//
软键盘弹出模式
}
}
```
-
如需要单个页面配置,则在pages.json中配置
```
json
{
"path"
:
"pages/component/input/input"
,
"style"
:
{
"app-plus"
:{
"softinputMode"
:
"adjustResize"
//仅iOS支持单个页面配置
}
}
}
"app-plus"
:
{
"softinputMode"
:
"adjustResize"
}
```
App端开发聊天类应用时,目前推荐改为adjustResize模式。在hello uni-app的模板-聊天中有详细示例。
...
...
docs/component/list.md
浏览文件 @
63e64be8
...
...
@@ -32,7 +32,7 @@ app端nvue专用组件。
`<list>`
的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。
-
`<cell>`
<br>
用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。
Weex
会对
`<cell>`
进行高效的内存回收以达到更好的性能。
用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。
`<list>`
会对
`<cell>`
进行高效的内存回收以达到更好的性能。
-
`<header>`
<br>
当
`<header>`
到达屏幕顶部时,吸附在屏幕顶部。
-
`<refresh>`
<br>
用于给列表添加下拉刷新的功能。
-
`<loading>`
<br>
...
...
@@ -50,6 +50,8 @@ app端nvue专用组件。
`loadmoreoffset`
示意图:
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/app-nvue-component-list.png"
/>
#### 事件
...
...
docs/component/navigator.md
浏览文件 @
63e64be8
...
...
@@ -26,8 +26,8 @@
|reLaunch|对应 uni.reLaunch 的功能|头条小程序不支持|
|navigateBack|对应 uni.navigateBack 的功能|
|
**注意**
-
navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;},
``<navigator>``
的子节点背景色应为透明色。
**
**注意**
-
navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;},
``<navigator>``
的子节点背景色应为透明色。
**
-
app-nvue 平台暂不支持
`<navigator>`
**示例**
...
...
@@ -49,5 +49,26 @@
</template>
```
```
javascript
// navigate.vue页面接受参数
export
default
{
onLoad
:
function
(
option
)
{
//option为object类型,会序列化上个页面传递的参数
console
.
log
(
option
.
id
);
//打印出上个页面传递的参数。
console
.
log
(
option
.
name
);
//打印出上个页面传递的参数。
}
}
```
url有长度限制,太长的字符串会传递失败,可使用
[
窗体通信
](
https://uniapp.dcloud.io/collocation/frame/communication
)
、
[
全局变量
](
https://ask.dcloud.net.cn/article/35021
)
,或
`encodeURIComponent`
等多种方式解决,如下为
`encodeURIComponent`
示例。
```
html
<navigator
:url=
"'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"
></navigator>
```
```
javascript
// navigate.vue页面接受参数
onLoad
:
function
(
option
)
{
const
item
=
JSON
.
parse
(
decodeURIComponent
(
option
.
item
));
}
```
**注意**
-
跳转tabbar页面,必须设置open-type="switchTab"
\ No newline at end of file
-
跳转tabbar页面,必须设置open-type="switchTab"
docs/component/refresh.md
0 → 100644
浏览文件 @
63e64be8
#### refresh
app端nvue专用组件。
`<refresh>`
为容器提供下拉刷新功能。
> 注意
> - `<refresh>` 是 `<scroll-view>`、`<list>`、`<waterfall>` 的子组件,只能在被它们包含时才能被正确渲染。
```
<scroll-view>
<refresh>
<text>Refreshing...</text>
</refresh>
<div v-for="num in lists">
<text>{{num}}</text>
</div>
</scroll-view>
```
#### 子组件
-
诸如
`<text>`
、
`<image>`
之类的任何组件,都可以放到
`<loading>`
进行渲染。
-
特殊子组件
`<loading-indicator>`
: 只能作为
`<refresh>`
和
`<loading>`
的子组件使用,拥有默认的动画效果实现。
```
<refresh>
<text>Refreshing</text>
<loading-indicator></loading-indicator>
</refresh>
```
#### 属性
`display`
控制
`<refresh>`
组件显示、隐藏。
`display`
的设置必须成对出现,即设置
`display="show"`
, 必须有对应的
`display="hide"`
。可选值为
`show / hide`
,默认值为
`show`
。
#### 事件
-
refresh 事件:当
`<scroll-view>`
、
`<list>`
、
`<waterfall>`
被下拉完成时触发。
-
pullingdown 事件:当
`<scroll-view>`
、
`<list>`
、
`<waterfall>`
被下拉时触发。 可以从
`event`
参数对象中获取以下数据:
-
`dy`
: 前后两次回调滑动距离的差值
-
`pullingDistance`
: 下拉的距离
-
`viewHeight`
: refresh 组件高度
-
`type`
: “pullingdown” 常数字符串
```
<refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<text>Refreshing ...</text>
<loading-indicator></loading-indicator>
</refresh>
```
docs/component/waterfall.md
浏览文件 @
63e64be8
...
...
@@ -29,10 +29,11 @@ app端nvue专用组件。
和
`<list>`
组件一样,
`<waterfall>`
组件的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。
-
`<cell>`
:用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。
Weex
会对
`<cell>`
进行高效的内存回收以达到更好的性能。
-
`<cell>`
:用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。
`<waterfall>`
会对
`<cell>`
进行高效的内存回收以达到更好的性能。
-
`<header>`
:当
`<header>`
到达屏幕顶部时,吸附在屏幕顶部。
-
`<refresh>`
:用于给列表添加下拉刷新的功能。
-
`<loading>`
:
`<loading>`
用法与特性和
`<refresh>`
类似,用于给列表添加上拉加载更多的功能。
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/app-nvue-component-waterfall-01.png"
/>
#### 属性
...
...
@@ -46,6 +47,7 @@ app端nvue专用组件。
-
column-gap: [可选]列与列的间隙. 如果指定了
`normal`
,则对应 32.
-
left-gap: [可选]左边cell和列表的间隙. 如果未指定 ,则对应
`0`
-
right-gap: [可选]右边cell和列表的间隙. 如果未指定,则对应
`0`
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/app-nvue-component-waterfall-02.png"
/>
其他支持的属性参见
`<list>`
组件属性部分
...
...
docs/use.md
浏览文件 @
63e64be8
...
...
@@ -11,12 +11,6 @@
详见Vue官方文档:
[
生命周期钩子
](
https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
)
。
**注意**
*
不要在选项属性或回调上使用箭头函数,比如
``created: () => console.log(this.a)``
或
``vm.$watch('a', newValue => this.myMethod())``
。因为箭头函数是和父级上下文绑定在一起的,
``this``
不会是如你做预期的
``Vue``
实例,且
``this.a``
或
``this.myMethod``
也会是未定义的。
*
建议使用
`uni-app`
的
`onReady`
代替
`vue`
的
`mounted`
。
*
建议使用
`uni-app`
的
`onLoad`
代替
`vue`
的
`created`
。
## 模板语法
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录