微信小程序开发文档 第30页

web-view 基础库 1.6.4 开始支持，低版本需做兼容处理 web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。 属性名 类型 默认值 说明 src String none webview 指向网页的链接。需登录小程序管理后台配置域名白名单。 示例代码： <!-- wxml --> <!-- 指向微信公众平台首页的web-view --> <web-view src="https://mp.weixin.qq.com/" rel="external nofollow" ></web-view> 相关接口 1 <web-view/>网页中可使用JSSDK 1.3.0提供的接口返回小程序页面。 支持的接口有： 接口名 说明 最低版本 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 示例代码： <!-- html --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js" rel="external nofollow" ></script> // javascript wx.miniProgram.navigateTo({url: '/path/to/page'}) 相关接口 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...

基础库 1.4.0 开始支持，低版本需做兼容处理。 用于展示微信开放的数据。 属性 类型 默认值 必填 说明 最低版本 type string 否 开放数据类型 1.4.0 open-gid string 否 当 type=”groupName” 时生效, 群 id 1.4.0 lang string en 否 当 type=”user*” 时生效，以哪种语言展示 userInfo 1.4.0 default-text string 否 数据为空时的默认文案 2.8.1 default-avatar string 否 用户头像为空时的默认图片，支持相对路径和网络图片路径 2.8.1 binderror eventhandle 否 群名称或用户信息为空时触发 2.8.1 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 lang 的合法值 值 说明 最低版本 en 英文 zh_CN 简体中文 zh_TW 繁体中文 Bug & Tip tip：只有当前用户在此群内才能拉取到群名称 tip：关于 open-gid 的获取请使用 wx.getShareInfo 示例代码 <open-data type="groupName" open-gid="xxxxxx"></open-data> <open-data type="userAvatarUrl"></open-data> <open-data type="userGender" lang="zh_CN"></open-data>

基础库 1.0.0 开始支持，低版本需做兼容处理。 画布。2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染，原有接口不再维护。相关api：获取 canvas 实例。 属性 类型 默认值 必填 说明 最低版本 type string 否 指定 canvas 类型，支持 2d (2.9.0) 和 webgl (2.7.0) 2.7.0 canvas-id string 否 canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 1.0.0 disable-scroll boolean false 否 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 1.0.0 bindtouchstart eventhandle 否 手指触摸动作开始 1.0.0 bindtouchmove eventhandle 否 手指触摸后移动 1.0.0 bindtouchend eventhandle 否 手指触摸动作结束 1.0.0 bindtouchcancel eventhandle 否 手指触摸动作被打断，如来电提醒，弹窗 1.0.0 bindlongtap eventhandle 否 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 1.0.0 binderror eventhandle 否 当发生错误时触发 error 事件，detail = {errMsg} 1.0.0 Bug & Tip tip：canvas 标签默认宽度300px、高度150px tip：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作 tip：请注意原生组件使用限制 tip：开发者工具中默认关闭了 GPU 硬件加速，可在开发者工具的设置中开启“硬件加速”提高 WebGL 的渲染性能 tip: WebGL 支持通过 getContext(‘webgl’, { alpha: true }) 获取透明背景的画布 tip: Canvas 2D（新接口）需要显式设置画布宽高 (默认为 300×150) bug: 避免设置过大的宽高，在安卓下会有crash的问题 Canvas 2D 示例代码 在开发者工具中预览效果 <!--...

基础库 1.0.0 开始支持，低版本需做兼容处理。 地图（v2.7.0 起支持同层渲染）。相关api wx.createMapContext。 个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通。 小程序内地图组件应使用同一 subkey，可通过 layer-style（地图官网设置的样式 style 编号）属性选择不同的底图风格。 组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 示例小程序 属性 类型 默认值 必填 说明 最低版本 longitude number 是 中心经度 1.0.0 latitude number 是 中心纬度 1.0.0 scale number 16 否 缩放级别，取值范围为3-20 1.0.0 markers Array.<marker> 否 标记点 1.0.0 covers Array.<cover> 否 即将移除，请使用 markers 1.0.0 polyline Array.<polyline> 否 路线 1.0.0 circles Array.<circle> 否 圆 1.0.0 controls Array.<control> 否 控件（即将废弃，建议使用 cover-view 代替） 1.0.0 include-points Array.<point> 否 缩放视野以包含所有给定的坐标点 1.0.0 show-location boolean false 否 显示带有方向的当前定位点 1.0.0 polygons Array.<polygon> 否 多边形 2.3.0 subkey string 否 个性化地图使用的key 2.3.0 layer-style number 1 否 个性化地图配置的 style，不支持动态修改 rotate number 0 否 旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 2.5.0 skew number 0 否 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 2.5.0 enable-3D boolean false 否 展示3D楼块(工具暂不支持） 2.3.0 show-compass boolean false...

voip-room 基础库 2.11.0 开始支持，低版本需做兼容处理。 多人音视频对话。需用户授权 scope.camera、scope.record。相关接口： wx.joinVoIPChat 暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。 一级类目/主体类型 二级类目 小程序内容场景 教育 在线视频课程 网课、在线培训、讲座等教育类直播 医疗 互联网医院，公立医院 问诊、大型健康讲座等直播 医疗 私立医疗机构 / 金融 银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台（港股/美股）、消费金融 金融产品视频客服理赔、金融产品推广直播等 汽车 汽车预售服务 汽车预售、推广直播 政府主体帐号 / 政府相关工作推广直播、领导讲话直播等 IT 科技 多方通信 在线会议 IT 科技 硬件设备 智能硬件 开通该组件权限后，开发者可在 joinVoIPChat 成功后，获取房间成员的 openid，传递给 voip-room 组件，以显示成员画面。 属性 类型 默认值 必填 说明 最低版本 openid string 是 进入房间用户的 openid 2.11.0 mode string camera 否 对话窗口类型，自身传入 camera，其它用户传入 video 2.11.0 device-position string front 否 仅在 mode 为 camera 时有效，前置或后置，值为front, back 2.11.0 binderror eventhandle 否 创建对话窗口失败时触发 2.11.0 Bug & Tip tip：开发者工具上暂不支持 tip：请注意原生组件使用限制 示例代码 <block wx:for="{{openIdList}}" wx:key="*this"> <voip-room openid="{{item}}" mode="{{selfOpenId === item ? 'camera' : 'video'}}"> </voip-room> </block>

live-player 基础库 1.7.0 开始支持，低版本需做兼容处理。 实时音视频播放（v2.9.1 起支持同层渲染）。 暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。 一级类目/主体类型 二级类目 小程序内容场景 社交 直播 涉及娱乐性质，如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核，需经当地互联网主管机关审核确认，预计审核时长 7 天左右 教育 在线视频课程 网课、在线培训、讲座等教育类直播 医疗 互联网医院，公立医疗机构，私立医疗机构 问诊、大型健康讲座等直播 金融 银行、信托、公募基金、私募基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台（港股/美股）、消费金融 金融产品视频客服理赔、金融产品推广直播等 汽车 汽车预售服务 汽车预售、推广直播 政府主体帐号 / 政府相关工作推广直播、领导讲话直播等 工具 视频客服 不涉及以上几类内容的一对一视频客服服务，如企业售后一对一视频服务等 IT科技 多方通信 为多方提供电话会议/视频会议等服务 属性 类型 默认值 必填 说明 最低版本 src string 否 音视频地址。目前仅支持 flv, rtmp 格式 1.7.0 mode string live 否 模式 1.7.0 autoplay boolean false 否 自动播放 1.7.0 muted boolean false 否 是否静音 1.7.0 orientation string vertical 否 画面方向 1.7.0 object-fit string contain 否 填充模式，可选值有 contain，fillCrop 1.7.0 background-mute boolean false 否 进入后台时是否静音（已废弃，默认退后台静音） 1.7.0 min-cache number 1 否 最小缓冲区，单位s（RTC 模式推荐 0.2s） 1.7.0 max-cache number 3 否 最大缓冲区，单位s（RTC 模式推荐 0.8s）。缓冲区用来抵抗网络波动，缓冲数据越多，网络抗性越好，但时延越大。 1.7.0 sound-mode string speaker 否 声音输出方式 1.9.90 auto-pause-if-navigate boolean true 否 当跳转到本小程序的其他页面时，是否自动暂停本页面的实时音视频播放 2.5.0 auto-pause-if-open-native boolean true 否 当跳转到其它微信原生页面时，是否自动暂停本页面的实时音视频播放 2.5.0 picture-in-picture-mode string/Array 否...

live-pusher 基础库 1.7.0 开始支持，低版本需做兼容处理。 实时音视频录制（v2.9.1 起支持同层渲染）。需要用户授权 scope.camera、scope.record。 暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。 一级类目/主体类型 二级类目 小程序内容场景 社交 直播 涉及娱乐性质，如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核，需经当地互联网主管机关审核确认，预计审核时长7天左右 教育 在线视频课程 网课、在线培训、讲座等教育类直播 医疗 互联网医院，公立医疗机构，私立医疗机构 问诊、大型健康讲座等直播 金融 银行、信托、公募基金、私募基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台（港股/美股）、消费金融 金融产品视频客服理赔、金融产品推广直播等 汽车 汽车预售服务 汽车预售、推广直播 政府主体帐号 / 政府相关工作推广直播、领导讲话直播等 工具 视频客服 不涉及以上几类内容的一对一视频客服服务，如企业售后一对一视频服务等 IT科技 多方通信 为多方提供电话会议/视频会议等服务 相关api：wx.createLivePusherContext 属性 类型 默认值 必填 说明 最低版本 url string 否 推流地址。目前仅支持 rtmp 格式 1.7.0 mode string RTC 否 SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话） 1.7.0 autopush boolean false 否 自动推流 1.7.0 muted boolean false 否 是否静音。即将废弃，可用 enable-mic 替代 1.7.0 enable-camera boolean true 否 开启摄像头 1.7.0 auto-focus boolean true 否 自动聚集 1.7.0 orientation string vertical 否 画面方向 1.7.0 beauty number 0 否 美颜，取值范围 0-9 ，0 表示关闭 1.7.0 whiteness number 0 否 美白，取值范围 0-9 ，0 表示关闭 1.7.0 aspect string 9:16 否 宽高比，可选值有 3:4, 9:16 1.7.0 min-bitrate number 200 否 最小码率 1.7.0 max-bitrate number 1000 否 最大码率 1.7.0 audio-quality string...

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) } })

video 基础库 1.0.0 开始支持，低版本需做兼容处理。 视频（v2.4.0 起支持同层渲染）。相关api：wx.createVideoContext 属性 类型 默认值 必填 说明 最低版本 src string 是 要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID（2.3.0） 1.0.0 duration number 否 指定视频时长 1.1.0 controls boolean true 否 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） 1.0.0 danmu-list Array.<object> 否 弹幕列表 1.0.0 danmu-btn boolean false 否 是否显示弹幕按钮，只在初始化时有效，不能动态变更 1.0.0 enable-danmu boolean false 否 是否展示弹幕，只在初始化时有效，不能动态变更 1.0.0 autoplay boolean false 否 是否自动播放 1.0.0 loop boolean false 否 是否循环播放 1.4.0 muted boolean false 否 是否静音播放 1.4.0 initial-time number 0 否 指定视频初始播放位置 1.6.0 page-gesture boolean false 否 在非全屏模式下，是否开启亮度与音量调节手势（废弃，见 vslide-gesture） 1.6.0 direction number 否 设置全屏时视频的方向，不指定则根据宽高比自动判断 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 object-fit string contain 否 当视频大小与 video 容器大小不一致时，视频的表现形式 1.0.0 poster...

微信小程序image 图片。 属性名 类型 默认值 说明 src String   图片资源地址 mode String ‘scaleToFill’ 图片裁剪、缩放的模式 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:...