摘要：當(dāng)時(shí)下載了一個(gè)，下載了官方提供的示例教程。關(guān)于項(xiàng)目目錄開(kāi)發(fā)規(guī)范一定要遵守，直接通過(guò)官網(wǎng)學(xué)習(xí)即可。最后就是發(fā)布安卓包和蘋果包了。我將自己做的第一個(gè)新聞列表新聞詳情程序打包，安裝到了安卓手機(jī)上測(cè)試了下，效果非常棒。

本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注

大概在今年的十月份左右，我了解到Dcloud推出了uni-app。當(dāng)時(shí)下載了一個(gè)Hbuilder X，下載了官方提供的hello示例教程。經(jīng)過(guò)一番努力，在云端打包成功了。當(dāng)時(shí)這個(gè)軟件還不夠完善，用iphone真機(jī)模擬運(yùn)行時(shí)，還會(huì)存在中文亂碼問(wèn)題。我還特意提交了一個(gè)bug。

當(dāng)時(shí)覺(jué)得這個(gè)框架真的好用。早先開(kāi)發(fā)過(guò)混合app，也就是在webview下內(nèi)嵌html5頁(yè)面，經(jīng)常會(huì)出現(xiàn)卡頓的和性能問(wèn)題。這個(gè)解決方案DCloud本身也提供了，就是mui。但是uni-app是不一樣的，一套代碼，可以完美的運(yùn)行在安卓、蘋果、小程序甚至未來(lái)會(huì)支持H5頁(yè)面。想想都覺(jué)得蠻興奮的。

然后我并沒(méi)有動(dòng)手去做任何項(xiàng)目，畢竟是新項(xiàng)目還需要發(fā)展一段時(shí)間。再有就是前端水太深，不能瞎折騰，時(shí)刻保持關(guān)注就行。一旦有需求，隨時(shí)能最快上手就是最好的。

這兩天剛好朋友有個(gè)項(xiàng)目讓我接手。仔細(xì)了解了下項(xiàng)目情況，發(fā)現(xiàn)項(xiàng)目剛開(kāi)始做，由一個(gè)前端人員采用mui框架做的。做了不到一半頁(yè)面就跑路了。這個(gè)項(xiàng)目沒(méi)有任何的安卓或者蘋果的開(kāi)發(fā)人員，朋友跟我也沒(méi)有任何相關(guān)的客戶端開(kāi)發(fā)經(jīng)驗(yàn)。

我這么一聽(tīng)，一下子想起來(lái)uni-app了。這就是個(gè)機(jī)會(huì)啊，既能接私活掙錢，又能學(xué)習(xí)新技術(shù)積累經(jīng)驗(yàn)，更重要的是，一旦這個(gè)項(xiàng)目做成，就意味著自己不僅僅只會(huì)html、css、js了。以后可以吹牛逼說(shuō)，我丫的客戶端IOS和Android都能搞定~ 想想以后求職面試向面試官吹牛，我就有點(diǎn)小激動(dòng)~~ 扯偏了 :)

甭管多高深的框架，要想學(xué)習(xí)就得老老實(shí)實(shí)的去看官網(wǎng)。我又去看了一下官網(wǎng)，發(fā)現(xiàn)才隔了不到兩個(gè)月，更新的內(nèi)容還是蠻多的。更新得越頻繁，說(shuō)明框架越有活力，也就更值得我去折騰一下。大概的看了下文檔之后，心中的第一個(gè)疑問(wèn)就冒出來(lái)了。

既然mui和uni-app都是DCloud出品，mui能直接平滑過(guò)渡到uni-app不？ 官方給出的答案是否定的。

如果已有5+或mui App、wap2app、原生App，是無(wú)法遷移到uni-app的。

然后我就想起來(lái)，之前的webview存在的性能卡頓問(wèn)題，看到官網(wǎng)給出的答案，我就放心了。也就下定決心，將朋友的mui項(xiàng)目改寫成uni-app的。

對(duì)于Hybrid方案，uni-app比普通基于webview的Hybrid方案體驗(yàn)更好，包括比DCloud之前的mui體驗(yàn)更好。
對(duì)比純?cè)秩镜姆桨福w驗(yàn)差不多，但易用性和生態(tài)完整度上uni-app明顯勝出（uni-app自身功能組件豐富，并且小程序的周邊豐富生態(tài)都可以用于跨平臺(tái)開(kāi)發(fā)）。

心中的顧慮都解除了，那就開(kāi)始學(xué)習(xí)這個(gè)框架吧。以下內(nèi)容基本都來(lái)源于官方網(wǎng)站，僅此記錄自己學(xué)習(xí)過(guò)程~

官方給出了一個(gè)視頻：https://ke.qq.com/course/343370，老老實(shí)實(shí)地認(rèn)真看過(guò)了視頻，加上之前運(yùn)行過(guò)demo，心中有了個(gè)大概。

光看視頻是不行的，感覺(jué)像是明白了，等到一動(dòng)手操作的時(shí)候，就會(huì)發(fā)現(xiàn)哪里忘記或者記錯(cuò)了。所以我新建了一個(gè)倉(cāng)庫(kù)在騰訊云開(kāi)發(fā)者平臺(tái)，因?yàn)槟壳膀v訊云是免費(fèi)的，不限制創(chuàng)建項(xiàng)目數(shù)量，所以可以隨便折騰。

HBuilder X提倡使用快捷鍵開(kāi)發(fā)，所以盡量使用快捷鍵。這點(diǎn)在視頻中有提到。我覺(jué)得還是非常好的一款編輯器。

如果是練習(xí)項(xiàng)目，可以選擇hello 模版。也可以在hello模版基礎(chǔ)上二次開(kāi)發(fā)。

新建空白的項(xiàng)目需要拷貝uni.css和uni.js，保存到common目錄。照著視頻做，直接拷貝，非常方便

新建的項(xiàng)目需要修改內(nèi)容頁(yè)面的標(biāo)題，打開(kāi)pages.json將文件中的navigationBarTitleText修改成自己的標(biāo)題即可。

視頻中隨便敲了一下鍵盤，噼里啪啦的出現(xiàn)了一堆的代碼，感覺(jué)還是不錯(cuò)的。應(yīng)該是內(nèi)置了一個(gè)代碼塊。所以去官網(wǎng)查了一下，果然nice。內(nèi)置了很多的代碼塊。代碼塊分為Tag代碼塊、JS代碼塊。使用代碼塊直接創(chuàng)建組件模板

視頻中就是一個(gè)新聞列表頁(yè)，而列表頁(yè)也就是一個(gè)列表而已。在index.vue中編寫如下代碼。

v-for表示要循環(huán)的語(yǔ)句，其中的news是在js部分中的data定義的屬性，表示新聞列表。v-for中的item表示一個(gè)列表項(xiàng)，也就是一個(gè)新聞；index表示列表的下標(biāo)。

@tap表示綁定點(diǎn)擊事件。因?yàn)槭窃谝苿?dòng)端，還是不要寫@click了。click事件在移動(dòng)端會(huì)有300ms的延遲

:data-postid表示綁定一個(gè)動(dòng)態(tài)的數(shù)據(jù)，而postid表示這個(gè)動(dòng)態(tài)的數(shù)據(jù)屬性是這個(gè)名字。

如果想直接輸出數(shù)據(jù)中的內(nèi)容，通過(guò){{}}兩對(duì)大括號(hào)將數(shù)據(jù)內(nèi)容包裹在里面即可。例如{{item.title}}

視頻中特別強(qiáng)調(diào)了聲明data屬性時(shí)要注意，必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)。只需要更新最新版本的HBuilder X 新建頁(yè)面的時(shí)候就會(huì)自動(dòng)生成。

編寫js代碼的時(shí)候，編輯器會(huì)自動(dòng)用eslint對(duì)代碼進(jìn)行檢查?？梢酝ㄟ^(guò)工具-插件配置-eslint-vue查看和修改配置項(xiàng)。

onLoad是頁(yè)面的生命周期。uni-app 完整支持 Vue 實(shí)例的生命周期，同時(shí)還支持應(yīng)用生命周期及頁(yè)面生命周期

uni.request是發(fā)起請(qǐng)求，直接通過(guò)代碼塊敲代碼會(huì)特別快。另外這個(gè)接口跟ajax還是有些不太一樣的。例如發(fā)送給服務(wù)器的數(shù)據(jù)都是string類型的。具體可以查看文檔發(fā)起網(wǎng)絡(luò)請(qǐng)求。

關(guān)于項(xiàng)目目錄、開(kāi)發(fā)規(guī)范一定要遵守，直接通過(guò)官網(wǎng)學(xué)習(xí)即可。開(kāi)發(fā)規(guī)范

這個(gè)列表頁(yè)面就算完成了。通過(guò)整體代碼，可以發(fā)現(xiàn)采用vue這種開(kāi)發(fā)模式，代碼如此的簡(jiǎn)潔，總共才不到50行的代碼。相比較于傳統(tǒng)的jQuery方式，不知道要方便多少倍。通過(guò)代碼，再一次鼓舞我繼續(xù)下去，將項(xiàng)目修改成uni-app項(xiàng)目，不管工作量有多么大，也不管坑有多深了。

新聞詳情頁(yè)，超級(jí)簡(jiǎn)單，全部代碼才區(qū)區(qū)40行。就可以比較好的展示頁(yè)面了。因?yàn)樾侣勴?yè)面一般都包含

另外需要注意的就是，在頁(yè)面的onLoad函數(shù)中，接到的參數(shù)e，實(shí)際上就是在頁(yè)面index.vue傳過(guò)來(lái)的參數(shù)。這種頁(yè)面之間傳參的方式非常方便。不用寫任何多余的代碼。

uni-app調(diào)試是在微信開(kāi)發(fā)者工具之中調(diào)試的。所以本地一定要按照這個(gè)軟件。之后ctrl+R，在微信中運(yùn)行就可以調(diào)試了。開(kāi)發(fā)App程序和微信小程序都需要在微信開(kāi)發(fā)者工具之中調(diào)試。運(yùn)行與調(diào)試介紹

我覺(jué)得還是非常方便的，因?yàn)槭紫仍贖Builder X 編輯代碼之后，按下ctrl+s，會(huì)自動(dòng)編譯，然后就會(huì)自動(dòng)刷新微信開(kāi)發(fā)者工具。這就好像是前端開(kāi)發(fā)中會(huì)使用自動(dòng)刷新工具一樣。以前我開(kāi)發(fā)的時(shí)候還會(huì)專門去用一些工具去做到實(shí)時(shí)刷新，然后可以雙屏幕開(kāi)發(fā)。但是我發(fā)現(xiàn)沒(méi)有那個(gè)第三方軟件做得比較好的，所以每次在瀏覽器里我還是需要手動(dòng)刷新。但是這個(gè)HBuilder X 內(nèi)置的實(shí)時(shí)刷新，是非常好用的。

另外就是編譯的時(shí)候會(huì)對(duì)代碼進(jìn)行檢查，如果有錯(cuò)誤會(huì)直接在控制臺(tái)報(bào)錯(cuò)。

最后就是發(fā)布安卓包和蘋果包了。因?yàn)槲覜](méi)有申請(qǐng)相應(yīng)的開(kāi)發(fā)者證書(shū)，不能進(jìn)行本地打包。這里還是要對(duì)HBuilder X 再點(diǎn)一個(gè)贊的。它在軟件內(nèi)部集成了一個(gè)打包工具，支持本地打包和云打包。如果使用云打包還可以使用Dcloud 公用的開(kāi)發(fā)者證書(shū)進(jìn)行測(cè)試，或者使用自己的開(kāi)發(fā)者證書(shū)。非常非常的方便。

我將自己做的第一個(gè)新聞列表、新聞詳情程序打包，安裝到了安卓手機(jī)上測(cè)試了下，效果非常棒。因?yàn)槲业奶O果手機(jī)沒(méi)有越獄，我也不想對(duì)自己手機(jī)越獄，就沒(méi)有測(cè)試蘋果系統(tǒng)下效果。

在看這個(gè)項(xiàng)目之前，我一直沒(méi)有使用過(guò)Mock數(shù)據(jù)，進(jìn)行開(kāi)發(fā)。主要是我沒(méi)有接觸過(guò)。但是剛好在接這個(gè)項(xiàng)目的前一天，我知道了還有Mock數(shù)據(jù)這個(gè)東西，然后就學(xué)習(xí)了一下。我才發(fā)現(xiàn)自己是有多么的懶惰，沒(méi)有學(xué)習(xí)這個(gè)技能。Mock數(shù)據(jù)簡(jiǎn)直是前端開(kāi)發(fā)的神器啊。在實(shí)際項(xiàng)目開(kāi)發(fā)中，經(jīng)常是前端開(kāi)發(fā)完成了，后端數(shù)據(jù)還沒(méi)有到。等后端數(shù)據(jù)到了，會(huì)發(fā)現(xiàn)接口跟當(dāng)初預(yù)定的接口不一致了，等各種意想不到的問(wèn)題。尤其是在等接口的過(guò)程中，我以前是自己寫假數(shù)據(jù)。但是當(dāng)后端接口數(shù)據(jù)提供之后，會(huì)發(fā)現(xiàn)自己寫的假數(shù)據(jù)有問(wèn)題，然后就影響到我的代碼了。經(jīng)常搞得自己焦頭爛額。

Mock數(shù)據(jù)就是為了解決這個(gè)痛點(diǎn)的。通過(guò)對(duì)比學(xué)習(xí)，我決定使用Easy-Mock。使用方法和注意事項(xiàng)可以參考數(shù)據(jù)模擬神器 easy-mock 正式開(kāi)源

之所以采用這種平臺(tái)化的Mock數(shù)據(jù)，是因?yàn)槲覜](méi)有花時(shí)間去看怎么在本地搭建一個(gè)測(cè)試服務(wù)。直接就拿來(lái)主義了。

通過(guò)這個(gè)新聞列表的程序，快速上手了uni-app，完成了一套代碼，多端運(yùn)行。按照官網(wǎng)給出的說(shuō)法是，學(xué)習(xí)成本非常低的，但對(duì)比我個(gè)人，我覺(jué)得還是有成本的，至少要理解其中的概念，才能更愉快的上手項(xiàng)目。

需要熟練掌握至少以下知識(shí)點(diǎn)

Vue的語(yǔ)法，至少要知道如何創(chuàng)建文件、怎樣綁定數(shù)據(jù)、怎樣通訊、如何綁定事件、怎樣通過(guò)綁定數(shù)據(jù)刷新頁(yè)面。我雖然沒(méi)有做過(guò)vue的項(xiàng)目，但是好在我有看過(guò)vue文檔，并練習(xí)了官網(wǎng)的例子。否則，在運(yùn)行這個(gè)項(xiàng)目之前我得花不少時(shí)間去vue官網(wǎng)學(xué)習(xí)vue~

微信小程序相關(guān)知識(shí)。同樣的，如果完全沒(méi)有看過(guò)微信小程序相關(guān)知識(shí)，同樣會(huì)遇到問(wèn)題，尤其是后續(xù)開(kāi)發(fā)會(huì)用到微信小程序API

css3、flex布局、ES6、打包、發(fā)布、模塊化開(kāi)發(fā)等等。相關(guān)的知識(shí)點(diǎn)，都需要學(xué)習(xí)、強(qiáng)化。

可以發(fā)現(xiàn)，通過(guò)uni-app，就將目前主流的技術(shù)全都鏈接起來(lái)了。這樣的好處是非常多的。對(duì)我個(gè)人而言，可以學(xué)習(xí)新框架、開(kāi)發(fā)IOS和Android APP項(xiàng)目、串聯(lián)起來(lái)目前主流的技術(shù)棧，積累經(jīng)驗(yàn)。另外最重要的就是，通過(guò)這個(gè)過(guò)程，還能掙一筆零花錢~ 不僅學(xué)習(xí)了知識(shí)，積累了項(xiàng)目經(jīng)驗(yàn)，還有伙食費(fèi)，真是好處多多啊~

目前已經(jīng)上手了這個(gè)框架，下一步就應(yīng)該考慮將mui項(xiàng)目，修改成uni-app項(xiàng)目了。希望這個(gè)過(guò)程是幸福并快樂(lè)的。目前項(xiàng)目是180多個(gè)html頁(yè)面，希望采用vue之后，頁(yè)面數(shù)量能減少一半。

（完）