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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@tap表示綁定點(diǎn)擊事件。因?yàn)槭窃谝苿佣耍€是不要寫@click了。click事件在移動端會有300ms的延遲

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

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

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

編寫js代碼的時候，編輯器會自動用eslint對代碼進(jìn)行檢查。可以通過工具-插件配置-eslint-vue查看和修改配置項(xiàng)。

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

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

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

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

新聞詳情頁，超級簡單，全部代碼才區(qū)區(qū)40行。就可以比較好的展示頁面了。因?yàn)樾侣勴撁嬉话愣及?b>

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

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

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

另外就是編譯的時候會對代碼進(jìn)行檢查，如果有錯誤會直接在控制臺報錯。

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

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

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

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

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

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

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

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

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

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

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

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

（完）