imgcook提供更簡(jiǎn)單的圖像處理功能，可以在PS上處理圖片，可以將PS設(shè)計(jì)的圖像導(dǎo)出使用，直接將圖像發(fā)布到imgcook平臺(tái)編輯，從而在開(kāi)發(fā)軟件或者是設(shè)計(jì)UI界面的時(shí)候更加簡(jiǎn)單，imgcook編輯器功能很多，可以為用戶(hù)開(kāi)發(fā)軟件，可以編輯菜單界面，可以?xún)?yōu)化UI，用戶(hù)可以將photo設(shè)計(jì)的元件添加到該平臺(tái)使用，幫助用戶(hù)輕松開(kāi)發(fā)小程序，如果用戶(hù)會(huì)使用這款軟件就直接下載吧！

軟件功能

　　1、imgcook提供更方便的設(shè)計(jì)方案，可以輕松導(dǎo)出PS作品

　　2、軟件可以直接安裝在PS使用，也可以安裝到sketch軟件使用

　　3、支持?jǐn)?shù)據(jù)導(dǎo)出，從PS將設(shè)計(jì)的psd數(shù)據(jù)導(dǎo)出

　　4、支持粘貼功能，當(dāng)導(dǎo)出完畢就可以將圖片代碼粘貼

　　5、提供一個(gè)編輯器，在軟件直接編輯圖像

　　6、支持字段綁定，對(duì)當(dāng)前的psd綁定新的字段

　　7、支持節(jié)點(diǎn)屬性查看，顯示當(dāng)前修改的節(jié)點(diǎn)內(nèi)容

　　8、支持代碼查看，imgcook也提供代碼模板設(shè)計(jì)

軟件特色

　　1、imgcook可以幫助用戶(hù)快速導(dǎo)出psd

　　2、通過(guò)PS設(shè)計(jì)的圖像可以保存為psd

　　3、隨后使用imgcook軟件將圖像導(dǎo)出，從而將其運(yùn)用到開(kāi)發(fā)界面

　　4、讓設(shè)計(jì)師更方便添加UI素材，更方便添加作品

　　5、讓PS與imgcook連接使用，立即獲得開(kāi)發(fā)素材

　　6、可以生成多種類(lèi)型的代碼。讓用戶(hù)在設(shè)計(jì)UI的時(shí)候自動(dòng)添加代碼

　　7、也可以在設(shè)計(jì)H5的時(shí)候生成代碼

安裝方法

　　1、下載以后直接打開(kāi)imgcook.photoshop_1.0.0.exe啟動(dòng)安裝

　　2、點(diǎn)擊 agree同意軟件協(xié)議，隨后軟件自動(dòng)安裝

　　3、顯示軟件的安裝進(jìn)度，等待安裝結(jié)束就可以使用

　　4、提示安裝結(jié)束，點(diǎn)擊finish退出安裝界面

使用方法

　　1、在擴(kuò)展功能找到imgcook軟件，這樣就可以使用了

　　2、用戶(hù)可以到官方網(wǎng)站查看軟件的功能介紹，可以顯示imgcook布局UI界面的教程

　　3、可以直接將設(shè)計(jì)稿添加到自己店鋪使用，立即優(yōu)化店鋪主頁(yè)效果

　　4、顯示畫(huà)板功能，在軟件查看已經(jīng)添加的圖片，方便用戶(hù)部署店鋪

　　5、相關(guān)的參數(shù)直接在軟件查看，也可以對(duì)添加的插件修改

　　6、導(dǎo)出功能，可以在軟件界面將數(shù)據(jù)導(dǎo)出

　　7、提示導(dǎo)出成功，可以點(diǎn)擊下方的按鈕去編輯器粘貼調(diào)整還原效果

　　8、提示數(shù)據(jù)正在處理，等待幾分鐘

　　9、處理完畢就可以在軟件界面查看粘貼的數(shù)據(jù)。顯示全部圖片

　　10、數(shù)據(jù)字段綁定功能，在軟件右邊可以編輯字段信息，可以在軟件編輯代碼信息

　　11、代碼編輯界面如圖所示，如果用戶(hù)會(huì)調(diào)整代碼就自己修改吧

使用說(shuō)明

　　基礎(chǔ)能力

　　查看 DOM 和 StyleSheet

　　在編輯器里，左側(cè)圖層的嵌套結(jié)構(gòu)為 經(jīng)布局算法轉(zhuǎn)化后生成 的 DOM 結(jié)構(gòu)，上面的英文為生成的 className，className可在右側(cè)面板->節(jié)點(diǎn)屬性->樣式名 處修改，每個(gè)節(jié)點(diǎn)的 StyleSheet 也可在右側(cè)面板->節(jié)點(diǎn)屬性->樣式 處查看。

　　修改為超鏈接

　　文本和容器可替換成“超鏈接”類(lèi)型，替換后類(lèi)型為 Link。

　　操作：選中要修改的節(jié)點(diǎn) -> 右側(cè)面板 -> 節(jié)點(diǎn)屬性 -> 數(shù)據(jù) -> 點(diǎn)擊“超鏈接”。

　　修改 className

　　在編輯器里，className可在右側(cè)面板->節(jié)點(diǎn)屬性->樣式名 處修改，修改后記得點(diǎn)擊“保存”。

　　切換代碼模板

　　每個(gè)項(xiàng)目可切換為不同的代碼模板，在項(xiàng)目-> 項(xiàng)目設(shè)置 -> 綁定DSL 中切換即可。

　　每個(gè)模塊也可單獨(dú)設(shè)置不同的代碼模板，在編輯器 -> 代碼 -> 代碼浮層 -> 切換DSL。

　　代碼查看 & 拷貝

編輯器右上角 -> 代碼

　　數(shù)據(jù)綁定

　　1 快速綁定

　　當(dāng)一鍵還原后，可進(jìn)行批量快速綁定。在編輯平臺(tái)->快速設(shè)置->快捷綁定中，可以快速進(jìn)行數(shù)據(jù)綁定。

　　1.1 綁定動(dòng)態(tài)數(shù)據(jù)

　　平臺(tái)默認(rèn)有的會(huì)猜測(cè)一個(gè)字段，比如這里的商品圖片，猜測(cè)成了 data.item_pic 字段，不滿(mǎn)足需要直接改即可。數(shù)據(jù)默認(rèn)是 data 對(duì)象，如需修改可針對(duì)生成后代碼的修改。

　　支持模板拼接，例如: 距離${data.item_distance}m

　　1.2 不需要綁定動(dòng)態(tài)數(shù)據(jù)

　　比如這里的靜態(tài)圖標(biāo)（定位和五角星）

　　如果確定不需要綁定，則點(diǎn)前面的“禁用綁定”圖標(biāo)即可。

　　事件綁定

　　選中節(jié)點(diǎn)添加事件

　　root 節(jié)點(diǎn)，額外有 init 和 destory 事件可添加

　　非 root 節(jié)點(diǎn)，有 onClick、onAppear、onDisapper 事件可添加

　　注意：這里的自定義 handler 函數(shù)在所見(jiàn)所得的編輯器中不會(huì)運(yùn)行，會(huì)出現(xiàn)在生成的代碼中。