uni-app學習資料整理-1.白話uni-app

白話uni-app  https://ask.dcloud.net.cn/article/35657

文件內代碼架構的變化

以前一個html大節點，里面有script和style節點；

現在template是一級節點，用於寫tag組件，script和style是並列的一級節點，也就是有3個一級節點。

<template>  
    <view>  
    注意必須有一個view，且只能有一個根view。所有內容寫在這個view下面。  
    </view>  
</template>  

<script>  
    export default {  

    }  
</script>  

<style>  

</style>

外部文件引用方式變化

以前通過script src、link href引入外部的js和css；

現在是es6的寫法，import引入外部的js模塊(注意不是文件)或css

js要require進來，變成了對象。

在hello uni-app的common目錄有一個工具類util.js，可以在hello uni-app中搜索這個例子查看。

<script>  
var util = require('../../../common/util.js');  //require這個js模塊  
var formatedPlayTime = util.formatTime(playTime); //調用js模塊的方法  
</script>

而在這個util.js里，要把之前的function封裝為對象的方法

function formatTime(time) {  
    return time;//這里沒寫邏輯  
}  

module.exports = {  
    formatTime: formatTime  
}

當然還有一些高級的用法

var dateUtils = require('../../../common/util.js').dateUtils; //直接使用js模塊的屬性。在hello uni-app有示例  
import * as echarts from '/components/echarts/echarts.simple.min.js'; //將js導入並重命名為echarts，然后使用echarts.來繼續執行方法。在hello uni-app有示例

css外部文件導入

<style>  
    @import "./common/uni.css";  

    .uni-hello-text{  
        color:#7A7E83;  
    }  
</style>

全局樣式，在根目錄下的app.vue里寫入，每個頁面都會加載app.vue里的樣式。

另外，vue支持組件導入，可以更方便的封裝一個包括界面、js、樣式的庫。

如下是導入一個角標的組件庫，在頁面上顯示一個abc並且右上角有個數字角標1，詳見

<template>  
    <view>  
        <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用組件-->  
    </view>  
</template>  
<script>  
    import uniBadge from "../../../components/uni-badge.vue";//1.導入組件  
    export default {  
        data() {  
            return {  

            }  
        },  
        components: {  
            uniBadge //2.注冊組件  
        }  
    }  
</script>

如需要全局導入vue組件，即每個頁面都可以直接使用而不用引用和注冊的話，在項目根目錄下的main.js里處理。如下是hello uni-app里的例子。

//main.js  
import pageHead from './components/page-head.vue' //導入  
Vue.component('page-head', pageHead) //注冊。注冊后在每個vue的page頁面里可以直接使用<page-head></page-head>組件。

組件/標簽的變化

以前是html標簽，現在是小程序組件。
具體說來：

• div 改成 view
• span、font 改成 text
• a 改成 navigator
• img 改成 image
• input 還在，但type屬性改成了confirmtype
• form、button、checkbox、radio、label、textarea、canvas、video 這些還在。
• select 改成 picker
• iframe 改成 web-view
• ul、li沒有了，都用view替代
• audio 不再推薦使用，改成api方式，背景音頻api文檔
  其實老的HTML標簽也可以在uni-app里使用，uni-app編譯器會在編譯時把老標簽轉為新標簽，比如把div編譯成view。但不推薦這種用法，調試H5端時容易混亂，基於老元素寫法的選擇器也會出問題。

除了改動外，新增了一批手機端常用的新組件

• scroll-view 可區域滾動視圖容器
• swiper 可滑動區域視圖容器
• icon 圖標
• rich-text 富文本（不可執行js，但可渲染各種文字格式和圖片）
• progress 進度條
• slider 滑塊指示器
• switch 開關選擇器
• camera 相機
• live-player 直播
• map 地圖

• cover-view 可覆蓋原生組件的視圖容器 

  cover-view需要多強調幾句，uni-app的非h5端的video、map、canvas、textarea是原生組件，層級高於其他組件。如需覆蓋原生組件，比如在map上加個遮罩，則需要使用cover-view組件

除了內置組件，還有很多開源的擴展組件，把常用操作都進行封裝，DCloud建立了插件市場收錄這些擴展組件，詳見插件市場

js的變化

js的變化，分為運行環境變化、數據綁定模式變化、api變化3部分。

• 運行環境從瀏覽器變成v8引擎

標准js語法和api都支持，比如if、for、settimeout、indexOf等。

但瀏覽器專用的window、document、navigator、location對象，包括cookie等存儲，只有在瀏覽器中才有，app和小程序都不支持。

可能有些人以為js等於瀏覽器里的js。其實js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基於js規范補充了window、document、navigator、location等專用對象。

在uni-app的各個端中，除了h5端，其他端的js都運行在一個獨立的v8引擎下，不是在瀏覽器中，所以瀏覽器的對象無法使用。如果你做過小程序開發，對此應當很了解。

這意味着依賴document的很多HTML的庫，比如jqurey無法使用。

當然app和小程序支持web-view組件，里面可以加載標准HTML，這種頁面仍然支持瀏覽器專用對象window、document、navigator、location。

• 以前的dom操作，改成vue的MVVM模式

現在前端趨勢是去dom化，改用mvvm模式，更簡潔的寫法，大幅減少代碼行數，同時差量渲染性能更好。

uni-app使用vue的數據綁定方式解決js和dom界面交互的問題。

如果你想改變某個dom元素的顯示內容，比如一個view的顯示文字：

以前是給view設id，然后js里通過選擇器獲取dom元素，進一步通過js進行賦值操作，修改dom元素的屬性或值。

如下演示了一段代碼，頁面中有個顯示的文字區和一個按鈕，點擊按鈕后會修改文字區的值

現在的做法，是vue的綁定模式，給這個dom元素綁定一個js變量，在script中修改js變量的值，dom會自動變化，頁面會自動更新渲染

<template>  
    <view>  
        <text>{{textvalue}}</text><!-- 這里演示了組件值的綁定 -->  
        <button :type="buttontype" @click="changetextvalue()">修改為789</button><!-- 這里演示了屬性和事件的綁定 -->  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                textvalue:"123",  
                buttontype:"primary"  
            };  
        },  
        onLoad() {  
            this.textvalue="456"//這里修改textvalue的值，其實123都來不及顯示就變成了456  
        },  
        methods: {  
            changetextvalue() {  
                this.textvalue="789"//這里修改textvalue的值，頁面自動刷新為789  
            }  
        }  
    }  
</script>

如果你學過小程序的數據綁定，但不了解vue，要注意：

• 小程序的數據綁定參考了vue，但自己修改了一些。在uni-app中只支持標准的vue，不支持小程序的數據綁定語法

• 小程序里的setData在uni-app里並不存在，因為vue是自動雙向數據綁定的。直接通過賦值方式修改數據，如果數據綁定到界面上，界面會自動更新渲染

• js api的變化

因為uni-app的api是參考小程序的，所以和瀏覽器的js api有很多不同，如

1. alert,confirm 改成 uni.showmodel
2. ajax 改成 uni.request
3. cookie、session 沒有了，local.storage 改成 uni.storage

uni-app的js api還有很多，但基本就是小程序的api，把wx.xxx改為uni.xxx即可。詳見

uni-app在不同的端，支持條件編譯，無限制的使用各端獨有的api，詳見條件編譯

css的變化

標准的css基本都是支持的。

選擇器有2個變化：*選擇器不支持；元素選擇器里沒有body，改為了page。微信小程序即是如此。

page{  

}

單位方面，px無法動態適應不同寬度的屏幕，rem只能用於h5。如果想使用根據屏幕寬度自適應的單位，推薦使用rpx，全端支持。 尺寸單位文檔

uni-app推薦使用flex布局，並默認就是flex布局，這個布局思路和傳統流式布局有點區別。但flex的有趣在於，不管是什么技術都支持這種排版，web、小程序/快應用、weex/rn、原生的iOS、Android開發，全都支持flex。它是通吃所有端的新一代布局方案。相關教程請自行百度學習。

uni-app的vue文件里支持所有web排版方式，不管是流式還是flex。但nvue里，只支持flex，因為它在app端是使用原生排版引擎渲染的。

注意背景圖和字體文件盡量不要大於40k。會影響性能。如果非要大於40k，需放到服務器側遠程引用或base64后引入，不能放到本地作為獨立文件引用。在小程序里，其實小於40k的文件在css里也無法引用，uni-app編譯器在編譯時自動做了處理，把小於40k的文件編譯為base64方式了。

 

工程結構和頁面管理

uni-app的工程結構有單獨的要求，詳見

每個可顯示的頁面，都必須在 pages.json 中注冊。如果你開發過小程序，那么pages.json類似app.json。如果你熟悉vue，這里沒有vue的路由，都是在pages.json里管理。

原來工程的首頁一般是index.html或default.html，是在web server里配的。而uni-app的首頁，是在pages.json里配的，page節點下第一個頁面就是首頁。一般在/pages/xx的目錄下。

app和小程序中，為了提升體驗，頁面提供了原生的導航欄和底部tabbar，注意這些配置是在pages.json中做，而不是在vue頁面里創建，但點擊事件的監聽在顯示的vue頁面中做。

在vue中，以前的js事件監聽概念改為了生命周期概念。詳見uni-app生命周期

如果你熟悉小程序開發的話，對比變化如下：

• 原來app.json被一拆為二。頁面管理，被挪入了uni-app的pages.json；非頁面管理，挪入了manifest.json
• 原來的app.js和app.wxss被合並到了app.vue中

結語

最后，本文並非uni-app的完整教程，了解掌握uni-app，還需要認真過一遍uni-app的文檔。

掌握好vue，也仍需要進一步去vue官網學習。或通過uni-app專業視頻培訓課程，連同vue帶uni-app一起學會。

根據騰訊課堂和職友集的數據，會vue的人，比不會vue的普通前端薪資高27%哦。

如果你熟悉小程序，但不熟悉vue的話，這里還有一篇文章總結的很好：vue和微信小程序的區別、比較