雲鳳蝶開發者工具1.0 官方免費版（bǎn）手遊最新版本

開發基礎

開發雲鳳蝶的站點模板，需要一定的HTML、CSS、JavaScript開發基礎，另外雲鳳蝶支持 Nunjucks作為 HTML模板語言。足球大小球（qiú）

在HTML模板之中會包（bāo）含了一（yī）些（xiē）變量或者表達式，在被渲染的時候（hòu）會（huì）被替換為一些確（què）切的值，同（tóng）時也會包含一些標（biāo）簽定義（yì）符來控製模板的邏（luó）輯。

在Nunjucks語法中，主要有三類（lèi）標簽定義符：

{%...%}用於聲明語句，如extends模板繼承、if、for語句等；

{{...}}用於表達式，最終會在模板中輸出內容，如變量值，運行求值函數等；

用於注釋，不（bú）會（huì）在模板中輸出注釋相關內容。

HTML模（mó）板最終的渲染邏輯是在（zài）雲鳳蝶平台上執行的，開發者在開發過程中隻需要熟悉使用Nunjucks編寫模板即可。

掌握好Nunjucks語法是開發好雲鳳蝶站點（diǎn）模（mó）板的關鍵（jiàn）所在。更多關於Nunjucks模板語法的說明，可以參（cān）考 Nunjucks官方文檔，同時也可以在 這個在線例子 中來動手學習（xí）一下Nunjucks語法，同時要注意雲（yún）鳳蝶采用的是1.3.8版本的Nunjucks，所以在開發中要注意（yì）使用到的語法的版本支持情況。

學完了雲鳳（fèng）蝶（dié）的相關基礎知識（shí）介紹（shào）之後，接下來（lái）讓www.17c.com通過《快速上手》章節（jiē）來更直觀的（de）熟悉雲鳳蝶的開發吧。

快速上手

雲鳳蝶平台上（shàng）的完整開發流程，主要由下麵7個（gè）環節組成：

熟悉雲鳳蝶的整（zhěng）個運作流程，可以更好地開發出（chū）優秀的站點模板，同時也能加深對雲鳳蝶站點模板的可（kě）配置化，可（kě）組件化的理解。

下麵（miàn）將講解流程中每一（yī）個步驟是怎麽（me）樣的。

1.下載開發者工（gōng）具

首先，需（xū）要下載並安（ān）裝雲（yún）鳳蝶開發者工具，可（kě）點擊雲鳳蝶開發者工具下（xià）載頁進行下載。

2.初始化項目

接著安裝並（bìng）打開雲（yún）鳳蝶開（kāi）發者工具，通過支付寶掃描登錄後，點擊“新建”按鈕並選擇使用空白模板來創建項目，如下圖所示：

然後命名這個新的站點（diǎn）模板項目：

3.開發模板

初始化項目之後，就來到雲鳳蝶開發（fā）者工具開發項目的界麵，如下圖所示：

雲鳳蝶開（kāi）發者工具提（tí）供的空白站點模板（bǎn），已包含了遵循“雲鳳蝶編程（chéng）最佳實踐”的代碼，關於源碼解讀與開發注意事項，可以閱讀《基礎模板代碼剖析（xī）》章節部分。

在快速上手環（huán）節，可以先快速體驗雲鳳蝶的整個運作流程，以（yǐ）便了解今後編碼的具體實際的用途。

4.提交模板包

完成站（zhàn）點模板的開發後，接（jiē）著需要把站點模板打包並提交到雲鳳蝶的平台上，可以按下麵（miàn）兩個（gè）步驟執行（háng），即可完成提交：

完成提交後，開發者工具（jù）中將會顯（xiǎn）示雲（yún）鳳蝶開發管（guǎn）理頁的鏈接，點擊即（jí）可跳轉到開發管理頁進行後續的操作。

5.試（shì）用模板

以上提到的開發步（bù）驟（zhòu）是在開發者工具中完成的，接下來的步（bù）驟將在雲鳳蝶網站中進行。進入模板列表頁之後，使用（yòng）開發者工具登（dēng）錄的支（zhī）付寶賬號（hào）進（jìn）行登（dēng）錄，便可以看到自己開發的相應模板列表，模板列表頁效果如下圖所示（shì）：

模板的列表中有三類狀態，分別是（shì）未上架，等待審批，已上架。

列表（biǎo）的每一項都可（kě）以點擊“測試”按鈕來試用模（mó）板包，點擊“測試”後會跳轉到以當前模板包創建（jiàn）的（de）站點編輯頁中，界麵如下圖所示：

在站點編輯頁中可以對站（zhàn）點進行（háng）相關的（de）配置修改。

6.站點測試

完成（chéng）了站點的最終修改之後，點擊右（yòu）上角的“編輯完成”按鈕，即可生成相應的測試預覽地址，效果如（rú）下圖所示:

可以通過手機掃描二維碼（mǎ）進行（háng）測試體驗，也可以點擊複製鏈接，在（zài）瀏覽器（qì）中進行模擬測試。

試用模板包的功能是不允許將站點永久（jiǔ）地發布出去，測試的站點URL在有效期之後將被回收。

7.上架（jià）模板（bǎn）

完成了模板包試用體驗後（hòu），模板開發的整個鏈路也算是結束了。接下來可以在（zài）站（zhàn）點開發管理頁中將模板包上架到模板市場，讓用戶購買使用。上架（jià）提交選項效果如下：

需要注意的是，如果選擇上架到模板（bǎn）市（shì）場，則其他雲鳳蝶（dié）的用戶（hù）都可以在模（mó）板市場上購（gòu）買（mǎi）與使用。

雲鳳蝶是螞蟻金服旗下的移動建站平台，致力於幫（bāng）助螞蟻生態夥伴，簡單、快速（sù）的搭建出屬於自己的精美移動站點。在（zài）這（zhè）個平台（tái）上不僅可通過站點模板來便捷地搭（dā）建出各式各樣的站點，還可以使用雲鳳蝶提供的強大的開發能力來開發定製化的站點模板。這種定製化開發能（néng）力讓開發者對（duì）於目標站點的（de）內容擁有了很高的可控權，可以（yǐ）更（gèng）自由地實現理想（xiǎng）的站點頁麵。