📫 事件 :id=event

获取方式 :id=method

uni-app
@ + 事件名或 v-on: + 事件名
事件信息从 event 中获取

<template>
  <view>
    <mp-html @ready="ready" />
  </view>
</template>
<script>
  export default {
    methods: {
      ready (e) {
        console.log(e)
      }
    }
  }
</script>

支付宝小程序
on + 事件名（首字母大写）
事件信息从 event 中获取

<mp-html onReady="ready">

Page({
  ready (e) {
    console.log(e)
  }
})

其他小程序平台
bind + 事件名
事件信息从 event.detail 中获取

<mp-html bindready="ready" />

Page({
  ready (e) {
    console.log(e.detail)
  }
})

load

触发时机：dom 树加载完毕时
返回值：无
用途：可以调用 api 函数

ready

触发时机：图片加载完毕时（不包含懒加载的图片）

?> 判断方式是 350ms 总高度无变化就认为加载完毕，部分情况下可能不准确；2.4.0 版本起 lazy-load 属性为 false 时根据图片的 load 事件判断，可以基本准确触发

返回值：富文本区域的 boundingClientRect 结构体，包含大小位置信息
用途：此时进行锚点跳转可以基本保证跳转位置正确

?> 如果设置了懒加载，此时返回的大小不一定是最终大小，如果需要实时的大小，可以调用 getRect 方法

error

触发时机：发生渲染错误时
返回值：一个 object，其中 source 为错误来源（包括 img、video、audio），attrs 为该标签的属性列表（包含 src 等信息），errMsg 是错误信息
用途：收集错误信息，减少使用出错率高的链接

imgtap

触发时机：图片被点击时
返回值：该 img 标签的属性列表
用途：
默认情况下图片被点击时将自动预览（具体处理可见图片效果），如果不希望如此，可将 preview-img 属性设置为 false 并在这里自定义处理
如果需要用到富文本中所有图片的数组，可以通过 imgList 的 api 获取
示例：

Page({
  imgtap (e) {
    // 对做了某种标记的图片进行预览
    if (e.detail['data-flag']) {
      wx.previewImage({
        urls: [e.detail.src] // 仅预览单张图片
      })
    }
  }
})

linktap

触发时机：链接被点击时
返回值：该 a 标签的属性列表

?> 2.0.5 版本起增加返回该标签内部文本 innerText

用途：
默认情况下链接被点击时，对于外部链接，将被拷贝到剪贴板，如果不希望如此，可以将 copy-link 属性的值设置为 false 后在这里自定义处理，可参考以下方案：

跳转 web-view
跳转到一个新的页面，该页面放置一个 web-view 用于显示外部网页（需要注意 web-view 的使用限制）
跳转其他小程序
对于其他小程序的链接（可通过自行设置的 data- 属性判断），通过 navigateToMiniProgram 接口跳转（需要注意跳转限制）
下载文档
对于文档类的链接（可通过后缀名或自行设置的 data- 属性判断），可以通过 downloadFile 接口下载文件后通过 openDocument 接口打开文档（需要注意下载域名限制）
下载压缩包
对于压缩包类的链接（可通过后缀名或自行设置的 data- 属性判断），可以通过 downloadFile 接口下载文件后通过 FileSystemManager.unzip 接口解压，然后进行打开文档等操作（需要注意下载域名限制）
对于大文件（可通过 data- 属性标注），还可以在下载前进行询问，下载过程中通过 DownloadTask 提示下载进度等

示例：

Page({
  linktap (e) {
    if (e.detail.href.includes('.doc')) {
      // 下载 doc 文件
      wx.downloadFile({
        url: e.detail.href,
        success (res) {
          wx.hideLoading()
          wx.openDocument({
            filePath: res.tempFilePath
          })
        },
        fail (err) {
          wx.hideLoading()
          wx.showModal({
            title: '失败',
            content: err.errMsg,
            showCancel: false
          })
        }
      })
    } else if (e.detail.href.includes('xxx.com')) {
      // 跳转到 webview
      wx.navigateTo({
        url: 'pages/webview/webview?url=' + e.detail.href,
      })
    } else if (e.detail['data-appid']) {
      // 跳转其他小程序
      wx.navigateToMiniProgram({
        appId: e.detail['data-appid']
      })
    }
  }
})

play

?> 2.3.0 版本起支持

触发时机：音视频播放时
返回值：无
用途：和 pauseMedia 的 api 配合可以实现与页面中其他音视频进行互斥播放
示例：

Page({
  // 页面中的音视频播放事件
  pagePlay() {
    // ctx 为组件实例
    ctx.pauseMedia() // 暂停组件内的音视频播放
  },
  // 组件的 play 事件
  componentPlay() {
    // media 为页面中的音视频实例
    media.pause() // 暂停页面中的音视频播放
  }
})

6.1 KiB Raw Permalink Blame History Unescape Escape