爱丁顿h5总结

最新推荐文章于 2025-07-30 16:36:01 发布

原创最新推荐文章于 2025-07-30 16:36:01 发布 · 230 阅读

1 ·

CC 4.0 BY-SA版权

h5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于uniapp的H5项目实现过程，包括图片淡入淡出动画、轮播图、小手闪烁效果、海报生成及分享等功能。特别关注了html2canvas插件的应用与调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

爱丁顿h5总结

一、需求

实现上下滑动淡入淡出动画实现切换图片。
第二张图片有轮播图。
第三张实现一个小手闪烁。
第四张实现输入信息。
生成海报和第五张图多一张二维码。第四张图输入的信息需要在第五张图上面显示出来。
实现分享h5给微信朋友。

二、实现思路

使用uniapp 搭建h5。
使用动画的形式实现动画淡入淡出，布局通过层级来控制显隐。
使用keyframs来控制闪烁的小手。
生成海报的是通过uniapp插件市场里面找的一个通过截图的方式生成图片的，但是图片显示的会有点模糊。（使用的插件是html2canvas）
html2canvas使用可以参考参考网址

遇到的问题

分享问题具体的可以参考解决h5分享
html2canvas截图方面的截图出来的图片变形了。解决办法：(通过获取屏幕宽高来设置截图页面的宽高)
使用如下：


// 获取屏幕宽高赋值给你的页面
/*
*@listHeight 设置图片的高度
*@listWatch 设置图片的高度
*/
 getWindowSize() {
    let res = await uni.getSystemInfo()		
	this.listHeight = res[1].windowHeight
     this.listWatch = res[1].windowWidth
  },

我们要在uniapp插件市场导入到我们项目中，(插件网址)
如图：
在这里插入图片描述

直接引入就可以了
如图：
在这里插入图片描述

 // js部分调用方法截图
 /**
 * @dpi window.devicePixelRatio是设备像素比
 * @height  截图高度
 * @width   截图宽度
 * @#_poster 获取的canvansid
 * 其他参数可以参考上面提供的网站上面的
*/
html2canvas(document.querySelector('#_poster'), {
	dpi: 1000,
	height: this.listHeight,
	width: this.listWatch
}).then(canvas => {
	this.loandShow = false;
	let previewFile = canvas.toDataURL('image/png', 1.0);
	this.previewFile = previewFile
});

需要截图的页面布局（需要使用canvas标签包裹住）


<canvas id='_poster' v-if="currentIndex==4" :style="{height:listHeight+'px',zIndex:-1,width:listWatch+'px'}" class="fifPage1">
			<!-- <image src="../../static/lastImg1.png" mode="widthFix" class="imgfif" :style="{width:listWatch+'px',height:listHeight+'px',objectFit:'cover'}"></image> -->
			<image src="../../static/背景1.jpg" mode="widthFix" class="imgfif" :style="{objectFit:'scale-down',width:listWatch+'px',height:listHeight+'px'}"></image>
			<view class="titleHand">
				请理性饮酒
			</view>
			<image src="../../static/erweima.png" mode="" class="imger"></image>
			<view class="playzhong">
				<text>扫描二维码</text>
				<text>定制中秋祝福</text>
			</view>
			<view class="fifPage-content c-white">
				<view class="" style="margin-bottom:10rpx ;font-size: 30rpx;">
					<text style="font-style: oblique;font-weight: bold;letter-spacing:5rpx">
						To：
					</text>
					<text style="font-size: 36rpx;">
						{{form.name}}
					</text>
				</view>
				<view class="" style="text-align: center;font-size: 36rpx;">
					{{form.firstDsc}}
				</view>
				<view class="" style="text-align: center;font-size: 36rpx;">
					{{form.lastDsc}}
				</view>
				<view style="text-align: right;margin-top: 20rpx;font-size: 30rpx;justify-content: flex-end;" class="dpf aic ">

					<text style="font-style: oblique;font-weight: bold;letter-spacing:5rpx">
						From：
					</text>
					<text style="font-size: 36rpx;">
						{{form.formName}}
					</text>
				</view>

			</view>

		</canvas>