当前位置：首页 > 建站教程 >

uni-app: 视频引导页开发需要注意些什么？(canvas实现雪花随机动态飘落效果)

GG网络技术分享 2025-03-18 16:14 0

uni-app: 视频引导页开发需要注意些什么？

通过本章节你能学到那些？

1、Uni-App 启动页和引导页介绍

2、Uni-App 简单引导页示例

3、Uni-App 视频引导页示例

Uni-App 启动页和引导页介绍

Uni-App 启动页和引导页是两个不同的东西，启动页是 Uni-App 自带的，不可去掉，只能修改相关配置。而引导页完全是需要开发者自行开发的。

上面的图，就是Uni-App 启动页，那开发者可以对它进行哪些配置呢？

可以配置：

1、是否等待首页加载完成在关闭启动界面

注意：若App启动时有动态显示其他页面的需求，场景举例：

欢迎页场景：首次启动，显示App欢迎页；否则，显示首页内容

登录页场景：用户未登录，打开登录页；否则，显示首页内容

此时，App引擎无法高效判断首页及跳转页渲染情况，建议将alwaysShowBeforeRender 设置为false，开发者手动调用 plus.navigator.closeSplashscreen() 关闭启动界面。

2、是否在程序启动界面显示等待雪花

3、是否自动关闭程序启动界面

4、启动界面在应用的首页面加载完毕后延迟关闭的时间

注意：这个 delay 不能任意使用，从应用启动到 splash 关闭的总时长，不会超过 6s。也就是说，delay 的时长也是计算在这个 6s 的限制内。

Uni-App 引导页，引导页很多都是安装app，第一次打开才会显示，后面打开都不会出现。大多显示内容是，告诉用户如何操作，或者核心介绍app作用等。

下面我们就来实现一个超级简单的Uni App引导页。

Uni-App 简单引导页示例

第一步：建3个页面文件。在pages目录下，新建index/init.vue、index/guide.vue、index/home.vue。

对应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一定要第一个，作为入口页面。

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页面就可以写引导页的内容了。

<swiper

class=\"swiper\"

circular

:indicator-dots=\"true\"

:current=\"tabIndex\"

@change=\"changeTab\">

<swiper-item

class=\"item\"

v-for=\"(item, index) in guidelList\" :key=\"index\">

</swiper-item>

</swiper>

</view>

</template>

假设我们引导页时一个swiper轮播试的方式

记得pages.json里面引导页去掉头部标题栏，同时设置样式使swiper全屏。

\"titleNView\": false,

现在很多app，都加了广告视频，作为app引导页，Uni-APP如何实现了，其实和上面swiper一样，但是还是有很多需要注意的地方。

Uni-App 视频引导页示例

我们先了解一波，Uni-APP中video组件提供了那些api？

src 要播放视频的资源地址

autoplay 是否自动播放

loop 是否循环播放

muted 是否静音播放

initial-time 指定视频初始播放位置，单位为秒（s）。

duration 指定视频时长，单位为秒（s）。

controls 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）

danmu-listObject 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 是否开启控制进度的手势

objectFitStringcontain当视频大小与 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。（<video/> 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。

小程序平台：各小程序平台支持程度不同，详见各家文档：微信小程序视频组件文档、支付宝不支持video组件、百度小程序视频组件文档、头条小程序视频组件文档

App平台：支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。

下面，用video做一个引导页：

guide.vue html模板

<video

id=\"video\"

src=\"/static/guide.mp4\"

:direction=\"0\"

:autoplay=\"false\"

:controls=\"false\"

:show-play-btn=\"false\"

:show-center-play-btn=\"false\"

:enable-progress-gesture=\"false\"

objectFit=\"fill\"

@timeupdate=\"timeupdate\"

@ended=\"goIndex\"></video>

<cover-view @click=\"goIndex\">立即体验</cover-view>

</view>

</template>

guide.vue 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、为什么没有做成自动播放？

2、为什么要timeupdate监听视频播放？

3、为什么用cover-view，不直接用view组件？

总结

今天你学到了什么？

1、uni-app启动页和引导页的区别

2、uni-app 引导页制作

3、uni-app 视频video组件使用

每次进步一点点，以后日子好过点。

最后，谢谢大家支持。

推荐一个专栏文章，感谢小伙伴们多多支持，谢谢大家！

canvas实现雪花随机动态飘落效果

本篇文章给大家介绍一下使用canvas实现雪花随机动态飘落效果的方法，文中示例代码介绍的非常详细。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

用canvas实现雪花随机动态飘落，代码如下

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

body{

margin: 0;

padding: 0;

}

canvas{

background: #000;

}

</style>

<body>

</canvas>

var canvas = document.getElementById(\'snow\');

var context = canvas.getContext(\'2d\');

// 获得可视区的宽高

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

function snow(){

context.save();

// 开启路径

context.beginPath();

// 移动画布，确定雪花终点为中心点

context.translate(100,100);

//起点

context.moveTo(-20,0);

// 终点

context.lineTo(20,0);

// 线变成白色

context.strokeStyle = \'#fff\';

// 线变粗

context.lineWidth = 10;

// 线变圆头

context.lineCap = \'round\';

context.stroke();

// 角度转弧度

var disX = Math.sin(30*Math.PI/180)*20;

var disY = Math.sin(60*Math.PI/180)*20;

// 画第二条线，左下到右上的线

context.moveTo(-disX,disY);

context.lineTo(disX,-disY);

// 画第三条线

context.moveTo(-disX,-disY);

context.lineTo(disX,disY);

context.stroke();

context.restore();

}

// snow();

//生成雪花的构造函数

function Snow(x,y,scale,rotate,speedX,speedY,speedR){

this.x = x;

this.y = y;

this.scale = scale;

this.rotate = rotate;

this.speedX = speedX;

this.speedY = speedY;

this.speedR = speedR;

// 渲染雪花

this.render = function(){

context.save();

context.beginPath();

context.translate(this.x,this.y);

context.scale(this.scale,this.scale);

context.rotate(this.rotate*Math.PI/180);

context.moveTo(-20,0);

context.lineTo(20,0);

context.strokeStyle = \'#fff\';

context.lineWidth = 10;

context.lineCap = \'round\';

context.stroke();

var disX = Math.sin(30*Math.PI/180)*20;

var disY = Math.sin(60*Math.PI/180)*20;

context.moveTo(-disX,disY);

context.lineTo(disX,-disY);

context.moveTo(-disX,-disY);

context.lineTo(disX,disY);

context.stroke();

context.restore();

}

// var snow = new Snow(50,50,1,10,10,10,10);

// snow.render();

// 存储所有生成的雪花

var snowArray = [];

// 生成雪花

function init(){

var len = 100;

for(var i = 0;i<len;i++){

var x = Math.random()*canvas.width;

var scale = Math.random()+0.5;

var rotate = Math.random()*60;

var speedX = Math.random()+1

var speedY = Math.random()+5;

var speedR = Math.random()*4+2;

// var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);

// snow.render();

(function(x,y,scale,rotate,speedX,speedY,speedR){

setTimeout(function(){

var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);

snow.render();

snowArray.push(snow);

},Math.random()*8000);

})(x,0,scale,rotate,speedX,speedY,speedR);

}snowing();

}init();

// 动起来

function snowing(){

setInterval(function(){

//先清除

context.clearRect(0,0,canvas.width,canvas.height);

for(var i = 0;i < snowArray.length;i++){

snowArray[i].x = (snowArray[i].x+snowArray[i].speedX)%canvas.width;

snowArray[i].y = (snowArray[i].y+snowArray[i].speedY)%canvas.height;

snowArray[i].rotate = (snowArray[i].rotate+snowArray[i].speedR)%60;

snowArray[i].render();

}

},30);

}

/**

* sin60 = 对边/斜边 => 对边 = sin60*斜边 => y=sin60*半径（r）；

</script>

</body>

</html>

动态效果图：

canvas实现雪花随机动态飘落效果 (https://www.wpmee.com/) javascript教程第1张

以上就是canvas实现雪花随机动态飘落效果（代码示例）的详细内容，更多请关注网站的其它相关文章！

标签： 小程序

建站教程

uni-app: 视频引导页开发需要注意些什么？(canvas实现雪花随机动态飘落效果)