uni-app 項目中，頁面有兩種：.vue 和 .nvue 文件。兩者差異在于 .vue 文件使用 webview 進行渲染，.nvue 會使用原生進行渲染。

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

頁面文件為實現多端兼容，綜合編譯速度、運行性能等因素，依舊遵循 vue 單文件組件規范。

組件特點：

• 組件是視圖層的基本組成單元。
• 組件是一個單獨且可復用的功能模塊的封裝。

每個組件，包括如下幾個部分：以組件名稱為標記的開始標簽和結束標簽、組件內容、組件屬性、組件屬性值。

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

uni-app 支持的組件分為：

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

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

什么是 vue SFC 規范？

我們開發的時候創建的 .vue 文件，用于表示一個單一組件。SFC 的全拼為 Single-File-Components，翻譯為中文就是單文件組件。

一個完整的單文件組件，頂級標簽有 template、script、style，還可以允許添加可選的自定義塊：

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

vue-loader 會解析文件，提取每個語言塊。能夠支持使用非默認語言，如 css 預處理器，通過設置語言塊的 lang 屬性，如：

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

Vue3 一大特點：能夠更好地支持 typeScript ，因此：

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

setup 是 vue3 的語法糖，使用 setup 可以自動導出定義的變量和方法。

模板<template>

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

腳本<script>

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

樣式<style>

• 默認匹配的是 .css ，也可以通過 lang 指定擴展類型 。
• 一個 .vue 文件可以包含多個 style 標簽，可以設置不同的 lang 屬性。
• style 標簽可以有 scoped 或 module 屬性。

自定義塊

可以在 .vue 文件中添加額外的自定義塊來實現項目的特定需求，例如 <docs> 塊。vue-loader 將會使用標簽名來查找對應的 webpack loader 來應用在對應地塊上。webpack loader 需要在 vue-loader 的選項 loaders 中指定。

小程序組件有哪些？

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

前端同學基本沒有沒開發過小程序的，簡單介紹下，就不詳細介紹具體用法了。