Uni-App 啟動頁和引導頁介紹

Uni-App 啟動頁和引導頁是兩個不同的東西，啟動頁是 Uni-App 自帶的，不可去掉，只能修改相關配置。而引導頁完全是需要開發者自行開發的。

上面的圖，就是Uni-App 啟動頁，那開發者可以對它進行哪些配置呢？

可以配置：
1、是否等待首頁加載完成在關閉啟動界面

設置為true，則splash的關閉邏輯為：App啟動時，App引擎自動檢測首頁渲染情況，若首頁未渲染（白屏），則不關閉splash；否則，關閉splash；若啟動時間超過10秒，則不管首頁是否白屏，自動關閉splash

注意：若App啟動時有動態顯示其他頁面的需求，場景舉例：

歡迎頁場景：首次啟動，顯示App歡迎頁；否則，顯示首頁內容
登錄頁場景：用戶未登錄，打開登錄頁；否則，顯示首頁內容
此時，App引擎無法高效判斷首頁及跳轉頁渲染情況，建議將alwaysShowBeforeRender 設置為false，開發者手動調用 plus.navigator.closeSplashscreen() 關閉啟動界面。

2、是否在程序啟動界面顯示等待雪花

3、是否自動關閉程序啟動界面

autoclose 可設置App引擎是否自動關閉splash，默認為true；若修改為false，則需開發者手動調用 plus.navigator.closeSplashscreen() 方法關閉啟動圖。但是這個時間不能太晚，6s 超時后依舊會主動關閉。

4、啟動界面在應用的首頁面加載完畢后延遲關閉的時間

啟動界面在應用的首頁加載完畢后延遲關閉的時間，單位為毫秒，僅在 autoclose 設置為 true 時有效。

注意：這個 delay 不能任意使用，從應用啟動到 splash 關閉的總時長，不會超過 6s。也就是說，delay 的時長也是計算在這個 6s 的限制內。

Uni-App 引導頁，引導頁很多都是安裝app，第一次打開才會顯示，后面打開都不會出現。大多顯示內容是，告訴用戶如何操作，或者核心介紹app作用等。

下面我們就來實現一個超級簡單的Uni App引導頁。

 

Uni-App 簡單引導頁示例

第一步：建3個頁面文件。在pages目錄下，新建index/init.vue、index/guide.vue、index/home.vue。

對應pages.json：

{
    "pages": [{
        "path": "pages/index/init",
        "style": {
            "navigationBarTitleText": "入口頁"
        }
    }, {
        "path": "pages/index/guide",
        "style": {
            "navigationBarTitleText": "引導頁",
            "titleNView": false,
            "app-plus": {
                "bounce": "none"
            }
        }
    }, {
        "path": "pages/index/home",
        "style": {
            "navigationBarTitleText": "首頁",
            "navigationBarTextStyle": "black"
        }
    }]
}

 

注意排放順序，init一定要第一個，作為入口頁面。

init.vue

onLoad() {
  // 從本地緩存中同步獲取指定 key 對應的內容，用於判斷是否是第一次打開應用
  const value = uni.getStorageSync('launchFlag');
  if (value) {
    // 如何已經有，直接去home首頁
    uni.switchTab({
      url: '/pages/index/home'
    });
  } else {
    // 沒有值，跳到引導頁，並存儲，下次打開就不會進去引導頁
    uni.setStorage({
      key: 'launchFlag',
      data: true
    });
    uni.redirectTo({
      url: '/pages/index/guide'
    });
  }
}

 

然后我們guide.vue頁面就可以寫引導頁的內容了。

<template>
    <view id="guide">
        <swiper
      class="swiper"
      circular 
      :indicator-dots="true" 
      :current="tabIndex"
      @change="changeTab">
            <swiper-item
        class="item"
        v-for="(item, index) in guidelList" :key="index">
                <image :src="item.src" mode="aspectFill"></image>
            </swiper-item>
        </swiper>
    </view>
</template>

 

假設我們引導頁時一個swiper輪播試的方式

 

記得pages.json里面引導頁去掉頭部標題欄，同時設置樣式使swiper全屏。

 

"titleNView": false,

現在很多app，都加了廣告視頻，作為app引導頁，Uni-APP如何實現了，其實和上面swiper一樣，但是還是有很多需要注意的地方。

Uni-App 視頻引導頁示例

我們先了解一波，Uni-APP中video組件提供了那些api？
src 要播放視頻的資源地址

autoplay 是否自動播放

loop 是否循環播放

muted 是否靜音播放

initial-time 指定視頻初始播放位置，單位為秒（s）。

duration 指定視頻時長，單位為秒（s）。

controls 是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間）

danmu-list Object Array 彈幕列表

danmu-btn 是否顯示彈幕按鈕，只在初始化時有效，不能動態變更

enable-danmu 是否展示彈幕，只在初始化時有效，不能動態變更

page-gesture 在非全屏模式下，是否開啟亮度與音量調節手勢 微信小程序、H5
direction 設置全屏時視頻的方向，不指定則根據寬高比自動判斷。有效值為 0（正常豎向）, 90（屏幕逆時針90度）, -90（屏幕順時針90度）

show-progress 若不設置，寬度大於240時才會顯示

show-fullscreen-btn 是否顯示全屏按鈕

show-play-btn 是否顯示視頻底部控制欄的播放按鈕

show-center-play-btn 是否顯示視頻中間的播放按鈕

enable-progress-gesture 是否開啟控制進度的手勢

objectFit String contain 當視頻大小與 video 容器大小不一致時，視頻的表現形式。contain：包含，fill：填充，cover：覆蓋 微信小程序、H5
poster 視頻封面的圖片網絡資源地址，如果 controls 屬性值為 false 則設置 poster 無效

@play 當開始/繼續播放時觸發play事件

@pause 當暫停播放時觸發 pause 事件

@ended 當播放到末尾時觸發 ended 事件

@timeupdate 播放進度變化時觸發，event.detail = {currentTime, duration} 。觸發頻率 250ms 一次

@fullscreenchange 當視頻進入和退出全屏時觸發，event.detail = {fullScreen, direction}，direction取為 vertical 或 horizontal

@waiting 視頻出現緩沖時觸發

@error 視頻播放出錯時觸發

總的來看，功能還是非常的強大，而且還支持彈幕，這是我沒有想到的。

視頻格式支持情況：

H5平台：支持支持的視頻格式視瀏覽器而定，一般通用的都支持：mp4、webm 和 ogg。（<video/> 組件編譯到 H5 時會替換為標准 html 的 video 標簽）。H5端也可以自行在條件編譯里使用video.js等三方庫，這些庫可以自動判斷環境兼容以決定使用標准video或flash來播放。

小程序平台：各小程序平台支持程度不同，詳見各家文檔：微信小程序視頻組件文檔、支付寶不支持video組件、百度小程序視頻組件文檔、頭條小程序視頻組件文檔

App平台： 支持本地視頻(mp4/flv)、網絡視頻地址（mp4/flv/m3u8）及流媒體（rtmp/hls/rtsp）。

下面，用video做一個引導頁：
guide.vue html模板

<template>
    <view id="guide">
        <video
            id="video"
            src="/static/guide.mp4"
            :direction="0"
            :autoplay="false"
            :controls="false"
            :show-play-btn="false"
            :show-center-play-btn="false"
            :enable-progress-gesture="false"
            objectFit="fill"
            @timeupdate="timeupdate"
            @ended="goIndex"></video>
        <cover-view @click="goIndex">立即體驗</cover-view>
    </view>
</template>

 

guide.vue javascript

 

onShow() {
  let videoContext = uni.createVideoContext('video', this)
  videoContext.play()
},
methods: {
  timeupdate(event){
    uni.getSystemInfo({
      success: (data) => {
        if(data.platform=='ios') {
          if(event.detail){
            event.detail.diff = event.detail.duration - event.detail.currentTime;
            if(event.detail.diff < 0.4){
              this.goIndex()
            }
          }
        }
      }
    })

  },
  goIndex(){
    uni.switchTab({
      url: '/pages/index/index'
    });
  }
}

這里為什么寫的有點點復雜？下面詳細講講：
1、為什么沒有做成自動播放？

如果配置了“等待首頁加載完成在關閉啟動界面”，自動播放，就好關閉啟動頁就進去到了首頁，因為視頻播放也會占用加載時間，會在啟動頁面等待。

uni.createVideoContext(videoId, this)。創建並返回 video 上下文 videoContext 對象。在自定義組件下，第二個參數傳入組件實例this，以操作組件內 <video> 組件。

2、為什么要timeupdate監聽視頻播放？

這里涉及到一個兼容問題，android，可以在ended事件后，直接到首頁，但是iOS會出現一下短暫的暫停樣式（顯示了播放按鈕），所以這里用監聽播放進度，來計算快要播放完畢，就跳走。

uni.getSystemInfo。獲取設備系統信息。

3、為什么用cover-view，不直接用view組件？

因為部分組件如map、video、textarea、canvas通過原生控件實現，原生組件層級高於前端組件，為了能正常覆蓋原生組件，所以使用cover-view。這樣我們就可以在video上面顯示按鈕，用戶可以跳過視頻直接進去首頁。

 

init.vue這個頁面 如果頁面是空白的 不布局，百分百的當下次重啟app運行，會在init.vue頁面等待一下 再去首頁，會給你感覺是白屏一下。其實就是因為init.vue頁面 沒布局，空白頁面，然后又跳轉到首頁了

app.vue里面好像不能跳，那就去init.vue的onShow里面判斷就好了，目前我是onShow里面處理的，好像沒有白屏現象