當前位置：首頁 > 前端技术 > vue >内容正文

vue

白话uni-app 【也是html、vue、小程序的区别】

發布時間：2025/3/21 vue 46 豆豆

生活随笔收集整理的這篇文章主要介紹了白话uni-app 【也是html、vue、小程序的区别】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

傳統的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> </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內置組件的映射表：

div 改成?view
span、font 改成?text
a 改成?navigator
img 改成?image
input?僅僅是輸入框。原html規范中input不僅是輸入框，還有radio、checkbox、時間、日期、文件選擇功能。在uni-app和小程序規范中，input僅僅是輸入框。其他功能uni-app有單獨的組件或API：radio組件、checkbox組件、時間選擇、日期選擇、圖片選擇、視頻選擇、多媒體文件選擇(含圖片視頻)、通用文件選擇。
form、button、label、textarea、canvas、video?這些還在。
select 改成?picker
iframe 改成?web-view
ul、li沒有了，都用view替代。做列表一般使用uList組件
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是原生組件，層級高于其他組件。如需覆蓋原生組件，則需要使用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元素的屬性或值。

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

復制代碼<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有很多不同，如

alert,confirm 改成?uni.showmodel

ajax 改成?uni.request

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%哦。

總結

以上是生活随笔為你收集整理的白话uni-app 【也是html、vue、小程序的区别】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：元宇宙：Facebook正式改名为Met
下一篇：数字人民币解密：数字人民币的系统架构、产