一、寫(xiě)在前面

2017年，個(gè)人最大的收獲，是第一次完成了這一款A(yù)PP的開(kāi)發(fā)并順利上架，同時(shí)獲得了還算可觀的收益。

這是我前公司的項(xiàng)目，公司的主營(yíng)業(yè)務(wù)是旅游，并不是什么科技公司，我之前一直在公司任職技術(shù)中心負(fù)責(zé)人，負(fù)責(zé)開(kāi)發(fā)企業(yè)相關(guān)的應(yīng)用系統(tǒng)和網(wǎng)站開(kāi)發(fā)。

二、拿到項(xiàng)目外包，簽訂協(xié)議

早在2016年底，老板就找我談，準(zhǔn)備搞個(gè)旅游類(lèi)的APP，主打重慶地區(qū)的旅游周邊服務(wù)，我當(dāng)時(shí)與他討論了很久，基本上定下來(lái)要做這個(gè)項(xiàng)目，但我并不會(huì)iOS和Android開(kāi)發(fā)，我一直苦口婆心的勸他只搞微信版，但老板的意思還是要一個(gè)能占領(lǐng)用戶(hù)桌面的APP圖標(biāo)，也就意味著非搞APP不可。如此一來(lái)，我肯定沒(méi)這個(gè)能力搞APP，再加上老板并未完全作好準(zhǔn)備，這個(gè)項(xiàng)目擱置了大半年，直到2017年6月，老板再次主動(dòng)打電話找我談，并且非常堅(jiān)定的要我負(fù)責(zé)這個(gè)項(xiàng)目的開(kāi)發(fā)，即便是我不直接參與開(kāi)發(fā)，也得為他物色開(kāi)發(fā)團(tuán)隊(duì)。

好吧，我思前想后，雖然我不會(huì)開(kāi)發(fā)APP，但是后端工作還得我來(lái)搞，APP前端就找朋友來(lái)做，最起碼我還是撈得到酬勞吧！

我找到了一個(gè)開(kāi)發(fā)APP的朋友，對(duì)方給我報(bào)價(jià)iOS+Andriod一共是5萬(wàn)塊，我覺(jué)得價(jià)格不算高。我又給老板預(yù)算了一下費(fèi)用，所有工作算下來(lái)，我向老板報(bào)的是17萬(wàn)，老板大概自己也私下詢(xún)價(jià)了一些科技公司，雙平臺(tái)的APP這個(gè)價(jià)格肯定是白菜價(jià)。在簽合同之際，老板突然讓我贈(zèng)送一個(gè)微信版(這是生意人的套路)，整個(gè)費(fèi)用一共17萬(wàn)，稱(chēng)兄道弟的說(shuō)就當(dāng)讓我?guī)蛡€(gè)忙。

就這樣，我拿到了預(yù)付款7萬(wàn)元，簽了技術(shù)合作協(xié)議，約定周期是3個(gè)月完工，所有前期手續(xù)辦妥。

三、不靠譜的技術(shù)伙伴

整個(gè)項(xiàng)目，除了我和老板清楚需求之外，沒(méi)有人知道具體的需求，我既是產(chǎn)品經(jīng)理，又是項(xiàng)目的技術(shù)負(fù)責(zé)人。

我一直從事WEB方面的工作，在整個(gè)WEB項(xiàng)目實(shí)施層面，我樣樣都會(huì)一些，當(dāng)然UI設(shè)計(jì)我也會(huì)一點(diǎn)。我參照網(wǎng)上大神們的經(jīng)驗(yàn)，結(jié)合APP的界面規(guī)范要求，花了10多天，用PS畫(huà)好了40多頁(yè)的APP界面圖。

我把做好的APP界面和功能需求，連同我自己制定的用色、字體規(guī)范文檔、圖標(biāo)字體庫(kù)，發(fā)給了負(fù)責(zé)APP前端的技術(shù)伙伴兒。

這是我親自畫(huà)的簡(jiǎn)要流程圖

這是我親手畫(huà)的UI界面圖

這是我制定的用色規(guī)范

這是我制定的字體規(guī)范

我這個(gè)伙伴兒，也是通過(guò)另外的朋友認(rèn)識(shí)的，一枚92年的程序猿，會(huì)Android和iOS開(kāi)發(fā)，他給我報(bào)的費(fèi)用預(yù)算是5萬(wàn)，2個(gè)月完工(這是他的一口價(jià)，我并未討價(jià)還價(jià))。這費(fèi)用在業(yè)內(nèi)算超級(jí)白菜價(jià)，但這對(duì)于這樣一個(gè)年輕小伙兒來(lái)講，數(shù)目并不算太低，至少比他現(xiàn)在上班拿的工資高幾倍。

提交給他相關(guān)開(kāi)發(fā)材料后，我滿以為這個(gè)伙伴兒會(huì)盡心盡力的按照我的要求按部就班的進(jìn)行開(kāi)發(fā)，可是，我錯(cuò)了。

我發(fā)送給他資料的時(shí)候，感覺(jué)他并不是特別留意我的材料，收到文件，也從不提問(wèn)和詢(xún)問(wèn)細(xì)節(jié)，往往只回復(fù)一個(gè)“好的”、“行”、“OK”。我心里始終有點(diǎn)忐忑。但憑我跟他見(jiàn)面聊的，他又自稱(chēng)是比較有能力的程序員，總是信誓旦旦的表示技術(shù)方面沒(méi)問(wèn)題，我還是愿意相信他。

過(guò)了大概一個(gè)多星期，對(duì)方并沒(méi)有主動(dòng)找過(guò)我一次，我在想，難道是我準(zhǔn)備的資料太過(guò)充分詳盡，以至于對(duì)方都可以看懂和輕松實(shí)施？我天真的這么想。

又過(guò)了一個(gè)多星期，我開(kāi)始催他給我看看做出來(lái)的樣品，對(duì)方表示再等兩天。再等了兩天，對(duì)方發(fā)來(lái)了Android版的樣品，我看了看，感覺(jué)非常失望，并不完全是按照我的設(shè)計(jì)圖做的，界面很粗糙，字體也不對(duì)。我向他表示要很精細(xì)的成品，但對(duì)方表示，這些可以后期調(diào)整的，我還是同意了。

可是，時(shí)間過(guò)得真快，轉(zhuǎn)眼一個(gè)月過(guò)去了，對(duì)方還沒(méi)有給出比較像樣的樣板，我開(kāi)始慌了，我了解后發(fā)現(xiàn)，他居然應(yīng)聘了一份工作，開(kāi)始上起了班，這樣一來(lái)，難怪沒(méi)時(shí)間搞我的項(xiàng)目。我整晚睡不著覺(jué)，我一個(gè)人單槍匹馬接了17萬(wàn)的項(xiàng)目，如果進(jìn)度上再不作一點(diǎn)改變，很可能要泡湯了。于是我思前想后，作出決定：我必須要放棄這個(gè)朋友的合作！

四、進(jìn)度受阻，及時(shí)改變技術(shù)策略

我在合適的時(shí)候，找了個(gè)理由，向這個(gè)技術(shù)伙伴兒表明了意思，APP開(kāi)發(fā)要中止了，否則再這樣下去，我們都會(huì)違約，什么好處都撈不到不說(shuō)，我還會(huì)產(chǎn)生違約賠償。

對(duì)方一開(kāi)始還是不太情愿，雖然5萬(wàn)塊錢(qián)對(duì)于APP開(kāi)發(fā)來(lái)講，費(fèi)用不算多，但對(duì)于他來(lái)講，也算是一筆不小的收益。但最終我還是說(shuō)服了他，之前付給他的1萬(wàn)定金，我只要求他退我7000，3000作為對(duì)他工作的補(bǔ)償。

與技術(shù)伙伴兒的合作是中止了，但項(xiàng)目還得繼續(xù)，該怎么辦？如果我重新找人做，我覺(jué)得不太現(xiàn)實(shí)，也在網(wǎng)上找了一些人，都不是太理想，溝通成本也很高。于是我膽怯的決定了用HBuilder來(lái)搞混合APP開(kāi)發(fā)，用MUI和H5+來(lái)做混合型APP！

但我之前一直沒(méi)做過(guò)這樣的工作，并且聽(tīng)說(shuō)iOS上架審核非常嚴(yán)苛，被拒絕的案例大有人在，我還是很害怕出現(xiàn)這樣的結(jié)果。我在MUI的QQ裙里也詢(xún)問(wèn)了一下群友，并未得到明確的上架方面的答案，也沒(méi)吃到定心丸。我一直在想，這樣開(kāi)發(fā)出來(lái)的APP，上架應(yīng)該很難。

但是我沒(méi)有別的選擇，我毅然決然選擇用MUI和H5+來(lái)做，管他呢，聽(tīng)天由命，博一把吧！

五、潛心開(kāi)發(fā)，往原生靠攏

我用HBuilder開(kāi)始馬不停蹄的開(kāi)發(fā)APP，第一次開(kāi)發(fā)APP，踩了不少坑，也從頭了解MUI和H5+。我盡量把自己的項(xiàng)目往原生效果靠攏，這樣我才有更多上架的勝算機(jī)會(huì)，我往往為了一個(gè)不起眼的效果而折騰幾天。

改變技術(shù)策略之后，我深知我的任務(wù)量很重，我加了不少班，通宵達(dá)旦的寫(xiě)代碼。剛好我的兒子在我最忙的時(shí)候出生了，我把家庭上所有的事情交給了媳婦兒打理，還把我母親和丈母娘叫來(lái)幫我?guī)鹤?#xff0c;我?guī)缀跏侨硇耐度氲巾?xiàng)目開(kāi)發(fā)中，想到成功以后可以拿到不多不少的17萬(wàn)，想到辛苦這三個(gè)月就可以帶著全家人出去度假，我一刻都沒(méi)懈怠，并且治好了以前頑固的拖延癥。

大概前后搞了3個(gè)多月，我用HBuilder開(kāi)發(fā)的APP成品基本上出來(lái)了，我一個(gè)人完成了所有的工作(包含各種第三方平臺(tái)支付API申請(qǐng)、地圖API申請(qǐng)、打包證書(shū)創(chuàng)建)！整個(gè)項(xiàng)目APP前端一共有34個(gè)JS文件，14個(gè)CSS文件，24個(gè)HTML頁(yè)面。后端則有幾十個(gè)PHP類(lèi)文件，10幾個(gè)API，58個(gè)Mysql數(shù)據(jù)表。基本上APP能夠跑起來(lái)了，開(kāi)始進(jìn)行測(cè)試。

六、內(nèi)部測(cè)試，一波三折

APP能在真實(shí)手機(jī)環(huán)境下跑起來(lái)了，這是我比較欣慰的。安卓、蘋(píng)果手機(jī)都進(jìn)行了安裝，看起來(lái)是個(gè)像模像樣的APP了。于是我找到老板，進(jìn)行了一次員工測(cè)試前的動(dòng)員會(huì)議。

公司雖然有幾十號(hào)人，一直以來(lái)，卻沒(méi)人知道我跟老板在搞什么名堂，只知道我們有一款A(yù)PP在開(kāi)發(fā)。當(dāng)我們開(kāi)會(huì)講到這款A(yù)PP的時(shí)候，我拿出了演示。各部門(mén)體驗(yàn)了一番，他們的負(fù)責(zé)人開(kāi)始了他們的“演講”，各種思路和腦洞，充斥著整個(gè)項(xiàng)目的討論中，有些員工提出一些很不合實(shí)際的建議，但對(duì)于不懂技術(shù)和互聯(lián)網(wǎng)的老板看來(lái)，這些建議好像也很有道理，于是很多言論左右著老板對(duì)這個(gè)APP成品的看法。

果然，老板要求按照他們的建議作一些改動(dòng)和功能添加(盡管這并不是合同上載明的)，都到這地步了，我只能默默的同意了，盡量爭(zhēng)取到讓大家滿意，后面才好驗(yàn)收。

我按照大家的建議作了APP的修改，讓各部門(mén)進(jìn)行測(cè)試，又給了兩周時(shí)間來(lái)測(cè)試，心想，測(cè)試完畢，就該讓公司簽驗(yàn)收?qǐng)?bào)告了。

公司的員工并不積級(jí)，再三催促和老板施壓下，大家勉強(qiáng)進(jìn)行了一輪測(cè)試，主要集中在交易環(huán)節(jié)，我讓大家從下單->付款->退款等環(huán)節(jié)進(jìn)行了完整測(cè)試，保障所有資金走向正確無(wú)誤，這樣才能代表APP的交易功能形成閉環(huán)。

接下來(lái)我針對(duì)APP使用又組織了一次集中培訓(xùn)，大家聽(tīng)我講了各種操作，我估計(jì)認(rèn)真聽(tīng)的也沒(méi)幾個(gè)人，但我還是很認(rèn)真的培訓(xùn)完了，也算對(duì)公司有個(gè)交待。

整個(gè)項(xiàng)目至此花了4個(gè)多月時(shí)間，按照約定我是已經(jīng)超出了一個(gè)月，雖然老板催促過(guò)我，但我畢竟是公司的前技術(shù)員工，同時(shí)以前也是老員工，獨(dú)立完成了公司的內(nèi)部系統(tǒng)，老板比較信任我，公司并沒(méi)有在合同方面上綱上線。

七、APP驗(yàn)收及尾款

到這個(gè)環(huán)節(jié)，應(yīng)該是要進(jìn)行驗(yàn)收了，于是我向公司請(qǐng)求進(jìn)行驗(yàn)收，我內(nèi)心其實(shí)一直認(rèn)為驗(yàn)收環(huán)節(jié)會(huì)存在一定的問(wèn)題，老板應(yīng)該不會(huì)那么爽快，畢竟項(xiàng)目開(kāi)發(fā)費(fèi)用也不是一點(diǎn)小錢(qián)。另外，之前我的一位同事用他的經(jīng)歷告訴我，老板并不是那么爽快的。

但老板在資源方采購(gòu)了很多資源，這些資源就等著APP上線，多等一天，老板就白花一天的錢(qián)。于是老板也敦促各部門(mén)快速完成驗(yàn)收，不得拖拖拉拉，只要符合要求，就立即簽驗(yàn)收?qǐng)?bào)告！這一點(diǎn)，我比較感恩老板，他比有的老板誠(chéng)懇爽快多了。

驗(yàn)收方面，我不知道那幾天到底發(fā)生了什么，最開(kāi)始幾個(gè)部門(mén)都不愿簽驗(yàn)收?qǐng)?bào)告，怕?lián)?zé)任，我感覺(jué)到非常難搞，但突然有一天，與我對(duì)接的小伙子打電話讓我去拿驗(yàn)收?qǐng)?bào)告，說(shuō)所有部門(mén)都簽字了！我感到一陣意外和欣喜。

既然驗(yàn)收?qǐng)?bào)告簽了，也就意味著項(xiàng)目成功交貨了(此時(shí)APP還未上架，我心想交貨了再慢慢搞上架的事兒，一直到上架成功為止)，也就是說(shuō)應(yīng)該拿尾款了。我并未期望一次性能拿到尾款，10萬(wàn)塊對(duì)于這樣的公司也不算是太小的數(shù)目，不管從老板個(gè)人還是從公司財(cái)務(wù)而言，都不會(huì)輕易打給我吧。

可是，事情的順利程度超出我的想象，當(dāng)我拿到驗(yàn)收?qǐng)?bào)告時(shí)，剛好碰見(jiàn)老板，他第一句話就是叫我去財(cái)務(wù)拿錢(qián)，說(shuō)已經(jīng)跟財(cái)務(wù)打好招呼了。

就在第二天，我成功收到財(cái)務(wù)打款的10萬(wàn)元，當(dāng)看到短信提示收款100000元的時(shí)候，我感到之前所有的辛苦終于有了回報(bào)。

我當(dāng)時(shí)開(kāi)車(chē)收到了10萬(wàn)尾款到賬短信

八、APP一次性順利上架成功，一切變得很美好

收到公司的錢(qián)就完事兒了嗎？還沒(méi)有。錢(qián)是拿到手了，但APP還沒(méi)上架呢！我最擔(dān)心的事情就是iOS上架，不過(guò)，一切都要按照計(jì)劃來(lái)。

我用HBuilder在線打好了原生包，然后向公司申請(qǐng)了一臺(tái)Apple筆記本電腦，用于APP上架(公司在這方面還是很大方的，我說(shuō)要什么，他們盡量滿足)。

其實(shí)非要用蘋(píng)果筆記本電腦，主要是為了使用Application Loader將ipa包上傳到iTunes Connect，用于APP提交。其它的環(huán)節(jié)倒不一定需要蘋(píng)果電腦(包括證書(shū)生成，都不一定要蘋(píng)果電腦，Windows下也可以完成)，XCode什么的更是沒(méi)用到。

第一步：上傳ipa到iTunes Connect，在這個(gè)軟件的自動(dòng)檢測(cè)環(huán)節(jié)我遇到問(wèn)題了，原因是APP的contact權(quán)限有問(wèn)題，后來(lái)按網(wǎng)上的資料改好了，將APP安裝包順利上傳到了iTunes Connect。這個(gè)環(huán)節(jié)成功了，我心里又踏實(shí)了一些。

第二步：準(zhǔn)備提交，填寫(xiě)APP資料。按照頁(yè)面上的提示和要求，亂七八糟的編好文案，上傳幾張APP預(yù)覽圖。

第三步：提交APP。我提交APP的時(shí)候剛好是圣誕節(jié)期間，蘋(píng)果APP提交后臺(tái)剛好把【提交審核】按鈕置為灰色了，我以為是我的資料填寫(xiě)有問(wèn)題導(dǎo)致按鈕不可用，折騰了好久。過(guò)了圣誕節(jié)發(fā)現(xiàn)提交按鈕可用了，原因是前兩天蘋(píng)果公司過(guò)年放假，不接受APP提交(這種可能性都能碰到，日了狗了)，于是我點(diǎn)了提交審核，頁(yè)面上呈現(xiàn)“正在等待審核”狀態(tài)，我便開(kāi)始了內(nèi)心七上八下、茶不思飯不想的等待……只希望出奇跡，蘋(píng)果審核人員讓APP通過(guò)審核，我?guī)缀跏沁^(guò)幾分鐘就刷新一次頁(yè)面，看看狀態(tài)有沒(méi)有改變。我一整晚睡不好覺(jué)，夢(mèng)里全是APP上架審核相關(guān)的內(nèi)容，有時(shí)候夢(mèng)見(jiàn)我的APP被拒絕了。(我其實(shí)是有心理準(zhǔn)備的，被拒絕幾次應(yīng)該是很正常，畢竟我的APP涉及到很多第三方API，包括支付功能，審核應(yīng)該更加嚴(yán)格)

我是12月28日正式提交審核的，12月29日刷了一整天的上架后臺(tái)，一直是“正在等待審核”，我明明知道沒(méi)這么快，可還是忍不住不停的去刷新頁(yè)面，期待審核狀態(tài)的更新。

12月30日上午我一醒來(lái)就刷頁(yè)面，但到9:40幾的時(shí)候我刷上架后臺(tái)，發(fā)現(xiàn)狀態(tài)變成了“正在審核”，咦，蘋(píng)果公司在審核我的APP了，這個(gè)時(shí)間點(diǎn)，應(yīng)該是中國(guó)團(tuán)隊(duì)在審核！我的心都提到嗓子眼了，噗通跳個(gè)不停，很緊張很緊張，那感覺(jué)難以形容！

當(dāng)天10:36，我萬(wàn)分驚喜的發(fā)現(xiàn)，我的APP審核通過(guò)了，狀態(tài)變成了“等待開(kāi)發(fā)人員發(fā)布”(這個(gè)狀態(tài)是我因?yàn)樵谔峤粫r(shí)選擇了“手工發(fā)布”)！當(dāng)時(shí)那種激動(dòng)，可能超過(guò)了向心愛(ài)的女孩表白成功的感覺(jué)。

我把APP進(jìn)行了發(fā)布，狀態(tài)就變成了“可供銷(xiāo)售”，也就是正式上架成功了，我第一時(shí)間在公司群里將這個(gè)好消息通知了所有人！

我完全沒(méi)想到第一次開(kāi)發(fā)的APP上架如此順利，蘋(píng)果公司審核如此之快！(整個(gè)上架審核過(guò)程僅花了不到3天時(shí)間)

這是第一次上架審核成功，直接用的1.0.2的版本號(hào)

九、好事多磨，第一個(gè)版本有BUG，更新后提交了一次加急審核

由于打包上架的倉(cāng)促和緊張，我畫(huà)蛇添足的在manifest配置中勾選了“根據(jù)重力自動(dòng)橫豎屏”的第二個(gè)選項(xiàng)“upside down”，導(dǎo)致APP安裝后，畫(huà)面是倒置的，不得不重新打包，更新一下版本。

蘋(píng)果的更新審核可能并不那么快，我提交了兩三天，一點(diǎn)動(dòng)靜沒(méi)有，我便申請(qǐng)了一次加急審核，理由是APP有重大BUG。不得不說(shuō)，加急真是非常高效，申請(qǐng)加急的時(shí)間當(dāng)晚9點(diǎn)左右，通過(guò)審核是次日0:30左右，是由蘋(píng)果美國(guó)公司審核的。

上圖是1月3日晚9點(diǎn)提交的加急審核通道

十、十全十美，再接再勵(lì)

這個(gè)APP的開(kāi)發(fā)和上架過(guò)程，是我從業(yè)以來(lái)最為激動(dòng)人心的一次經(jīng)歷，雖然很辛苦，但結(jié)果很美好。我順利拿到了17萬(wàn)的酬勞，更重要的是收獲了難能可貴的經(jīng)歷和成就感！

感謝DCloud讓我在這段經(jīng)歷當(dāng)中獲得了寶貴的經(jīng)驗(yàn)，HBuilder很棒！MUI很棒，H5+非常棒！也期望DCloud將免費(fèi)進(jìn)行到底。

寫(xiě)到這里，我也是想通過(guò)自己的經(jīng)驗(yàn)告訴各位初次開(kāi)發(fā)APP的朋友們，跨平臺(tái)混合開(kāi)發(fā)出來(lái)的APP是可以被認(rèn)可和接受的，HTML5用好了也是可以做出來(lái)讓人滿意的APP的。不要懼怕前面的困難，也不要道聽(tīng)途說(shuō)，導(dǎo)致你的畏首畏尾，請(qǐng)大膽去嘗試吧，愿命運(yùn)眷顧愿意辛勤和努力付出的我們！

總結(jié)

以上是生活随笔為你收集整理的mui开发项目流程_【经验分享】用HBuilder开发的基于MUI和H5+的APP开发及上架经历...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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