uniapp 的图片下载功能并加了防抖函数处理

最新推荐文章于 2024-12-02 21:35:04 发布

相伴而行

最新推荐文章于 2024-12-02 21:35:04 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp小程序知识点分享文章标签：前端 css3 vue.js

本文链接：https://blog.youkuaiyun.com/able_me/article/details/121415174

uniapp小程序知识点分享专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种用于展示活动对接人名片的小程序组件设计，包括名片的布局、按钮交互逻辑及保存名片图片到手机的功能实现。通过防抖处理避免了用户重复点击导致的问题，并实现了保存图片前的权限申请流程。

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

				<view class="business_card_box">
					<view class="business_card_name">活动对接人名片</view>
					<view class="business_content_box">
						<view class="business_left_box">
							<view class="business_leftimg_box"><image class="QR_code" :src="$url(activityData.liveBroadcastCard)" mode=""></image></view>
							<view class="QR_code_bottom">
								<button class="QR_code_left_text" @click="debounce">保存到手机</button>
								<button class="QR_code_right_text" open-type="share">分享</button>
							</view>
						</view>
						<view class="business_right_box">
							<view class="business_top">
								<view class="top">{{ activityData.liveBroadcastName || '姓名' }}</view>
								<view class="top" @click="dialTel(activityData.liveBroadcastPhone)">{{ activityData.liveBroadcastPhone || '电话' }}</view>
							</view>
							<view class="business_bottom">
								<view class="bottom">保存后微信识别二维码</view>
								<view class="bottom">加我为好友</view>
								<view class="bottom">了解更多精彩活动</view>
							</view>
						</view>
					</view>
				</view>

js部分：

	data() {
		return {
			activityData: {}, // 活动详情数据
			timer: true // 存一个定时器状态开关
		};
	},

// 防抖处理
		debounce() {
			let that = this;
			if (that.timer) {
				that.timer = false;
				that.onDown(); // 你要执行的函数
				setTimeout(() => {
					console.log('你要变成🐒🐒🐒🐒防抖函数');
					that.timer = true;
				}, 3000);
			} else {
				uni.showToast({
					title: '稍等，请勿重复操作',
					icon: 'none',
					duration: 2000
				});
			}
		},
		// 保存海报图片
		onDown() {
			let that = this;
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success() {
					console.log(that.$url(that.activityData.cover), '保存的图片地址');
					uni.downloadFile({
						url: that.$url(that.activityData.liveBroadcastCard), // 保存活动的微信二维码图片
						success: res => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: '保存成功',
											icon: 'none'
										});
									}
								});
							}
						}
					});
				},
				fail: function() {
					uni.showModal({
						title: '您需要授权相册权限',
						success(res) {
							if (res.confirm) {
								uni.openSetting({
									success(res) {},
									fail(res) {
										console.log(res);
									}
								});
							}
						}
					});
				}
			});
		},