官网原文:Fuse
输出
预览时,Fuse会在手持设备上创建一个壳(shell)程序,与在运行在桌面系统的Fuse后台程序相连,从而快速显示你对项目做的所有更改。但是,如果你去参加一个会议,或者给客户去秀秀,手持设备要断开与开发环境的连接时,你就需要将项目输出到你要运行的设备上。
输出到iOS
首先,你需要有一台运行OS X系统并安装了Xcode的Mac,其次,你还要有一个苹果开发者账号,都齐了,就在项目目录里键入下面的命令:
fuse build --target=ios --run
该命令会在Xcode中打开建成的项目,在可用输出目标的下拉菜单里选择你的设备型号,然后点击“运行”按钮,App就会部署并运行在你的设备上了。
输出到安卓
首先确定Android SDK/NDK都安装好了(在安卓上预览也需要安装这些,如没有,在命令行输入:fuse install android
),然后在命令行的项目目录中键入:
fuse build --target=Andoid --run
你的项目就已部署在与系统相连的安卓设备上了。
UX标记
Fuse主要被用来做这么两类事儿:
- 一类是用来创建App或者原型,主要是编写跨平台的JavaScript逻辑,
- 另外就是为原生App创建组件、UI视图和设计
这两类事儿都是通过UX标记来进行主体表述的。
UX标记实际上是基于XML的文件格式,有点XML经验的用户都能轻松上手。详细的功能、深度的解读,请参考UX标记文档。
用App标签新建应用
单独创建应用或原型,使用<app>
标签:
<App Background="#436EEE">
<Text>Hello, world!</Text>
</App>
在<App>
标签内,可以嵌入任何Node
、Behavior
或Theme
这些类型的标签。上面的例子简单的用默认的字体显示了一段文字。
App
标签自身负责引导整个App,并处理应用程序的生命周期和主题事务。
使用Background
属性设置App根视图的背景色。
UX 标签
UX文档都是由若干XML标签组成,每个可用的UX标签都相当于一个用Uno编码的类,每个标签还对应一个或多个runtime对象。
这些可用的标签(类)可分为如下类别:
-
App
类代表一个应用的根(the root),有也只能有一个节点(Node) - 相当多的
Node
类型,主要都是些UI元素 -
Behavior
类的标签用来修改节点,主要有如下分类:- 手势
- 触发器
- 脚本
- 视觉特效,应用于各元素
- 样式(Styling)使各组件保持统一的视觉表现,避免大量重复的数据
主题
App
提供一个主题设置,Theme定义了各标准组件的外观,如下列所示:
<App Theme="..name of theme..">
如不指定,App
会默认一个缺省设定叫做GraphicsTheme
。
原生主题(NativeTheme)
当使用NativeTheme
时, Fuse会应用目标平台的原生控制,如下所示:
<App Theme="Native">
<StackPanel>
<Button />
<Switch />
<Slider />
</StackPanel>
</App>
此例中,所有显示的控制器都采用iOS和安卓的原生样式,而桌面预览中并不会出现。
如果你既想使用Native原生控制,又想使用桌面预览,那可以用
NativeWithFallback
主题,这样就会在iOS和安卓上用原生控制,而在桌面预览会退用Basic
主题。
图片主题(GraphicsTheme)
GraphicsTheme
是App的缺省主题,它能让你的App在所有平台上都保持一致的外观,除了这些:
- 状态栏在不同平台上会表现不同
-
TextInput
- 这是个高层级控件,由于依赖原生平台的控制,这里缺省是不会被渲染的。所以要么你自定义它的样式或者换用BasicTheme
。
使用GrapicsTheme
主题的好处是:
- 通过Fuse的实时预览窗,你可以在PC或Mac上预览你的App,用户体验会比使用iOS和安卓模拟器要好很多。
- 在全平台上,你的设计和动画效果,看起来、用起来均保持一致。
因为GraphicsTheme
是缺省值,所以无需特意写上,但如果实在需要,那就看这儿:
<App Theme="Graphics">
或者这样:
<App>
<GraphicsTheme />
</App>
创建自己的GraphicsTheme
扩展定制GraphicsTheme
也是可行的,比如要给Slider
滑动条和Button
按钮定义特别的外观。
自定义GraphicsTheme
的方式是,把它当成一个基础类来使用, 象这样:
<GraphicsTheme ux:Class="MyGraphicsTheme">
<Button>
<!-- how a button looks goes here -->
</Button>
</GraphicsTheme>
这样的话,在App标签里要这么写:
<App>
<MyGraphicsTheme />
</App>
也可以给它创建一个全局别名,像这样:
<MyGraphicsTheme ux:Global="MyGraphics" />
那样的话,在App标签里要这么写:
<App Theme="MyGraphics">
...
</App>
基本主题(BasicTheme)
这个BasicTheme
主题实际上就是以GraphicsTheme
为基础,加上一些缺省的Fuse页面,并且在设计上采用了谷歌的material design
设计理念。
如果你设计UI时需要一个起点,该主题会帮到你并在全平台上保持一致的外观。
<App Theme="Basic">
网友评论