小程式開屏廣告demo

一個适配各種手機的小程式開屏廣告demo

相信在座的各位都有見過大部分的應用打開的時候都會有個全屏的廣告。

但是小程式的會比較少一點，因為小程式打開加載的時候已經需要消耗不少時間了，是以基本都不會去做這個，影響使用者的體驗。

最近有個客戶要做這個，于是折騰了一下。

注意：因為市面上有各種各樣的手機，是以我們一定要适配各種手機的分辨率

項目結構

列幾個關鍵點

1、app.js

onLaunch() {
    //添加标記，标記為首次進入
    wx.setStorageSync('first',true)
  },      

 　loading.json

{
    "usingComponents": {},
    "navigationStyle":"custom",    //自定義導航欄
    "navigationBarTitleText": ""
}      

2、video

<video id="myVideo" style="width:{{windowWidth}}px;height:{{windowHeight}}px" show-fullscreen-btn="{{false}}"
            show-center-play-btn='{{false}}' autoplay="{{true}}" controls="{{false}}" object-fit="fill" src="{{video}}"
            bindloadedmetadata='videoLoad' enable-progress-gesture='{{false}}'
            bindended='goIndex'></video>      

關于視訊，那些按鈕全部都隐藏掉

2.1 動态設定視訊寬高，預設占滿螢幕

style="width:{{windowWidth}}px;height:{{windowHeight}}px"      

var res = wx.getSystemInfoSync();
        this.setData({    //擷取螢幕的寬高
            windowHeight: res.windowHeight,
            windowWidth: res.windowWidth
        })      

2.2 視訊表現形式

　這裡選 fill

object-fit="fill"      

2.3 視訊加載

bindloadedmetadata='videoLoad'

      

2.4 播放完成後

bindended='goIndex'      

3、image

<image src="{{img}}" mode="aspectFill" style="height: {{windowHeight}}px;" bindload='imgLoad'></image>      

關于圖檔

3.1 設定圖檔高度

style="height: {{windowHeight}}px;"      

3.2 設定圖檔模式

mode="aspectFill"
      

3.3 定時器

bindload='imgLoad'      

最後

附上源碼 　　戳我