uni-app 項(xiàng)目中，頁面有兩種：.vue 和 .nvue 文件。兩者差異在于 .vue 文件使用 webview 進(jìn)行渲染，.nvue 會(huì)使用原生進(jìn)行渲染。

一個(gè)頁面就是一個(gè)符合 vue 的單文件組件(SFC)規(guī)范的 .vue 或 .nvue 文件。

頁面文件為實(shí)現(xiàn)多端兼容，綜合編譯速度、運(yùn)行性能等因素，依舊遵循 vue 單文件組件規(guī)范。

組件特點(diǎn)：

• 組件是視圖層的基本組成單元。
• 組件是一個(gè)單獨(dú)且可復(fù)用的功能模塊的封裝。

每個(gè)組件，包括如下幾個(gè)部分：以組件名稱為標(biāo)記的開始標(biāo)簽和結(jié)束標(biāo)簽、組件內(nèi)容、組件屬性、組件屬性值。

• 組件名稱由尖括號(hào)包裹，稱為標(biāo)簽，它有開始標(biāo)簽和結(jié)束標(biāo)簽。結(jié)束標(biāo)簽的<后面用/來表示結(jié)束。結(jié)束標(biāo)簽也稱為閉合標(biāo)簽。如下面示例的<component-name>是開始標(biāo)簽，</component-name>是結(jié)束標(biāo)簽。
• 在開始標(biāo)簽和結(jié)束標(biāo)簽之間，稱為組件內(nèi)容。如下面示例的content。
• 開始標(biāo)簽上可以寫屬性，屬性可以有多個(gè)，多個(gè)屬性之間用空格分割。如下面示例的property1和property2。注意閉合標(biāo)簽上不能寫屬性。
• 每個(gè)屬性通過=賦值。如下面的示例中，屬性property1的值被設(shè)為字符串value。

uni-app 支持的組件分為：

1. vue 組件。支持 vue SFC 規(guī)范。
2. 小程序自定義組件。組件規(guī)范不是 vue 規(guī)范，而是小程序規(guī)范。

日常開發(fā)來講，推薦使用vue組件。uni-app支持小程序組件主要是為了兼容更多生態(tài)資源。

什么是 vue SFC 規(guī)范？

我們開發(fā)的時(shí)候創(chuàng)建的 .vue 文件，用于表示一個(gè)單一組件。SFC 的全拼為 Single-File-Components，翻譯為中文就是單文件組件。

一個(gè)完整的單文件組件，頂級(jí)標(biāo)簽有 template、script、style，還可以允許添加可選的自定義塊：

<template>  <view class="content">    組件內(nèi)容  </view></template><script setup lang="ts">import { ref } from 'vue'const title = ref('Hello')</script><style>/* 樣式設(shè)置 */</style><custom1>  This could be e.g. documentation for the component.</custom1>

vue-loader 會(huì)解析文件，提取每個(gè)語言塊。能夠支持使用非默認(rèn)語言，如 css 預(yù)處理器，通過設(shè)置語言塊的 lang 屬性，如：

<style lang="sass">  /* write Sass! */</style>

Vue3 一大特點(diǎn)：能夠更好地支持 typeScript ，因此：

<script setup lang="ts">import { ref } from 'vue'const title = ref('Hello')</script>

setup 是 vue3 的語法糖，使用 setup 可以自動(dòng)導(dǎo)出定義的變量和方法。

模板<template>

• template 里面包含該組件的 html 結(jié)構(gòu)，可以在該組件內(nèi)使用其他組件，如果使用 setup 語法糖，導(dǎo)入的組件無需注冊(cè)可以直接使用，如果不使用 setup 語法糖，就需要在 components 內(nèi)注冊(cè)組件。
• 每個(gè) .vue 只能有一個(gè)匿名的 template 標(biāo)簽，插槽處使用的 template 需要加 v-slot 。
• 不同于 vue2 template 標(biāo)簽內(nèi)可以放多個(gè)根標(biāo)簽。

腳本<script>

• 不同于 vue2 ，每個(gè) .vue 文件，可以有多個(gè) script ，但是必須保證使用語法一致，不可以一個(gè) js，一個(gè)是 ts 。
• vue3 中可以使用選項(xiàng)式 API，也可以使用組合式 API 。
• vue3 新增 setup 語法糖，可以大大簡化代碼。

樣式<style>

• 默認(rèn)匹配的是 .css ，也可以通過 lang 指定擴(kuò)展類型 。
• 一個(gè) .vue 文件可以包含多個(gè) style 標(biāo)簽，可以設(shè)置不同的 lang 屬性。
• style 標(biāo)簽可以有 scoped 或 module 屬性。

自定義塊

可以在 .vue 文件中添加額外的自定義塊來實(shí)現(xiàn)項(xiàng)目的特定需求，例如 <docs> 塊。vue-loader 將會(huì)使用標(biāo)簽名來查找對(duì)應(yīng)的 webpack loader 來應(yīng)用在對(duì)應(yīng)地塊上。webpack loader 需要在 vue-loader 的選項(xiàng) loaders 中指定。

小程序組件有哪些？

• 視圖容器：view、scroll-view、swiper、match-media、cover-image 等。
• 基礎(chǔ)內(nèi)容：icon、text、rich-text、progress。
• 表單組件：button、checkbox、editor、from、input、picker、switch、textarea、label、radio等。
• 頁面路由跳轉(zhuǎn)：navigator。
• 媒體組件：audio、camera、image、video、live-player、live-pusher。
• 地圖組件：map。
• 畫布：canvas。
• webview ：web-view。
• 廣告：ad、ad-draw。
• 頁面屬性配置：custom-tab-bar、navigation-bar、page-meta。

前端同學(xué)基本沒有沒開發(fā)過小程序的，簡單介紹下，就不詳細(xì)介紹具體用法了。