小程序開屏廣告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'

最后

附上源碼 　　戳我