OpenSourceJoker/filesbox

Fork 0

liangyajie 2e7ecea04e 小程序

2023-09-21 10:23:31 +08:00

5.4 KiB

Raw Permalink Blame History

🔎 api

组件的实例上挂载了一些实用的 api 方法可供调用

获取组件实例 :id=getCompent

uni-app

<template>
  <view>
    <mp-html ref="article" />
  </view>
</template>
<script>
  export default {
    onLoad () {
      var ctx = this.$refs.article
    }
  }
</script>

支付宝小程序
需开启 component2 模式

<mp-html ref="article">

Page({
  article (ctx) {
    // 获得组件实例
  } 
})

其他小程序平台

<mp-html id="article" />

Page({
  onLoad () {
    // 微信、QQ、百度
    var ctx = this.selectComponent('#article')
    // 头条
    this.selectComponent('#article', ctx => {

    })
  }
})

in

功能：将锚点跳转的范围限定在一个 scroll-view（需要开启纵向滚动）内
输入值：

参数名	类型	必填	默认值	说明
page	object	是	-	scroll-view 标签所在页面实例
selector	string	是	-	scroll-view 标签的选择器
scrollTop	string	是	-	scroll-view 标签 scrollTop 属性绑定的变量名

返回值：无
示例：

<scroll-view id="scroll" style="height:300px" scroll-top="{{top}}" scroll-y scroll-with-animation>
  <mp-html id="article" content="{{html}}" />
</scroll-view>

Page({
  onLoad () {
    // ctx 为组件实例
    ctx.in(this, '#scroll', 'top')
  }
})

!> 在 scroll-view 中使用时需要注意如果使用了视频，需要保证该平台的 video 标签支持同层渲染

navigateTo

功能：锚点跳转
前提是 use-anchor 属性的值为 true
必须在 load 事件触发后使用，建议在 ready 事件触发后使用以保证跳转位置准确

输入值：

参数名	类型	必填	默认值	说明
id	string	否	-	要跳转的锚点 id，为空则跳转到开头
offset	number	否	0	跳转位置的偏移量

返回值：Promise

该方法中传入的 offset 优先级高于 use-anchor 属性

示例：

Page({
  ready () {
    // ctx 为组件实例
    ctx.navigateTo('anchor').then(() => {
      console.log('跳转成功')
    }).catch(err => {
      console.log('跳转失败：', err)
    })
  }
})

getText

功能：获取文本内容
必须在 load 事件触发后使用
输入值：无
返回值：String

getRect

功能：获取富文本内容的位置和大小
如果开启了 lazy-load，ready 事件返回的不是最终大小，可通过此方法获得实时的大小和位置信息
输入值：无
返回值：Promise
示例：

Page({
  getRect () {
    // ctx 为组件实例
    ctx.getRect().then(rect => {
      console.log(rect) // boundingClientRect 信息
    }).catch(err => {
      console.log('获取失败', err)
    })
  }
})

!> 该方法有小概率可能获取失败，需要做好错误处理

setContent

功能：设置富文本内容
此方法的功能与 content 属性基本一致，但此方法的设置不需要经过视图层且可以从尾部追加
输入值：

参数名	类型	必填	默认值	说明
content	string	是	-	要渲染的 html 字符串
append	boolean	否	false	是否从尾部追加

返回值：无

!> 调用此方法会触发 load 和 ready 事件，请勿在事件处理函数中调用，否则可能陷入死循环

imgList

功能：获取所有图片的数组
该数组用于图片预览，对其进行修改可以在自动预览时生效（如修改为高清图链接）

Page({
  load () {
    // ctx 为组件实例
    var cover = ctx.imgList[0] // 首张图可以作为转发封面图
    ctx.imgList.forEach((src, i, array) => {
      console.log(src)
      array[i] = src.replace('thumb', '') // 替换为高清图链接
    })
  }
})

!> 这是一个属性，不是一个函数
请不要增删此数组（可以修改），否则在自动预览时可能出现问题

pauseMedia

?> 2.2.2 版本起支持

功能：暂停正在播放的视频或音频

?> 和 play 事件配合可以实现与页面中其他音视频进行互斥播放

输入值：无
返回值：无
示例：

Page({
  onHide () {
    // ctx 为组件实例
    ctx.pauseMedia() // 页面跳转或隐藏时暂停播放
  }
})

setPlaybackRate

?> 2.4.0 版本起支持

功能：设置音视频的播放速率