uni-app官方教程学习手记
背景介紹
大概在今年的十月份左右，我了解到Dcloud推出了uni-app。當時下載了一個Hbuilder X，下載了官方提供的hello示例教程。經過一番努力，在云端打包成功了。當時這個軟件還不夠完善，用iphone真機模擬運行時，還會存在中文亂碼問題。我還特意提交了一個bug。
當時覺得這個框架真的好用。早先開發過混合app，也就是在webview下內嵌html5頁面，經常會出現卡頓的和性能問題。這個解決方案DCloud本身也提供了，就是mui。但是uni-app是不一樣的，一套代碼，可以完美的運行在安卓、蘋果、小程序甚至未來會支持H5頁面。想想都覺得蠻興奮的。
然后我并沒有動手去做任何項目，畢竟是新項目還需要發展一段時間。再有就是前端水太深，不能瞎折騰，時刻保持關注就行。一旦有需求，隨時能最快上手就是最好的。
這兩天剛好朋友有個項目讓我接手。仔細了解了下項目情況，發現項目剛開始做，由一個前端人員采用mui框架做的。做了不到一半頁面就跑路了。這個項目沒有任何的安卓或者蘋果的開發人員，朋友跟我也沒有任何相關的客戶端開發經驗。
我這么一聽，一下子想起來uni-app了。這就是個機會啊，既能接私活掙錢，又能學習新技術積累經驗，更重要的是，一旦這個項目做成，就意味著自己不僅僅只會html、css、js了。以后可以吹牛逼說，我丫的客戶端IOS和Android都能搞定~ 想想以后求職面試向面試官吹牛，我就有點小激動~~ 扯偏了 :)
學習手記
甭管多高深的框架，要想學習就得老老實實的去看官網。我又去看了一下官網，發現才隔了不到兩個月，更新的內容還是蠻多的。更新得越頻繁，說明框架越有活力，也就更值得我去折騰一下。大概的看了下文檔之后，心中的第一個疑問就冒出來了。
既然mui和uni-app都是DCloud出品，mui能直接平滑過渡到uni-app不？ 官方給出的答案是否定的。
如果已有5+或mui App、wap2app、原生App，是無法遷移到uni-app的。然后我就想起來，之前的webview存在的性能卡頓問題，看到官網給出的答案，我就放心了。也就下定決心，將朋友的mui項目改寫成uni-app的。
- 對于Hybrid方案，uni-app比普通基于webview的Hybrid方案體驗更好，包括比DCloud之前的mui體驗更好。
- 對比純原生渲染的方案，體驗差不多，但易用性和生態完整度上uni-app明顯勝出（uni-app自身功能組件豐富，并且小程序的周邊豐富生態都可以用于跨平臺開發）。
心中的顧慮都解除了，那就開始學習這個框架吧。以下內容基本都來源于官方網站，僅此記錄自己學習過程~
官方給出了一個視頻：https://ke.qq.com/course/343370，老老實實地認真看過了視頻，加上之前運行過demo，心中有了個大概。
光看視頻是不行的，感覺像是明白了，等到一動手操作的時候，就會發現哪里忘記或者記錯了。所以我新建了一個倉庫在騰訊云開發者平臺，因為目前騰訊云是免費的，不限制創建項目數量，所以可以隨便折騰。
新建項目時注意事項
- HBuilder X提倡使用快捷鍵開發，所以盡量使用快捷鍵。這點在視頻中有提到。我覺得還是非常好的一款編輯器。
- 如果是練習項目，可以選擇hello 模版。也可以在hello模版基礎上二次開發。
- 新建空白的項目需要拷貝uni.css和uni.js，保存到common目錄。照著視頻做，直接拷貝，非常方便
- 新建的項目需要修改內容頁面的標題，打開pages.json將文件中的navigationBarTitleText修改成自己的標題即可。
使用代碼進行編輯
視頻中隨便敲了一下鍵盤，噼里啪啦的出現了一堆的代碼，感覺還是不錯的。應該是內置了一個代碼塊。所以去官網查了一下，果然nice。內置了很多的代碼塊。代碼塊分為Tag代碼塊、JS代碼塊。使用代碼塊直接創建組件模板
新聞列表頁 index.vue
視頻中就是一個新聞列表頁，而列表頁也就是一個列表而已。在index.vue中編寫如下代碼。
- v-for表示要循環的語句，其中的news是在js部分中的data定義的屬性，表示新聞列表。v-for中的item表示一個列表項，也就是一個新聞；index表示列表的下標。
- @tap表示綁定點擊事件。因為是在移動端，還是不要寫@click了。click事件在移動端會有300ms的延遲
- :data-postid表示綁定一個動態的數據，而postid表示這個動態的數據屬性是這個名字。
- 如果想直接輸出數據中的內容，通過{{}}兩對大括號將數據內容包裹在里面即可。例如{{item.title}}
- 視頻中特別強調了聲明data屬性時要注意，必須聲明為返回一個初始數據對象的函數。只需要更新最新版本的HBuilder X 新建頁面的時候就會自動生成。
- 編寫js代碼的時候，編輯器會自動用eslint對代碼進行檢查。可以通過工具-插件配置-eslint-vue查看和修改配置項。
- onLoad是頁面的生命周期。uni-app 完整支持 Vue 實例的生命周期，同時還支持應用生命周期及頁面生命周期
- uni.request是發起請求，直接通過代碼塊敲代碼會特別快。另外這個接口跟ajax還是有些不太一樣的。例如發送給服務器的數據都是string類型的。具體可以查看文檔發起網絡請求。
- 關于項目目錄、開發規范一定要遵守，直接通過官網學習即可。開發規范
這個列表頁面就算完成了。通過整體代碼，可以發現采用vue這種開發模式，代碼如此的簡潔，總共才不到50行的代碼。相比較于傳統的jQuery方式，不知道要方便多少倍。通過代碼，再一次鼓舞我繼續下去，將項目修改成uni-app項目，不管工作量有多么大，也不管坑有多深了。
新聞詳情頁 news.vue
新聞詳情頁，超級簡單，全部代碼才區區40行。就可以比較好的展示頁面了。因為新聞頁面一般都包含<p></p>標簽等富文本內容，所以使用uni-app提供的內置組件rich-text來實現。
另外需要注意的就是，在頁面的onLoad函數中，接到的參數e，實際上就是在頁面index.vue傳過來的參數。這種頁面之間傳參的方式非常方便。不用寫任何多余的代碼。
<template><view class="wrap"><view class="title">{{title}}</view><view class="content"><rich-text :nodes="content"></rich-text></view></view> </template><script>export default {data() {return {title: '',content: ''};},onLoad:function(e){uni.request({url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+ e.postid,method: 'GET',data: {},success: res => {this.title = res.data.title;this.content = res.data.content;},fail: () => {},complete: () => {}});}} </script><style>.wrap{padding: 10upx 2%;width: 96%;flex-wrap: wrap;}.title{line-height: 2em;font-weight: bold;font-size: 40upx;}.content{line-height: 2em;} </style>運行和調試項目
uni-app調試是在微信開發者工具之中調試的。所以本地一定要按照這個軟件。之后ctrl+R，在微信中運行就可以調試了。開發App程序和微信小程序都需要在微信開發者工具之中調試。運行與調試介紹
我覺得還是非常方便的，因為首先在HBuilder X 編輯代碼之后，按下ctrl+s，會自動編譯，然后就會自動刷新微信開發者工具。這就好像是前端開發中會使用自動刷新工具一樣。以前我開發的時候還會專門去用一些工具去做到實時刷新，然后可以雙屏幕開發。但是我發現沒有那個第三方軟件做得比較好的，所以每次在瀏覽器里我還是需要手動刷新。但是這個HBuilder X 內置的實時刷新，是非常好用的。
另外就是編譯的時候會對代碼進行檢查，如果有錯誤會直接在控制臺報錯。
最后就是發布安卓包和蘋果包了。因為我沒有申請相應的開發者證書，不能進行本地打包。這里還是要對HBuilder X 再點一個贊的。它在軟件內部集成了一個打包工具，支持本地打包和云打包。如果使用云打包還可以使用Dcloud 公用的開發者證書進行測試，或者使用自己的開發者證書。非常非常的方便。
我將自己做的第一個新聞列表、新聞詳情程序打包，安裝到了安卓手機上測試了下，效果非常棒。因為我的蘋果手機沒有越獄，我也不想對自己手機越獄，就沒有測試蘋果系統下效果。
用Mock模擬虛擬數據。
在看這個項目之前，我一直沒有使用過Mock數據，進行開發。主要是我沒有接觸過。但是剛好在接這個項目的前一天，我知道了還有Mock數據這個東西，然后就學習了一下。我才發現自己是有多么的懶惰，沒有學習這個技能。Mock數據簡直是前端開發的神器啊。在實際項目開發中，經常是前端開發完成了，后端數據還沒有到。等后端數據到了，會發現接口跟當初預定的接口不一致了，等各種意想不到的問題。尤其是在等接口的過程中，我以前是自己寫假數據。但是當后端接口數據提供之后，會發現自己寫的假數據有問題，然后就影響到我的代碼了。經常搞得自己焦頭爛額。
Mock數據就是為了解決這個痛點的。通過對比學習，我決定使用Easy-Mock。使用方法和注意事項可以參考數據模擬神器 easy-mock 正式開源
之所以采用這種平臺化的Mock數據，是因為我沒有花時間去看怎么在本地搭建一個測試服務。直接就拿來主義了。
總結
通過這個新聞列表的程序，快速上手了uni-app，完成了一套代碼，多端運行。按照官網給出的說法是，學習成本非常低的，但對比我個人，我覺得還是有成本的，至少要理解其中的概念，才能更愉快的上手項目。
需要熟練掌握至少以下知識點
- Vue的語法，至少要知道如何創建文件、怎樣綁定數據、怎樣通訊、如何綁定事件、怎樣通過綁定數據刷新頁面。我雖然沒有做過vue的項目，但是好在我有看過vue文檔，并練習了官網的例子。否則，在運行這個項目之前我得花不少時間去vue官網學習vue~
- 微信小程序相關知識。同樣的，如果完全沒有看過微信小程序相關知識，同樣會遇到問題，尤其是后續開發會用到微信小程序API
- css3、flex布局、ES6、打包、發布、模塊化開發等等。相關的知識點，都需要學習、強化。
可以發現，通過uni-app，就將目前主流的技術全都鏈接起來了。這樣的好處是非常多的。對我個人而言，可以學習新框架、開發IOS和Android APP項目、串聯起來目前主流的技術棧，積累經驗。另外最重要的就是，通過這個過程，還能掙一筆零花錢~ 不僅學習了知識，積累了項目經驗，還有伙食費，真是好處多多啊~
目前已經上手了這個框架，下一步就應該考慮將mui項目，修改成uni-app項目了。希望這個過程是幸福并快樂的。目前項目是180多個html頁面，希望采用vue之后，頁面數量能減少一半。
（完）
總結
以上是生活随笔為你收集整理的uni-app官方教程学习手记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QQ浏览器极速版(登录QQ邮箱)
- 下一篇： 栈一：用两个栈实现队列