小程序不支持开屏slogo播放,但是你可以自己做个view组件来实现,组件内可以播放视频或者gif动画图片作为引导页,还可以跳过引导页,具体步骤如下:
新建一个组件叫kaiping_component
kaiping_component.wxml
<view class="kaiping_box">kaiping_component.js
<image src="{{imagepath}}" mode="aspectFill"></image>
<view class="kaiping-header">
<view class="kaiping-btn" bindtap="skipAnimation">跳过 {{second}}s</view>
</view>
</view>
// 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_component.json
.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;
}
{
"component": true,
"usingComponents": {}
}使用开屏组件示例index.wxml
<view class="intro">原本的首页</view>index.json
<kaiping-component wx:if="{{kaipingFlag}}"
imagepath="/image/image.png"
second="{{10}}"
bind:hide="onMyEvent" ></kaiping-component>
{
"usingComponents": {
"kaiping-component": "/component/kaiping_component"
},
"navigationStyle": "custom"
}
1index.jsconst app = getApp()
Page({
data: {
kaipingFlag: true
},
onLoad: function () {
wx.hideTabBar();
},
onMyEvent: function () {
console.log("close");
this.setData({
kaipingFlag: false
});
wx.showTabBar();
}
})
网友回复
- threejs如何做个三维搭积木的游戏?
- three如何实现标记多个起始路过地点位置后选择旅行工具(飞机汽车高铁等),最后三维模拟行驶动画导出mp4?
- ai实时驱动的3d数字人可视频聊天的开源技术有吗
- swoole+phpfpm如何实现不同域名指向不同目录的多租户模式?
- 如何用go替换nginx实现请求phpfpm解析运行php脚本?
- 有没有浏览器离线运行进行各种文档、图片、视频格式转换的开源工具?
- 如何使用go语言搭建一个web防火墙?
- linux如何检测特定网络协议比如http协议中报文是否包含特点关键词并阻止返回给客户?
- 如果在nginx外过滤包含某些关键词的网页并阻止打开?
- 程序员怎么做副业赚钱?



 
				 
			 
			 
				 
			