Skip to main content

环境准备

开始使用 CodeFun 前,需要先准备好如下环境:

  1. CodeFun 账号,请点此 注册
  2. 安装 Chrome 浏览器
  3. 安装设计软件 Sketch 或者 Photoshop/XD
  4. 安装 Sketch / Photoshop 插件,登陆 CodeFun 后即可下载
  5. 安装小程序开发者工具或者 vscode 等 IDE,用于预览 CodeFun 生成的代码
  6. 准备一份移动应用页面的设计稿

安装 Sketch

  1. Sketch 官方下载地址
  2. 建议采用 Sketch 60.0 以上版本

安装 Sketch 插件

在官方下载页面下载sketch插件。



下载然后解压,双击进行安装。

在安装插件之前,请确保系统中已经装好 Sketch 。由于 Sketch 只支持 MacOs,所以插件端需要在 MacOs 中操作。 使用的 Sketch 的版本建议在 60.0 以上,否则插件可能无法正常工作。



接着,打开 Sketch,插件菜单中出现 CodeFun 选项,安装完成。

更新 Sketch 插件

如果已经安装过 Sketch 插件,安装新版本时将出现如下提示框,选择"替换"或"Replace"选项。



覆盖后重启 Sketch,然后查看插件的【关于】页面,检查版本是否已经更新。


安装 Photoshop 插件

在官方下载页面下载Photoshop插件。



下载然后解压,双击进行安装。

安装完成后重启Photoshop,点击菜单栏->窗口->扩展->CodeFun


安装小程序开发工具

如果预览的是微信小程序代码,需要下载微信官方的开发工具:

如果预览的是 H5 VUE 代码,需要先安装 Nodejs 开发环境,建议采用 v10 以上版本。 根据你的操作系统下载对应版本的 Node