live-player

基础库 1.7.0 开始支持,低版本需做兼容处理。

微信小程序插件:支持,需要微信小程序基础库版本不低于 2.3.0

微信 Windows 版:支持

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

相关文档: wx.createLivePlayerContext

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)、WebView

功能描述

实时音视频播放(v2.9.1 起支持同层渲染)。

申请开通

暂只针对以下类目的微信小程序开放,需要先通过类目审核,再在微信小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。

一级类目/主体类型 二级类目 微信小程序内容场景
社交 直播 涉及非表演类在线直播(如电商类、教育类等)等。选择该类目后首次提交代码审核,需经当地互联网主管机关审核确认,预计审核时长 7 天左右
社交 直播表演 适用于提供表演类在线直播(如游戏直播、娱乐秀场类、线上演唱会、剧目直播、演艺直播等)。选择该类目后首次提交代码审核,需经当地互联网主管机关审核确认,预计审核时长 7 天左右
教育 在线视频课程 网课、在线培训、讲座等教育类直播
医疗 互联网医院,公立医疗机构,三级私立医疗机构,其他私立医疗机构 问诊、大型健康讲座等直播
金融 银行、信托、公募基金、私募基金、证券/期货、证券、期货投资咨询、保险、企业征信、新三板信息服务平台、股票信息服务平台、股票信息服务平台(港股/美股)、消费金融、融资担保、汽车金融/融资租赁 金融产品视频客服理赔、金融产品推广直播等
汽车 汽车预售 汽车预售、推广直播
政府主体账号 / 政府相关工作推广直播、领导讲话直播等
IT科技 多方通信;音视频设备 为多方提供电话会议/视频会议等服务;智能家居场景下控制摄像头
房地产服务 房地产营销 房地产营销直播服务、在线音视频带看等
商业服务 公证 在线业务办理等
公共服务 交通运输 仅适用于港澳特区政府主体提供当地的交通管理相关政务服务(如道路运输、车辆管理等)

通用属性

属性 类型 默认值 必填 说明 最低版本
src string 否 音视频地址。目前仅支持 flv, rtmp 格式 1.7.0
mode string live 否 模式 1.7.0
合法值 说明
live 直播
RTC 实时通话,该模式时延更低
autoplay boolean false 否 自动播放 1.7.0
muted boolean false 否 是否静音 1.7.0
orientation string vertical 否 画面方向 1.7.0
合法值 说明
vertical 竖直
horizontal 水平
object-fit string contain 否 填充模式,可选值有 contain,fillCrop 1.7.0
合法值 说明
contain 图像长边填满屏幕,短边区域会被填充⿊⾊
fillCrop 图像铺满屏幕,超出显示区域的部分将被截掉
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
合法值 说明
speaker 扬声器
ear 听筒
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 否 设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: [“push”, “pop”]) 2.10.3
合法值 说明
[] 取消小窗
push 路由 push 时触发小窗
pop 路由 pop 时触发小窗
picture-in-picture-init-position string 否 小窗模式下小窗的初始显示位置,格式为 (alignment, y),其中 alignment 表示小窗吸附屏幕左侧还是右侧,可选值为 left、right,y 代表小窗最顶部所在的屏幕高度百分比 3.3.0
enable-system-pip boolean true 否 是否支持 iOS 系统画中画,默认支持 3.14.1
enable-auto-rotation boolean false 否 是否开启手机横屏时自动全屏,当系统设置开启自动旋转时生效 2.11.0
referrer-policy string no-referrer 否 格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为微信小程序的 appid,{version} 为微信小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本; 2.13.0
合法值 说明
origin 发送完整的 referrer
no-referrer 不发送
enable-casting boolean false 否 是否支持投屏。开启后,可以通过 LivePlayerContext 上相关方法进行操作。 2.32.0
mute-on-audio-conflict boolean false 否 音频冲突时是否静音 3.16.2
bindstatechange eventhandle 否 播放状态变化事件,detail = {code} 1.7.0
bindfullscreenchange eventhandle 否 全屏变化事件,detail = {direction, fullScreen} 1.7.0
bindnetstatus eventhandle 否 网络状态通知,detail = {info} 1.9.0
bindaudiovolumenotify eventhandler 否 播放音量大小通知,detail = {} 2.10.0
bindenterpictureinpicture eventhandler 否 播放器进入小窗 2.11.0
bindleavepictureinpicture eventhandler 否 播放器退出小窗 2.11.0
bindcastinguserselect eventhandler 否 用户选择投屏设备时触发 detail = { state: “success”/”fail” } 2.32.0
bindcastingstatechange eventhandler 否 投屏成功/失败时触发 detail = { type, state: “success”/”fail” } 2.32.0
bindcastinginterrupt eventhandler 否 投屏被中断时触发 2.32.0

状态码

代码 说明
2001 拉流:已经连接服务器
2002 拉流:已经连接服务器,开始拉流
2003 拉流:视频首帧渲染事件
2004 拉流:视频播放开始
2007 拉流:视频播放 Loading
2008 拉流:视频解码器启动
2009 拉流:视频分辨率改变
2026 拉流:音频播放首帧事件
2030 音频设备发生改变,即当前的输入输出设备发生改变,比如耳机被拔出
2032 拉流:Audio Session 被其他 App 中断(iOS 平台特有)
2033 拉流:渲染 view 窗口变化后首帧渲染事件(比如分辨率发生变化)flv,rtmp 标准协议特有,如果期望监听视频首帧渲染事件,建议用 2003
2034 拉流:接收首帧视频
2035 拉流:解码首帧视频
2036 拉流:视频时间戳发生回退
2101 拉流:当前视频帧解码失败
2102 拉流:当前音频帧解码失败
2103 拉流:网络连不上,自动重连事件,重连最多尝试 3 次,自动重连连续失败超过三次会放弃,返回 -2301
2104 拉流:网络来包不稳:可能是下行带宽不足,或由于主播端出流不均匀
2105 拉流:当前视频播放出现卡顿
2106 拉流:硬解启动失败,采用软解
2107 拉流:当前视频帧不连续,可能丢帧
2108 拉流:当前流硬解第一个 I 帧失败,SDK 自动切软解
3001 拉流:RTMP-DNS 解析失败
3002 拉流:RTMP 服务器连接失败
3003 拉流:RTMP 服务器握手失败
3005 拉流:RTMP 读/写失败,之后会发起网络重试
-2301 拉流:网络断连,且经多次重连无效,请自行重启拉流
-2302 拉流:获取拉流地址失败
0 无错误
6000 拉流:被挂起,微信小程序或微信被退后台时挂起拉流

网络状态数据

键名 说明
videoBitrate 当前视频编/码器输出的比特率,单位 kbps
audioBitrate 当前音频编/码器输出的比特率,单位 kbps
videoFPS 当前视频帧率
videoGOP 当前视频 GOP,也就是每两个关键帧(I 帧)间隔时长,单位 s
netSpeed 当前的发送/接收速度
netJitter 网络抖动情况,为 0 时表示没有任何抖动,值越大表明网络抖动越大,网络越不稳定
netQualityLevel 网络质量:0:未定义 1:最好 2:好 3:一般 4:差 5:很差 6:不可用
videoWidth 视频画面的宽度
videoHeight 视频画面的高度
videoCache 缓冲的视频总时长,单位毫秒
audioCache 缓冲的音频总时长,单位毫秒
vDecCacheSize 解码器中缓存的视频帧数(Android 端硬解码时存在)
vSumCacheSize 缓冲的总视频帧数,该数值越大,播放延迟越高
avPlayInterval 音画同步错位时间(播放),单位 ms,此数值越小,音画同步越好
avRecvInterval 音画同步错位时间(网络),单位 ms,此数值越小,音画同步越好
audioCacheThreshold 音频缓冲时长阈值,缓冲超过该阈值后,播放器会开始调控延时

小窗特性说明

live-player 小窗支持以下三种触发模式(在组件上设置 picture-in-picture-mode 属性):

  1. push 模式,即从当前页跳转至下一页时出现小窗(页面栈 push)

  2. pop 模式,即离开当前页面时触发(页面栈pop)

  3. 以上两种路由行为均触发小窗

此外,小窗还支持以下特性:

  • 小窗容器尺寸会根据原组件尺寸自动判断

  • 点击小窗,用户会被导航回小窗对应的播放器页面

  • 小窗出现后,用户可点击小窗右上角的关闭按钮或调用 context.exitPictureInPicture() 接口关闭小窗

当播放器进入小窗模式后,播放器所在页面处于 hide 状态(触发 onHide 生命周期),该页面不会被销毁。当小窗被关闭时,播放器所在页面会被 unload (触发 onUnload 生命周期)。

Bug & Tip

  1. tip:live-player 默认宽度300px、高度225px,可通过wxss设置宽高。
  2. tip:开发者工具上暂不支持。
  3. tip: 相关介绍和原理可参考此文章

示例代码

在开发者工具中预览效果

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

image

基础库 1.0.0 开始支持,低版本需做兼容处理。

微信 Windows 版:支持

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)、WebView

功能描述

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式,2.3.0 起支持云文件ID。

  1. 使用 svg 格式且 mode=scaleToFill 时,WebView 会居中(除非 svg 里加上 preserveAspectRatio=”none”),Skyline 则会撑满
  2. svg 格式不支持百分比单位
  3. svg 格式不支持 <style> element

通用属性

属性 类型 默认值 必填 说明 最低版本
src string 否 图片资源地址 1.0.0
mode string scaleToFill 否 图片裁剪、缩放的模式 1.0.0
合法值 说明 最低版本
scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 2.10.3
top 裁剪模式,不缩放图片,只显示图片的顶部区域。仅 Webview 支持。
bottom 裁剪模式,不缩放图片,只显示图片的底部区域。仅 Webview 支持。
center 裁剪模式,不缩放图片,只显示图片的中间区域。仅 Webview 支持。
left 裁剪模式,不缩放图片,只显示图片的左边区域。仅 Webview 支持。
right 裁剪模式,不缩放图片,只显示图片的右边区域。仅 Webview 支持。
top left 裁剪模式,不缩放图片,只显示图片的左上边区域。仅 Webview 支持。
top right 裁剪模式,不缩放图片,只显示图片的右上边区域。仅 Webview 支持。
bottom left 裁剪模式,不缩放图片,只显示图片的左下边区域。仅 Webview 支持。
bottom right 裁剪模式,不缩放图片,只显示图片的右下边区域。仅 Webview 支持。
show-menu-by-longpress boolean false 否 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开微信小程序(若图片中包含对应二维码或微信小程序码)的菜单。 2.7.0
binderror eventhandle 否 当错误发生时触发,event.detail = {errMsg} 1.0.0
bindload eventhandle 否 当图片载入完毕时触发,event.detail = {height, width} 1.0.0

Skyline 特有属性

属性 类型 默认值 必填 说明 最低版本
fade-in boolean false 否 是否渐显
preload boolean false 否 是否预加载图片,即设置图片 src 时就触发图片下载和解码 3.15.0

WebView 特有属性

属性 类型 默认值 必填 说明 最低版本
webp boolean false 否 默认不解析 webP 格式,只支持网络资源 2.9.0
lazy-load boolean false 否 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载。Skyline 默认懒加载。 1.5.0
forceHttps boolean false 否 自动将 http 链接替换为 https 链接 3.9.1

支持长按识别的码

类型 说明 最低版本
微信小程序码
微信个人码 2.18.0
企业微信个人码 2.18.0
普通群码 指仅包含微信用户的群 2.18.0
互通群码 指既有微信用户也有企业微信用户的群 2.18.0
公众号二维码 2.18.0

Bug & Tip

  1. tip:image组件默认宽度320px、高度240px
  2. tip:image组件进行缩放时,计算出来的宽高可能带有小数,在不同webview内核下渲染可能会被抹去小数部分

示例代码

在开发者工具中预览效果

原图

image

channel-video

基础库 2.25.1 开始支持,低版本需做兼容处理。

微信 Windows 版:支持

微信 Mac 版:支持

相关文档: 视频号视频

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)、WebView

功能描述

微信小程序内嵌视频号视频组件,支持在微信小程序中播放视频号视频,并无弹窗跳转至视频号。注意:

  1. 若微信小程序与内嵌视频号视频为同主体,则内嵌视频号视频可支持自动播放;
  2. 基础库 2.31.1 起,对于非个人主体微信小程序,若微信小程序于内嵌视频号视频非同主体,则内嵌视频号视频不可自动播放,即强制 autoplay=false。

通用属性

属性 类型 默认值 必填 说明 最低版本
feed-id string 是 仅视频号视频与微信小程序同主体时生效。若内嵌非同主体视频,请使用 feed-token。
finder-user-name string 是 视频号 id,以“sph”开头的id,可在视频号助手获取。视频号必须与当前微信小程序相同主体。
feed-token string 是 仅内嵌微信小程序非同主体视频号视频时使用,获取方式参考本指引。 2.31.1
autoplay string 是 是否自动播放。仅视频号视频与微信小程序同主体时支持设置为 true。 2.31.1
loop boolean false 否 是否循环播放
muted boolean false 否 是否静音播放
object-fit boolean contain 否 当视频大小与 video 容器大小不一致时,视频的表现形式
合法值 说明
contain 包含
fill 填充
cover 覆盖
binderror eventhandle 否 视频播放出错时触发

Bug & Tip

  1. tip:暂不支持纯图片视频号内容。

channel-live

基础库 2.29.0 开始支持,低版本需做兼容处理。

微信 Windows 版:支持

微信 Mac 版:支持

相关文档: 视频号直播

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)、WebView

功能描述

微信小程序内嵌视频号直播组件,展示视频号直播状态和封面,并无弹窗跳转至视频号。注意:使用该组件打开的视频号视频需要与微信小程序的主体一致。

属性说明

属性 类型 默认值 必填 说明
feed-id string 是 视频 feedId
finder-user-name string 是 视频号 id,以“sph”开头的id,可在视频号助手获取。视频号必须与当前微信小程序相同主体。

camera

基础库 1.6.0 开始支持,低版本需做兼容处理。

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

相关文档: wx.createCameraContext

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)、WebView

功能描述

系统相机。扫码二维码功能,需升级微信客户端至6.7.3。需要用户授权 scope.camera。 2.10.0起 initdone 事件返回 maxZoom,最大变焦范围,相关接口 CameraContext.setZoom。

通用属性

属性 类型 默认值 必填 说明 最低版本
mode string normal 否 应用模式,只在初始化时有效,不能动态变更 2.1.0
合法值 说明
normal 相机模式
scanCode 扫码模式
resolution string medium 否 分辨率,不支持动态修改 2.10.0
合法值 说明
low 低
medium 中
high 高
device-position string back 否 摄像头朝向 1.0.0
合法值 说明
front 前置
back 后置
flash string auto 否 闪光灯,值为auto, on, off 1.0.0
合法值 说明 最低版本
auto 自动
on 打开
off 关闭
torch 常亮 2.8.0
frame-size string medium 否 指定期望的相机帧数据尺寸 2.7.0
合法值 说明
small 小尺寸帧数据
medium 中尺寸帧数据
large 大尺寸帧数据
bindstop eventhandle 否 摄像头在非正常终止时触发,如退出后台等情况 1.0.0
binderror eventhandle 否 用户不允许使用摄像头时触发 1.0.0
bindinitdone eventhandle 否 相机初始化完成时触发,e.detail = {maxZoom} 2.7.0
bindscancode eventhandle 否 在扫码识别成功时触发,仅在 mode=”scanCode” 时生效 2.1.0

Bug & Tip

  1. tip: 同一页面只能插入一个 camera 组件
  2. tip:请注意原生组件使用限制
  3. tip:onCameraFrame 接口根据 frame-size 返回不同尺寸的原始帧数据,与 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)
  }
})

audio

从基础库 1.6.0 开始,本接口停止维护,请使用 wx.createInnerAudioContext 代替

基础库 1.0.0 开始支持,低版本需做兼容处理。

相关文档: wx.createAudioContext

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)、WebView

功能描述

音频。

属性说明

属性 类型 默认值 必填 说明 最低版本
id string 否 微信小程序 audio 组件的唯一标识符 1.0.0
src string 否 要播放音频的资源地址 1.0.0
loop boolean false 否 是否循环播放 1.0.0
controls boolean false 否 是否显示默认控件 1.0.0
poster string 否 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 1.0.0
name string 未知音频 否 默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效 1.0.0
author string 未知作者 否 默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效 1.0.0
binderror eventhandle 否 当发生错误时触发 error 事件,detail = {errMsg:MediaError.code} 1.0.0
bindplay eventhandle 否 当开始或继续播放时触发 play 事件 1.0.0
bindpause eventhandle 否 当暂停播放时触发 pause 事件 1.0.0
bindtimeupdate eventhandle 否 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration} 1.0.0
bindended eventhandle 否 当播放到末尾时触发 ended 事件 1.0.0

MediaError.code

返回错误码 描述
1 获取资源被用户禁止
2 网络错误
3 解码错误
4 不合适资源

示例代码

在开发者工具中预览效果

navigator

基础库 1.0.0 开始支持,低版本需做兼容处理。

微信小程序插件:支持,需要微信小程序基础库版本不低于 2.1.0

微信 Windows 版:支持

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)、WebView

功能描述

页面链接。

  1. navigator 在 Skyline 下视为文本节点,只能嵌套文本节点(如 text),不能嵌套 view、button 等普通节点,如 <button> <navigator>foo</navigator> </button>
  2. 新增 span 组件用于内联文本和图片,如 <span> <image> </image> <navigator>bar</navigator> </span>

通用属性

属性 类型 默认值 必填 说明 最低版本
target string self 否 在哪个目标上发生跳转,默认当前微信小程序 2.0.7
合法值 说明
self 当前微信小程序
miniProgram 其它微信小程序
url string 否 当前微信小程序内的跳转链接 1.0.0
open-type string navigate 否 跳转方式 1.0.0
合法值 说明 最低版本
navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect 对应 wx.redirectTo 的功能
switchTab 对应 wx.switchTab 的功能
reLaunch 对应 wx.reLaunch 的功能 1.1.0
navigateBack 对应 wx.navigateBack 或 wx.navigateBackMiniProgram (基础库 2.24.4 版本支持)的功能 1.1.0
exit 退出微信小程序,target="miniProgram"时生效 2.1.0
delta number 1 否 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 1.0.0
app-id string 否 当target="miniProgram"且open-type="navigate"时有效,要打开的微信小程序 appId 2.0.7
path string 否 当target="miniProgram"且open-type="navigate"时有效,打开的页面路径,如果为空则打开首页 2.0.7
extra-data object 否 当target="miniProgram"且open-type="navigate/navigateBack"时有效,需要传递给目标微信小程序的数据,目标微信小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。详情 2.0.7
version string release 否 当target="miniProgram"且open-type="navigate"时有效,要打开的微信小程序版本 2.0.7
合法值 说明
develop 开发版
trial 体验版
release 正式版,仅在当前微信小程序为开发版或体验版时此参数有效;如果当前微信小程序是正式版,则打开的微信小程序必定是正式版。
short-link string 否 当target="miniProgram"时有效,当传递该参数后,可以不传 app-id 和 path。链接可以通过【微信小程序菜单】->【复制链接】获取。 2.18.1
hover-class string navigator-hover 否 指定点击时的样式类,当hover-class="none"时,没有点击态效果 1.0.0
hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 50 否 按住后多久出现点击态,单位毫秒 1.0.0
hover-stay-time number 600 否 手指松开后点击态保留时间,单位毫秒 1.0.0
bindsuccess string 否 当target="miniProgram"且open-type="navigate/navigateBack"时有效时有效,跳转微信小程序成功 2.0.7
bindfail string 否 当target="miniProgram"且open-type="navigate/navigateBack"时有效时有效,跳转微信小程序失败 2.0.7
bindcomplete string 否 当target="miniProgram"且open-type="navigate/navigateBack"时有效时有效,跳转微信小程序完成 2.0.7

使用限制

  1. 需要用户确认跳转 从 2.3.0 版本开始,在跳转至其他微信小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他微信小程序。如果用户点击取消,则回调 fail cancel。
  2. 从2020年4月24日起,跳转其他微信小程序将不再受数量限制,使用此功能时请注意遵守运营规范。

关于调试

  • 在开发者工具上调用此 API 并不会真实的跳转到另外的微信小程序,但是开发者工具会校验本次调用跳转是否成功。详情
  • 开发者工具上支持被跳转的微信小程序处理接收参数的调试。详情

Bug & Tip

  1. tip:navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, navigator 的子节点背景色应为透明色

示例代码

在开发者工具中预览效果

.navigator-hover {
  color:blue;
}
.other-navigator-hover {
  color:red;
}
<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的微信小程序</navigator>
</view>
<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>
<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>
Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})

functional-page-navigator

基础库 2.1.0 开始支持,低版本需做兼容处理。

微信 Windows 版:支持

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)、WebView

功能描述

仅在插件中有效,用于跳转到插件功能页。

通用属性

属性 类型 默认值 必填 说明 最低版本
version string release 否 跳转到的微信小程序版本,**线上版本必须设置为 release** 2.1.0
合法值 说明
develop 开发版
trial 体验版
release 正式版
name string 否 要跳转到的功能页 2.1.0
合法值 说明 最低版本
loginAndGetUserInfo 用户信息功能页 2.1.0
requestPayment 支付功能页 2.1.0
chooseAddress 收货地址功能页 2.4.0
chooseInvoice 获取发票功能页 2.14.1
chooseInvoiceTitle 获取发票抬头功能页 2.14.1
args object 否 功能页参数,参数格式与具体功能页相关 2.1.0
bindsuccess eventhandler 否 功能页返回,且操作成功时触发, detail 格式与具体功能页相关 2.1.0
bindfail eventhandler 否 功能页返回,且操作失败时触发, detail 格式与具体功能页相关 2.1.0
bindcancel eventhandler 否 因用户操作从功能页返回时触发 2.4.1

Bug & Tip

  1. tip: 功能页是插件所有者微信小程序中的一个特殊页面,开发者不能自定义这个页面的外观。
  2. tip: 在功能页展示时,一些与界面展示相关的接口将被禁用(接口调用返回 fail )。
  3. tip: 这个组件本身可以在开发者工具中使用,但功能页的跳转目前不支持在开发者工具中调试,请在真机上测试。

示例代码

<!-- sample.wxml -->
<functional-page-navigator name="loginAndGetUserInfo" bind:success="loginSuccess">
  <button>登录到插件</button>
</functional-page-navigator>
// redirect.js navigator.js
Component({
  methods: {
    loginSuccess: function(e) {
      console.log(e.detail.code) // wx.login 的 code
      console.log(e.detail.userInfo) // wx.getUserInfo 的 userInfo
    }
  }
})

sticky-section

基础库 2.29.0 开始支持,低版本需做兼容处理。

相关文档: Skyline 渲染引擎、Skyline 迁移起步

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)

功能描述

吸顶布局容器,仅支持作为 <scroll-view type="custom"> 模式的直接子节点

属性说明

属性 类型 默认值 必填 说明 最低版本
push-pinned-header boolean true 否 吸顶元素重叠时是否继续上推
padding Array [0, 0, 0, 0] 否 长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距 3.0.0

示例代码

在开发者工具中预览效果

sticky-header

基础库 2.29.0 开始支持,低版本需做兼容处理。

相关文档: Skyline 渲染引擎、Skyline 迁移起步

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)

功能描述

吸顶布局容器,仅支持作为 <scroll-view type="custom"> 模式的直接子节点或 sticky-section 组件直接子节点

属性说明

属性 类型 默认值 必填 说明 最低版本
offset-top number 0 否 吸顶时与视窗顶部的距离(px) 3.0.0
allow-overlapping bool false 否 是否允许与前一个 sticky-header 重叠 3.7.11
padding Array [0, 0, 0, 0] 否 长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距(px) 3.0.0
bind:stickontopchange eventhandle 否 吸顶状态变化事件,仅支持非 worklet 的组件方法作为回调。event.detail = { isStickOnTop },当 sticky-header 吸顶时为 true,否则为 false。 3.6.2

示例代码

在开发者工具中预览效果