内容中台技术手册

渲染组件相关接口

渲染组件相关接口

名称和释义

H5作品采用面向对象设计，有如下常用实例

  1. 作品（scene） 指 一个h5作品的总数据结构（包含名称和id、code、音乐、封面以及一些验证配置）
  2. 页面（page）指一个页面、一般分为普通页面（page）和长页面（longPage）
  3. 图层（layer）渲染组件的地方
  4. 组件（comp）渲染组件的实例
    实例关系
    scene 1:n page 1:n layer 1:n comp

各个实例常用api

scene

名称 类型 返回值 描述
eqxPageList 属性Array [pageInstance] 返回页面实例数组，下标是页面的位置
currentPage 属性 pageInstance 当前页面的实例

page

名称 类型 返回值 描述
eqxScene 属性 sceneInstance 所属场景实例
getEqxComps() 方法 [compInstance] 返回组件实例
addAfterActiveFn(cb:Function) 方法 – 绑定事件在页面被激活的时候触发
removeAfterActiveFn（cb:Function） 方法 – 移除绑定在页面被激活的时候触发的事件

longPage 继承自page

名称 类型 返回值 描述
updateHeight(height:number) 方法 – 更新页面高度，最小高度554

layer

暂无

comp

名称 类型 返回值 描述
eqxPage 属性 pageInstance 所属page实例
eqxScene 属性 sceneInstance 所属场景实例
group 属性 groupInstance|null 所属组合
$item 属性 jqueryDom 组件最外层dom的jquery实例
getAbsolutePos() 方法 Object 组件相对画布的位置宽高
updateCssByView(css:jqueryCssObject) 方法 – 更新外框组件css

文本组件 继承自 comp

文本组件会过滤掉非 span br div标签

图片组件 继承自 comp

名称 类型 返回值 描述
updateCssByView(css:jqueryCssObject) 方法 – 更新外框组件css,会保持图片比例，图片可能会被裁切

group 组合

组合是特殊的一种item 和 comp 属于同一级别

名称 类型 返回值 描述
findTopGroup() 方法 groupInstance 获取顶层组合
getAbsolutePos() 方法 Object 组合相对画布的位置和宽高
update$item(css:jqueryCssObject) 方法 – 更新组合以及所有子元素的位置宽高

更新高度参考 demo 自定义脚本

// 测试js 绑定在动态高度元素上
function test(ele, json) {
    // 这里需要再页面激活的时候才去拿数据
    ele.eqxPage.addAfterActiveFn(()=>{
        // 获取当前元素的绝对位置
        const oldCss = ele.getAbsolutePos()
        // 这里表示数据高度
        const oldHeight = oldCss.height
        // 这里获取当前元素的渲染高度
        const currentHeight = (()=>{
            const oldHeight = ele.$li.css('height')
            ele.$li.css({height:'auto'})
            const height = ele.$li.height()
            ele.$li.css({height:oldHeight})
            return height
        })()
        const diffHeight = currentHeight - oldHeight
        // 所有元素
        const pageComps = ele.eqxPage.getEqxComps()
        // 找到当前元素下面的元素 过滤掉组合内的元素
        const underComps = pageComps.filter(comp => !comp.group&&comp.getAbsolutePos().top > oldCss.top)
        underComps.forEach(comp => {
            const css = comp.getAbsolutePos()
            comp.updateCssByView({
                top: css.top + diffHeight
            })
        })
        // 更新组合的高度
        const groupComps = new Set()
        pageComps.forEach(comp => {
            if (comp.group) {
                // 这里需要找到顶层组合
                groupComps.add(comp.group.findTopGroup())
            }
        })
        groupComps.forEach(group => {
            const name = group.json.name
            // 这里可以根据name做一些判断
            const oldCss = group.getAbsolutePos()
            // 这里可以根据oldCss 做一些过滤
            group.update$item({
                height: oldCss.height + diffHeight
            })
        })
        // 更新背景元素的高度
        const backGroundImageIds = [4106749100]
        pageComps.forEach(comp => {
            if(backGroundImageIds.includes(comp.id)){
                const css = comp.getAbsolutePos()
                comp.updateCssByView({
                    height: css.height + diffHeight
                })
            }
        })
        
        //  更新页面高度
        const oldPageHeight = ele.eqxPage.getPageHeight()
        // 这里有可能不是长页面，所以需要判断
        try{
            ele.eqxPage.updateHeight(oldPageHeight + diffHeight)
        }catch(e){
            console.error(e)
        }
    })
}
强子 2024年1月23日 16:31 2301 收藏文档