网友回复
小程序不支持开屏slogo播放,但是你可以自己做个view组件来实现,组件内可以播放视频或者gif动画图片作为引导页,还可以跳过引导页,具体步骤如下:
新建一个组件叫kaiping_component
kaiping_component.wxml
<view class="kaiping_box"> <image src="{{imagepath}}" mode="aspectFill"></image> <view class="kaiping-header"> <view class="kaiping-btn" bindtap="skipAnimation">跳过 {{second}}s</view> </view> </view>kaiping_component.js
// component/kaiping_component.js Component({ /** * 组件的属性列表 */ properties: { imagepath: { type: String }, second: { type: Number } }, /** * 组件的初始数据 */ data: { timer: null }, lifetimes: { created: function () { }, attached: function () { let secondTime = this.data.second; let that = this; const timer = setInterval(function () { let nowSecond = --that.data.second; if (nowSecond <= 0) { clearInterval(timer); that.hideKaiping(); } console.log(nowSecond); that.setData({ second: nowSecond }); }, 1000); this.setData({ timer: timer }); } }, /** * 组件的方法列表 */ methods: { hideKaiping: function () { this.triggerEvent("hide"); }, skipAnimation: function () { this.hideKaiping(); let timer = this.data.timer; if (timer) { clearInterval(timer); } } } })kaiping_component.wxss
/* component/kaiping_component.wxss */ .kaiping_box { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2; } .kaiping_box image { width: 100%; height: 100%; } .kaiping-header { position: absolute; top: 100rpx; left: 5px; width: 96%; display: flex; } .kaiping-second, .kaiping-btn { font-size: 12px; color: white; border: 1px solid white; padding: 1px 6px; border-radius: 10px; }kaiping_component.json
{ "component": true, "usingComponents": {} }使用开屏组件示例
index.wxml
<view class="intro">原本的首页</view> <kaiping-component wx:if="{{kaipingFlag}}" imagepath="/image/image.png" second="{{10}}" bind:hide="onMyEvent" ></kaiping-component>index.json
{ "usingComponents": { "kaiping-component": "/component/kaiping_component" }, "navigationStyle": "custom" } 1index.js
const app = getApp() Page({ data: { kaipingFlag: true }, onLoad: function () { wx.hideTabBar(); }, onMyEvent: function () { console.log("close"); this.setData({ kaipingFlag: false }); wx.showTabBar(); } })
上面的index.wxml要修改一下:
index.wxml
<view class="intro">原本的首页</view> <kaiping-component wx:if="{{kaipingFlag}}" style="z-index: 10000;position: fixed;" imagepath="/image/image.png" second="{{10}}" bind:hide="onMyEvent" ></kaiping-component>