首页 > 编程语言> 文章详细

小程序开屏广告demo

2021-11-16 23:34:15 阅读：231 来源： 互联网

标签：视频 style windowWidth demo px 开屏广告 res windowHeight

相信在座的各位都有见过大部分的应用打开的时候都会有个全屏的广告。

但是小程序的会比较少一点，因为小程序打开加载的时候已经需要消耗不少时间了，所以基本都不会去做这个，影响用户的体验。

最近有个客户要做这个，于是折腾了一下。

注意：因为市面上有各种各样的手机，所以我们一定要适配各种手机的分辨率

项目结构

列几个关键点

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'

最后

附上源码　　戳我

标签：视频,style,windowWidth,demo,px,开屏,广告,res,windowHeight
来源： https://www.cnblogs.com/jae-tech/p/15562959.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

小程序开屏广告demo