Monet-Hook（大屏在线编辑器）

Monet-Hook 概述

Monet-Hook 可以在配置大屏基础上，通过控制 Dom 达到精致化控制的目的，可实现弹性布局、初始化大屏变量、扩展字体、请求数据等效果

Monet-Hook 是基于monaco-editor实现的在线编辑器与Visual Studio Code使用习惯相似，另外为了方便开发者进行编码扩展了monaco-editor，对莫奈提供的 API 增加了智能提示

Monet-Hook 设计图

在浏览器中输入http://ip/sys-imonet/#/bigScreen/hook?screenId=799进入大屏在线编程页面或直接在大屏编辑中将workspace修改成hook进入

编辑器提供两个形参stage、hooks，两个形参的能力可通过【.】进行呼出例如"stage."，编辑器会展示出所有 stage 支持的 API

Monet-Hook 介绍

hook函数体

function(stage,hooks){

}

执行阶段：进入大屏立即执行

建议处理场景：

初始化大屏变量

通过style为页面增加全局样式

通过script引用第三方js库

hooks.render

function(stage,hooks){
    hooks.render(()=>{

    },['tabs']);
}

执行阶段：大屏加载完成后执行

建议处理场景：操作组件Dom

参数介绍：

()=>{} (必须) render回调函数

['tabs'] (可选参数) 大屏变量，render会根据此变量的变化重新执行，如未定义则大屏加载完成后只执行一次

hooks.addFont

function(stage,hooks){
    hooks.addFont(()=>{
        return {
            url:'https://storage.jd.com/urban/fontFile/AlibabaPuHuiTi-2-95-ExtraBold.ttf',
            key:'阿里普黑体',
            value:'AlibabaPuHuiTi'
        }
    });
}

执行阶段：进入大屏立即执行

建议处理场景：项目个性化字体

参数介绍：

url (必须) 字体地址

key (必须) 字体名称

value (必须) 字体唯一标识

hooks.monitorComDomChange

function(stage,hooks){
    hooks.render(()=>{
        hooks.monitorComDomChange(()=>{

        },"comId");
    });
}

执行阶段：需与 hooks.render 结合使用，确保监听的组件渲染完成

建议处理场景：监听组件Dom变化，组件内的Dom增加或删除将触发回调函数

参数介绍：

(changeInfo)=>{}: Dom变化后执行的回调函数，参数为变化详情

comId: 需要监听的组件ID

stage.$

function(stage,hooks){
    hooks.render(()=>{
         $(".user_card").find("span").text("张三");
    },['tabs']);
}

$介绍：Jquery库可基于此操作大屏Dom

stage.get

function(stage,hooks){
    hooks.render(()=>{
        // com_hook_10000可在大屏编辑页面右键【复制HooksId】
        const comDom = stage.get("com_hook_10000");
        comDom.find("span").text("张三");
    },['tabs']);
}

get介绍：获取大屏组件Dom，返回Jquery对象

stage.getGroup

function(stage,hooks){
    hooks.render(()=>{
        // com_hook_10000可在大屏编辑页面右键【复制HooksId】
        const comDom = stage.getGroup("com_hook_10000");
        console.log(comDom.length);
    },['tabs']);
}

getGroup介绍：获取莫奈分组包含的所有组件Dom对象，返回包含Jquery对象数组

stage.getDomId

function(stage,hooks){
    hooks.render(()=>{
        // com_hook_10000可在大屏编辑页面右键【复制HooksId】
        const comDomId = stage.getDomId("com_hook_10000");
        console.log(comDomId);
    },['tabs']);
}

getDomId介绍：根据组件Id获取DomId

使用场景：比较组件DomId时，可基于此函数将组件Id转换为DomId

stage.setDataPool

function(stage,hooks){
    stage.setDataPool("initVariable","true");
}

setDataPool介绍：初始化大屏变量

stage.getDataPool

function(stage,hooks){
    const dataPool = stage.getDataPool();
    console.log(dataPool);
}

getDataPool介绍：获取莫奈大屏变量

stage.axiosRequest

function(stage,hooks){
    // method: 请求方式 GET、PUT、POST
    // body: PUT或POST可配置[可选]
    const getApiData = ()=>{
        return stage.axiosRequest({
            url:"api地址",
            method:"get",  
            body:{}       
        });
    }
}

axiosRequest介绍：API数据请求【url】【body】支持使用变量

stage.groupComConvertStatic

function(stage,hooks){
    // 将绝对定位的组件转换为正常流布局，可被flex容器进行包裹，达到弹性效果如：
    const container = document.createElement("div");
    container.style = "overflow:hidden;height:660px;width:500px;transform: translate3d(0px, 56px, 0px);position:absolute;z-index:1;display:flex;flex-direction:column;";
    const flex1 = stage.groupComConvertStatic("com_hook_10000");
    if(flex1){
        $(container).append(flex1);
    }
}

groupComConvertStatic介绍：将组组件转换为正常流布局

stage.updateComStaticData

function(stage,hooks){
    hooks.render(()=>{
       stage.updateComStaticData("comId",[{a:1}])
    });
}

updateComStaticData介绍：更新组件静态数据

视频案例

案例名称	操作
莫奈通过hook制作弹性布局.mp4	下载
莫奈通过hook制作文本特效.mp4	下载
莫奈通过hook制作电话通讯录.mp4	下载

Monet-Hook（大屏在线编辑器）

Monet-Hook 概述

Monet-Hook 设计图

Monet-Hook 介绍

hook函数体

执行阶段：进入大屏立即执行

建议处理场景：

hooks.render

执行阶段：大屏加载完成后执行

建议处理场景：操作组件`Dom`

参数介绍：

hooks.addFont

执行阶段：进入大屏立即执行

建议处理场景：项目个性化字体

参数介绍：

hooks.monitorComDomChange

执行阶段：需与 hooks.render 结合使用，确保监听的组件渲染完成

建议处理场景：监听组件Dom变化，组件内的Dom增加或删除将触发回调函数

参数介绍：

stage.$

$介绍：Jquery库可基于此操作大屏`Dom`

stage.get

get介绍：获取大屏组件`Dom`，返回Jquery对象

stage.getGroup

getGroup介绍：获取莫奈分组包含的所有组件`Dom`对象，返回包含Jquery对象数组

stage.getDomId

getDomId介绍：根据组件Id获取DomId

使用场景：比较组件DomId时，可基于此函数将组件Id转换为DomId

stage.setDataPool

setDataPool介绍：初始化大屏变量

stage.getDataPool

getDataPool介绍：获取莫奈大屏变量

stage.axiosRequest

axiosRequest介绍：API数据请求【url】【body】支持使用变量

stage.groupComConvertStatic

groupComConvertStatic介绍：将组组件转换为正常流布局

stage.updateComStaticData

updateComStaticData介绍：更新组件静态数据

视频案例

# Monet-Hook（大屏在线编辑器）

# Monet-Hook 概述

# Monet-Hook 设计图

# Monet-Hook 介绍

# hook函数体

# 执行阶段：进入大屏立即执行

# 建议处理场景：

# hooks.render

# 执行阶段：大屏加载完成后执行

# 建议处理场景：操作组件Dom

# 参数介绍：

# hooks.addFont

# 执行阶段：进入大屏立即执行

# 建议处理场景：项目个性化字体

# 参数介绍：

# hooks.monitorComDomChange

# 执行阶段：需与 hooks.render 结合使用，确保监听的组件渲染完成

# 建议处理场景：监听组件Dom变化，组件内的Dom增加或删除将触发回调函数

# 参数介绍：

# stage.$

# $介绍：Jquery库可基于此操作大屏Dom

# stage.get

# get介绍：获取大屏组件Dom，返回Jquery对象

# stage.getGroup

# getGroup介绍：获取莫奈分组包含的所有组件Dom对象，返回包含Jquery对象数组

# stage.getDomId

# getDomId介绍：根据组件Id获取DomId

# 使用场景：比较组件DomId时，可基于此函数将组件Id转换为DomId

# stage.setDataPool

# setDataPool介绍：初始化大屏变量

# stage.getDataPool

# getDataPool介绍：获取莫奈大屏变量

# stage.axiosRequest

# axiosRequest介绍：API数据请求【url】【body】支持使用变量

# stage.groupComConvertStatic

# groupComConvertStatic介绍：将组组件转换为正常流布局

# stage.updateComStaticData

# updateComStaticData介绍：更新组件静态数据

# 视频案例

Monet-Hook（大屏在线编辑器）

Monet-Hook 概述

Monet-Hook 设计图

Monet-Hook 介绍

hook函数体

执行阶段：进入大屏立即执行

建议处理场景：

hooks.render

执行阶段：大屏加载完成后执行

建议处理场景：操作组件`Dom`

参数介绍：

hooks.addFont

执行阶段：进入大屏立即执行

建议处理场景：项目个性化字体

参数介绍：

hooks.monitorComDomChange

执行阶段：需与 hooks.render 结合使用，确保监听的组件渲染完成

建议处理场景：监听组件Dom变化，组件内的Dom增加或删除将触发回调函数

参数介绍：

stage.$

$介绍：Jquery库可基于此操作大屏`Dom`

stage.get

get介绍：获取大屏组件`Dom`，返回Jquery对象

stage.getGroup

getGroup介绍：获取莫奈分组包含的所有组件`Dom`对象，返回包含Jquery对象数组

stage.getDomId

getDomId介绍：根据组件Id获取DomId

使用场景：比较组件DomId时，可基于此函数将组件Id转换为DomId

stage.setDataPool

setDataPool介绍：初始化大屏变量

stage.getDataPool

getDataPool介绍：获取莫奈大屏变量

stage.axiosRequest

axiosRequest介绍：API数据请求【url】【body】支持使用变量

stage.groupComConvertStatic

groupComConvertStatic介绍：将组组件转换为正常流布局

stage.updateComStaticData

updateComStaticData介绍：更新组件静态数据

视频案例