Skip to content

Latest commit

 

History

History
301 lines (216 loc) · 20.8 KB

README.md

File metadata and controls

301 lines (216 loc) · 20.8 KB

平台简介

Fair-Online 是面向Flutter 开发者,提供从Flutter 在线开发,到实时编译预览,打包发布、动态下发端侧更新,实现Flutter 线上动态化的一体化云开发平台。它主要包含3部分:

  • 云代码编辑器。提供给开发者进行在线代码编辑。
  • 编译预览/打包发布。让开发者所见及所得。并且支持一键打包发布,实现Flutter线上动态化。
  • 配套生态支持。提供常用的组件库、代码模板,用于提升开发效率,规范代码开发。

目前Fair 云开发平台已在Github 开源: Fair-Online Github

在线体验地址: Fair-Online Platform

工程介绍

  • fair_online 前端工程
  • fair_online_service 后端服务

快速入门

工程创建

输入Fair 云开发平台网址:fair-online.58.com 进入平台首页。

点击开始使用,进入我的工程页面,如下图所示。

点击工程创建,弹出如下Dialog。

输入工程名,选择空工程或者模板工程创建新工程,模板工程中包含13个代码模板。 工程创建成功后,即可进入工程编辑页面,如下图所示。

页面创建

在工程编辑页面,点击左上方的页面创建,弹出页面创建Dialog。

输入页面路径和页面名称,选择空页面或者模板页面创建新页面。 页面创建成功后,可在页面列表切换查看该工程下所有的页面。

代码编辑

基本使用

代码编辑器可以在线编写Flutter、Fair代码,从左侧的页面菜单栏中点击选择需要编辑的页面,如下图所示选中了scrollview示例页面,右侧代码编辑区域会加载当前页面的代码,

代码编辑器支持代码提示,如下图所示,输入context变量后,输入 . 会像IDE一样列出context对象所有的方法调用。

代码编辑器支持对Flutter以及Fair语法的检测,当检测出语法问题时会有类似IDE的代码划线警告,右下角有着具体语法错误分析弹窗,点击可以复制报错信息和跳转官方文档查看更多,底部面板点击hide按钮隐藏语法分析弹窗。

Fair云开发平台还针对Fair一些特殊的语法做了支持,如图就是对build函数中不支持的 if else 逻辑控制语句显示警告。

对于Flutter和Fair的语法错误提示,Fair云开发平台支持代码修复,使用 **[Control+Enter] ** 快捷键即可修复代码问题。如下图所示,点击后会使用Fair内置的语法糖来解决逻辑控制语句的问题。

代码编辑器还支持代码辅助功能,对Widget对象使用 **[Control+Enter] **快捷键会有如图所示的提示选项,根据提示可以快捷的包裹常用控件,方便了使用者高效开发。

常用快捷键

windows快捷键 mac快捷键 动作
alt-enter option+enter 代码提示
ctrl-space command-space 代码补全
ctrl-enter command+enter 运行
shift-ctrl-f shift+command+f 格式化

Flutter 编译预览

开发过程中,可随时点击Run执行Flutter 编译预览,代码编辑阶段为了提升编译速度,快速预览编码效果,采用的是DDC(Dart Development Compiler)编译模式。 这里需要注意只有被@FairPreviewPage()注解修饰的Widget类可以被服务端识别并返回预览结果。 编译成功后,展示在线预览页面,点击开发对应的页面,查看页面效果。

点击模拟器下方的Device Setting,可切换预览设备。

如果编译失败,可在Console窗口查看错误日志。

Fair 编译预览

Fair 编译预览分为编译及预览两个步骤。 点击模拟器上方的Build,即可执行 Fair的编译。 编译成功后,可在左边的Fair DSL列表查看Fair 的编译产物。Fair 编译产物包括JSON 和JS 文件,可切换查看。 如果编译失败,可在下方Console 窗口查看日志信息。

编译成功后,点击模拟器上方的Run,执行Fair 预览。 点击Fair 预览-云开发平台使用,进入下图所示Fair DSL 列表。

点击选择Fair DSL,查看页面效果。

自定义组件

创建与编辑

Fair云开发平台支持自定义组件,左侧面板点击下方添加图标打开自定义组件界面,如图所示列表中有内置的两个组件示例,在这个页面中可以创建新组件、编辑/删除已有的组件

点击右上角添加组件打开组件编辑弹窗,可以在线编辑代码

点击右上角编译预览按钮可以快速预览效果

点击保存即可上传自定义组件

使用

点击左侧面板中的自定义代码按钮,会列出当前的自定义组件列表

点击使用打开对组件详细说明的弹窗,弹窗内容包含名称,简介以及原始代码和FairWidget代码

点击右下角的复制按钮可将FairWidget粘贴到代码编辑器中进行使用

自定义Action

自定义Action可以方便使用者快速的粘贴工具代码以快速开发,具体的创建与编辑操作和自定义组件类似,如图所示是内置的FairNet网络请求Action

使用方法同样也是粘贴到代码编辑器中

手机扫码预览

Fair 云开发平台支持手机扫码实时预览功能,移动端平台相关的功能,如打电话,定位等,可通过扫码在手机上实时预览。 点击工程编辑页面右上角的二维码样式按钮,弹出如下所示Dialog。 Fair 云开发平台提供了 FairPlayground APP,可通过点击如下链接下载安装。安装完成后,打开APP,进入Fair 开发者选项页面,点击扫一扫,扫码Dialog中的二维码,即可预览。

上传补丁

功能开发完成后,可在Fair 云开发平台上将编译产物上传至热更新平台。 点击右上角的更多菜单。

选择上传补丁,弹出如下所示Dialog。如果还没有搭建热更新平台,Fair 团队开源的FairPushy 了解一下~

工程导出

Fair 云开发平台支持将平台上开发的代码导出到本地。 点击右上角的更多菜单,选择工程导出,下载的是该工程代码的压缩包。

问题反馈

平台使用过程中,有任何的问题或者建议,欢迎扫码下方二维码,加入Fair 交流群交流沟通~