十一、uni-app生成弹窗及换行

本文介绍了在微信小程序中使用uni.showModal进行模态弹窗展示,并探讨了如何处理content中的换行问题,以及使用uni.showToast进行提示。实践案例展示了如何在提交表单后显示详细信息并响应用户操作。

先看一下官方文档

这里我们区分弹窗showModal和提示窗showToast的功能

// 官网示例效果
uni.showModal({
   
   
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
   
   
		if (res.confirm) {
   
   
			console.log('用户点击确定');
		} else if (res.cancel) {
   
   
			console.log('用户点击取消');
		}
	
<template> <u-popup :show="internalShow" mode="center" round="10" @close="internalShow = false" :safeAreaInsetBottom="false"> <!-- 海报 --> <view class="poster-wrapper" id="canvasId"> <view class="poster-container" @longpress="savePoster" @tap.stop="internalShow = false"> <view class="qrcode-top flex"> <u--image :showLoading="true" :src="getImgUrl(info.logo)" width="80px" height="80px" radius="6"></u--image> <view class="top-right flex-column"> <text class="shop-name">{{ info.teamName }}</text> </view> </view> <!-- 二维码区域 --> <view class="qrcode-container"> <canvas id="qrcode" canvas-id="qrcode" style="width: 150px; height: 150px"></canvas> </view> <text class="hint-text">长按图片可保存</text> </view> </view> <!-- 绘制出整个海报 --> <canvas id="myCanvas" style="position: absolute; top: -9999px; width: 580rpx; height: 800rpx"></canvas> </u-popup> </template> <script> import UQRCode from 'uqrcodejs'; export default { props: { info: { type: Object, default: () => ({ teamName: '', logo: '' }) } }, data() { return { internalShow: false }; }, methods: { // 父组件调用入口 初始化二维码 async generatePoster(link) { uni.showLoading({ title: '生成中', mask: true }); await this.drawQrCode(link); //先生成二维码 uni.hideLoading(); //结束 this.internalShow = true; }, //第一步:把二维码绘制到海报中间 drawQrCode(link) { var qr = new UQRCode(); qr.data = link; // 设置二维码内容 qr.size = 150; // 设置二维码大小,必须与canvas设置的宽高一致 qr.make(); // 调用制作二维码方法 // 获取canvas上下文 var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件,this必须传入 qr.canvasContext = canvasContext; // 设置uQRCode实例的canvas上下文 qr.drawCanvas(); // 调用绘制方法将二维码图案绘制到canvas上 }, //第二步 把整个弹窗绘制到画布 drawPoster() {}, // 保存海报 savePoster() { setTimeout(() => { uni.canvasToTempFilePath({ x: 100, y: 200, width: 50, height: 50, destWidth: 100, destHeight: 100, canvasId: 'canvasId', success: (res) => { console.log(res); }, fail: (err) => { console.log(err); } }); }, 300); } } }; </script> <style lang="scss" scoped> /* 海报容器 */ .poster-wrapper { border-radius: 10px; overflow: hidden; } .poster-container { width: 600rpx; height: 800rpx; background-image: url('/team/static/image/mabj.jpg'); background-size: cover; background-position: center; position: relative; .qrcode-top { padding: 40rpx 20rpx; gap: 10rpx; color: #fff; margin-bottom: 40rpx; .top-right { .shop-name { font-size: 32rpx; font-weight: 600; } } } } /* 二维码容器 */ .qrcode-container { display: flex; justify-content: center; align-items: center; } .hint-text { width: 100%; position: absolute; bottom: 25rpx; left: 0; text-align: center; color: #fff; } ::v-deep .u-popup__content { background: transparent !important; overflow: visible !important; border-radius: 10px; } </style> 需求:canvas id="qrcode" canvas-id="qrcode" style="width: 150px; height: 150px"></canvas>是放置二维码的地方, canvas id="myCanvas" style="position: absolute; top: -9999px; width: 580rpx; height: 800rpx"></canvas>我是想把整个u-popup绘制出来放在这里,主要是为了长按保存的时候,保存整个u-popup,现在请帮我完善drawPoster()函数,达到长按保存的功能。vue2+js+uni-app+uViwe-ui写的微信小程序。返回修改后的完整代码
最新发布
10-24
在 `uni-app` 中实现广告弹窗,需要考虑跨平台兼容性(如微信小程序、H5、App 等),因此不能直接使用浏览器特有的 API 或 DOM 操作。下面是一个基于 `uni-app` 的通用广告弹窗实现方案,适用于 Vue 3 + Composition API 或 Options API 风格。 ```vue <template> <view> <!-- 页面内容 --> <view class="page-content"> <text>欢迎访问我们的网站</text> </view> <!-- 广告弹窗遮罩层 --> <view v-if="showAd" class="ad-modal-mask" @click="closeAd"> <view class="ad-modal-content" @click.stop> <!-- 广告图片 --> <image :src="adImage" mode="widthFix" class="ad-image" /> <!-- 关闭按钮 --> <button class="ad-close-btn" @click="closeAd">关闭</button> <!-- 跳转按钮 --> <navigator url="/pages/ad-landing/index" hover-class="none" class="ad-navigator"> 查看详情 </navigator> </view> </view> </view> </template> <script setup> import { ref, onMounted } from 'vue'; const showAd = ref(false); const adImage = 'https://via.placeholder.com/300x200?text=广告位'; // 替换为真实广告图 onMounted(() => { // 检查是否已关闭过广告(防止重复弹出) const adClosed = uni.getStorageSync('adClosed'); if (!adClosed) { // 延迟 2 秒显示广告 setTimeout(() => { showAd.value = true; }, 2000); } }); const closeAd = () => { showAd.value = false; // 存储关闭状态,有效期 24 小时 uni.setStorageSync('adClosed', 'true'); setTimeout(() => { uni.removeStorageSync('adClosed'); }, 24 * 60 * 60 * 1000); // 24小时后可再次显示 }; </script> <style scoped> .page-content { padding: 20px; text-align: center; } .ad-modal-mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; z-index: 9998; } .ad-modal-content { width: 80%; max-width: 300px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); text-align: center; } .ad-image { width: 100%; height: auto; border-top-left-radius: 12px; border-top-right-radius: 12px; } .ad-close-btn { margin: 10px 10px 0; padding: 6px 0; font-size: 14px; color: #333; background-color: #f0f0f0; border-radius: 6px; } .ad-navigator { margin: 0 10px 10px; padding: 8px 0; font-size: 16px; color: white; background-color: #ff6b6b; border-radius: 6px; text-align: center; } </style> ``` --- ### 回答问题: **如何在 uni-app 中实现广告弹窗?** 上述代码展示了在 `uni-app` 中实现广告弹窗的核心逻辑和最佳实践: 1. **跨平台兼容性**:使用 `uni.getStorageSync` 和 `uni.setStorageSync` 进行本地存储操作,兼容小程序App 和 H5。 2. **防止频繁弹出**:通过 `localStorage` 类似机制(`uni.storage`)记录用户是否关闭过广告。 3. **事件处理**: - 使用 `@click.stop` 阻止冒泡,避免点击内容区域关闭弹窗- 使用 `<navigator>` 实现跳转到广告落地页,支持小程序页面跳转。 4. **响应式设计**:使用 `view` 和 `image` 组件替代 div/img,适配各端渲染。 5. **定时控制**:在 `onMounted` 后延迟显示广告,提升用户体验。 > ⚠️ 注意事项: -小程序中,某些外链跳转需配置业务域名。 - 图片资源建议上传至项目或 CDN,避免外部链接失效。 - 若广告涉及商业化投放(如激励视频),应使用平台广告组件(如 `ad` 组件)。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值