Skip to main content

获取代码

用户在上传完设计稿后,有两种获取代码的方式:

  1. 区域提取代码
  2. 整站打包下载

虽然两种途径获取的代码没有任何区别,但是在使用场景上还是有少许的差异。

区域提取代码

进入设计稿详情页,点击右上角的查看代码按钮



即可弹出代码面板



每一次查看代码都会对设计稿进行重新推算,如果在详情页中做了任何的二次修改,可以实时得到新的变化。关于设计稿二次修改,可以参阅【link】

面板介绍

查看代码面板一共有 4 个子面板,分别对应了 HTML、CSS、JS 和全局 CSS 四种代码。以小程序开发为例,我们只需要将其依次拷贝到小程序的 wxml、wxss、js 和全局 wxss 文件中即可。





一定要记得拷贝全局 CSS 文件,因为如果不拷贝的话,页面内将会出现显示不正常。

不过全局 CSS 在同一个项目中只需要拷贝一次。以小程序为例,我们将其拷贝到 app.wxss 文件中即可。后续再拷贝其他页面时,就不再需要拷贝全局 CSS 了。

区域提取

点击 Dom 树或者画布上的任意节点,可以观察到代码窗口的代码会发生变化,这正是 CodeFun 最重要的区域提供功能。用户可以根据自己的需求,拷贝任意区域的代码到自己已有的工程项目中。

当点击画布的空白区域时,Dom 树和画板都不再选中任何节点,此时代码窗口将显示整页代码。

提取设置

提取代码时,可以对输出代码的平台、风格进行个性化的配置,点击如图所示的设置按钮



即可弹出**设置面板**



配置项详解:
  1. 代码平台:可以选择输出原生小程序或者是基于 VUE 的 H5 版本
  2. 像素单位:在小程序模式下可以选择 rpx 和 px;在 H5 模式下可以选择 rem 和 px
  3. CSS 平台:目前支持原生 CSS 和 LESS
  4. 将 List 标签输出为循环列表:开启此选项后会在代码中输出 v-for 形式的动态绑定代码,详情请参阅【link】
  5. 开启数据绑定输出模式:如果用户进行了数据绑定,当开启此开关后,可以在代码中输出诸如
{{ data.name }}

这样的动态绑定代码,详情请参阅【link】

  1. 剩余选项可以用于帮助用户在界面显示区域不足时,控制是否显示部分代码面板

整站打包下载代码

在设计稿列表页,点击右上角的下载代码按钮



即可弹出整站打包下载面板



如图所示,在下载面板中可以选择对应的平台和像素单位。

另外在高级设置面板中,可以批量对所有的设计稿进行代码文件名命名。这个命名面板在第二次下载时会默认收折起来,可以通过点击高级设置,再次打开。