Skip to main content

前端开发教程

客户端脚本

如果无法播放，点此直接下载/打开

介绍

客户端脚本支持对象在不同页面，比如详情页，新建页，列表页的特定时机运行一段JavaScript脚本，基于CCDK的桥接能力，实现更多的自定义功能。

进入脚本设置页面

  • 登录系统，点击右上角人头像，选择开发者平台按钮，此按钮目前只开放给管理员简档用户。
  • 选择左侧：扩展——》客户端脚本

新建脚本

$CCDK.CCMessage.showMessage('hello cloudCC')

回到前台查看效果

  • 点击客户菜单，选择任意一条数据进入详情页
  • 会看到提示信息

示例

为了方便开发者更方便控制元素，我们在平台的关键dom上添加了devid自定义属性，此ID使用特定的业务ID绑定，可以标记出系统的特定元素，

用于控制查看页面结构说明

案例说明

  • 禁用编辑页的“分级”字段

第一步：查看devid

  • F12打开浏览器控制台，选择元素，如果没有可能收起在更多中了
  • 使用元素选择器选取元素，点击元素选择器，点击页面上的元素
  • 查看样式名称，复制出来备用

第二步：创建客户端脚本

  • 选择如下配置
  • 创建脚本内容
  • 保存脚本，回到客户详情页查看结果
// 方式一
let style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML='[devid="ffe201100003855g6Ipz"]{pointer-events:none}'; 
document.getElementsByTagName('head').item(0).appendChild(style); 

// 方式二
let dd = document.querySelector('div[devid="ffe201100003428r65pk"]')
if(dd){
    dd.style.display="none"
}

第三步：效果展示

示例：隐藏详情页基本信息某个字段

为了方便开发者更方便控制元素，我们在平台的关键dom上添加了devid自定义属性，此ID使用特定的业务ID绑定，可以标记出系统的特定元素，用于控制查看页面结构说明

隐藏”主联系人字段“

查看devid

  • F12打开浏览器控制台，选择元素，如果没有可能收起在更多中了
  • 使用元素选择器选取元素，点击元素选择器，点击页面上的元素
  • 查看devid，复制出来备用

创建客户端脚本

  • 选择如下配置
  • 创建脚本内容
    • 隐藏元素，并占用空间
    • 隐藏元素，并且不占用空间
  • 保存脚本，回到客户详情页查看结果
let style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML='[devid="ffe20220523account01"]{display:none !important}'; 
document.getElementsByTagName('head').item(0).appendChild(style); 
let style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML='[devid="ffe20220523account01"]{visibility:hidden !important}'; 
document.getElementsByTagName('head').item(0).appendChild(style);

效果

示例：移动页面元素到其他位置

为了方便开发者更方便控制元素，我们在平台的关键dom上添加了devid自定义属性，此ID使用特定的业务ID绑定，可以标记出系统的特定元素，用于控制查看页面结构说明

查看devid

  • F12打开浏览器控制台，选择元素，如果没有可能收起在更多中了
  • 使用元素选择器选取元素，点击元素选择器，点击页面上的元素
  • 查看devid，复制出来备用

编写客户端脚本

// 获取要移动的节点
const moveNode = document.querySelector('[devid="aee2024EFBBA5EEfs1Ta"]');
 // 移动到目标节点
const  targetNode = document.querySelector('[devid="adf2024D33E03DA6xzBj"]');  
// 目标节点的父节点
const targetParentNode = targetNode.parentNode;    
  
//将需要移动的节点 插入到 父节点下的目标节点前面
targetParentNode.insertBefore(moveNode,targetNode)

添加脚本后的页面

注意

  • 需要考虑dom节点还未渲染导致没有找到的情况，建议使用定时器查找dom，存在时在进行操作
  • 具体情况可能受加载、网络影响，编写完对应脚本需要进行测试

进阶：页面与脚本事件的对应关系

系统所有的页面大致分为增删改查四类页面，每种页面支持不同的事件，用于实现不同的需求

页面 事件 平台支持 参数 触发时机 状态
全局类型 onCreate PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 启动项目时（业务代码还没有执行） 完成
onLoad PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 展示UI时（首屏页面加载完毕） 完成
onDestroy PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 关闭Tub签或更改流程时 完成
视图页(列表)1-3.png onCreated PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 进入视图页，但dom还没有创建的时候 完成
onLoad PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 首次进入，或是点击搜索获取列表数据后 完成
onDestroy PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 离开此页面，比如进入详情页 完成
新建页/编辑页2-3.png3-3.png onCreated PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 进入新建/编辑页，但dom还没有创建的时候 完成
onLoad PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 获取详情信息页面渲染后 完成
onDestroy PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 离开此页面，关闭的时候 完成
beforeSave PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj
  - detailData详情页数据，key-value形式，可以修改		 点击保存按钮时触发 完成
afterSave PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 保存接口请求完成后触发 完成
onChange PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 编辑某个字段，光标失焦点，并且value有变化时 完成
详情页 4-3.png onLoad PC/H5 Function test($CCDK,obj={})
- $CCDK全局工具
- obj预留配置对象		 获取详情基本数据，dom渲染后 完成