Uni-app + Vue3 頁面元件介紹

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。

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