2. 程式人生 > 其它 >uni-app----白話及入門

uni-app----白話及入門

阿新 • • 發佈：2022-03-25

 

 

 

 

傳統的h5只有1端，即瀏覽器。而uni-app可跨多端，雖仍屬前端，與傳統h5有不同。
如果你對h5比較瞭解，可通過本文快速瞭解uni-app。

網路模型的變化

以前網頁大多是b/s，服務端程式碼混合在頁面裡；

現在是c/s，前後端分離，通過js api(類似ajax的uni.request)獲取json資料，把資料繫結在介面上渲染。

檔案型別變化

以前是.html檔案，開發也是html，執行也是html。
現在是.vue檔案，開發是vue，經過編譯後，執行時已經變成了js檔案。
現代前端開發，很少直接使用HTML，基本都是開發、編譯、執行。所以uni-app有編譯器、執行時的概念。

檔案內程式碼架構的變化

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

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

以前

複製程式碼<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script type="text/javascript">  

        </script>  
        <style type="text/css">  

        </style>  
    </head>  
    <body>  

    </body>  
</html>

現在。這個叫vue單檔案元件規範sfc

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

<script>  
    export default {  

    }  
</script>  

<style>  

</style>

外部檔案引用方式變化

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

現在是es6的寫法，import引入外部的js模組(注意不是檔案)或css

以前

複製程式碼<script src="js/jquery-1.10.2.js" type="text/javascript"></script>  
<link href="css/bootstrap.css" rel="stylesheet" type="text/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.匯入元件（這步屬於傳統vue規範，但在uni-app的easycom下可以省略這步）  
    export default {  
        data() {  
            return {  

            }  
        },  
        components: {  
            uniBadge //2.註冊元件（這步屬於傳統vue規範，但在uni-app的easycom下可以省略這步）  
        }  
    }  
</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>元件。

上述的元件使用方式屬於傳統vue的概念。uni-app 2.7以後推出了更簡單的元件使用技術easycom，無需引用和註冊元件，直接在template區域使用元件即可。

元件/標籤的變化

以前是html標籤，比如<div>，現在是小程式元件，比如<view>。
那麼標籤和元件有什麼區別，不都是用尖括號包圍起來一段英文嗎？
其實標籤是老的概念，標籤屬於瀏覽器內建的東西。但元件，是可以自由擴充套件的。
類似你可以把一段js封裝成函式或模組，你也可以把一個ui控制元件封裝成一個元件。

uni-app參考小程式規範，提供了一批內建元件。

下為html標籤和uni-app內建元件的對映表：

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

除了內建元件，還有很多開源的擴充套件元件，把常用操作都進行封裝，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元素的屬性或值。

如下演示了一段程式碼，頁面中有個顯示的文字區和一個按鈕，點選按鈕後會修改文字區的值

複製程式碼<html>  
    <head>  
        <script type="text/javascript">  
            document.addEventListener("DOMContentLoaded",function () {  
                document.getElementById("spana").innerText="456"  
            })  
            function changetextvalue () {  
                document.getElementById("spana").innerText="789"  
            }  
        </script>  
    </head>  
    <body>  
        <span id="spana">123</span>  
        <button type="button" onclick="changetextvalue()">修改為789</button>  
    </body>  
</html>

現在的做法，是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>

注意上述程式碼中的 export default {} 裡的 data(): {return { }}。
在vue的設計中，這裡存放著頁面中需要繫結的資料，寫在data裡，才能被介面正確的繫結和渲染。
注意：uni-app的vue頁面是vue的單檔案元件規範，按照vue的定義只接受 function，必須用 return 包起來。

如果你學過小程式的資料繫結，但不瞭解vue，要注意：

  • 小程式的資料繫結參考了vue，但自己修改了一些。在uni-app中只支援標準的vue，不支援小程式的資料繫結語法
  • 小程式裡的setData在uni-app裡並不存在，因為vue是自動雙向資料繫結的。直接通過賦值方式修改資料，如果資料繫結到介面上，介面會自動更新渲染

從上述示例，還可看出事件的寫法變化。

  • 以前，元素的事件是用onxxx=""，裡面寫一段js或引用function的name，比如上述程式碼中的onclick="changetextvalue()"
  • 現在，需要在js的export default {} 裡的 methods: {} 裡寫一個方法，然後在元件中使用@click="changetextvalue()"

在js中，與data和methods平級的，如上述示例程式碼中的onload()，稱為生命週期。在普通vue頁面裡的生命週期叫頁面生命週期。在專案根目錄的app.vue檔案中的生命週期叫應用生命週期。
除了onload，還有onready等很多生命週期，具體見uni-app的生命週期

在高階用法裡，vue支援給元件設ref（引用標記），這類似於之前html中給一個dom元素設id，然後在js中也可以用this.$refs.xxx來獲取。如下：

複製程式碼<template>  
  <view>  
    <view ref="testview">11111</view>  
    <button @click="getTest">獲取test節點</button>  
  </view>  
</template>  

<script>  
export default {  
  methods: {  
    getTest() {  
      console.log(this.$refs.testview)  
    }  
  }  
};  
</script>
  • 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無法用於nvue/weex。如果想使用根據螢幕寬度自適應的單位，推薦使用rpx，全端支援。 尺寸單位文件

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

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

注意css裡背景圖和字型檔案，儘量不要大於40k，因為會影響效能。在小程式端，如果要大於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頁面中做。

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

  • 原來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和微信小程式的區別、比較

 

 

 

https://ask.dcloud.net.cn/article/35657 

相關推薦

uni-app----白話及入門

        傳統的h5只有1端，即瀏覽器。而uni-app可跨多端，雖仍屬前端，與傳統h5有不同。如果你對h5比較瞭解，可通過本文快速瞭解uni-app。

uni-app 頭部及底部導航

簡單記錄，方便複製，詳見官方文件 <!-- 底部導航 --> <!-- 手機上底部導航的邊框顏色可用十六進位制設定(電腦不生效) -->

Uni-app極速入門 - 第一個小程式

Uni-app 介紹 官網：https://www.dcloud.io/index.html uni-app是為js開發者提供的一個全端開發框架，可以開發一次編譯為web、App、小程式（微信/阿里/百度/位元組跳動/QQ）、快應用。

uni-app從安裝到解除安裝的入門教程

uni-app實現了一套程式碼，同時執行到多個平臺。支援iOS模擬器、Android模擬器、H5、微信開發者工具、支付寶小程式Studio、百度開發者工具、位元組跳動開發者工具

Uni-app從入門到實戰

前言 uni-app是一個使用vue.js開發跨平臺應用的前端框架，開發者只需要編寫一套程式碼，便可以釋出到IOS、Android和微信小程式等多個平臺。所以我打算學習下這個框架，快速瀏覽了一遍官網之後，在某課網買了一門uni-

uni-app開發經驗分享六：頁面跳轉及提示框

在我們開發的uni-app的過程中，頁面跳轉及提示框往往是我們做資料互動及結果反饋所要使用的功能，這裡分享下我收集的一些方法及看法。

uni-app開發經驗分享七： 有關列表資料下拉載入方法的解析及記錄

在使用uni.request獲取後臺資料時，我們往往碰到一個問題，列表的懶載入及資料實時更新，這裡記錄下我製作這類功能的方法。

uni-app學習日記day1-----安裝IDE、新建專案及目錄結構分析

uni-app作為近年異軍突起的前端框架，號稱相容10個平臺，一套程式碼多端執行。官方文件地址：https://uniapp.dcloud.io/ 聽起來十分的不錯，這樣可以大大減少公司和開發者的時間和金錢成本。因此很多的公司

uni-app入門（uni-app專案結構介紹、pages.json配置項列表）

一、uni-app專案結構 上一篇部落格咱們介紹瞭如何建立一個uni-app專案，專案建立完成後的目錄樣式如圖所示：

uni-app開發經驗分享十二： Android平臺應用啟動時讀寫手機儲存、訪問裝置資訊(如IMEI)等許可權策略及提示資訊

Android平臺從6.0（API23）開始系統對許可權的管理更加嚴格，所有涉及敏感許可權都需要使用者授權允許才能獲取。因此一些應用基礎業務邏輯需要的許可權會在應用啟動時申請，並引導使用者允許。

uni-app的搭建和入門使用2

技術標籤：小程式 uni-app的搭建和入門使用 十三.uni中的導航跳轉 1.宣告式導航 元件->導航->navigator navigator：只能跳轉到普通頁面（也就是非導航頁面） 如果要跳轉到tabbar頁面，需要設定open-type=“

uni-app 中使用微信小程式第三方 SDK 及資源彙總

獲取SDK 首先在高德開放平臺，註冊賬號並且申請相關的 key 等資訊；然後下載它的微信小程式版 SDK：微信小程式 SDK。https://lbs.amap.com/api/wx/download

【subNVue】uni-app手機除錯無法顯示地圖Map之外元件的問題及解決

問題描述 參照官網在<map>標籤裡巢狀使用<cover-view>，在瀏覽器除錯可以正常使用，但是在手機APP除錯時無法正常顯示，一頓百度之後找到原因是vue頁面的地圖會預設置位最頂層，甚至連導航欄都會覆蓋掉，

uni-app 蘋果內購支付及獲取蘋果支付成功資訊

先在頭部定義商品id 全部商品id (在蘋果商店申請的真實商品id) let iapChannel = null;

VSCode開發UNI-APP 配置教程及外掛

目錄寫在前面注意事項開發環境搭建開發配置注意事項寫在前面 uni-app 是一個使用 . 開發所有前端應用的框架，開發者編寫一套程式碼，可釋出到iOS、、H5、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應

用Vue CLI建立uni-app，擺脫HBuilder，npm命令列執行及釋出

除了 HBuilderX 視覺化介面，也可以使用 cli 腳手架，可以通過 vue-cli 建立 uni-app 專案。

Django1.11配合uni-app發起微信支付的實現

Django1.11配合uni-app發起微信支付！ 經過三天的斷斷續續的奮戰，我終於是幹動了微信支付。為了以後不忘記，現在來一篇教程，來來來，開幹！！！

Django+uni-app實現資料通訊中的請求跨域的示例程式碼

前後端分離的模式下，後端使用Django RestFramework，前端使用uni-app來進行APP的開發。

uni-app如何實現增量更新功能

都知道，很多APP都有增量更新功能，Uni APP也是在今年初，推出了增量更新功能，今天我們就來學習一波。 當然，很多應用市場為了防止開發者不經市場稽核許可，給使用者提供違法內容，對增量更新大多持排斥態度，特別是

uni-app 支援多端第三方地圖定位的方法

簡介 該方法支援跳轉第三方地圖並定位指定座標。 APP端跳轉至百度地圖（第三方軟體）；若無，則跳轉至高德地圖（第三方軟體）；若均無，則開啟騰訊地圖（uni自帶方法：uni.openLocation）