做前端，不搬磚

大家好，我是若川。
從事前端五年之久，也算見證了前端數(shù)次變革，從到DW（Dreamweaver）到H5C3、從JQuery到MVC框架，無數(shù)前端大佬在為打造前端完整生態(tài)做出努力，由于他們的努力，我們開始重新思考前端的定義。作為一名前端，我們深知完美還原設(shè)計(jì)稿這部分工作簡(jiǎn)單且枯燥繁瑣，這部分工作，我們統(tǒng)稱為“搬磚”，為了能減輕“搬磚”工作量，我們業(yè)內(nèi)人士也做了很多努力，開發(fā)了各ui庫(kù)，但是設(shè)計(jì)稿跟UI庫(kù)的樣式往往大有徑庭，因此還需要我們還是的從根上解決問題，才能最有效的減輕“搬磚”工作量。

所以CodeFun誕生了，做為一名CodeFun的忠實(shí)粉絲，不管是出于對(duì)CodeFun的鼓勵(lì)又或者是基于開發(fā)者的分享精神，我覺得我都有必要把這樣一款變革性的開發(fā)工具推薦給大家。從前端變革的角度來講CodeFun的誕生應(yīng)該是具有里程碑性的意義。JQuery的誕生，讓我們可以更方便的去操縱DOM，React/Vue/Angular等MVC框架的誕生讓我們不再去關(guān)心DOM，而CodeFun的誕生讓我們不再關(guān)心前端視圖代碼，看到這肯定很多同學(xué)要問，CodeFun究竟是個(gè)啥？

如果不想看后續(xù)文章，可以直接掃碼進(jìn)群體驗(yàn)產(chǎn)品，1024程序員節(jié)京東卡抽獎(jiǎng)等你來。另外可以訪問官網(wǎng) https://code.fun 了解。

CodeFun是個(gè)啥？？？

CodeFun是一款 UI 設(shè)計(jì)稿智能生成源代碼的工具，可以將 Sketch、Photoshop 的設(shè)計(jì)稿智能轉(zhuǎn)換為前端源代碼。這是來自CodeFun官方定義，看到這里不少同學(xué)肯定會(huì)想到另外一款工具-藍(lán)湖，如果CodeFun的作用僅僅類似于藍(lán)湖/摹客等工具，那么也不值得我花費(fèi)時(shí)間寫一篇文章來推薦它，更不能將它定義為前端變革性工具。

CodeFun的特點(diǎn)

相比于其他工具，個(gè)人對(duì)于CodeFun的使用感受就是：智能、強(qiáng)大

如何智能？

CodeFun所生成的代碼是可以用智能來形容，因?yàn)闊o論從可擴(kuò)展性還是可維護(hù)性亦或者合理性都是無可挑剔的

• 可維護(hù)性與擴(kuò)展性

設(shè)計(jì)圖

像這樣的列表區(qū)域，我們平時(shí)都喜歡用數(shù)組循環(huán)渲染DOM。來看一下CodeFun是怎么生成的

生成代碼

//?列表數(shù)組const?data?=?{?listnLG7eFN3:?[null,?null,?null,?null,?null,?null,?null,?null,?null,?null,?null]?};return?(<div?className={`flex-col?${styles['list']}`}>//?循環(huán)渲染{data.listnLG7eFN3.map((item,?i)?=>?(<div?key={'item'?+?i}><div?className={`${styles['list-item']}?justify-between`}><div?className={`${styles['left-group']}?flex-row`}><div?className={`${styles['left-section']}`}></div><span>二級(jí)導(dǎo)航標(biāo)題</span></div><div?className={`${styles['right-group']}?flex-row`}><span>更多</span><imgsrc="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60e57f7ffaa6670013254a0b/6157ff3d460a150011ec3267/16331624898575077322.png"className={`${styles['icon_1']}`}/></div></div></div>))}</div>); }

怎么樣？是不是狠智能啊，直接CV大法即可。

• 合理性

設(shè)計(jì)圖

看到上面的排列布局，很多同學(xué)的寫法是浮動(dòng)布局，但是都2021了，怎么能不用flex布局呢，flex布局作為前端神器，作用想必不用我多說了吧

.equal-division-item?{flex:?1?1?110px;?//?不管瀏覽器如何伸縮，圖片依舊保持三等分 }

作為一款工具，盡然能貼心的用flex布局，這還是工具嗎？這簡(jiǎn)直就是工具人啊！！

如何強(qiáng)大？

上面僅僅為大家展示了CodeFun所生成的視圖代碼，是不是已經(jīng)被CodeFun圈粉了呢？別急，還有更加人性化的騷操作！！！

• 交互行為

設(shè)計(jì)圖

上面我們展示生成了頁面列表的視圖代碼，心急的同學(xué)肯定在想，還有很多交互代碼，還不是得自己寫嗎？NO！NO！NO！CodeFun這個(gè)“工具人”已經(jīng)想到了這一點(diǎn)，往下看！

經(jīng)過一些簡(jiǎn)單的操作，我們就可以直接將頁面上的某些元素綁定跳轉(zhuǎn)事件，是不是狠nice！

生成代碼

//?竟然用了useHistory import?{?useHistory?}?from?'react-router-dom';export?default?function?Erjiyemian()?{const?history?=?useHistory(); //?跳轉(zhuǎn)事件都幫我生成了const?view_17OnClick?=?()?=>?{history.push('/index');};return?(//?點(diǎn)擊事件已經(jīng)綁好。。。。<div?onClick={view_17OnClick}?className={`${styles['list-item']}?flex-col`}>//?這里的代碼已經(jīng)被我干掉了，不為別的，就為你閱讀方便</div>); }

看到這，是不是某些同學(xué)還學(xué)到點(diǎn)新知識(shí)-useHistory，不會(huì)吧，不會(huì)吧，都2021了還有同學(xué)不會(huì)hook寫法嗎？？？一個(gè)“工具人”都會(huì)啊，實(shí)在汗顏吶。。。。

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

跳轉(zhuǎn)事件的綁定是不是把某些同學(xué)下巴驚掉了呢？先收一收下巴，來看一下這個(gè)“工具人”另一個(gè)騷操作--數(shù)據(jù)綁定。不知道細(xì)心的同學(xué)有沒有發(fā)現(xiàn)，上面CodeFun為我們生成的代碼，雖然進(jìn)行了數(shù)組渲染，但是數(shù)組里卻都是null，在實(shí)際使用場(chǎng)景中我們依舊需要數(shù)組里的數(shù)組，像這樣

//?codeFun生成const?data?=??[null,null,null,null,null];//?手動(dòng)修改之后const?data?=?[{title:""},{title:""},{title:""},{title:""},{title:""}]

其實(shí)大可不必，“工具人”這個(gè)稱號(hào)可不是蓋的，看操作！！！

經(jīng)過一點(diǎn)簡(jiǎn)單的配置，我們就可以得到以下代碼，根本不需要做二次修改的啦🤩

const?data?=?{?title:?'傳騰訊音樂遭中國(guó)反壟斷機(jī)構(gòu)調(diào)查；茶顏\n悅色回應(yīng)阿里入股；Costco 登陸上海'?};

• 資源路徑

生成帶有img標(biāo)簽代碼后，很多同學(xué)會(huì)覺得修改一下圖片路徑也很正常，畢竟是個(gè)工具嗎，要求不能太高，可是據(jù)我對(duì)CodeFun的了解，它應(yīng)該舍不得讓我們受累去做這樣的事情，果然發(fā)現(xiàn)了動(dòng)態(tài)配置資源地址的方式

通過配置資源地址，我們可以輕松生成含有對(duì)應(yīng)路徑的img標(biāo)簽

生成代碼

//?云路徑<imgsrc="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60e57f7ffaa6670013254a0b/6157ff3d460a150011ec3267/16331624930749770689.png"className={`${styles['equal-division-item']}`} />//?自定義路徑<imgsrc="/public/image/remote/2da259e8200dfcac7b79c4805a0a585f.png"className={`${styles['equal-division-item']}`}/>

• 像數(shù)單位

做h5應(yīng)用的同學(xué)應(yīng)該對(duì)于這rem是比較熟悉的，但是每次用rem布局都得換算，對(duì)于CodeFun來說，小case啦

選擇像數(shù)單位為rem，直接幫你生成rem單位的css代碼，就問你絲不絲滑。。。

生成代碼

//?px?單位 .equal-division-item?{flex:?1?1?110px;width:?110px;height:?74px; } //?rem?單位?? .equal-division-item?{flex:?1?1?6.88rem;width:?6.88rem;height:?4.63rem; }

高光時(shí)刻

看到這里有的同學(xué)肯定會(huì)覺得這些案例也忒簡(jiǎn)單了，實(shí)際工作中可比這復(fù)雜多了，CodeFun能解決嗎？接下來帶你見證CodeFun的高光時(shí)刻！！！

案例一

最常見的商城首頁，如果自己開發(fā)你需要用多久呢？使用CodeFun 依舊23秒 (實(shí)際使用時(shí)間取決于你CV大法的速度) 搞定

效果圖

案例二

像這樣有明顯層級(jí)感的頁面，CodeFun對(duì)于層級(jí)以及陰影的處理依舊是滿分操作

效果圖

案例三

卡片類型的頁面，CodeFun也毫不遜色！！

效果圖

黑科技來啦！！！

是不是看完高光時(shí)刻，有些同學(xué)是不是覺得還是不過癮呢，額。。。時(shí)間關(guān)系呢，還有一些功能就不一一介紹了哈（其實(shí)比較懶），不過呢，我還可以給大家推薦一個(gè)我常用的黑科技-小程序預(yù)覽功能，之所以能探索到這個(gè)黑科技，那是因?yàn)槲夷莻€(gè)比較N（S）B的老板，非得看到實(shí)際效果然后再提出設(shè)計(jì)圖的修改意見（MDZZ），不過還好，CodeFun包容了我老板的這個(gè)機(jī)智（智障）行為，一起來看看吧。

• 操作步驟一

選擇右上角預(yù)覽功能

• 操作步驟二

選擇微信小程序，點(diǎn)擊下一步

• 操作步驟三

掃描上方二維碼 即可進(jìn)行小程序預(yù)覽，怎么樣？四不四很贊吶！！！

END

以上只是關(guān)于CodeFun的部分功能，是不是覺得CodeFun是一款前端開發(fā)神器呢，其實(shí)關(guān)于CodeFun的其他功能還沒來得及使用，不過僅僅是上述功能已經(jīng)讓我實(shí)現(xiàn)了“摸魚自由”，看到這你是不是也想盡快體驗(yàn)一把23秒寫一個(gè)頁面呢？來，這是鏈接，別客氣：https://ide.code.fun。最后做為一名CodeFun忠實(shí)粉絲，衷心希望CodeFun團(tuán)隊(duì)能為CodeFun賦予更多能力。

PS：CodeFun現(xiàn)已支持上傳PSD設(shè)計(jì)稿，別問我怎么知道的，掃碼進(jìn)入下方群聊，不僅能收到最新消息，還可以體驗(yàn)內(nèi)測(cè)功能～也可以點(diǎn)擊閱讀原文訪問官網(wǎng)https://了解。

總結(jié)

以上是生活随笔為你收集整理的效率神器！UI 稿智能转换成前端代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。