uni-app學習筆記（一）-官方文檔的學習路線

資料觀看順序（在比較中學習）：

　　1.什么是uniapp（https://uniapp.dcloud.io/）

　　2.如何學習uniapp（https://uniapp.dcloud.io/resource）

　　3.快速上手（https://uniapp.dcloud.io/quickstart）

　　4.白話uni-app【html、vue、小程序的區別】（https://ask.dcloud.net.cn/article/35657）與《微信小程序轉換uni-app詳細指南》

　　5.VUE學習筆記（一）——開發環境安裝與部署項目與VUE學習筆記（二）——目錄介紹

　　6.條件編譯-解決各端差異（https://uniapp.dcloud.io/platform）

　　7.觀看《uni-app官方教程》。

　　8.看完uniapp官網的《框架介紹》、《組件概述》（先看常用的）、《API概述》（先大體了解）、《生命周期》、《路由（navigator組件、uni.navigateTo(OBJECT)API）》《uniapp跨端開發注意》、《案例》（包括案例頁和HBuilderX中的模板項目）

　　9.然后就是刷幾個三方培訓機構視頻+Vue官網的視頻。

　　10.現在就可以上手大部分項目了，邊做項目邊學完《組件概述》、《API概述》。

　　注意：uni-app 使用vue的語法+小程序的標簽和API，HBuilder X創建項目中包含了大量可供學習或使用的模板框架。

 

一，uniapp目錄結構

┌─uniCloud              雲空間目錄，阿里雲為uniCloud-aliyun,騰訊雲為uniCloud-tcb（詳見uniCloud） │─components 符合vue組件規范的uni-app組件目錄 │ └─comp-a.vue 可復用的a組件 ├─hybrid App端存放本地html文件的目錄，詳見 ├─platforms 存放各平台專用頁面的目錄，詳見 ├─pages 業務頁面文件存放的目錄 │ ├─index │ │ └─index.vue index頁面 │ └─list │ └─list.vue list頁面 ├─static                存放應用引用的本地靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放於此,static目錄下的文件均會被完整打包進去，且不會編譯（es6代碼不要放這里了，css和less/scss等文件建議放到自建的common文件夾下）。非static目錄下的文件（vue、js、css 等）只有被引用到才會被打包編譯進去。 ├─uni_modules 存放[uni_module](/uni_modules)規范的插件。 ├─wxcomponents 存放小程序組件的目錄，詳見 ├─main.js Vue初始化入口文件 ├─App.vue 應用配置，用來配置App全局樣式以及監聽 應用生命周期 ├─manifest.json 配置應用名稱、appid、logo、版本等打包信息，詳見 ├─pages.json 配置頁面路由、導航條、選項卡等頁面類信息，詳見 └─uni.scss 這里是uni-app內置的常用樣式變量 

 

二，使用到的工具

　　HBuilderX、微信小程序開發工具（實時調試用，初步上手階段比瀏覽器好用點）、谷歌瀏覽器、手機模擬器（逍遙、夜神、藍疊）。

 

三，.Vue文件介紹

　　一般包含 <template>、<script> 和 <style>,可以自定義標簽和使用sass語法

　　<template>：html標簽;vue標簽與html標簽是有區別的（h1,h2、div還是支持的），詳細見：html標簽和uni-app內置組件的映射表。

　　<script>：javascript，同html文件的用法;

　　<style>:樣式，同html文件的用法;

<template>  /* 最多有一個template */
  <view class="example">{{ msg }}</view>
</template>

 5 <script> /* 最多有一個script*/ 6 export default { 7 data () { 8 return { 9 msg: 'Hello world!' 10 } 11 } 12 } 13 </script>

15 <style> /* 可以有多個style */ 16 .example { 17 color: red; 18 } 19 </style>

21 <custom1> /* 自定義標簽 */ 22 This could be e.g. documentation for the component. 23 </custom1>

　　同樣vue支持把資源放到外面，使用和html一樣的相對路徑引用（相對路徑或者絕對路徑）。

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
或者css樣式部分導入
<style>
 @import "../../common/uni.css";
 .uni-card { box-shadow: none; }
</style>

　　也支持內聯樣式寫法：

<view :style="{color:color}" />

 　　補充：uni-app支持的css選擇器

 

四，Vue組件的引用

　　Vue支持引用Vue組件，使用一般分3步（創建、引用、注冊、使用）。

1.創建子Vue組件(一般放在component目錄中)，比如上面‘三’中的樣子；

　　比如創建了父組件Fvue.vue和子組件Cvue.vue

2.引用，在父組件中使用import的方式引用子組件（<script></script>標簽中），如下：

import cvue from './component/Cvue.vue'

3.注冊，在父組件的<script></script>標簽內的 data 代碼塊后面加上 components: { cvue }

export default { 2  data () { 3     return { 4   　　　　　　
 } 6  }, 7  components: {cvue } 
}

4.使用，通過上面的步驟就可以在父組件中直接使用cvue標簽了：

<template>
  <view id="app">
    <image src="@/static/logo.png">
    <text>{{ title }}</text>
    <cvue></cvue>
  </view>
</template>

補充1-全局引用（就是把上面寫在父組件的<script></script>標簽中的放到main.js中，寫法還是有點不一樣的）：

　　①參照上面創建子組件

　　②在工程根目錄的main.js中添加代碼（引用、注冊），如下：

　　import ffvue './components/FFvue.vue' 　　Vue.component('f-fvue',ffvue)

　　③使用，在該項目任何vue組件中都可以通過<f-fvue/>標簽引用

<template>
    <view>
        <f-fvue></f-fvue>
    </view>
</template>

補充2-傳值：

　　見：uniapp、Vue組件的使用-引用子組件、傳值。

 

五，資源的那些事

template內引入靜態資源，如image、video等標簽的src屬性時，可以使用相對路徑或者絕對路徑，形式如下

<!-- 絕對路徑，/static指根目錄下的static目錄，在cli項目中/static指src目錄下的static目錄 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
background-image: url(/static/logo.png);

<!-- 相對路徑 --> <image class="logo" src="../../static/logo.png"></image>
@import url('../../common/uni.css');

注意

• @開頭的絕對路徑以及相對路徑會經過base64轉換規則校驗
• 引入的靜態資源在非h5平台，均不轉為base64。
• H5平台，小於4kb的資源會被轉換成base64，其余不轉。
• 不支持本地圖片的平台，小於40kb，一定會轉base64。（共四個平台mp-weixin, mp-qq, mp-toutiao, app v2）
• App平台自HBuilderX 2.6.9起template節點中引用靜態資源文件時（如：圖片），調整查找策略為【基於當前文件的路徑搜索】，與其他平台保持一致。
• 支付寶小程序組件內 image 標簽不可使用相對路徑。
• js文件不支持使用/開頭的方式引入

補充：①uni-app static目錄的條件編譯（專有目錄下的靜態資源只有在特定平台才會編譯進去）

　　　②uni-app 不同平台使用不同的Vue組件（存放適用於特定平台的Vue組件目錄，也是條件編譯，見uni-app判斷運行的平台 ）

 

六，生命周期

　　生命周期包含應用生命周期和頁面生命周期、組件生命周期。

1.應用生命周期：

　　①onLaunch：當uni-app 初始化完成時觸發（全局只觸發一次）

　　②onShow：當 uni-app 啟動，或從后台進入前台顯示

　　③onHide：當 uni-app 從前台進入后台

　　④onError：當 uni-app 報錯時觸發

　　⑤onUniNViewMessage：對 nvue 頁面發送的數據進行監聽，可參考 nvue 向 vue 通訊

　　⑥onUnhandledRejection：對未處理的 Promise 拒絕事件監聽函數（2.8.1+）

　　⑦onPageNotFound：頁面不存在監聽函數（頁面實際上已經打開了（比如通過分享卡片、小程序碼）且發現頁面不存在，才會觸發，api 跳轉不存在的頁面不會觸發，如 uni.navigateTo）

　　⑧onThemeChange：監聽系統主題變化

2.頁面生命周期：

　　①onInit：百度小程序特有的，監聽頁面初始化時；

　　②onLoad：監聽頁面加載時；

　　③onShow：監聽頁面顯示時；

　　④onReady：監聽頁面初次渲染完成；

　　⑤onHide:監聽頁面隱藏；

　　⑥onUnload:監聽頁面卸載；

　　⑦onResize:App、微信小程序監聽頁面尺寸變化；

　　⑧onPullDownRefresh:頁面下拉（刷新）事件；

　　⑨onReachBottom:頁面上滑觸底事件；

　　⑩onTabltemTap:點擊 tab 時觸發的事件，微信小程序、QQ小程序、支付寶小程序、百度小程序、H5、App；

　　⑪onShareAppMessage：用戶點擊右上角分享，微信小程序、QQ小程序、支付寶小程序、字節小程序、飛書小程序、快手小程序；

　　⑫onPageScroll：監聽頁面滾動，nvue暫不支持；

　　⑬onNavigationBarButtonTap：監聽原生標題欄按鈕點擊事件，App、H5；

　　⑭onBackPress：監聽頁面返回，app、H5、支付寶小程序，支付寶小程序有點特殊使用見官網文檔；

　　⑮onNavigationBarSearchInputChanged：監聽原生標題欄搜索輸入框輸入內容變化事件；App、H5

　　⑯onNavigationBarSearchInputConfirmed：監聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的“搜索”按鈕時觸發，App、H5

　　⑰onNavigationBarSearchInputClicked：監聽原生標題欄搜索輸入框點擊事件（pages.json 中的 searchInput 配置 disabled 為 true 時才會觸發），App、H5；

　　⑱onShareTimeline：監聽用戶點擊右上角轉發到朋友圈，微信小程序；

　　⑲onAddToFavorites：監聽用戶點擊右上角收藏，微信小程序；

3.組件（控件）生命周期：

　　①beforeCreate：在實例化完成前

　　②created：在實例化完成后

　　③beforeMount：在掛載開始前

　　④mounted：在掛載完成后

　　⑤beforeUpdate：數據更新時的虛擬Dom渲染和打補丁之前

　　⑥updated：數據更新時虛擬Dom渲染和打補丁之后

　　⑦beforeDestroy：Vue組件示例銷毀前

　　⑧destroyed：Vue組件示例銷毀后

七，路由

1.路由跳轉（看navigator和uni.navigatorTo()兩種方法的介紹）

　　支持navigator、API跳轉，也可以通過在插件市場安裝Vue Router插件來實現Vue Router跳轉。

2.頁面棧（常用的路由方法）

路由方式	頁面棧表現	觸發時機
初始化	新頁面入棧	uni-app 打開的第一個頁面
打開新頁面	新頁面入棧	調用 API   uni.navigateTo  、使用組件  <navigator open-type="navigate"/>
頁面重定向	當前頁面出棧，新頁面入棧	調用 API   uni.redirectTo  、使用組件  <navigator open-type="redirectTo"/>
頁面返回	頁面不斷出棧，直到目標返回頁	調用 API  uni.navigateBack   、使用組件 <navigator open-type="navigateBack"/> 、用戶按左上角返回按鈕、安卓用戶點擊物理back按鍵
Tab 切換	頁面全部出棧，只留下新的 Tab 頁面	調用 API  uni.switchTab  、使用組件  <navigator open-type="switchTab"/>  、用戶切換 Tab
重加載	頁面全部出棧，只留下新的頁面	調用 API  uni.reLaunch  、使用組件  <navigator open-type="reLaunch"/>

 

八、條件編譯

　　見：uni-app開發環境和生產環境的判斷

 

九、判斷運行平台

　　見：uni-app判斷運行的平台

 

十，頁面樣式與布局

　　1.全局css樣式：

　　　　定義在 App.vue 中的樣式為全局樣式，作用於每個頁面，各個頁面可重寫該樣式對其覆蓋。

　　注：nvue頁面暫不支持全局樣式

　　2.uni-app的內置CSS變量（狀態欄、導航欄、底部選項卡的一些樣式改變用到的變量）

CSS變量	描述	App	小程序	H5
--status-bar-height	系統狀態欄高度	系統狀態欄高度、nvue注意見下	25px	0
--window-top	內容區域距離頂部的距離	0	0	NavigationBar 的高度
--window-bottom	內容區域距離底部的距離	0	0	TabBar 的高度

　　①注意：

• var(--status-bar-height) 此變量在微信小程序環境為固定 25px，在 App 里為手機實際狀態欄高度。
• 當設置 "navigationStyle":"custom" 取消原生導航欄后，由於窗體為沉浸式，占據了狀態欄位置。此時可以使用一個高度為 var(--status-bar-height) 的 view 放在頁面頂部，避免頁面內容出現在狀態欄。
• 由於在H5端，不存在原生導航欄和tabbar，也是前端div模擬。如果設置了一個固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端會與tabbar重疊。此時可使用--window-bottom，不管在哪個端，都是固定在tabbar上方。
• 目前 nvue 在App端，還不支持 --status-bar-height變量，替代方案是在頁面onLoad時通過uni.getSystemInfoSync().statusBarHeight獲取狀態欄高度，然后通過style綁定方式給占位view設定高度。

　　②下面是提供的示例代碼

　　　　快速書寫css變量的方法是：在css中敲hei，在候選助手中即可看到3個css變量。（HBuilderX 1.9.6以上支持）

　　　　示例1 - 普通頁面使用css變量：

<template>
    <!-- HBuilderX 2.6.3+ 新增 page-meta, 詳情：https://uniapp.dcloud.io/component/page-meta -->
    <page-meta>
        <navigation-bar />
    </page-meta>
    <view>
        <view class="status_bar">
            <!-- 這里是狀態欄 -->
        </view>
        <view> 狀態欄下的文字 </view>
    </view>
</template>    
<style> .status_bar { height: var(--status-bar-height); width: 100%; } </style>

<template>
    <view>
        <view class="toTop">
            <!-- 這里可以放一個向上箭頭，它距離底部tabbar上浮10px-->
        </view>
    </view>
</template>    
<style> .toTop { bottom: calc(var(--window-bottom) + 10px) } </style>

　　　　示例2 - nvue頁面獲取狀態欄高度：

<template>
    <view class="content">
        <view :style="{ height: iStatusBarHeight + 'px'}"></view>
    </view>
</template>

<script> export default { data() { return { iStatusBarHeight:0 } }, onLoad() { this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight } } </script>

　　　　uni-app 中以下組件的高度是固定的，不可修改：

組件	描述	App	H5
NavigationBar	導航欄	44px	44px
TabBar	底部選項卡	HBuilderX 2.3.4之前為56px，2.3.4起和H5調為一致，統一為 50px。但可以自主更改高度）	50px

　　　　　　各小程序平台，包括同小程序平台的iOS和Android的高度也不一樣。

　　3.字體圖標：

• 支持 base64 格式字體圖標。
• 支持網絡路徑字體圖標。
• 小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用。
• 網絡路徑必須加協議頭 https。
• 從 http://www.iconfont.cn 上拷貝的代碼，默認是沒加協議頭的。
• 從 http://www.iconfont.cn 上下載的字體文件，都是同名字體（字體名都叫iconfont，安裝字體文件時可以看到），在nvue內使用時需要注意，此字體名重復可能會顯示不正常，可以使用工具修改。
• 使用本地路徑圖標字體需注意：
  1. 為方便開發者，在字體文件小於 40kb 時，uni-app 會自動將其轉化為 base64 格式；
  2. 字體文件大於等於 40kb，仍轉換為 base64 方式使用的話可能有性能問題，如開發者必須使用，則需自己將其轉換為 base64 格式使用，或將其挪到服務器上，從網絡地址引用；
  3. 字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。

      @font-face {
          font-family: test1-icon;
          src: url('~@/static/iconfont.ttf');
      }

　　①nvue中不可直接使用css的方式引入字體文件，需要使用以下方式在js內引入。nvue內不支持本地路徑引入字體，請使用網絡鏈接或者base64形式。src字段的url的括號內一定要使用單引號。

var domModule = weex.requireModule('dom'); domModule.addRule('fontFace', { 'fontFamily': "fontFamilyName", 'src': "url('https://...')" })

　　②使用示例：

<template>
    <view>
        <view>
            <text class="test">&#xe600;</text>
            <text class="test">&#xe687;</text>
            <text class="test">&#xe60b;</text>
        </view>
    </view>
</template>
<style>
    @font-face { 12         font-family: 'iconfont'; 13         src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype'); 14  } 15  .test { 16         font-family: iconfont; 17         margin-left: 20rpx; 18  } 19 </style>

　　4.補充：

　　　　①Flexbox用法：Flexbox——uni-app，還有Flex布局教程——阮一峰。

　　　　②uniapp的upx與px、rpx的區別

 

十一、頁面渲染控制——template和 block

　　1.template示例：

<template>
    <view>
        <template v-if="test">
            <view>test 為 true 時顯示</view>
        </template>
        <template v-else>
            <view>test 為 false 時顯示</view>
        </template>
    </view>
</template>

　　2.block示例

<template>
    <view>
        <block v-for="(item,index) in list" :key="index">
            <view>{{item}} - {{index}}</view>
        </block>
    </view>
</template>

　　注：<block/> 在不同的平台表現存在一定差異，推薦統一使用 <template/>

 

　　引用：該文章為本人的學習筆記，可供大家學習參考，與uni-app官網教程如有出入請以官方教程為主。uniapp是一個很好的前端框架，學習成本不高值得大家學習（uniapp、小程序、uView等好多框架都是在Vue基礎上演變的，學好一門+Vue語法，再去學其他的就簡單了。）