-
Coolsite360小程序編輯器能做什么?
? CoolSite360推出小程序編輯器,幫助設(shè)計(jì)師無需編寫wxml以及wxss代碼,通過小程序可視化編輯器就可快速設(shè)計(jì)小程序交互UI。
? 使用小程序編輯器設(shè)計(jì)的頁面,可以方便地在微信及瀏覽器上預(yù)覽,便于前期的原型展示分享。
? 設(shè)計(jì)好的頁面,可以一鍵導(dǎo)出符合小程序標(biāo)準(zhǔn)的代碼,可直接進(jìn)行功能開發(fā)。
我們希望通過研發(fā)可視化設(shè)計(jì)開發(fā)工具,實(shí)現(xiàn)UI層的開發(fā)交由設(shè)計(jì)師進(jìn)行。開發(fā)人員可以更專注業(yè)務(wù)邏輯的開發(fā)。 -
小程序編輯器目前不能做什么?
目前版本專注于前端UI的可視化設(shè)計(jì),還沒有涉及前端業(yè)務(wù)邏輯以及后端數(shù)據(jù)的處理,后續(xù)隨著版本的迭代,會(huì)推出具有一定后端數(shù)據(jù)處理能力的編輯器,在一定范圍內(nèi)可實(shí)現(xiàn)一站交付,但目前還需要導(dǎo)出前端代碼,由開發(fā)人員進(jìn)行后續(xù)的開發(fā)。
-
小程序編輯器在UI設(shè)計(jì)方面主要功能有哪些?
? 小程序編輯器集成了微信官方提供的所有組件,可以通過可視化方式進(jìn)行設(shè)定和屬性配置。
? 支持常用css屬性的可視化設(shè)置,支持rem單位,支持flex布局,同時(shí)支持自定義css代碼,可通過sketch、ps等軟件復(fù)制樣式代碼,滿足全自由度設(shè)計(jì)。
? 我們后續(xù)也會(huì)持續(xù)提供常用的部件模板,比如內(nèi)容列表、網(wǎng)格列表、卡片、導(dǎo)航等,方便用戶進(jìn)行快速設(shè)計(jì)。 -
小程序編輯器除了完成靜態(tài)UI設(shè)計(jì),還能做什么?
? 小程序編輯器還支持基本動(dòng)畫的設(shè)定和控制,比如飛入、飛出、淡入、淡出、放大出現(xiàn)、縮小出現(xiàn)、旋轉(zhuǎn),以及css transform動(dòng)畫...,并可以通過觸發(fā)器進(jìn)行動(dòng)畫控制。
? 支持常用觸發(fā)器進(jìn)行交互控制,比如顯示元素、隱藏元素、播放動(dòng)畫、跳轉(zhuǎn)頁面、動(dòng)態(tài)添加組件class、移除組件class、切換元素狀態(tài)以及結(jié)合微信小程序API開發(fā)的一系列觸發(fā)器,可以實(shí)現(xiàn)無需代碼進(jìn)行一定范圍的UI交互控制。 -
近期的Coolsite360針對(duì)于小程序編輯器的開發(fā)計(jì)劃是什么?
我們會(huì)持續(xù)跟進(jìn)小程序的官方動(dòng)態(tài),近階段會(huì)進(jìn)行復(fù)合組件的開發(fā),以彌補(bǔ)官方小程序基礎(chǔ)組件的不足,后續(xù)也會(huì)逐漸增加canvas的繪圖功能以及針對(duì)于UI微交互的可視化設(shè)置。
-
我沒有基礎(chǔ),應(yīng)該如何著手?
如果要做能直接用于微信小程序開發(fā)的UI前端設(shè)計(jì),除了基本的UI設(shè)計(jì)能力外,還需掌握一定的HTML、CSS基礎(chǔ)知識(shí),以及了解微信小程序的官方文檔,我們準(zhǔn)備了些基礎(chǔ)學(xué)習(xí)路徑,點(diǎn)擊以下鏈接可以訪問。
使用須知
在使用Coolsite360小程序設(shè)計(jì)工具之前,你必須要了解知道的