官網(wǎng)原文：https://www.fusetools.com/learn/guides/tutorial
安裝設(shè)置
請(qǐng)參見(jiàn)安裝指南頁(yè)面。
創(chuàng)建一個(gè)新項(xiàng)目
使用命令行工具輸入如下命令新建一個(gè)項(xiàng)目
fuse create app <projectname> [optional path]
如忽略路徑倒谷，缺省在當(dāng)前目錄新建項(xiàng)目治泥。
你也可以在Fuse控制臺(tái)上點(diǎn)擊“New Project”來(lái)新建一個(gè)項(xiàng)目先煎。
使用UX文件
一個(gè)剛剛新建的Fuse項(xiàng)目應(yīng)該包含了唯一的一個(gè).ux文件裸燎，缺省名叫MainView.ux男公。
在命令行的項(xiàng)目目錄中鍵入fuse preview可以預(yù)覽該文件存淫，或者在控制臺(tái)上點(diǎn)選Preview也行耘斩。
MainView.ux的預(yù)覽圖應(yīng)該看起來(lái)是這樣(老版本）：
打開(kāi)文件預(yù)覽后，F(xiàn)use會(huì)監(jiān)聽(tīng)任何UX和JavaScript的改動(dòng)并即刻更新預(yù)覽桅咆，更酷的是你可以在你的手機(jī)上獲得同樣的實(shí)時(shí)預(yù)覽效果括授。
首個(gè)App
是時(shí)候打開(kāi).ux文件看看里面的標(biāo)記了，代碼編輯器推薦使用Sublime Text 3并安裝上Fuse插件岩饼。
MainView.ux文件的基本內(nèi)容如下所示：
<App Theme="Basic">
</App>
試著加點(diǎn)UI元素：
<App Theme="Basic" Background="#eeeeeeff">
<DockPanel>
<StatusBarBackground Dock="Top" />
<ScrollView ClipToBounds="true">
<StackPanel>
<Slider />
<Button Text="Button" />
<Switch Alignment="Left" />
</StackPanel>
</ScrollView>
</DockPanel>
</App>
理解標(biāo)記
UX文件中的每一個(gè)XML元素都表示了一個(gè)Uno對(duì)象荚虚。元素的名字就是類名。
MainView.ux現(xiàn)有的標(biāo)記包括:
App- App類是你的應(yīng)用的入口點(diǎn)籍茧， 而且只能有一個(gè)App版述。Theme主題詳細(xì)列舉了App用到的缺省字體、顏色寞冯、控制外表等渴析。ClearColor指定背景色晚伙。DockPanel- 用來(lái)布局（layout），它可以在上下左右定位各類子元素俭茧，隨后一個(gè)子元素缺省會(huì)填充最后的空間咆疗。StatusBarBackground- 給狀態(tài)欄的保留空間，以防狀態(tài)欄為透明母债。它可以在iOS和Android里控制狀態(tài)欄的背景午磁。Fuse中還沒(méi)有狀態(tài)欄，但你可以在手機(jī)上查看效果毡们。ScrollView- 用于操控滾動(dòng)視圖迅皇，缺省方向是垂直滾動(dòng)。StackPanel- 用來(lái)布局（layout）衙熔，它可以將若干子元素按水平或垂直方向排列登颓，缺省是按垂直方向，如上面的例子青责。Slider- 讓用戶在給定范圍中選一個(gè)值的滑動(dòng)控制器Button- 鼠標(biāo)單擊或觸摸點(diǎn)擊的控制器Switch- 可以切換開(kāi)與關(guān)的控制器
所有可用的標(biāo)簽都是類挺据，你可以在Fuse API文檔里找到一個(gè)完整的可用標(biāo)記清單。
關(guān)于視覺(jué)感受
示例中的Slider脖隶、Button和Switch都是通過(guò)Theme主題來(lái)設(shè)置視覺(jué)效果的扁耐，該例中應(yīng)用了Basic主題，Fuse.BasicTheme是基于谷歌的Material Design設(shè)計(jì)并使用UX標(biāo)記來(lái)定義的产阱。Basic主題在所有平臺(tái)都能保持同樣的視覺(jué)效果婉称，實(shí)為開(kāi)發(fā)跨平臺(tái)應(yīng)用開(kāi)始時(shí)的方便之選。
使用樣式（Styling）可以輕松修改外表构蹬。如果要全部自定義App中所有字體王暗、顏色、動(dòng)畫和控制這些設(shè)置庄敛，推薦創(chuàng)建自己的主題俗壹。
邏輯與腳本
Fuse使用JavaScript來(lái)給App添加邏輯。UX標(biāo)記與腳本的組合藻烤，給你實(shí)施App時(shí)所有需要的功能绷雏，從視覺(jué)設(shè)計(jì)到數(shù)據(jù)模型、邏輯和后臺(tái)集成怖亭。
在首個(gè)示例中涎显，我們來(lái)簡(jiǎn)單創(chuàng)建一個(gè)計(jì)數(shù)器，數(shù)字隨按鈕被點(diǎn)擊的次數(shù)而增長(zhǎng)兴猩。
首先在DockPanel標(biāo)記中添加如下JavaScript字段：
<JavaScript>
var Observable = require('FuseJS/Observable');
var buttontext = Observable('Button');
var clickcount = 0;
function click() {
buttontext.value = 'Clicks: ' + ++clickcount;
}
module.exports = {
buttontext : buttontext,
click : click
}
</JavaScript>
然后將點(diǎn)擊處理器和buttontext變量綁定到已有的Button標(biāo)記中期吓，如下所示：
<Button Text="{buttontext}" Clicked="{click}"/>
保存已修改的MainView.ux文件的同時(shí)，預(yù)覽窗會(huì)自動(dòng)刷新倾芝，so讨勤，開(kāi)始愉快的點(diǎn)擊按鈕吧箭跳！
上述腳本和標(biāo)記的作用是，給按鈕上的文字顯示創(chuàng)建了一個(gè)數(shù)據(jù)綁定悬襟，當(dāng)click()函數(shù)被調(diào)用時(shí)衅码，buttontext就會(huì)被改變，按鈕上的文字段就會(huì)隨之更新脊岳。
更多關(guān)于腳本編寫的信息，請(qǐng)參見(jiàn)FuseJS文檔和范例頁(yè)垛玻。
Uno
當(dāng)更多底層任務(wù)需要完全訪問(wèn)原生安卓或iOS編程接口時(shí)割捅，或者當(dāng)需要?jiǎng)?chuàng)建全新的UI組件時(shí)，你可以使用Uno. Uno是一個(gè)輕量的C#方言帚桩，它可以編譯成原生的安卓和iOS代碼亿驾，這使之成為Fuse的基石。
輸出App
現(xiàn)在你的App至少已有了一個(gè)功能账嚎，是時(shí)候輸出到安卓或iOS上了莫瞬。
使用命令行工具，你可以這樣：
fuse build --target=<ios or Android> --run
更多信息參見(jiàn)“預(yù)覽與輸出”頁(yè)面郭蕉。
很簡(jiǎn)單疼邀，是不是，下一步做什么召锈？
熟悉上述基礎(chǔ)內(nèi)容后旁振，你可以試著到這里消化那些范例了。
如果你覺(jué)得JavaScript不夠用涨岁，可以試試Uno拐袜。
有任何問(wèn)題可以到官網(wǎng)論壇發(fā)帖。
