CodeFun进阶指南 | 在线预览

·  阅读 76
CodeFun进阶指南 | 在线预览

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

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

在工具中预览

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

微信小程序

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

在线预览

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

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

本地运行

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

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

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

机型适配

在微信开发者工具中进行机型切换,查看不同机型下的适配效果。

\

H5 VUE 代码

假如生成的是H5 VUE 代码,这个章节介绍如何对其进行预览。

本地运行

第一步,准备 Vue 代码的编译环境。

预览 H5 VUE 的代码需要准备 Nodejs 运行环境,如果你知道如何处理 Vue 代码,建议跳过本章节。

  • Nodejs,它是代码编译运行所需要的开发环境,推荐使用 v10 版本。根据你的操作系统选择下载:
    • MacOs
    • Windows(32bit)
    • Windows(64bit)

第二步,打开命令行终端。

Nodeje 安装完成后,调出你电脑的"命令行终端"。以下是调出方法:

  • MacOs 点按程序坞中的“启动台”图标 ,在搜索栏中键入“终端”或"Terminal",然后打开它。

  • Windows * 按下快捷键 win+r * 输入 cmd ,点击确定

下一步是将终端的工作目录移动到代码所在目录。

如何进入代码所在目录呢?

  • MacOs 在finder里打开代码所在的目录,假设这里代码放在demo这个目录中。
    • 在终端里面敲入 cd+空格
    • 然后将文件夹拖到命令行终端,然后按下回车,操作如下图。

  • Windows 操作方式和 Mac 一样,先打开终端,嵌入 cd+空格,然后将文件夹拖进终端回车即可。

这时终端的工作目录已来到代码所在根目录。

第三步,编译代码。

这个步骤的目的是运行起一个本地服务为浏览器访问做准备。

首先,安装 yarn。

  • MacOs 在命令行终端里面输入:
sudo npm i -g yarn
复制代码

若这时提示输入密码,需要输入的是解锁 Mac 时的密码。

  • Windows 在命令行终端里面输入:
npm i -g yarn
复制代码

然后,编译代码和启动预览,在终端里面输入如下命令:

# 位于代码根目录
yarn
npm run serve
复制代码

运行完后,正常情况下终端里面将显示如下内容,表示本地服务已经起来了,服务端口是8080,这个地址可以直接用浏览器进行访问。

 DONE  Compiled successfully in 2871ms                                                       7:31:14 PM




  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.176:8080/


  Note that the development build is not optimized.
  To create a production build, run yarn build.
复制代码

第四步,用浏览访问本地服务。

用浏览器访问如下地址,推荐使用 Chrome。

http://localhost:8080/
复制代码

注意这里的端口是动态分配的,由上一步的结果决定。

在打开的页面用【右键】换出菜单,点击【检查】选项。

现在,H5 页面的效果已经出来了,你也可以尝试查看不同的分辨率的效果。

                                      END
复制代码
分类:
代码人生
标签:
收藏成功!
已添加到「」, 点击更改