【51CTO.com原創(chuàng)稿件】本期主人公小星星坐標(biāo)廣州，一個(gè)非常有活力的城市。他幾年前的一次彌留，居然從Flash動(dòng)畫開始了他的代碼人生，誤入了IT部落。后來的幾年，他做過VB桌面程序，做過復(fù)雜的C/C++算法，也寫過浩大的Java門戶，還玩過混合編程即AppCan，現(xiàn)在操著一手世界上***大的語言PHP（^_ ^），哈哈，就是醬紫?；仡櫹逻@些時(shí)間的經(jīng)歷，他最深入的算是Java語言Android相關(guān)的東西，可謂他的編程***；小星星涉足時(shí)間最長的則是PHP，畢竟現(xiàn)在系統(tǒng)是用它構(gòu)建的；而最有意思最刻骨銘心的，是使用AppCan的那段時(shí)光！

[[198091]]

小星星·PHP開發(fā)

編程意識(shí)萌芽

小星星***份工作離職后，他跟團(tuán)隊(duì)接外包項(xiàng)目做了一段時(shí)間，其中很大一部分是微信端的應(yīng)用，因?yàn)槭巧?，?duì)HTML5和CSS3相關(guān)的東西特別糾結(jié)，可以說幾個(gè)項(xiàng)目下來人都減了一圈（嗯，本來已經(jīng)是大瘦子了），感覺特別燒腦。不過他熟悉了移動(dòng)App開發(fā)需要考慮各種適配、各種兼容，異步請(qǐng)求是改善交互的很好的方法，交互中數(shù)據(jù)安全該做哪些操作等等，收獲還是挺大的。之后小星星在面試一個(gè)開發(fā)工作的時(shí)候，被問到一個(gè)有關(guān)移動(dòng)端開發(fā)的趨勢(shì)問題，他認(rèn)為“基于H5進(jìn)行跨平臺(tái)App構(gòu)建會(huì)是一個(gè)趨勢(shì)”，那時(shí)候還沒了解到有關(guān)Hybrid App的任何信息（嗯，信息滯后或者說認(rèn)知缺失非?？膳?，不過項(xiàng)目各種折騰下來還是有這種覺悟），他還是對(duì)自己的“預(yù)見”感到贊賞！

App定制組件開發(fā)思路

當(dāng)外包項(xiàng)目做得水深火熱的時(shí)候，負(fù)責(zé)人突然丟過來一個(gè)系統(tǒng)，這是一個(gè)非常“龐大”的系統(tǒng)，至少在那時(shí)他的團(tuán)隊(duì)看來，它，非常地復(fù)雜（到了修改個(gè)菜單欄選項(xiàng)直接花了三天時(shí)間的地步，是的，非?？植溃?！然后，非常地榮幸，接手這項(xiàng)目的重任放到了小星星肩上，結(jié)果是大年三十和大年初一他都接到了催進(jìn)度的電話，2015年的春節(jié)他過得很特別，至此小星星跟那個(gè)系統(tǒng)結(jié)上了仇，復(fù)雜不說，關(guān)鍵本身還超多不能理解和接受的各種Bug。沒想到淚奔的東西還在后面，那個(gè)“可愛”的系統(tǒng)，他接手之后直接做到了現(xiàn)在，沒錯(cuò)，是現(xiàn)在！

系統(tǒng)糾結(jié)歸糾結(jié)，但它畢竟能給小星星的團(tuán)隊(duì)帶來營收，它也需要一個(gè)移動(dòng)端。愁于開發(fā)資源非常稀缺不能走常規(guī)道路，于是他對(duì)混合開發(fā)的平臺(tái)和工具各種物色，最終他的團(tuán)隊(duì)選擇了AppCan。

由于有H5的經(jīng)驗(yàn)，他擔(dān)起了基于AppCan的App構(gòu)建工作。準(zhǔn)備工作是官網(wǎng)文檔各種翻、IDE各種嘗試、官方交流群各種加，反正就這么開干了，那時(shí)候是7月份，廣州正熱，小星星也做得熱火朝天。由于前面花了時(shí)間研究了官方文檔，他在構(gòu)建App的時(shí)候并沒遇到太大的困難，基本都能自己消化。難點(diǎn)在于自己App需要一些定制性特別強(qiáng)的組件，比如滑塊，比如進(jìn)度條，比如圖片裁剪，比如折線圖，這些都是統(tǒng)一的前景和背景，統(tǒng)一的字體和線條風(fēng)格，用現(xiàn)成的是不可能的只有自己造輪。從簡(jiǎn)單的入手，***刀是個(gè)進(jìn)度條，如下：

這個(gè)當(dāng)時(shí)做的思考是分解，將它拆成文本提示、前景、背景以及右邊的狀態(tài)這幾個(gè)部分，每個(gè)部分都用div實(shí)現(xiàn)，并且他還想實(shí)現(xiàn)復(fù)用，需要的時(shí)候new一個(gè)實(shí)例，設(shè)置些參數(shù)就能出來這么個(gè)東西。說干就干，思路簡(jiǎn)單，實(shí)際也很簡(jiǎn)單，確實(shí)是：

1）這是組件目標(biāo)位置：

2）引入自定義css和JS：

3）實(shí)例化：

用法就是醬紫，嗯，還算優(yōu)雅，這里做了樣式的擴(kuò)展入口，***最小值的定義，前景背景的定義。

具體實(shí)現(xiàn)思路是：背景固定寬度和高度，前景與背景同高，靠左跟背景重合對(duì)齊，前景設(shè)置高亮顏色，寬度由進(jìn)度指定，根據(jù)進(jìn)度占比確定前景在背景中的寬度占比，這就實(shí)現(xiàn)了進(jìn)度展示，另外展示文本需要設(shè)置大一點(diǎn)的z-index屬性，在背景上方上下左右居中，最右側(cè)的狀態(tài)原理相同，不過是上下居中靠右放置，附上實(shí)現(xiàn)代碼，點(diǎn)此下載extra目錄（嗯，以文件的方式，代碼太多不貼這里了，另外還有其他幾個(gè)組件，都是基于AppCan3.2版本構(gòu)建的，至于現(xiàn)在的新版本是否適用，小星星就沒驗(yàn)證了）。

技術(shù)圈子找到歸屬感

這是小星星在H5方面的***個(gè)組件封裝，成就感滿滿，好像當(dāng)時(shí)某混合開發(fā)群里有人問到進(jìn)度條組件類似的問題，于是他很樂意地將自己的“研究”分享了出去，能夠幫助他人，這也是自己的價(jià)值體現(xiàn)。分享，也是很開心的事，接下來的時(shí)間里將他封裝的幾個(gè)組件都跟大家進(jìn)行了分享。逐漸地，他在群里成了活躍分子，某天心血來潮，受大家影響（大家都是很萌很可愛的人），他將自己的備注改成了“廣州-小星星”，就是技術(shù)交流群里很多人認(rèn)識(shí)的小星星。

在群里打拼的日子里，他認(rèn)識(shí)了很多碼友，實(shí)話說這是很開心的一個(gè)團(tuán)隊(duì)。在某月的某一天，技術(shù)群里的官方代表邀請(qǐng)他加入管理團(tuán)隊(duì)，理由是他比較活躍，問了具體事項(xiàng)之后他順利入圍，至此，小星星就在技術(shù)交流群扎下了根，更多的是因?yàn)檫@個(gè)團(tuán)隊(duì)，與此同時(shí)收到了一份特別的禮物。

技術(shù)交流群從活力的角度來考慮，這個(gè)團(tuán)隊(duì)確實(shí)可以托付，且不說它背后代表的技術(shù)方向，大家從不同地域不同公司不同行業(yè)匯聚于此，一起討論一起解決問題一起提出改進(jìn)建議，這本就代表著頑強(qiáng)的生命力，它活著，可以說代表的技術(shù)就活著。IT行業(yè)，保有一個(gè)有活力的團(tuán)隊(duì)，這就有堅(jiān)持做大做強(qiáng)的理由和動(dòng)力！

小星星回顧走過的坑，可以用分解、總結(jié)，記錄、分享這四點(diǎn)來歸納。

1、分解。開發(fā)過程中遇到的問題有難有易，在遇到一個(gè)棘手的問題時(shí)需要做的是將其分解，比如一個(gè)復(fù)雜的UI組件可以分解成多個(gè)簡(jiǎn)單的div塊，一個(gè)復(fù)雜的功能可以分解成多個(gè)簡(jiǎn)單的功能，即復(fù)雜化簡(jiǎn)，做到了這點(diǎn)就是自己能力的提升。

2、總結(jié)。而在解決問題的過程當(dāng)中，適時(shí)回過頭來做些總結(jié)，不僅能鞏固自己解決問題的思路，還能找到處理問題時(shí)不妥或者不夠好的方式，從而歸納總結(jié)出更好的處理或者改進(jìn)方式，這也是一個(gè)能力提升的過程。

3、記錄。記錄還有一個(gè)好處，詳細(xì)的有條理的記錄，還是他人處理相同或者類似的問題時(shí)一個(gè)很好的參考依據(jù)，這是分享，從這一角度，如何能夠更好地將自己的東西分享出去而盡可能地減少他人的疑問，這又是一個(gè)功能規(guī)劃和信息整理的一個(gè)提升。

4、分享最重要的，也許你的生活里需要一個(gè)“小星星”，成長的過程當(dāng)中總有不如意，有個(gè)精神支柱，或者說有個(gè)價(jià)值標(biāo)尺，逆境時(shí)不至于讓自己一蹶不振，順境時(shí)不至于得意忘形，這道理大家都懂！

生活會(huì)齊酸甜苦楚才有意義，曾經(jīng)有幾個(gè)月，小星星過得有點(diǎn)困難，與此同時(shí)，他所在的團(tuán)隊(duì)也過得有點(diǎn)困難，正因?yàn)橛屑夹g(shù)群里這些人的存在，他才有精神的支撐走了過來，小星星團(tuán)隊(duì)的領(lǐng)導(dǎo)也因?yàn)樗屯聜兊膱?jiān)持吃定定心丸，帶領(lǐng)團(tuán)隊(duì)走過了困難期。感謝有你們！

小星星是個(gè)愛分享的小星星，自己寫的很好的或者感覺不錯(cuò)的demo，都會(huì)整理打包出來，有需要的盆友可以直接拿去用，這是其一；另一個(gè)，在整理的過程中他還能夠找到那些不太和諧的因素，比如引入的資源文件是否足夠簡(jiǎn)潔，實(shí)例化過程是否足夠方便，參數(shù)是否足夠明確，說明文檔是否足夠直白簡(jiǎn)單。這些都是使用者需要的，也是對(duì)他自己做類似封裝的一個(gè)方向指導(dǎo)，這無形當(dāng)中對(duì)他的思維、編碼技能都是很好的提升。完成一個(gè)項(xiàng)目回過頭來總結(jié)和記錄，是對(duì)自身和他人成長都很有價(jià)值的事情。

如果你也愿意分享你的故事，請(qǐng)加51CTO開發(fā)者QQ交流群 542270018聯(lián)系群主小官，期待你精彩的故事！

【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為51CTO.com】