内容中台技术手册
动态与公告
公告
发布记录
接口变更记录
对接必读
产品简介
名词解释
调用方式
公共代码
公共事件
账号开通
基础集成
单点登录
访客体系打通
数据推送
授权接口
管理集成
组织模型
企业配置接口
员工管理接口
集成配置接口
部门管理接口
编辑器集成
通用
集成页面
作品接口
统计数据接口
行为画像接口
传播脉络接口
模板接口
素材接口
分组接口
多人分发接口
作品共享接口
编辑器公共事件
黑名单管理
访客信息接口
互动
互动接口
活动参与信息接口
互动事件
自定义活动逻辑(抽奖等)
积分、权益体系集成
奖品库集成
互动任务
电子兑奖码
互动活动配置同步
地址库对接
活动白名单
收货地址自定义提交
表单
自定义表单提交
表单默认值自动填充
表单回传数据
表单选项数据结构
嵌入第三方页面
表单接口
H5
自定义下拉表单组件
任务组件
动态替换作品元素
H5接口
任务组件(新)
自定义js脚本(新)
渲染组件相关接口
数据集成
H5事件
留资玩法
长页
海报
基于模板生成图片
对接素材美化和编辑功能
海报事件
视频
服务集成
短信服务集成
素材库集成接口
自定义JS集成
审批工作流集成
红包服务集成
收款配置-小程序对接
移动端集成
Android SDK集成
iOS SDK集成
平台集成
集成申请
用户组织架构
平台接口
配置指南
企业配置
集成配置
商户号配置
最佳实践
年度总结H5
微信小程序嵌入H5
支付宝小程序嵌入H5
基于模板动态生成图片
跳转小程序页面
PC大转盘抽奖使用方法
私域分享增加权益
微信小程序对接互动默认商户号红包
常见问题
-
+
渲染组件相关接口
# 渲染组件相关接口 ## 名称和释义 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 自定义脚本 ```javaScript // 测试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) } }) } ```
强子
Jan. 23, 2024, 4:31 p.m.
1648
转发文档
收藏文档
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接
Markdown文件
PDF文档
PDF文档(打印)
分享
链接
类型
密码
更新密码