uni-app官方教程學習手記

時間 2019-11-05

標籤 uni app 官方教程學習手記简体版

原文原文鏈接

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

背景介紹

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

當時以爲這個框架真的好用。早先開發過混合app，也就是在webview下內嵌html5頁面，常常會出現卡頓的和性能問題。這個解決方案DCloud自己也提供了，就是mui。可是uni-app是不同的，一套代碼，能夠完美的運行在安卓、蘋果、小程序甚至將來會支持H5頁面。想一想都以爲蠻興奮的。html

而後我並無動手去作任何項目，畢竟是新項目還須要發展一段時間。再有就是前端水太深，不能瞎折騰，時刻保持關注就行。一旦有需求，隨時能最快上手就是最好的。前端

這兩天恰好朋友有個項目讓我接手。仔細瞭解了下項目狀況，發現項目剛開始作，由一個前端人員採用mui框架作的。作了不到一半頁面就跑路了。這個項目沒有任何的安卓或者蘋果的開發人員，朋友跟我也沒有任何相關的客戶端開發經驗。vue

我這麼一聽，一會兒想起來uni-app了。這就是個機會啊，既能接私活掙錢，又能學習新技術積累經驗，更重要的是，一旦這個項目作成，就意味着本身不只僅只會html、css、js了。之後能夠吹牛逼說，我丫的客戶端IOS和Android都能搞定~ 想一想之後求職面試向面試官吹牛，我就有點小激動~~ 扯偏了 :)html5

學習手記

甭管多高深的框架，要想學習就得老老實實的去看官網。我又去看了一下官網，發現才隔了不到兩個月，更新的內容仍是蠻多的。更新得越頻繁，說明框架越有活力，也就更值得我去折騰一下。大概的看了下文檔以後，心中的第一個疑問就冒出來了。node

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

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

而後我就想起來，以前的webview存在的性能卡頓問題，看到官網給出的答案，我就放心了。也就下定決心，將朋友的mui項目改寫成uni-app的。web

對於Hybrid方案，uni-app比普通基於webview的Hybrid方案體驗更好，包括比DCloud以前的mui體驗更好。

對比純原生渲染的方案，體驗差很少，但易用性和生態完整度上uni-app明顯勝出（uni-app自身功能組件豐富，而且小程序的周邊豐富生態均可以用於跨平臺開發）。

心中的顧慮都解除了，那就開始學習這個框架吧。如下內容基本都來源於官方網站，僅此記錄本身學習過程~面試

官方給出了一個視頻：https://ke.qq.com/course/343370，老老實實地認真看過了視頻，加上以前運行過demo，心中有了個大概。ajax

光看視頻是不行的，感受像是明白了，等到一動手操做的時候，就會發現哪裏忘記或者記錯了。因此我新建了一個倉庫在騰訊雲開發者平臺，由於目前騰訊雲是免費的，不限制建立項目數量，因此能夠隨便折騰。

新建項目時注意事項

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
css三、flex佈局、ES六、打包、發佈、模塊化開發等等。相關的知識點，都須要學習、強化。

能夠發現，經過uni-app，就將目前主流的技術全都連接起來了。這樣的好處是很是多的。對我我的而言，能夠學習新框架、開發IOS和Android APP項目、串聯起來目前主流的技術棧，積累經驗。另外最重要的就是，經過這個過程，還能掙一筆零花錢~ 不只學習了知識，積累了項目經驗，還有伙食費，真是好處多多啊~

目前已經上手了這個框架，下一步就應該考慮將mui項目，修改爲uni-app項目了。但願這個過程是幸福並快樂的。目前項目是180多個html頁面，但願採用vue以後，頁面數量能減小一半。

（完）