自定义页面
自定义页面，基于自定义组件创建，通过拖拉的方式，调整页面布局，调整组件的属性，实现各种业务需求。
如果无法播放，点此直接下载/打开
一、如何创建自定义页面
1.进入开发者控制台
1.1 具体操作步骤
- 登录cloudcc系统——》点击右上角人头像
2.新建自定义页面
2.1 具体操作步骤
- 点击：自定义布局——》自定义页面——》新建，进入页面布局编辑器
- 点击左侧物料库中的基础组件，拖动按钮组件到中间画布，查看如何自定义组件
- 组件处于选中的状态下，可以通过右侧属性配置面板，修改“默认值”属性为搜索
- 点击左侧物料区数据组件，拖动表格组件到画布中
- 点击画布右上方的保存按钮，输入以下信息保存即可
以上便是创建自定义页面的简单流程。
二、示例：如何配置自适应页面
1.点击新建进入编辑器布局
2.添加一个基础组件到布局中
3.调整画布和组件的尺寸及单位
- 顶部区域是调整画布的属性，一个画布中可以包含多个组件
- 其中的单位是百分比，宽和高都设置100
- 右侧区域是调整组件的属性，选中一个组件后可以对其调整
- 组件单位选中视口，宽50，高10
4.效果展示
0:00
/0:09
三、进阶：布局编辑器
1.整体区域划分概览
1.1 区域1：物料区域
此区域展示了所有组件物料，并按类型分类。开发者自定义的组件也将在此展示，独立在“自定义组件”分类下，方便开发者管理和使用。使用组件物料，只需将其拖拽到画布即可。
1.2 区域2：布局属性编辑区
此区域用于设置布局的全局属性，包括布局使用场景、宽高以及宽高单位。通过设置单位，可以实现自适应布局和固定宽高布局。
- 宽高：
- 宽高可以使用像素、百分比、视口等单位。
- 使用像素单位可以实现固定宽高布局。
- 使用百分比单位可以实现自适应布局。
- 使用视口单位可以实现基于浏览器显示大小布局。
画布比例，是为了方便布局排版，可以快速切换画布和布局大小。
1.3 区域3：排版编辑区
- 此区域分为上下2部分，上面是功能操作按钮，下面是布局排版
- 功能按钮
- 撤销
- 反撤销
- 组合
- 选中多个组件，组合成一个Group，可以统一调整大小
- 拆分
- 将组合的组件重新拆分
- 锁定
- 锁定后页面组件无法拖动
- 解锁
- 取消页面锁定状态
- 清空画布
- 预览
- 帮助
- 平台每个功能，都有单独的帮助文档
1.4 区域4：组件配置区
- 组件配置分为三大类，查看如何自定义组件属性
- 样式
- 属性
- 事件
1.5 区域5：系统设置区
- 全屏按钮
- 帮助中心
- 切换多语言
- 账号信息
四、进阶：组件间通信
1.原理图
2.组件A接受组件B的事件
- 组件A实现代码
<template>
<div class="cc-container">Hello World</div>
</template>
<script>
export default {
data() {
return {
componentInfo: {
// 组件唯一标识，全局唯一
component: "cloudcc-demo-a",
// 组件名称，在页面编辑器显示的名字
compName: "cloudcc-demo-a",
// 组件描述信息
compDesc: "组件描述信息",
},
isLock: false,
};
},
mounted(){
// 订阅消息
this.$CCDK.CCBus.$on('demoB2A',(args)={
console.log("args",args)
})
},
beforeDestroy(){
// 解绑消息
this.$CCDK.CCBus.$off('demoB2A')
}
};
</script>
<style lang="scss" scoped>
.cc-container {
text-align: center;
padding: 8px;
background: goldenrod;
}
</style>- 组件B发送消息实现
<template>
<div class="cc-container">
Hello World
<button @click="emit">发送消息</button>
</div>
</template>
<script>
export default {
data() {
return {
componentInfo: {
// 组件唯一标识，全局唯一
component: "cloudcc-demo-",
// 组件名称，在页面编辑器显示的名字
compName: "cloudcc-demo-B",
// 组件描述信息
compDesc: "组件描述信息",
},
isLock: false,
};
},
methods: {
emit() {
// 发布消息
this.$CCDK.CCBus.$emit("demoB2A", "i am b");
},
},
};
</script>
<style lang="scss" scoped>
.cc-container {
text-align: center;
padding: 8px;
background: goldenrod;
}
</style>五、App中调试自定义页面
安装依赖
- 进入开发项目，安装依赖
npm install eruda --save-dev在组件中使用
- 在自定义组件中导入和初始化debug插件
<template>
<div class="cc-container">
<HelloWorld />
</div>
</template>
<script>
// 导入debug插件
import eruda from "eruda";
// 初始化debug插件
eruda.init();
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld,
},
mounted() {
// 接下来即可照常使用 `console` 等方法
console.log("Hello world");
},
data() {
return {
componentInfo: {
component: "component-cc-h5-debug",
compName: "h5调试模版",
compDesc: "H5页面在App调试默版",
},
isLock: false,
};
},
};
</script>
<style lang="scss" scoped>
.cc-container {
text-align: center;
padding: 8px;
background: goldenrod;
}
</style>- 在移动端中查看，点击右下角小齿轮图标，打开控制台
