首页 > PC > 其它行业
CodeFun(UI设计稿智能生成源代码软件)

CodeFun(UI设计稿智能生成源代码软件)

大小:2.0MB
类别:其它行业
官方
免费
安全
纠错

检测到是安卓设备,电脑版软件不适合移动端

  • 简介
  • 相关教程
  • 相关合集
  • 评论
CodeFun(UI设计稿智能生成源代码软件) CodeFun(UI设计稿智能生成源代码软件) CodeFun(UI设计稿智能生成源代码软件)
简介

CodeFun是一款非常出色的UI设计稿智能化形成源代码的一种手段,CodeFun能够精确复原设计稿,无需再不断UI走查,节约您大量繁杂工作中如像扣清晰度、调合理布局等。

【基本上介绍】

CodeFun 是一款 UI 设计稿智能化形成源代码的一种手段,能将 Sketch、Photoshop 的设计稿智能化转换成前面源代码。它最大的特色是:

精确复原设计稿,无需再不断 UI 走查

能够形成如技术工程师笔写一般的代码

在日常工作上,例如像扣清晰度、调合理布局这种繁杂、枯燥乏味的力气活也将获得很大的减少,原先 8 钟头工作量只需 10 来分钟即可进行。

软件功能

在开始完自然环境后,下面给大家介绍怎样在 1 分钟之内将设计稿转换成微信小程序源代码。

快速入门的实例教程会以上传 Sketch 设计稿的操作流程做为样本详细介绍。Photoshop应用软件上传以后流程与Sketch一样。

CodeFun 的操作流程仅有 3 个阶段:

在 Sketch 软件中上传设计稿

在 CodeFun 专用工具中查询代码

将产生的代码拷到自身现有的施工中就可以

上传设计稿

载入一份 Sketch 设计稿,随后软件菜单中开启 CodeFun 软件页面。

Sketch 菜单栏 gt; 软件 gt; CodeFun gt; 上传设计稿

在软件上登录

根据软件建立一个项目

随后选择项目和上传页面。

选定账户,挑选必须上传到哪一个团队里

选择项目室内空间,表明现阶段上传的页面将摆放在指定新项目室内空间,这儿挑选默认设置私人空间

选择项目,表明现阶段上传的页面将放置到指定新项目空间内具体项目下,这儿挑选刚建立的 演试实例 新项目

挑选上传的页面,能选一张或上传所有页面

事例含有 3 个页面,这儿挑选【该页面所有绘图工具】。 上传结束后,点一下【查询新项目】按键。

返回 CodeFun 专用工具页面,见到刚刚上传的页面。

查询代码

挑选一张设计稿,进到宝贝详情

宝贝详情整体分成前后左右三部分

左侧栏表明文本文档树,下文称 DOM Tree,该树形结构跟 HTML 的树形结构保持一致

中间画板地区,可用作挑选原素目标

右面栏是被选节点特性面板,用以展现款式特性、互动配置部件配备

点一下顶端菜单栏右上角的查询代码按键,开启代码面板

代码面板中默认设置展现 4 列,各自展现 HTML、CSS、JS 和全局性款式的代码。

第一次打开后,会默认设置展现设定面板,假如不做改动,那样查询过的是小程序平台的原生代码。

先后点击复制按键,很容易地将代码拷到全面的剪切板中。

获得 v-for 代码

针对 List、Grid 来讲,大家想得到的代码遵照一种循环再生的方式,可以根据数据长度而全自动转变,而非静态数据元素反复拼接,所以它们在 HTML 上应当是相近 VUE 中 v-for 的书写。

CodeFun 可以支持导出 v-for 方式,以页面中下方 List 为例子,解读怎样得到循环系统代码。

最先,在代码面板中点击右上角的【设定】按键,开启【导出为循环系统列表】这个选项,开启这一全局性选择项后,页面里被加上 List、Grid 这种循环系统列表标签的原素,也将译成 v-for 的方式。

下面为必须 v-for 的地区加上 List 标识,选定 List 外层的 View 连接点。

点一下 Viewport 右上角的【标识】按键,开启标识面板,然后点击 【List】 标识。 目地是把地区标记为 List。

保证添加标签时 List View 连接点应当是被选中的情况。

标识结束后,List 区域内的代码变成根据 v-for 的书写。

数据绑定

一个正常的列表因其数据信息是以后面载入所得到的,因此在 HTML 里的代码一般是要用自变量去关联,当自变量具体内容升级时,页面展现的效果也是与此同时升级。

现今代码虽是根据 v-for 样式的,但里边的照片、文字的信息依旧还是静态的。

下面,大家将这些静态数据原素换成 JS 里的动态性自变量。

最先,开启代码设定面板,打开 DataBinding 导出方式

因为【CSS】面板和【全局性款式】面板暂时不考虑使用,所以先关闭相匹配这个选项掩藏他们。

选定 List 的外层 View,点击 Viewport 右上角的【数据绑定】按键,

页面右侧发生数据绑定面板,面板展示的是 JS 中变量的名称,默认设置前提下页面里的原素全是静态的,并不是源自 JS 自变量,因此面板里面的内容全是空。

这儿对 List 地区里的自变量开展取名。

在 List 右侧的文本框中填好 dataList,表明列表的信息来自一个叫 dataList 的自变量。

列表组员里都有一个图片,这儿只需要填写第一个组员就可以,这儿填好它自变量名字叫做 iconImg。每个成员上方都是有一行文本,变量命名为 title,最终有关折扣优惠元素被命名为 discount。

填好完成后,点一下右下方保存按钮。

更新日志

组件化 amp; 功能优化

- 小程序关键情景款式复原

- 新增加文字换行消除专用工具

- 新增加色调企业适用配备

- 新增加原素宽高比选定表明

- 算法优化 amp; 难题修补

- PS Plugin 0.4.3

- Figma Plugin 0.2.2

- 及时设计方案 Plugin 0.2.2

- Sketch Plugin 0.9.56

软件信息

软件标签:
软件版本:V0.4.3官方版
更新时间:2025-05-21
软件大小:2.0MB
备案号:暂无
厂商:暂无
包名:暂无
应用权限:
查看
  • 程序写入外部存储

    -- 允许程序写入外部存储
  • 读取设备外部存储空间的文件

    -- 程序可以读取设备外部存储空间的文件
    -- 允许程序请求安装文件包
  • 获取额外的位置信息提供程序命令

    -- 允许程序访问额外的定位提供者指令
  • 访问SD卡文件系统

    -- 挂载、反挂载外部文件系统
  • 访问SD卡文件系统

    -- 挂载、反挂载外部文件系统
  • 查看WLAN连接

    -- 获取当前WiFi接入的状态以及WLAN热点的信息
  • 完全的网络访问权限

    -- 访问网络连接,可能产生GPRS流量
  • 连接WLAN网络和断开连接

    -- 改变WiFi状态
  • 修改系统设置

    -- 允许读写系统设置项
  • 查看网络连接

    -- 获取网络信息状态,如当前的网络连接是否有效
  • 收起
隐私说明:
查看
  • 我们严格遵守法律法规,遵循以下隐私保护原则,为您提供更加安全、可靠的服务:

  • 1、安全可靠:

    我们竭尽全力通过合理有效的信息安全技术及管理流程,防止您的信息泄露、损毁、丢失。
  • 2、自主选择:

    我们为您提供便利的信息管理选项,以便您做出合适的选择,管理您的个人信息
  • 3、保护通信秘密:

    我们严格遵照法律法规,保护您的通信秘密,为您提供安全的通信服务。
  • 4、合理必要:

    为了向您和其他用户提供更好的服务,我们仅收集必要的信息。
  • 5、清晰透明:

    我们努力使用简明易懂的表述,向您介绍隐私政策,以便您清晰地了解我们的信息处理方式。
  • 6、将隐私保护融入产品设计:

    我们在产品和服务研发、运营的各个环节,融入隐私保护的理念。
  • 本《隐私政策》主要向您说明:

    我们收集哪些信息 我们收集信息的用途 您所享有的权利
  • 希望您仔细阅读《隐私政策》

    为了让您有更好的体验、改善我们的服务或经您同意的其他用途,在符合相关法律法规的前提下,我们可能将通过某些服务所收集的信息用于我们的其他服务。例如,将您在使用我们某项服务时的信息,用于另一项服务中向您展示个性化的内容或广告、用于用户研究分析与统计等服务。
  • 若您使用服务,即表示您认同我们在本政策中所述内容。除另有约定外,本政策所用术语与《服务协议》中的术语具有相同的涵义。
  • 如您有问题,请联系我们。
  • 收起
类似软件
本类排行
近期大作

最新软件

相关合集 更多

相关教程

ui设计软件_ui设计软件figma_ui设计软件哪个好 ui界面设计用什么软件?UI 设计用什么软件 手机线稿上色软件哪个好_手机生成线稿的软件_线稿自动上色app ai智能生成文章软件下载 _ai智能生成文章软件下载免费_ai智能文章生成器 PS绘制设计火箭图标UI设计

热搜标签

网友评论

添加表情
评论
举报

举报反馈

  • 色情
  • 版权
  • 反动
  • 暴力
  • 软件失效
  • 其他原因
提交反馈