audio
注意:1.6.0 版本开始,该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口
音频。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
id | String | audio 组件的唯一标识符 | |
src | String | 要播放音频的资源地址 | |
loop | Boolean | false | 是否循环播放 |
controls | Boolean | false | 是否显示默认控件 |
poster | String | 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 | |
name | String | 未知音频 | 默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效 |
author | String | 未知作者 | 默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效 |
binderror | EventHandle | 当发生错误时触发 error 事件,detail = {errMsg: MediaError.code} | |
bindplay | EventHandle | 当开始/继续播放时触发play事件 | |
bindpause | EventHandle | 当暂停播放时触发 pause 事件 | |
bindtimeupdate | EventHandle | 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration} | |
bindended | EventHandle | 当播放到末尾时触发 ended 事件 |
MediaError.code
返回错误码 | 描述 |
---|---|
1 | 获取资源被用户禁止 |
2 | 网络错误 |
3 | 解码错误 |
4 | 不合适资源 |
示例代码:
在开发者工具中预览效果
<!-- audio.wxml -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
// audio.js
Page({
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
},
data: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},
audioPlay: function () {
this.audioCtx.play()
},
audioPause: function () {
this.audioCtx.pause()
},
audio14: function () {
this.audioCtx.seek(14)
},
audioStart: function () {
this.audioCtx.seek(0)
}
})
相关api:wx.createAudioContext
image
图片。
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
src | String | 图片资源地址 | ||
mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 | |
lazy-load | Boolean | false | 图片懒加载。只针对page与scroll-view下的image有效 | 1.5.0 |
binderror | HandleEvent | 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} | ||
bindload | HandleEvent | 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} |
注:image组件默认宽度300px、高度225px
mode 有效值:
mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
模式 | 值 | 说明 |
---|---|---|
缩放 | scaleToFill | 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
缩放 | aspectFit | 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
缩放 | aspectFill | 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
缩放 | widthFix | 宽度不变,高度自动变化,保持原图宽高比不变 |
裁剪 | top | 不缩放图片,只显示图片的顶部区域 |
裁剪 | bottom | 不缩放图片,只显示图片的底部区域 |
裁剪 | center | 不缩放图片,只显示图片的中间区域 |
裁剪 | left | 不缩放图片,只显示图片的左边区域 |
裁剪 | right | 不缩放图片,只显示图片的右边区域 |
裁剪 | top left | 不缩放图片,只显示图片的左上边区域 |
裁剪 | top right | 不缩放图片,只显示图片的右上边区域 |
裁剪 | bottom left | 不缩放图片,只显示图片的左下边区域 |
裁剪 | bottom right | 不缩放图片,只显示图片的右下边区域 |
示例:
在开发者工具中预览效果
<view class="page">
<view class="page__hd">
<text class="page__title">image</text>
<text class="page__desc">图片</text>
</view>
<view class="page__bd">
<view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
<view class="section__title">{{item.text}}</view>
<view class="section__ctn">
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
</view>
</view>
</view>
</view>
Page({
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'
}, {
mode: 'top',
text: 'top:不缩放图片,只显示图片的顶部区域'
}, {
mode: 'bottom',
text: 'bottom:不缩放图片,只显示图片的底部区域'
}, {
mode: 'center',
text: 'center:不缩放图片,只显示图片的中间区域'
}, {
mode: 'left',
text: 'left:不缩放图片,只显示图片的左边区域'
}, {
mode: 'right',
text: 'right:不缩放图片,只显示图片的右边边区域'
}, {
mode: 'top left',
text: 'top left:不缩放图片,只显示图片的左上边区域'
}, {
mode: 'top right',
text: 'top right:不缩放图片,只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: 'bottom left:不缩放图片,只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: 'bottom right:不缩放图片,只显示图片的右下边区域'
}],
src: '../../resources/cat.jpg'
},
imageError: function(e) {
console.log('image3发生error事件,携带值为', e.detail.errMsg)
}
})
原图
scaleToFill
不保持纵横比缩放图片,使图片完全适应
aspectFit
保持纵横比缩放图片,使图片的长边能完全显示出来
aspectFill
保持纵横比缩放图片,只保证图片的短边能完全显示出来
top
不缩放图片,只显示图片的顶部区域
bottom
不缩放图片,只显示图片的底部区域
center
不缩放图片,只显示图片的中间区域
left
不缩放图片,只显示图片的左边区域
right
不缩放图片,只显示图片的右边边区域
top left
不缩放图片,只显示图片的左上边区域
top right
不缩放图片,只显示图片的右上边区域
bottom left
不缩放图片,只显示图片的左下边区域
bottom right
不缩放图片,只显示图片的右下边区域
video
视频。
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
src | String | 要播放视频的资源地址 | ||
initial-time | Number | 指定视频初始播放位置 | 1.6.0 | |
duration | Number | 指定视频时长 | 1.1.0 | |
controls | Boolean | true | 是否显示默认播放控件(播放/暂停按钮、播放进度、时间) | |
danmu-list | Object Array | 弹幕列表 | ||
danmu-btn | Boolean | false | 是否显示弹幕按钮,只在初始化时有效,不能动态变更 | |
enable-danmu | Boolean | false | 是否展示弹幕,只在初始化时有效,不能动态变更 | |
autoplay | Boolean | false | 是否自动播放 | |
loop | Boolean | false | 是否循环播放 | 1.4.0 |
muted | Boolean | false | 是否静音播放 | 1.4.0 |
page-gesture | Boolean | false | 在非全屏模式下,是否开启亮度与音量调节手势 | 1.6.0 |
direction | Number | 设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度) | 1.7.0 | |
show-progress | Boolean | true | 若不设置,宽度大于240时才会显示 | 1.9.0 |
show-fullscreen-btn | Boolean | true | 是否显示全屏按钮 | 1.9.0 |
show-play-btn | Boolean | true | 是否显示视频底部控制栏的播放按钮 | 1.9.0 |
show-center-play-btn | Boolean | true | 是否显示视频中间的播放按钮 | 1.9.0 |
enable-progress-gesture | Boolean | true | 是否开启控制进度的手势 | 1.9.0 |
objectFit | String | contain | 当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖 | |
poster | String | 视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效 | ||
bindplay | EventHandle | 当开始/继续播放时触发play事件 | ||
bindpause | EventHandle | 当暂停播放时触发 pause 事件 | ||
bindended | EventHandle | 当播放到末尾时触发 ended 事件 | ||
bindtimeupdate | EventHandle | 播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次 | ||
bindfullscreenchange | EventHandle | 当视频进入和退出全屏是触发,event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal | 1.4.0 | |
bindwaiting | EventHandle | 视频出现缓冲时触发 | 1.7.0 | |
binderror | EventHandle | 视频播放出错时触发 | 1.7.0 |
<video />
默认宽度300px、高度225px,可通过wxss设置宽高。
示例代码:
在开发者工具中预览效果
<view class="section tc">
<video src="{{src}}" controls ></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>
</view>
<view class="section tc">
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
<input bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu">发送弹幕</button>
</view>
</view>
function getRandomColor () {
let rgb = []
for (let i = 0 ; i < 3; ++i){
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
data: {
src: '',
danmuList: [
{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
bindInputBlur: function(e) {
this.inputValue = e.detail.value
},
bindButtonTap: function() {
var that = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: ['front','back'],
success: function(res) {
that.setData({
src: res.tempFilePath
})
}
})
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
}
})
相关api:wx.createVideoContext
Bug & Tip
tip
:video
组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。tip
: 请勿在scroll-view
、swiper
、picker-view
、movable-view
中使用video
组件。tip
:css
动画对video
组件无效。
camera
基础库 1.6.0 开始支持,低版本需做兼容处理
系统相机。
需要用户授权 scope.camera
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
device-position | String | back | 前置或后置,值为front, back |
flash | String | auto | 闪光灯,值为auto, on, off |
bindstop | EventHandle | 摄像头在非正常终止时触发,如退出后台等情况 | |
binderror | EventHandle | 用户不允许使用摄像头时触发 |
相关api:wx.createCameraContext
Bug & Tip
tip
:camera
组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用cover-view
cover-image
覆盖在上面。tip
: 同一页面只能插入一个camera
组件。tip
: 请勿在scroll-view
、swiper
、picker-view
、movable-view
中使用camera
组件。
示例:
在开发者工具中预览效果
<!-- camera.wxml -->
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>
// camera.js
Page({
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) {
console.log(e.detail)
}
})
live-player
基础库 1.7.0 开始支持,低版本需做兼容处理
实时音视频播放。
暂只针对如下类目开放,需要先通过类目审核,再在小程序管理后台,“设置”-“接口设置”中自助开通该组件权限。
一级类目 | 二级类目 |
---|---|
社交 | 直播 |
教育 | 在线教育 |
医疗 | 互联网医院,公立医院 |
政务民生 | 所有二级类目 |
金融 | 基金、信托、保险、银行、证券/期货、非金融机构自营小额贷款、征信业务、消费金融 |
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
src | String | 音视频地址。目前仅支持 flv, rtmp 格式 | ||
mode | String | live | live(直播),RTC(实时通话) | |
autoplay | Boolean | false | 自动播放 | |
muted | Boolean | false | 是否静音 | |
orientation | String | vertical | 画面方向,可选值有 vertical,horizontal | |
object-fit | String | contain | 填充模式,可选值有 contain,fillCrop | |
background-mute | Boolean | false | 进入后台时是否静音(已废弃,默认退台静音) | |
min-cache | Number | 1 | 最小缓冲区,单位s | |
max-cache | Number | 3 | 最大缓冲区,单位s | |
bindstatechange | EventHandle | 播放状态变化事件,detail = {code} | ||
bindfullscreenchange | EventHandle | 全屏变化事件,detail = {direction, fullScreen} | ||
bindnetstatus | EventHandle | 网络状态通知,detail = {info} | 1.9.0 |
注意:
<live-player />
默认宽度300px、高度225px,可通过wxss设置宽高。- 开发者工具上暂不支持。
- 相关api:wx.createLivePlayerContext
状态码
代码 | 说明 |
---|---|
2001 | 已经连接服务器 |
2002 | 已经连接服务器,开始拉流 |
2003 | 网络接收到首个视频数据包(IDR) |
2004 | 视频播放开始 |
2005 | 视频播放进度 |
2006 | 视频播放结束 |
2007 | 视频播放Loading |
2008 | 解码器启动 |
2009 | 视频分辨率改变 |
-2301 | 网络断连,且经多次重连抢救无效,更多重试请自行重启播放 |
-2302 | 获取加速拉流地址失败 |
2101 | 当前视频帧解码失败 |
2102 | 当前音频帧解码失败 |
2103 | 网络断连, 已启动自动重连 |
2104 | 网络来包不稳:可能是下行带宽不足,或由于主播端出流不均匀 |
2105 | 当前视频播放出现卡顿 |
2106 | 硬解启动失败,采用软解 |
2107 | 当前视频帧不连续,可能丢帧 |
2108 | 当前流硬解第一个I帧失败,SDK自动切软解 |
3001 | RTMP -DNS解析失败 |
3002 | RTMP服务器连接失败 |
3003 | RTMP服务器握手失败 |
3005 | RTMP 读/写失败 |
网络状态数据
键名 | 说明 |
---|---|
videoBitrate | 当前视频编/码器输出的比特率,单位 kbps |
audioBitrate | 当前音频编/码器输出的比特率,单位 kbps |
videoFPS | 当前视频帧率 |
videoGOP | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长,单位 s |
netSpeed | 当前的发送/接收速度 |
netJitter | 网络抖动情况,抖动越大,网络越不稳定 |
videoWidth | 视频画面的宽度 |
videoHeight | 视频画面的高度 |
示例代码:
在开发者工具中预览效果
<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
Page({
statechange(e) {
console.log('live-player code:', e.detail.code)
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
}
})
Bug & Tip
tip
:live-player
组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用cover-view
cover-image
覆盖在上面。tip
: 请勿在scroll-view
、swiper
、picker-view
、movable-view
中使用live-player
组件。tip
:css
动画对live-player
组件无效。
live-pusher
基础库 1.7.0 开始支持,低版本需做兼容处理
实时音视频录制。
需要用户授权 scope.camera、scope.record
暂只针对如下类目开放,需要先通过类目审核,再在小程序管理后台,“设置”-“接口设置”中自助开通该组件权限。
一级类目 | 二级类目 |
---|---|
社交 | 直播 |
教育 | 在线教育 |
医疗 | 互联网医院,公立医院 |
政务民生 | 所有二级类目 |
金融 | 基金、信托、保险、银行、证券/期货、非金融机构自营小额贷款、征信业务、消费金融 |
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
url | String | 推流地址。目前仅支持 flv, rtmp 格式 | ||
mode | String | RTC | SD(标清), HD(高清), FHD(超清), RTC(实时通话) | |
autopush | Boolean | false | 自动推流 | |
muted | Boolean | false | 是否静音 | |
enable-camera | Boolean | true | 开启摄像头 | |
auto-focus | Boolean | true | 自动聚集 | |
orientation | String | vertical | vertical,horizontal | |
beauty | Number | 0 | 美颜 | |
whiteness | Number | 0 | 美白 | |
aspect | String | 9:16 | 宽高比,可选值有 3:4, 9:16 | |
min-bitrate | Number | 200 | 最小码率 | |
max-bitrate | Number | 1000 | 最大码率 | |
waiting-image | String | 进入后台时推流的等待画面 | ||
waiting-image-hash | String | 等待画面资源的MD5值 | ||
background-mute | Boolean | false | 进入后台时是否静音 | |
bindstatechange | EventHandle | 状态变化事件,detail = {code} | ||
bindnetstatus | EventHandle | 网络状态通知,detail = {info} | 1.9.0 | |
binderror | EventHandle | 渲染错误事件,detail = {errMsg, errCode} | 1.7.4 |
注意:
<live-player />
默认宽度为100%、无默认高度,请通过wxss设置宽高。- 开发者工具上暂不支持。
- 相关api:wx.createLivePusherContext
错误码(errCode)
代码 | 说明 |
---|---|
1001 | 用户禁止使用摄像头 |
1002 | 用户禁止使用录音 |
状态码(code)
代码 | 说明 |
---|---|
1001 | 已经连接推流服务器 |
1002 | 已经与服务器握手完毕,开始推流 |
1003 | 打开摄像头成功 |
1004 | 录屏启动成功 |
1005 | 推流动态调整分辨率 |
1006 | 推流动态调整码率 |
1007 | 首帧画面采集完成 |
1008 | 编码器启动 |
-1301 | 打开摄像头失败 |
-1302 | 打开麦克风失败 |
-1303 | 视频编码失败 |
-1304 | 音频编码失败 |
-1305 | 不支持的视频分辨率 |
-1306 | 不支持的音频采样率 |
-1307 | 网络断连,且经多次重连抢救无效,更多重试请自行重启推流 |
-1308 | 开始录屏失败,可能是被用户拒绝 |
-1309 | 录屏失败,不支持的Android系统版本,需要5.0以上的系统 |
-1310 | 录屏被其他应用打断了 |
-1311 | Android Mic打开成功,但是录不到音频数据 |
-1312 | 录屏动态切横竖屏失败 |
1101 | 网络状况不佳:上行带宽太小,上传数据受阻 |
1102 | 网络断连, 已启动自动重连 |
1103 | 硬编码启动失败,采用软编码 |
1104 | 视频编码失败 |
1105 | 新美颜软编码启动失败,采用老的软编码 |
1106 | 新美颜软编码启动失败,采用老的软编码 |
3001 | RTMP -DNS解析失败 |
3002 | RTMP服务器连接失败 |
3003 | RTMP服务器握手失败 |
3004 | RTMP服务器主动断开,请检查推流地址的合法性或防盗链有效期 |
3005 | RTMP 读/写失败 |
网络状态数据(info)
键名 | 说明 |
---|---|
videoBitrate | 当前视频编/码器输出的比特率,单位 kbps |
audioBitrate | 当前音频编/码器输出的比特率,单位 kbps |
videoFPS | 当前视频帧率 |
videoGOP | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长,单位 s |
netSpeed | 当前的发送/接收速度 |
netJitter | 网络抖动情况,抖动越大,网络越不稳定 |
videoWidth | 视频画面的宽度 |
videoHeight | 视频画面的高度 |
示例代码:
在开发者工具中预览效果
<live-pusher url="https://domain/push_stream" mode="RTC" autopush bindstatechange="statechange" style="width: 300px; height: 225px;" />
Page({
statechange(e) {
console.log('live-pusher code:', e.detail.code)
}
})
Bug & Tip
tip
:live-pusher
组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用cover-view
cover-image
覆盖在上面。tip
: 请勿在scroll-view
、swiper
、picker-view
、movable-view
中使用live-pusher
组件。tip
:css
动画对live-pusher
组件无效。
map
地图。
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
longitude | Number | 中心经度 | ||
latitude | Number | 中心纬度 | ||
scale | Number | 16 | 缩放级别,取值范围为5-18 | |
markers | Array | 标记点 | ||
covers | Array | 即将移除,请使用 markers | ||
polyline | Array | 路线 | ||
circles | Array | 圆 | ||
controls | Array | 控件 | ||
include-points | Array | 缩放视野以包含所有给定的坐标点 | ||
show-location | Boolean | 显示带有方向的当前定位点 | ||
bindmarkertap | EventHandle | 点击标记点时触发 | ||
bindcallouttap | EventHandle | 点击标记点对应的气泡时触发 | 1.2.0 | |
bindcontroltap | EventHandle | 点击控件时触发 | ||
bindregionchange | EventHandle | 视野发生变化时触发 | ||
bindtap | EventHandle | 点击地图时触发 | ||
bindupdated | EventHandle | 在地图渲染更新完成时触发 | 1.6.0 |
注意: covers 属性即将移除,请使用 markers 替代
markers
标记点用于在地图上显示标记的位置
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
---|---|---|---|---|---|
id | 标记点id | Number | 否 | marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。 | |
latitude | 纬度 | Number | 是 | 浮点数,范围 -90 ~ 90 | |
longitude | 经度 | Number | 是 | 浮点数,范围 -180 ~ 180 | |
title | 标注点名 | String | 否 | ||
iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 | |
rotate | 旋转角度 | Number | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 | |
alpha | 标注的透明度 | Number | 否 | 默认1,无透明,范围 0 ~ 1 | |
width | 标注图标宽度 | Number | 否 | 默认为图片实际宽度 | |
height | 标注图标高度 | Number | 否 | 默认为图片实际高度 | |
callout | 自定义标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表,可识别换行符。 | 1.2.0 |
label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表,可识别换行符。 | 1.2.0 |
anchor | 经纬度在标注图标的锚点,默认底边中点 | Object | 否 | {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | 1.2.0 |
marker 上的气泡 callout
属性 | 说明 | 类型 | 最低版本 |
---|---|---|---|
content | 文本 | String | 1.2.0 |
color | 文本颜色 | String | 1.2.0 |
fontSize | 文字大小 | Number | 1.2.0 |
borderRadius | callout边框圆角 | Number | 1.2.0 |
bgColor | 背景色 | String | 1.2.0 |
padding | 文本边缘留白 | Number | 1.2.0 |
display | 'BYCLICK':点击显示; 'ALWAYS':常显 | String | 1.2.0 |
textAlign | 文本对齐方式。有效值: left, right, center | String | 1.6.0 |
marker 上的气泡 label
属性 | 说明 | 类型 | 最低版本 |
---|---|---|---|
content | 文本 | String | 1.2.0 |
color | 文本颜色 | String | 1.2.0 |
fontSize | 文字大小 | Number | 1.2.0 |
x | label的坐标,原点是 marker 对应的经纬度 | Number | 1.2.0 |
y | label的坐标,原点是 marker 对应的经纬度 | Number | 1.2.0 |
borderWidth | 边框宽度 | Number | 1.6.0 |
borderColor | 边框颜色 | String | 1.6.0 |
borderRadius | 边框圆角 | Number | 1.6.0 |
bgColor | 背景色 | String | 1.6.0 |
padding | 文本边缘留白 | Number | 1.6.0 |
textAlign | 文本对齐方式。有效值: left, right, center | String | 1.6.0 |
polyline
指定一系列坐标点,从数组第一项连线至最后一项
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
---|---|---|---|---|---|
points | 经纬度数组 | Array | 是 | [{latitude: 0, longitude: 0}] | |
color | 线的颜色 | String | 否 | 8位十六进制表示,后两位表示alpha值,如:#000000AA | |
width | 线的宽度 | Number | 否 | ||
dottedLine | 是否虚线 | Boolean | 否 | 默认false | |
arrowLine | 带箭头的线 | Boolean | 否 | 默认false,开发者工具暂不支持该属性 | 1.2.0 |
arrowIconPath | 更换箭头图标 | String | 否 | 在arrowLine为true时生效 | 1.6.0 |
borderColor | 线的边框颜色 | String | 否 | 1.2.0 | |
borderWidth | 线的厚度 | Number | 否 | 1.2.0 |
circles
在地图上显示圆
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
latitude | 纬度 | Number | 是 | 浮点数,范围 -90 ~ 90 |
longitude | 经度 | Number | 是 | 浮点数,范围 -180 ~ 180 |
color | 描边的颜色 | String | 否 | 8位十六进制表示,后两位表示alpha值,如:#000000AA |
fillColor | 填充颜色 | String | 否 | 8位十六进制表示,后两位表示alpha值,如:#000000AA |
radius | 半径 | Number | 是 | |
strokeWidth | 描边的宽度 | Number | 否 |
controls
在地图上显示控件,控件不随着地图移动
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
id | 控件id | Number | 否 | 在控件点击事件回调会返回此id |
position | 控件在地图的位置 | Object | 是 | 控件相对地图位置 |
iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 |
clickable | 是否可点击 | Boolean | 否 | 默认不可点击 |
position
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
left | 距离地图的左边界多远 | Number | 否 | 默认为0 |
top | 距离地图的上边界多远 | Number | 否 | 默认为0 |
width | 控件宽度 | Number | 否 | 默认为图片宽度 |
height | 控件高度 | Number | 否 | 默认为图片高度 |
地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
示例:
在开发者工具中预览效果
<!-- map.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>
// map.js
Page({
data: {
markers: [{
iconPath: "/resources/others.png",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color:"#FF0000DD",
width: 2,
dottedLine: true
}],
controls: [{
id: 1,
iconPath: '/resources/location.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
}
})
相关api:wx.createMapContext
Bug & Tip
tip
:map
组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。tip
: 请勿在scroll-view
、swiper
、picker-view
、movable-view
中使用map
组件。tip
:css
动画对map
组件无效。tip
:map
组件使用的经纬度是火星坐标系,调用wx.getLocation
接口需要指定type
为gcj02
canvas
画布。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
canvas-id | String | canvas 组件的唯一标识符 | |
disable-scroll | Boolean | false | 当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新 |
bindtouchstart | EventHandle | 手指触摸动作开始 | |
bindtouchmove | EventHandle | 手指触摸后移动 | |
bindtouchend | EventHandle | 手指触摸动作结束 | |
bindtouchcancel | EventHandle | 手指触摸动作被打断,如来电提醒,弹窗 | |
bindlongtap | EventHandle | 手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动 | |
binderror | EventHandle | 当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'} |
注:
- canvas 标签默认宽度300px、高度225px
- 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作
示例代码:下载
在开发者工具中预览效果
<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- 当使用绝对定位时,文档流后边的 canvas 的显示层级高于前边的 canvas -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- 因为 canvas-id 与前一个 canvas 重复,该 canvas 不会显示,并会发送一个错误事件到 AppService -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
// canvas.js
Page({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
onReady: function (e) {
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('firstCanvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
}
})
相关api:wx.createCanvasContext
Bug & Tip
tip
:canvas
组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。tip
: 请勿在scroll-view
、swiper
、picker-view
、movable-view
中使用canvas
组件。tip
:css
动画对canvas
组件无效。bug
: 避免设置过大的宽高,在安卓下会有crash的问题
open-data
基础库 1.4.0 开始支持,低版本需做兼容处理
用于展示微信开放的数据。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | String | 开放数据类型 | |
open-gid | String | 当 type="groupName" 时生效, 群id | |
lang | String | en | 当 type="user*" 时生效,以哪种语言展示 userInfo,有效值有:en, zh_CN, zh_TW |
type 有效值:
值 | 说明 | 最低版本 |
---|---|---|
groupName | 拉取群名称 | 1.4.0 |
userNickName | 用户昵称 | 1.9.90 |
userAvatarUrl | 用户头像 | 1.9.90 |
userGender | 用户性别 | 1.9.90 |
userCity | 用户所在城市 | 1.9.90 |
userProvince | 用户所在省份 | 1.9.90 |
userCountry | 用户所在国家 | 1.9.90 |
userLanguage | 用户的语言 | 1.9.90 |
Tips: 只有当前用户在此群内才能拉取到群名称
示例:
在开发者工具中预览效果
<open-data type="groupName" open-gid="xxxxxx"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
Tips: 关于open-gid的获取请查看 转发
web-view
基础库 1.6.4 开始支持,低版本需做兼容处理
web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | String | webview 指向网页的链接。需登录小程序管理后台配置域名白名单。 | |
bindmessage | EventHandler | 网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data } |
示例代码:
<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>
相关接口 1
<web-view/>
网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 支持的接口有:
接口名 | 说明 | 最低版本 |
---|---|---|
wx.miniProgram.navigateTo | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.navigateBack | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.switchTab | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.reLaunch | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.redirectTo | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.postMessage | 向小程序发送消息 | 1.7.1 |
wx.miniProgram.getEnv | 获取当前环境 | 1.7.1 |
示例代码:
在开发者工具中预览效果
<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })
相关接口 2
<web-view/>
网页中仅支持以下JSSDK接口:
接口模块 | 接口说明 | 具体接口 |
---|---|---|
判断客户端是否支持js | checkJSApi | |
图像接口 | 拍照或上传 | chooseImage |
预览图片 | previewImage | |
上传图片 | uploadImage | |
下载图片 | downloadImage | |
获取本地图片 | getLocalImgData | |
音频接口 | 开始录音 | startRecord |
停止录音 | stopRecord | |
监听录音自动停止 | onVoiceRecordEnd | |
播放语音 | playVoice | |
暂停播放 | pauseVoice | |
停止播放 | stopVoice | |
监听语音播放完毕 | onVoicePlayEnd | |
上传接口 | uploadVoice | |
下载接口 | downloadVoice | |
智能接口 | 识别音频 | translateVoice |
设备信息 | 获取网络状态 | getNetworkType |
地理位置 | 使用内置地图 | getLocation |
获取地理位置 | openLocation | |
摇一摇周边 | 开启ibeacon | startSearchBeacons |
关闭ibeacon | stopSearchBeacons | |
监听ibeacon | onSearchBeacons | |
微信扫一扫 | 调起微信扫一扫 | scanQRCode |
微信卡券 | 拉取使用卡券列表 | chooseCard |
批量添加卡券接口 | addCard | |
查看微信卡包的卡券 | openCard | |
长按识别 | 小程序圆形码 | 无 |
相关接口 3
用户分享时可获取当前<web-view/>
的URL,即在onShareAppMessage
回调中返回webViewUrl
参数。
示例代码:
Page({
onShareAppMessage(options) {
console.log(options.webViewUrl)
}
})
相关接口 4
在网页内可通过window.__wxjs_environment
变量判断是否在小程序环境,建议在WeixinJSBridgeReady
回调中使用,也可以使用JSSDK 1.3.2提供的getEnv
接口。
示例代码:
// web-view下的页面内
function ready() {
console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
ready()
}
// 或者
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true
})
Bug & Tip
- 网页内iframe的域名也需要配置到域名白名单。
- 开发者工具上,可以在
<web-view/>
组件上通过右键 - 调试,打开<web-view/>
组件的调试。 - 每个页面只能有一个
<web-view/>
,<web-view/>
会自动铺满整个页面,并覆盖其他组件。 <web-view/>
网页与小程序之间不支持除JSSDK提供的接口之外的通信。- 在iOS中,若存在JSSDK接口调用无响应的情况,可在
<web-view/>
的src后面加个#wechat_redirect解决。
ad
基础库 1.9.94 开始支持,低版本需做兼容处理
广告。目前暂时以邀请制开放申请,请留意后续模板消息的通知
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
unit-id | String | 广告单元id,可在小程序管理后台的流量主模块新建 |
注意
- 目前可以给
ad
标签设置 wxss 样式调整广告宽度,以使广告与页面更融洽,但请遵循小程序流量主应用规范 - 在无广告展示时,
ad
标签不会占用高度 ad
组件不支持触发bindtap
等触摸相关事件
未完待续,下一章节,つづく