本人微信公眾號： 前端修煉之路，歡迎關注

背景介紹

大概在今年的十月份左右，我瞭解到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型別的。具體可以檢視文件發起網路請求。
• 關於專案目錄、開發規範一定要遵守，直接通過官網學習即可。開發規範

<template>
    <view class="content">
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="opennews" :data-postid="item.post_id">
                <view class="uni-media-list">
                    <image class="uni-media-list-logo" :src="item.author_avatar"></image>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">{{item.title}}</view>
                        <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                news: []
            };
        },
        onLoad:function(){
            uni.request({
                url: 'https://unidemo.dcloud.net.cn/api/news',
                method: 'GET',
                data: {},
                success: res => {
                    this.news = res.data;
                },
                fail: () => {},
                complete: () => {}
            });
        },
        methods:{
            opennews(e){
                uni.navigateTo({
                    url: '../news/news?postid='+e.currentTarget.dataset.postid
                });
            }
        }
    }
</script>

<style>
    .uni-media-list-body{height: auto;}
    .uni-media-list-text-top{line-height: 1.6em;}
</style>

這個列表頁面就算完成了。通過整體程式碼，可以發現採用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之後，頁面數量能減少一半。

（完）

原文地址：https://segmentfault.com/a/1190000017020710