uni-app: 引導頁功能如何實現？

經過本章節你能學到那些？

一、Uni-App 啓動頁和引導頁介紹 二、Uni-App 簡單引導頁示例 三、Uni-App 視頻引導頁示例

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

Uni-App 啓動頁和引導頁是兩個不一樣的東西，啓動頁是 Uni-App 自帶的，不可去掉，只能修改相關配置。而引導頁徹底是須要開發者自行開發的。

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

能夠配置： 一、是否等待首頁加載完成在關閉啓動界面

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

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

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

二、是否在程序啓動界面顯示等待雪花

三、是否自動關閉程序啓動界面

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

四、啓動界面在應用的首頁面加載完畢後延遲關閉的時間

啓動界面在應用的首頁加載完畢後延遲關閉的時間，單位爲毫秒，僅在 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平臺：支持支持的視頻格式視瀏覽器而定，通常通用的都支持：mp四、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'
    });
  }
}
複製代碼

這裏爲何寫的有點點複雜？下面詳細講講： 一、爲何沒有作成自動播放？

若是配置了「等待首頁加載完成在關閉啓動界面」，自動播放，就好關閉啓動頁就進去到了首頁，由於視頻播放也會佔用加載時間，會在啓動頁面等待。

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

二、爲何要timeupdate監聽視頻播放？

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

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

三、爲何用cover-view，不直接用view組件？

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

總結

今天你學到了什麼？ 一、uni-app啓動頁和引導頁的區別 二、uni-app 引導頁製做 三、uni-app 視頻video組件使用

每次進步一點點，之後日子好過點。 最後，謝謝你們支持。

喜歡的能夠關注我哦!

原文地址：www.javanx.cn/20190919/un…