针对移动端场景,我们提供移动端编辑器,供用户编辑移动端界面。
说明:移动端编辑器功能目前在不断完善中,可关注产品动态了解最新进展。
当前功能:
自动初始化移动端页面布局
移动端布局调整
移动端组件不可见
版本功能限制说明:本功能仅支持专业版用户使用。
移动端编辑
1. 单击控制台 > 项目 > 页面 > 编辑,进入页面画布编辑![](https://qcloudimg.tencent-cloud.cn/image/document/f654468f7075d8d92e5369b7c7315584.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f654468f7075d8d92e5369b7c7315584.png)
2. 单击“移动端”icon,切换到移动端![](https://qcloudimg.tencent-cloud.cn/image/document/18940492e43edc2135a1b6ef5e0582d7.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/18940492e43edc2135a1b6ef5e0582d7.png)
系统将自动为该页面生成一个移动端视图,该视图可通过编辑组件大小. 位置来使移动端效果更符合展示场景(移动端编辑的尺寸. 位置等不会影响 PC,同理,PC 的设置也不影响移动端):
编辑组件大小,通过拖动右下角的三角形 icon 来改变大小
![](https://qcloudimg.tencent-cloud.cn/image/document/75b1a3dc3ba8b66e693fcbb3019a3969.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/75b1a3dc3ba8b66e693fcbb3019a3969.png)
可在一行中编排多个组件:![](https://qcloudimg.tencent-cloud.cn/image/document/8327b70c4fcc6ec7ce0ca3128a811680.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/8327b70c4fcc6ec7ce0ca3128a811680.png)
3. 可对移动端隐藏部分组件:
鼠标移动到组件上,单击“眼睛”图标隐藏该组件(不影响 PC 端)![](https://qcloudimg.tencent-cloud.cn/image/document/601ee18551be410cdbec739b3118292d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/601ee18551be410cdbec739b3118292d.png)
如需要恢复,可在右侧“对移动端隐藏”面板中单击“眼睛”图标恢复显示,恢复显示后,该组件将被添加的当前页面底部。
部分组件暂不支持在移动端展示,如 tab 组件,无法恢复显示,目前逐步支持中,请关注产品动态更新。
4. 删除组件:
您可以对部分组件进行删除,删除后,同时会在 PC 端删除该组件。![](https://qcloudimg.tencent-cloud.cn/image/document/5a7774388ef18501b2145f5130335ec3.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/5a7774388ef18501b2145f5130335ec3.png)
5. 组件编辑内容:暂不支持在移动端编辑组件内容,可通过切换回 PC 端进行编辑。
6. 创建新组件:暂不支持在移动端添加组件,可通过切换回 PC 端进行添加。
移动端预览
用户可通过预览功能,在手机上查看预览效果,具体操作:
1. 保存当前页面![](https://qcloudimg.tencent-cloud.cn/image/document/c7a67c465f22e037d5ffa0b3bbf735eb.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/c7a67c465f22e037d5ffa0b3bbf735eb.png)
2. 刷新或者直接扫码![](https://qcloudimg.tencent-cloud.cn/image/document/4064a10c171ba314ef11bc4cb415b00f.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/4064a10c171ba314ef11bc4cb415b00f.png)
移动端发布
用户可对移动端进行发布,发布流程和 PC 端一致:
1. 单击右上角发布按钮
![](https://qcloudimg.tencent-cloud.cn/image/document/e57028e796e848b74fd69d2478958847.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/e57028e796e848b74fd69d2478958847.png)
2. 发布成功后,可单击查看看板进入看板![](https://qcloudimg.tencent-cloud.cn/image/document/c0cba60f9424a304d0dac657f38b0c5c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/c0cba60f9424a304d0dac657f38b0c5c.png)
3. 进入看板后,单击分享,在访问链接右侧,单击二维码,扫码查看移动报表:![](https://qcloudimg.tencent-cloud.cn/image/document/bc11bde1c1da1250013f28a745ee0e7d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/bc11bde1c1da1250013f28a745ee0e7d.png)
4. 移动端链接获取:
您可以复制访问链接直接发给其他人,用户访问时,会自动根据用户设备自动选择展示移动端还是 PC 端。
如您希望直接或去移动端地址,可在 PC 地址前面加“m-”,如 PC 地址为“https://share.tcbi.qq.com/page/share?pageId=00000000&projectId=00000000&token=5cd5beb4-3236-4e8b-b665-054dc8130c02&scope=page”,则移动端地址为“如 PC 地址为“https://m-share.tcbi.qq.com/page/share?pageId=00000000&projectId=00000000&token=5cd5beb4-3236-4e8b-b665-054dc8130c02&scope=page”
其他说明:
1. 部分组件暂不支持
2. 主题功能暂不支持,如PC端根据主题设置了图表样式,可能引起移动端展示异常,暂时可通过将PC端尽量设为白底黑字主题,主题功能将在近期更新