CodeFun进阶指南 | 在线预览

本期内容，想在这里给大家分享 CodeFun 上线的功能：

• 在线预览，预览的作用是能够看到设计稿转化成代码之后的运行效果，用户根据这个效果进行后续的优化和调整。接下来，我们就一起来看看吧！

在工具中预览

从 Sketch 导入到项目之后，进入某个页面的详情页中便可与进行预览。除了预览之外，这个界面功能十分丰富，在这个界面中你可以可看到页面的层级、元素的样式等信息，也可以设置页面的交互操作，只要和页面的设置相关的功能都会在这个界面中。

微信小程序

假如生成的是微信小程序代码，这个章节介绍如何对其进行预览。

在线预览

工具提供快速部署的能力，让代码以测试版本的形式运行到你的微信中。工具中集成了微信开发者工具的预览功能，使测试版本能自动上传到你的手机上。具体步骤如下：

• 点击界面中的「预览」按钮
• 稍等生成，生成成功后，扫码登陆微信开发者工具，然后代码会自动上传
• 打开微信，准备好后，微信将自动打开测试版本小程序

本地运行

假如你已经把微信小程序的代码下载到本地，通过以下步骤，你可以把代码在本地运行起来：

• 下载微信小程序开发工具，建议使用最新稳定版本。
• 扫码登陆微信开发者工具。
• 在微信开发真工具中导入项目代码，导入时将AppId更换成自己的。

• 上传代码，然后打开手机微信，稍等一下将自动进入预览状态。