云鳳蝶開發(fā)者工具1.0 官方免費(fèi)版

云鳳蝶是螞蟻金服旗下的移動(dòng)建站平臺，致力于幫助螞蟻生態(tài)伙伴，簡單、快速的搭建出屬于自己的精美移動(dòng)站點(diǎn)。在這個(gè)平臺上不僅可通過站點(diǎn)模板來便捷地搭建出各式各樣的站點(diǎn)，還可以使用云鳳蝶提供的強(qiáng)大的開發(fā)能力來開發(fā)定制化的站點(diǎn)模板。這種定制化開發(fā)能力讓開發(fā)者對于目標(biāo)站點(diǎn)的內(nèi)容擁有了很高的可控權(quán)，可以更自由地實(shí)現(xiàn)理想的站點(diǎn)頁面。

開發(fā)基礎(chǔ)

開發(fā)云鳳蝶的站點(diǎn)模板，需要一定的 HTML、CSS、JavaScript 開發(fā)基礎(chǔ)，另外云鳳蝶支持 Nunjucks作為 HTML 模板語言。

在 HTML 模板之中會(huì)包含了一些變量或者表達(dá)式，在被渲染的時(shí)候會(huì)被替換為一些確切的值，同時(shí)也會(huì)包含一些標(biāo)簽定義符來控制模板的邏輯。

在 Nunjucks 語法中，主要有三類標(biāo)簽定義符：

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

{{ ... }} 用于表達(dá)式，最終會(huì)在模板中輸出內(nèi)容，如變量值，運(yùn)行求值函數(shù)等；

用于注釋，不會(huì)在模板中輸出注釋相關(guān)內(nèi)容。

HTML 模板最終的渲染邏輯是在云鳳蝶平臺上執(zhí)行的，開發(fā)者在開發(fā)過程中只需要熟悉使用 Nunjucks 編寫模板即可。

掌握好 Nunjucks 語法是開發(fā)好云鳳蝶站點(diǎn)模板的關(guān)鍵所在。更多關(guān)于 Nunjucks 模板語法的說明，可以參考 Nunjucks 官方文檔，同時(shí)也可以在 這個(gè)在線例子 中來動(dòng)手學(xué)習(xí)一下 Nunjucks 語法，同時(shí)要注意云鳳蝶采用的是 1.3.8 版本的 Nunjucks，所以在開發(fā)中要注意使用到的語法的版本支持情況。

學(xué)完了云鳳蝶的相關(guān)基礎(chǔ)知識介紹之后，接下來讓我們通過《快速上手》章節(jié)來更直觀的熟悉云鳳蝶的開發(fā)吧。

快速上手

云鳳蝶平臺上的完整開發(fā)流程， 主要由下面 7 個(gè)環(huán)節(jié)組成：

熟悉云鳳蝶的整個(gè)運(yùn)作流程，可以更好地開發(fā)出優(yōu)秀的站點(diǎn)模板，同時(shí)也能加深對云鳳蝶站點(diǎn)模板的可配置化，可組件化的理解。

下面將講解流程中每一個(gè)步驟是怎么樣的。

1. 下載開發(fā)者工具

首先，需要下載并安裝云鳳蝶開發(fā)者工具，可點(diǎn)擊云鳳蝶開發(fā)者工具下載頁進(jìn)行下載。

2. 初始化項(xiàng)目

接著安裝并打開云鳳蝶開發(fā)者工具，通過支付寶掃描登錄后，點(diǎn)擊“新建”按鈕并選擇使用空白模板來創(chuàng)建項(xiàng)目，如下圖所示：

然后命名這個(gè)新的站點(diǎn)模板項(xiàng)目：

3. 開發(fā)模板

初始化項(xiàng)目之后，就來到云鳳蝶開發(fā)者工具開發(fā)項(xiàng)目的界面，如下圖所示：

云鳳蝶開發(fā)者工具提供的空白站點(diǎn)模板，已包含了遵循“云鳳蝶編程最佳實(shí)踐”的代碼，關(guān)于源碼解讀與開發(fā)注意事項(xiàng)，可以閱讀《基礎(chǔ)模板代碼剖析》章節(jié)部分。

在快速上手環(huán)節(jié)，可以先快速體驗(yàn)云鳳蝶的整個(gè)運(yùn)作流程，以便了解今后編碼的具體實(shí)際的用途。

4. 提交模板包

完成站點(diǎn)模板的開發(fā)后，接著需要把站點(diǎn)模板打包并提交到云鳳蝶的平臺上，可以按下面兩個(gè)步驟執(zhí)行，即可完成提交：

完成提交后，開發(fā)者工具中將會(huì)顯示云鳳蝶開發(fā)管理頁的鏈接，點(diǎn)擊即可跳轉(zhuǎn)到開發(fā)管理頁進(jìn)行后續(xù)的操作。

5. 試用模板

以上提到的開發(fā)步驟是在開發(fā)者工具中完成的，接下來的步驟將在云鳳蝶網(wǎng)站中進(jìn)行。進(jìn)入模板列表頁之后，使用開發(fā)者工具登錄的支付寶賬號進(jìn)行登錄，便可以看到自己開發(fā)的相應(yīng)模板列表，模板列表頁效果如下圖所示：

模板的列表中有三類狀態(tài)，分別是未上架，等待審批，已上架。

列表的每一項(xiàng)都可以點(diǎn)擊“測試”按鈕來試用模板包，點(diǎn)擊“測試”后會(huì)跳轉(zhuǎn)到以當(dāng)前模板包創(chuàng)建的站點(diǎn)編輯頁中，界面如下圖所示：

在站點(diǎn)編輯頁中可以對站點(diǎn)進(jìn)行相關(guān)的配置修改。

6. 站點(diǎn)測試

完成了站點(diǎn)的最終修改之后，點(diǎn)擊右上角的“編輯完成”按鈕，即可生成相應(yīng)的測試預(yù)覽地址，效果如下圖所示:

可以通過手機(jī)掃描二維碼進(jìn)行測試體驗(yàn)，也可以點(diǎn)擊復(fù)制鏈接，在瀏覽器中進(jìn)行模擬測試。

試用模板包的功能是不允許將站點(diǎn)永久地發(fā)布出去，測試的站點(diǎn) URL 在有效期之后將被回收。

7. 上架模板

完成了模板包試用體驗(yàn)后，模板開發(fā)的整個(gè)鏈路也算是結(jié)束了。接下來可以在站點(diǎn)開發(fā)管理頁中將模板包上架到模板市場，讓用戶購買使用。上架提交選項(xiàng)效果如下：

需要注意的是，如果選擇上架到模板市場，則其他云鳳蝶的用戶都可以在模板市場上購買與使用。