當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發(fā)布時(shí)間：2025/3/21 vue 50 豆豆

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

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

網(wǎng)絡(luò)模型的變化

以前網(wǎng)頁大多是b/s，服務(wù)端代碼混合在頁面里；

現(xiàn)在是c/s，前后端分離，通過js api(類似ajax的uni.request)獲取json數(shù)據(jù)，把數(shù)據(jù)綁定在界面上渲染。

文件類型變化

以前是.html文件，開發(fā)也是html，運(yùn)行也是html。
現(xiàn)在是.vue文件，開發(fā)是vue，經(jīng)過編譯后，運(yùn)行時(shí)已經(jīng)變成了js文件。
現(xiàn)代前端開發(fā)，很少直接使用HTML，基本都是開發(fā)、編譯、運(yùn)行。所以uni-app有編譯器、運(yùn)行時(shí)的概念。

文件內(nèi)代碼架構(gòu)的變化

以前一個(gè)html大節(jié)點(diǎn)，里面有script和style節(jié)點(diǎn)；

現(xiàn)在template是一級節(jié)點(diǎn)，用于寫tag組件，script和style是并列的一級節(jié)點(diǎn)，也就是有3個(gè)一級節(jié)點(diǎn)。

以前

復(fù)制代碼<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> </script> <style type="text/css"> </style> </head> <body> </body> </html>

現(xiàn)在。這個(gè)叫vue單文件組件規(guī)范sfc

復(fù)制代碼<template> <view> 注意必須有一個(gè)view，且只能有一個(gè)根view。所有內(nèi)容寫在這個(gè)view下面。 </view> </template> <script> export default { } </script> <style> </style>

外部文件引用方式變化

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

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

以前

復(fù)制代碼<script src="js/jquery-1.10.2.js" type="text/javascript"></script> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

現(xiàn)在

js要require進(jìn)來，變成了對象。

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

復(fù)制代碼<script> var util = require('../../../common/util.js'); //require這個(gè)js模塊 var formatedPlayTime = util.formatTime(playTime); //調(diào)用js模塊的方法 </script>

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

復(fù)制代碼function formatTime(time) { return time;//這里沒寫邏輯 } module.exports = { formatTime: formatTime }

當(dāng)然還有一些高級的用法

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

css外部文件導(dǎo)入

復(fù)制代碼<style> @import "./common/uni.css"; .uni-hello-text{ color:#7A7E83; } </style>

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

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

如下是導(dǎo)入一個(gè)角標(biāo)的組件庫，在頁面上顯示一個(gè)abc并且右上角有個(gè)數(shù)字角標(biāo)1，詳見

復(fù)制代碼<template> <view> <uni-badge text="abc" :inverted="true"></uni-badge> </view> </template> <script> import uniBadge from "../../../components/uni-badge.vue";//1.導(dǎo)入組件（這步屬于傳統(tǒng)vue規(guī)范，但在uni-app的easycom下可以省略這步） export default { data() { return { } }, components: { uniBadge //2.注冊組件（這步屬于傳統(tǒng)vue規(guī)范，但在uni-app的easycom下可以省略這步） } } </script>

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

復(fù)制代碼//main.js import pageHead from './components/page-head.vue' //導(dǎo)入 Vue.component('page-head', pageHead) //注冊。注冊后在每個(gè)vue的page頁面里可以直接使用<page-head></page-head>組件。

上述的組件使用方式屬于傳統(tǒng)vue的概念。uni-app 2.7以后推出了更簡單的組件使用技術(shù)easycom，無需引用和注冊組件，直接在template區(qū)域使用組件即可。

組件/標(biāo)簽的變化

以前是html標(biāo)簽，比如<div>，現(xiàn)在是小程序組件，比如<view>。
那么標(biāo)簽和組件有什么區(qū)別，不都是用尖括號(hào)包圍起來一段英文嗎？
其實(shí)標(biāo)簽是老的概念，標(biāo)簽屬于瀏覽器內(nèi)置的東西。但組件，是可以自由擴(kuò)展的。
類似你可以把一段js封裝成函數(shù)或模塊，你也可以把一個(gè)ui控件封裝成一個(gè)組件。

uni-app參考小程序規(guī)范，提供了一批內(nèi)置組件。

下為html標(biāo)簽和uni-app內(nèi)置組件的映射表：

div 改成?view
span、font 改成?text
a 改成?navigator
img 改成?image
input?僅僅是輸入框。原h(huán)tml規(guī)范中input不僅是輸入框，還有radio、checkbox、時(shí)間、日期、文件選擇功能。在uni-app和小程序規(guī)范中，input僅僅是輸入框。其他功能uni-app有單獨(dú)的組件或API：radio組件、checkbox組件、時(shí)間選擇、日期選擇、圖片選擇、視頻選擇、多媒體文件選擇(含圖片視頻)、通用文件選擇。
form、button、label、textarea、canvas、video?這些還在。
select 改成?picker
iframe 改成?web-view
ul、li沒有了，都用view替代。做列表一般使用uList組件
audio 不再推薦使用，改成api方式，背景音頻api文檔
其實(shí)老的HTML標(biāo)簽也可以在uni-app里使用，uni-app編譯器會(huì)在編譯時(shí)把老標(biāo)簽轉(zhuǎn)為新標(biāo)簽，比如把div編譯成view。但不推薦這種用法，調(diào)試H5端時(shí)容易混亂。

除了改動(dòng)外，新增了一批手機(jī)端常用的新組件

scroll-view?可區(qū)域滾動(dòng)視圖容器
swiper?可滑動(dòng)區(qū)域視圖容器
icon?圖標(biāo)
rich-text?富文本（不可執(zhí)行js，但可渲染各種文字格式和圖片）
progress?進(jìn)度條
slider?滑塊指示器
switch?開關(guān)選擇器
camera?相機(jī)
live-player?直播
map?地圖
cover-view?可覆蓋原生組件的視圖容器?

cover-view需要多強(qiáng)調(diào)幾句，uni-app的非h5端的video、map、canvas、textarea是原生組件，層級高于其他組件。如需覆蓋原生組件，則需要使用cover-view組件。詳見層級介紹

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

js的變化

js的變化，分為運(yùn)行環(huán)境變化、數(shù)據(jù)綁定模式變化、api變化3部分。

運(yùn)行環(huán)境從瀏覽器變成v8引擎

標(biāo)準(zhǔn)js語法和api都支持，比如if、for、settimeout、indexOf等。

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

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

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

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

當(dāng)然app和小程序支持web-view組件，里面可以加載標(biāo)準(zhǔn)HTML，這種頁面仍然支持瀏覽器專用對象window、document、navigator、location。

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

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

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

如果你想改變某個(gè)dom元素的顯示內(nèi)容，比如一個(gè)view的顯示文字：

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

如下演示了一段代碼，頁面中有個(gè)顯示的文字區(qū)和一個(gè)按鈕，點(diǎn)擊按鈕后會(huì)修改文字區(qū)的值

復(fù)制代碼<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>

現(xiàn)在的做法，是vue的綁定模式，給這個(gè)dom元素綁定一個(gè)js變量，在script中修改js變量的值，dom會(huì)自動(dòng)變化，頁面會(huì)自動(dòng)更新渲染

復(fù)制代碼<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的值，其實(shí)123都來不及顯示就變成了456 }, methods: { changetextvalue() { this.textvalue="789"//這里修改textvalue的值，頁面自動(dòng)刷新為789 } } } </script>

注意上述代碼中的?export default {}?里的?data(): {return { }}。
在vue的設(shè)計(jì)中，這里存放著頁面中需要綁定的數(shù)據(jù)，寫在data里，才能被界面正確的綁定和渲染。
注意：uni-app的vue頁面是vue的單文件組件規(guī)范，按照vue的定義只接受 function，必須用 return 包起來。

如果你學(xué)過小程序的數(shù)據(jù)綁定，但不了解vue，要注意：

小程序的數(shù)據(jù)綁定參考了vue，但自己修改了一些。在uni-app中只支持標(biāo)準(zhǔn)的vue，不支持小程序的數(shù)據(jù)綁定語法
小程序里的setData在uni-app里并不存在，因?yàn)関ue是自動(dòng)雙向數(shù)據(jù)綁定的。直接通過賦值方式修改數(shù)據(jù)，如果數(shù)據(jù)綁定到界面上，界面會(huì)自動(dòng)更新渲染

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

以前，元素的事件是用onxxx=""，里面寫一段js或引用function的name，比如上述代碼中的onclick="changetextvalue()"
現(xiàn)在，需要在js的export default {}?里的?methods: {}?里寫一個(gè)方法，然后在組件中使用@click="changetextvalue()"

在js中，與data和methods平級的，如上述示例代碼中的onload()，稱為生命周期。在普通vue頁面里的生命周期叫頁面生命周期。在項(xiàng)目根目錄的app.vue文件中的生命周期叫應(yīng)用生命周期。
除了onload，還有onready等很多生命周期，具體見uni-app的生命周期

在高級用法里，vue支持給組件設(shè)ref（引用標(biāo)記），這類似于之前html中給一個(gè)dom元素設(shè)id，然后在js中也可以用this.$refs.xxx來獲取。如下：

復(fù)制代碼<template> <view> <view ref="testview">11111</view> <button @click="getTest">獲取test節(jié)點(diǎn)</button> </view> </template> <script> export default { methods: { getTest() { console.log(this.$refs.testview) } } }; </script>

js api的變化

因?yàn)閡ni-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在不同的端，支持條件編譯，無限制的使用各端獨(dú)有的api，詳見條件編譯

css的變化

標(biāo)準(zhǔn)的css基本都是支持的。

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

復(fù)制代碼page{ }

單位方面，px無法動(dòng)態(tài)適應(yīng)不同寬度的屏幕，rem無法用于nvue/weex。如果想使用根據(jù)屏幕寬度自適應(yīng)的單位，推薦使用rpx，全端支持。?尺寸單位文檔

uni-app推薦使用flex布局，這個(gè)布局思路和傳統(tǒng)流式布局有點(diǎn)區(qū)別。但flex的特色在于，不管是什么技術(shù)都支持這種排版，web、小程序/快應(yīng)用、weex/rn、原生的iOS、Android開發(fā)，全都支持flex。它是通吃所有端的新一代布局方案。相關(guān)教程請自行百度學(xué)習(xí)。

uni-app的vue文件里支持所有web排版方式，不管是流式還是flex。但nvue里，只支持flex，因?yàn)樗赼pp端是使用原生排版引擎渲染的。

注意css里背景圖和字體文件，盡量不要大于40k，因?yàn)闀?huì)影響性能。在小程序端，如果要大于40k，需放到服務(wù)器側(cè)遠(yuǎn)程引用或base64后引入，不能放到本地作為獨(dú)立文件引用。

工程結(jié)構(gòu)和頁面管理

uni-app的工程結(jié)構(gòu)有單獨(dú)的要求，詳見

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

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

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

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

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

結(jié)語

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

掌握好vue，也仍需要進(jìn)一步去vue官網(wǎng)學(xué)習(xí)。或通過uni-app專業(yè)視頻培訓(xùn)課程，連同vue帶uni-app一起學(xué)會(huì)。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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