支付寶小程序 可視化輔助編程（Beta）

適用于小程序開發(fā)者工具 1.0 及以上版本，目前只支持支付寶和淘寶開發(fā)環(huán)境

介紹

小程序開發(fā)者工具引入了設(shè)計(jì)模式，提供了可視化設(shè)計(jì)面板，讓開發(fā)者可以通過拖拽的方式快速進(jìn)行界面布局，同時(shí)支持代碼和設(shè)計(jì)布局進(jìn)行雙向?qū)崟r(shí)同步，使得小程序開發(fā)更加迅捷、簡單和靈活。我們稱之為可視化輔助編程，因?yàn)槲覀兊哪繕?biāo)不是取代編碼本身，而是減少非必要的和重復(fù)的手工編碼工作。可視化設(shè)計(jì)面板支持支付寶小程序所有的基礎(chǔ)組件、擴(kuò)展組件和自定義組件，供開發(fā)者靈活選擇與使用。

使用流程

進(jìn)入設(shè)計(jì)模式

點(diǎn)擊小程序開發(fā)者工具右上方按鈕，從編碼模式（IDE 的默認(rèn)模式）進(jìn)入設(shè)計(jì)模式：

說明：在設(shè)計(jì)模式中，模擬器默認(rèn)關(guān)閉，開發(fā)者可以隨時(shí)點(diǎn)擊模擬器頂部按鈕喚起模擬器，模擬器將以獨(dú)立窗口彈出。

開發(fā)者可以隨時(shí)切換回編碼模式

選擇小程序頁面

開發(fā)者如果打開小程序頁面里面 axml, css, js, json 里面的任何一個(gè)文件，畫布會自動(dòng)定位到該頁面。

注意：如果沒有選擇頁面，默認(rèn)定位到小程序第一個(gè)頁面；畫布也支持自定義組件頁面的可視化設(shè)計(jì)。

添加和編輯組件

開發(fā)者可以直接從組件面板拖拽到畫布或者組件樹，然后點(diǎn)擊組件，在右邊的設(shè)置TAB里面設(shè)置組件的屬性、樣式、事件和查看組件幫助文檔。

注意：首次添加擴(kuò)展組件時(shí)，因?yàn)闀詣?dòng)從網(wǎng)絡(luò)下載并安裝 mini-ali-ui NPM 包，所以需要確保網(wǎng)絡(luò)處于連接狀態(tài)，如果安裝失敗，需要到 NPM 管理界面手工安裝 mini-ali-ui NPM 包。

添加自定義組件

開發(fā)者可以直接拖拽自定義組件到畫布中（點(diǎn)擊這里進(jìn)一步了解 自定義組件）。

注意：不要點(diǎn)擊打開自定義組件里面的文件，否則畫布自動(dòng)切換到自定義組件頁面。

喚起模擬器查看運(yùn)行時(shí)效果

畫布只能在設(shè)計(jì)時(shí)渲染頁面的靜態(tài)結(jié)構(gòu)和行為，并不能完全展示頁面的動(dòng)態(tài)行為，需要運(yùn)行模擬器查看運(yùn)行時(shí)效果。開發(fā)可以點(diǎn)擊運(yùn)行模擬器按鈕喚起模擬器。

注意：需要保存文件以在模擬器中生效。

相關(guān)信息

這里有 基礎(chǔ)組件 和 擴(kuò)展組件 的詳細(xì)文檔，請點(diǎn)擊進(jìn)一步了解。

問題反饋

如果您在使用過程中有任何問題和反饋，請掃碼進(jìn)入釘釘群獲得快捷支持: