App.vue 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <script>
  2. import { FlashScreenUrl } from '@/common/util/request.js'
  3. export default {
  4. onLaunch() {
  5. uni.json = obj => console.log(JSON.stringify(obj, null, 2))
  6. plus.screen.lockOrientation('portrait-primary') // 锁定屏幕方向
  7. let t = 5 // 闪屏倒计时时长
  8. let timer;
  9. uni.FLASHSCREEN = new plus.nativeObj.View('FlashScreen', // 绘制闪屏
  10. { top:'0px', left:'0px', height:'100%', width:'100%' },
  11. [
  12. {tag:'img', id:'FlashScreenImgBG', src: '/static/flashscreen.png', position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
  13. {tag:'img', id:'FlashScreenImg', src: FlashScreenUrl, position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
  14. {tag:'rect', id:'rect', rectStyles: { color:'#FFFFFF', radius: '20px', borderColor: '#999999', borderWidth: '1px' }, position:{ right: '20px', bottom: '30px', width:'80px', height:'30px' }},
  15. {tag:'font', id:'font1', text:'跳过', textStyles:{ size: '16px', align: 'left' }, position:{ right: '20px', bottom: '30px', width:'65px', height:'30px' }},
  16. {tag:'font', id:'font2', text: t, textStyles:{ size: '16px', color: '#F76454' }, position:{ right: '20px', bottom: '30px', width:'40px', height:'30px' }}
  17. ]
  18. )
  19. uni.FLASHSCREEN.addEventListener('click', e => { // 点击跳过关闭闪屏
  20. if ((e.pageX > (this.$store.state.device.screenWidth - 110)) && (e.pageY > (this.$store.state.device.screenHeight - 50))) {
  21. clearInterval(timer) // 取消定时器
  22. uni.FLASHSCREEN.hide() // 隐藏闪屏
  23. uni.HIDESCREENED = true // 标记状态(闪屏已结束)
  24. uni.$emit('HIDESCREEN') // 广播状态(闪屏已结束)
  25. }
  26. })
  27. uni.FLASHSCREEN.show() // 显示闪屏
  28. timer = setInterval(() => { // 显示倒计时
  29. if (t <= 0) {
  30. uni.FLASHSCREEN.hide() // 隐藏闪屏
  31. uni.HIDESCREENED = true // 标记状态(闪屏已结束)
  32. uni.$emit('HIDESCREEN') // 广播状态(闪屏已结束)
  33. clearInterval(timer) // 取消定时器
  34. }
  35. uni.FLASHSCREEN.drawText(t --, { right: '20px', bottom: '30px', width:'40px', height:'30px' }, { size: '16px', color: '#F76454' }, 'font2')
  36. }, 1000)
  37. },
  38. onShow() {},
  39. onHide() {}
  40. }
  41. </script>
  42. <style lang="scss">
  43. @import 'common/style/main.scss'; //引入 ColorUI 组件库主样式
  44. @import 'common/style/icon.scss'; //引入 ColorUI 组件库图标样式
  45. @import 'common/style/animation.scss'; //引入 ColorUI 组件库动画样式
  46. page { //uniapp 中的 page 标签相当于 html 中的 body, 默认高度为 auto, 但是高度为 100% 更利于 app 布局,你也可以在 page 中设置一些全局样式,比如全局背景色
  47. height: 100%;
  48. background: #FFFFFF;
  49. color: $app-main-text-color;
  50. }
  51. </style>