uni |
您所在的位置：网站首页 › uniapp怎么启动idea › uni |
uni
|
启动页: uni-app自带的,不能去掉 只能修改相关配置 引导页: 需要自己开发 manifest.json文件中APP启动图配置 是否等待首页加载完我在关闭启动界面设置为true,则splash的关闭逻辑为: App启动时,APP引擎自动检测首页渲染情况,若首页未渲染(白屏), 则不关闭splash,否则,关闭splash; 则启动超过10秒 则不管首页是否白屏,自动关闭splash 是否在程序启动界面显示等待雪花 是否自动关闭程序启动界面 autoclose 可设置APP引擎是否自动关闭splash ,默认为true 修改为false 开发时需要手动调用为plus.navigator.closeSplashscreen()方法关闭启动图 但是这个时间不能太晚 ,6s超时后依旧会主动关闭 启动界面在应用的首页加载完毕后延迟关闭的时间启动界面在应用的首页加载完毕之后的延迟时间 单位为毫秒 仅在autoclose设置为true时有效 放在对应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.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 复制代码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。（ 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。 小程序平台：各小程序平台支持程度不同，详见各家文档：微信小程序视频组件文档、支付宝不支持video组件、百度小程序视频组件文档、头条小程序视频组件文档 App平台： 支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。 下面，用video做一个引导页： guide.vue html模板 立即体验 复制代码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，以操作组件内 组件。 2、为什么要timeupdate监听视频播放？ 这里涉及到一个兼容问题，android，可以在ended事件后，直接到首页，但是iOS会出现一下短暂的暂停样式（显示了播放按钮），所以这里用监听播放进度，来计算快要播放完毕，就跳走。 uni.getSystemInfo。获取设备系统信息。 3、为什么用cover-view，不直接用view组件？ 因为部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件，为了能正常覆盖原生组件，所以使用cover-view。这样我们就可以在video上面显示按钮，用户可以跳过视频直接进去首页。 |
【本文地址】