白话uni-app 【也是html、vue、小程序的区别】
傳統(tǒng)的h5只有1端，即瀏覽器。而uni-app可跨多端，雖仍屬前端，與傳統(tǒng)h5有不同。
如果你對h5比較了解，可通過本文快速了解uni-app。
網(wǎng)絡模型的變化
以前網(wǎng)頁大多是b/s，服務端代碼混合在頁面里；
現(xiàn)在是c/s，前后端分離，通過js api(類似ajax的uni.request)獲取json數(shù)據(jù)，把數(shù)據(jù)綁定在界面上渲染。
文件類型變化
以前是.html文件，開發(fā)也是html，運行也是html。
現(xiàn)在是.vue文件，開發(fā)是vue，經(jīng)過編譯后，運行時已經(jīng)變成了js文件。
現(xiàn)代前端開發(fā)，很少直接使用HTML，基本都是開發(fā)、編譯、運行。所以uni-app有編譯器、運行時的概念。
文件內(nèi)代碼架構(gòu)的變化
以前一個html大節(jié)點，里面有script和style節(jié)點；
現(xiàn)在template是一級節(jié)點，用于寫tag組件，script和style是并列的一級節(jié)點，也就是有3個一級節(jié)點。
以前
復制代碼<!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)在。這個叫vue單文件組件規(guī)范sfc
復制代碼<template> <view> 注意必須有一個view，且只能有一個根view。所有內(nèi)容寫在這個view下面。 </view> </template> <script> export default { } </script> <style> </style>外部文件引用方式變化
以前通過script src、link href引入外部的js和css；
現(xiàn)在是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"/>現(xiàn)在
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); //調(diào)用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.來繼續(xù)執(zhí)行方法。在hello uni-app有示例css外部文件導入
復制代碼<style> @import "./common/uni.css"; .uni-hello-text{ color:#7A7E83; } </style>全局樣式，在根目錄下的app.vue里寫入，每個頁面都會加載app.vue里的樣式。
另外，vue支持組件導入，可以更方便的封裝一個包括界面、js、樣式的庫。
如下是導入一個角標的組件庫，在頁面上顯示一個abc并且右上角有個數(shù)字角標1，詳見
復制代碼<template> <view> <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用組件--> </view> </template> <script> import uniBadge from "../../../components/uni-badge.vue";//1.導入組件（這步屬于傳統(tǒng)vue規(guī)范，但在uni-app的easycom下可以省略這步） export default { data() { return { } }, components: { uniBadge //2.注冊組件（這步屬于傳統(tǒng)vue規(guī)范，但在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>組件。上述的組件使用方式屬于傳統(tǒng)vue的概念。uni-app 2.7以后推出了更簡單的組件使用技術easycom，無需引用和注冊組件，直接在template區(qū)域使用組件即可。
組件/標簽的變化
以前是html標簽，比如<div>，現(xiàn)在是小程序組件，比如<view>。
那么標簽和組件有什么區(qū)別，不都是用尖括號包圍起來一段英文嗎？
其實標簽是老的概念，標簽屬于瀏覽器內(nèi)置的東西。但組件，是可以自由擴展的。
類似你可以把一段js封裝成函數(shù)或模塊，你也可以把一個ui控件封裝成一個組件。
uni-app參考小程序規(guī)范，提供了一批內(nèi)置組件。
下為html標簽和uni-app內(nèi)置組件的映射表：
- div 改成?view
- span、font 改成?text
- a 改成?navigator
- img 改成?image
- input?僅僅是輸入框。 原h(huán)tml規(guī)范中input不僅是輸入框，還有radio、checkbox、時間、日期、文件選擇功能。在uni-app和小程序規(guī)范中，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編譯器會在編譯時把老標簽轉(zhuǎn)為新標簽，比如把div編譯成view。但不推薦這種用法，調(diào)試H5端時容易混亂。
除了改動外，新增了一批手機端常用的新組件
- scroll-view?可區(qū)域滾動視圖容器
- swiper?可滑動區(qū)域視圖容器
- icon?圖標
- rich-text?富文本（不可執(zhí)行js，但可渲染各種文字格式和圖片）
- progress?進度條
- slider?滑塊指示器
- switch?開關選擇器
- camera?相機
- live-player?直播
- map?地圖
-
cover-view?可覆蓋原生組件的視圖容器?
cover-view需要多強調(diào)幾句，uni-app的非h5端的video、map、canvas、textarea是原生組件，層級高于其他組件。如需覆蓋原生組件，則需要使用cover-view組件。詳見層級介紹
除了內(nèi)置組件，還有很多開源的擴展組件，把常用操作都進行封裝，DCloud建立了插件市場收錄這些擴展組件，詳見插件市場
js的變化
js的變化，分為運行環(huán)境變化、數(shù)據(jù)綁定模式變化、api變化3部分。
- 運行環(huán)境從瀏覽器變成v8引擎
標準js語法和api都支持，比如if、for、settimeout、indexOf等。
但瀏覽器專用的window、document、navigator、location對象，包括cookie等存儲，只有在瀏覽器中才有，app和小程序都不支持。
可能有些人以為js等于瀏覽器里的js。其實js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基于js規(guī)范補充了window、document、navigator、location等專用對象。
在uni-app的各個端中，除了h5端，其他端的js都運行在一個獨立的v8引擎下，不是在瀏覽器中，所以瀏覽器的對象無法使用。如果你做過小程序開發(fā)，對此應當很了解。
這意味著依賴document的很多HTML的庫，比如jqurey無法使用。
當然app和小程序支持web-view組件，里面可以加載標準HTML，這種頁面仍然支持瀏覽器專用對象window、document、navigator、location。
- 以前的dom操作，改成vue的MVVM模式
現(xiàn)在前端趨勢是去dom化，改用mvvm模式，更簡潔的寫法，大幅減少代碼行數(shù)，同時差量渲染性能更好。
uni-app使用vue的數(shù)據(jù)綁定方式解決js和dom界面交互的問題。
如果你想改變某個dom元素的顯示內(nèi)容，比如一個view的顯示文字：
以前是給view設id，然后js里通過選擇器獲取dom元素，進一步通過js進行賦值操作，修改dom元素的屬性或值。
如下演示了一段代碼，頁面中有個顯示的文字區(qū)和一個按鈕，點擊按鈕后會修改文字區(qū)的值
復制代碼<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的綁定模式，給這個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的設計中，這里存放著頁面中需要綁定的數(shù)據(jù)，寫在data里，才能被界面正確的綁定和渲染。
注意：uni-app的vue頁面是vue的單文件組件規(guī)范，按照vue的定義只接受 function，必須用 return 包起來。
如果你學過小程序的數(shù)據(jù)綁定，但不了解vue，要注意：
- 小程序的數(shù)據(jù)綁定參考了vue，但自己修改了一些。在uni-app中只支持標準的vue，不支持小程序的數(shù)據(jù)綁定語法
- 小程序里的setData在uni-app里并不存在，因為vue是自動雙向數(shù)據(jù)綁定的。直接通過賦值方式修改數(shù)據(jù)，如果數(shù)據(jù)綁定到界面上，界面會自動更新渲染
從上述示例，還可看出事件的寫法變化。
- 以前，元素的事件是用onxxx=""，里面寫一段js或引用function的name，比如上述代碼中的onclick="changetextvalue()"
- 現(xiàn)在，需要在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節(jié)點</button> </view> </template> <script> export default { methods: { getTest() { console.log(this.$refs.testview) } } }; </script>- js api的變化
因為uni-app的api是參考小程序的，所以和瀏覽器的js api有很多不同，如
uni-app的js api還有很多，但基本就是小程序的api，把wx.xxx改為uni.xxx即可。詳見
uni-app在不同的端，支持條件編譯，無限制的使用各端獨有的api，詳見條件編譯
css的變化
標準的css基本都是支持的。
選擇器有2個變化：*選擇器不支持；元素選擇器里沒有body，改為了page。微信小程序即是如此。
復制代碼page{ }單位方面，px無法動態(tài)適應不同寬度的屏幕，rem無法用于nvue/weex。如果想使用根據(jù)屏幕寬度自適應的單位，推薦使用rpx，全端支持。?尺寸單位文檔
uni-app推薦使用flex布局，這個布局思路和傳統(tǒng)流式布局有點區(qū)別。但flex的特色在于，不管是什么技術都支持這種排版，web、小程序/快應用、weex/rn、原生的iOS、Android開發(fā)，全都支持flex。它是通吃所有端的新一代布局方案。相關教程請自行百度學習。
uni-app的vue文件里支持所有web排版方式，不管是流式還是flex。但nvue里，只支持flex，因為它在app端是使用原生排版引擎渲染的。
注意css里背景圖和字體文件，盡量不要大于40k，因為會影響性能。在小程序端，如果要大于40k，需放到服務器側(cè)遠程引用或base64后引入，不能放到本地作為獨立文件引用。
工程結(jié)構(gòu)和頁面管理
uni-app的工程結(jié)構(gòu)有單獨的要求，詳見
每個可顯示的頁面，都必須在?pages.json?中注冊。如果你開發(fā)過小程序，那么pages.json類似app.json。如果你熟悉vue，這里沒有vue的路由，都是在pages.json里管理。
原來工程的首頁一般是index.html或default.html，是在web server里配的。而uni-app的首頁，是在pages.json里配的，page節(jié)點下第一個頁面就是首頁。一般在/pages/xx的目錄下。
app和小程序中，為了提升體驗，頁面提供了原生的導航欄和底部tabbar，注意這些配置是在pages.json中做，而不是在vue頁面里創(chuàng)建，但點擊事件的監(jiān)聽在顯示的vue頁面中做。
如果你熟悉小程序開發(fā)的話，對比變化如下：
- 原來app.json被一拆為二。頁面管理，被挪入了uni-app的pages.json；非頁面管理，挪入了manifest.json
- 原來的app.js和app.wxss被合并到了app.vue中
結(jié)語
最后，本文并非uni-app的完整教程，了解掌握uni-app，還需要認真過一遍uni-app的文檔。
掌握好vue，也仍需要進一步去vue官網(wǎng)學習。或通過uni-app專業(yè)視頻培訓課程，連同vue帶uni-app一起學會。
根據(jù)騰訊課堂和職友集的數(shù)據(jù)，會vue的人，比不會vue的普通前端薪資高27%哦。
總結(jié)
以上是生活随笔為你收集整理的白话uni-app 【也是html、vue、小程序的区别】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 元宇宙：Facebook正式改名为Met
- 下一篇： vue项目构建