uniapp微信小程序生成分享海报，进入页面就循环生成多张~

2024-04-02 15:58
文章标签 uniapp 程序 微信 页面 生成 分享 循环 进入 海报

本文主要是介绍uniapp微信小程序生成分享海报，进入页面就循环生成多张~，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先看看整个案例成效的效果

本案例是uniapp小程序，用到uview框架。

需求描述：

进入页面的时候循环生成多张，并以swiper的方式展示出来，以供使用。

下面我们进入正题

需要用到的插件：https://ext.dcloud.net.cn/plugin?id=1480

可以到插件市场去下载和看使用教程，作者非常贴心，插件还提供了海报样式代码生成的工具，

在这里插入图片描述

可以根据自己的需要布局样式生成相应的JSON样式，然后再稍微调整一下细节，简直不要太方便。

自己去看和使用我就不多说了。

生成海报页面代码

<template><view class="wrap"><u-navbar :custom-back="backPage" title-size="36" title-color="#333" :titleBold="true"  title="海报分享"></u-navbar><!-- 固定定位在看不见的地方用于canvas绘制 --><view class="canvas-box"><canvas canvas-id="shareIndex" style="width:750px;height:1332px" />​		</view>
​		<!-- 海报盒子 -->
​		<view class="poster-box" >
​			<swiper class="swiper" previous-margin='95rpx' v-if="showPoster" next-margin='95rpx' current="0" @change="changeSwiper">
​				<swiper-item class="swiper-item" v-for="(item,index) in posterLsit" :key="index">
​					<view class="img-box" :class="{'small':index!==activeIndex}">
​						<image v-if="item&&item!=''" class="img" :src='item' />
​					</view>
​				</swiper-item>
​			</swiper>
​		</view>
​		<!-- 分享工具栏 -->
​		<view class="u-flex u-row-between btn-box">
​			<view class="poster-btn u-reset-button u-flex u-col-center u-row-center" @click="savePoster">
​				<image src="../../static/img/userCenter/icon-share.png" style="width:26rpx;height:26rpx;"
​					mode="scaleToFill"></image>
​				<text class="mgl-5">保存海报</text>
​			</view>
​			<button class="share-btn u-reset-button u-flex u-col-center u-row-center" open-type="share">
​				<image src="../../static/img/userCenter/icon-link.png" style="width:26rpx;height:26rpx;"
​					mode="scaleToFill"></image>
​				<text class="mgl-5">分享好友</text>
​			</button>
​		</view>
​		
​	</view>
</template>

登录状态和share.js混入函数可以先忽略，最主要的是看获取二维码之后的for循环await promise生成多张海报（注意不要用foreach，foreach中的await有问题），生成海报的样式可以自己去生成和调整

<script>import { mapState } from 'vuex';
import {SHARE_MIXIN
} from '@/utils/share.js'export default {mixins: [SHARE_MIXIN],data() {return {list: [{image: 'https://dmj-mall.oss-cn-shenzhen.aliyuncs.com/v70/shop/poster1.png',}, {image: 'https://dmj-mall.oss-cn-shenzhen.aliyuncs.com/v70/shop/poster2.png',}],shareData: false,shareImg: '',showShareImg: false,choosePosterBgImg: '',posterLsit: [],activeIndex: 0, //轮播图索引showPoster: false,// 全屏loading動畫显示隐藏pageLoading:true}},onLoad() {// 首页数据分享构造this.SHARE_TO_FRIENDS_DATA = { //已经做了minxin函数，需要调用分享直接写在data里面title: '萌宝计划，海量大牌母婴好货，超低折扣，每日上新，一起来抢购吧～',path: 'H5/index?inviteCode=' + (this.USERINFO ? this.USERINFO.inviteCode : ''),imageUrl: 'https://dmjmicro.oss-cn-shenzhen.aliyuncs.com/mengbao/share-cover.jpg',desc: '萌宝计划，海量大牌母婴好货，超低折扣，每日上新，一起来抢购吧～',content: '萌宝计划，海量大牌母婴好货，超低折扣，每日上新，一起来抢购吧～',}this.getQrCode()},computed: {...mapState(['USERINFO'])},methods: {changeSwiper(e) {this.activeIndex = e.detail.currentthis.circular1 = true},// 获取小程序二维码,下载之后再进行绘制async getQrCode() {let qrCode = await this.$api_pt.Goods.getQrcode({page: 'H5/index',scene: this.USERINFO.inviteCode,IS_LOADING:false}).then(res => {return res.dataconsole.log('小程序码', qrCode);})let _this = thisuni.downloadFile({url: qrCode,async success(res) {console.log('下载成功菊花码成功', res.tempFilePath);for (let i = 0; i < _this.list.length; i++) {await _this.drawPoster(_this.list[i].image, res.tempFilePath).then(resPoster => {console.log('绘制返回的海报', resPoster);_this.posterLsit.push(resPoster)})}_this.showPoster = true// 隐藏加载动画_this.pageLoading=false},fail(err) {console.log('下载失败', err)}})},drawPoster(img, code) {return new Promise((resolve, reject) => {uni.downloadFile({url: img,success: res => {const ctx = uni.createCanvasContext('shareIndex')ctx.clearRect(0, 0, 750, 1332)ctx.drawImage(res.tempFilePath, 0, 0, 750, 1332)this.drawCircle({ctx: ctx,img: code,avatarX: 750 / 2 - 129,avatarY: 1000,imgWidth: 240,imgHeight: 240,num: 18})ctx.draw(false, () => {//分享图片uni.canvasToTempFilePath({x: 0,y: 0,width: 750,height: 1332,destWidth: 1080,destHeight: 1918,fileType: 'jpg',quality: 0.8,canvasId: 'shareIndex',success: (res) => {// that.imageUrl[index] = res.tempFilePathconsole.log('绘制成功', res.tempFilePath);resolve(res.tempFilePath)},fail: (err) => {reject(err)}})})},fail(err) {console.log(err)console.log('绘制失败', err);// this.app.loading(false)}})})},drawCircle({ ctx, img, avatarX, avatarY, imgWidth, imgHeight, num = 0 }) {//画布截取圆形区域，ctx canvas对象，img 需截取图像，avatarX 图像在画布的水平位置，avatarY 图像在画布的垂直位置，imgWidth 图像宽度，imgHeight 图像高度, num 多添加的空白填充ctx.save()ctx.beginPath() //开始绘制ctx.fillStyle = '#fff'ctx.arc((imgWidth + num) / 2 + avatarX,(imgHeight + num) / 2 + avatarY,(imgWidth + num) / 2, 0, Math.PI * 2, false)ctx.fill()ctx.clip()ctx.drawImage(img, avatarX + num / 2, avatarY + num / 2, imgWidth, imgHeight)ctx.closePath()ctx.restore()},// 保存海报savePoster() {uni.getSetting({success:(res)=> {console.log(res.authSetting)if(res.authSetting['scope.writePhotosAlbum']==false){uni.openSetting({success:(res)=> {if(res.authSetting['scope.writePhotosAlbum']==true){uni.saveImageToPhotosAlbum({filePath: this.posterLsit[this.activeIndex],success: res => {console.log('保存成功', res)this.showMsg('保存成功!')},fail: (err) => {console.log('保存失败', err)this.showMsg('保存失败，请重试!')}})}}});}else{uni.saveImageToPhotosAlbum({filePath: this.posterLsit[this.activeIndex],success: res => {console.log('保存成功', res)this.showMsg('保存成功,去分享吧')},fail: (err) => {console.log('保存失败', err)this.showMsg('保存失败，请重试!')}})}}})},}
}
``` 
<style lang="less" scoped>.poster-box {position: relative;height: 929rpx;width: 100%;margin-top: 38rpx ;&.poster-no {padding-top: 360rpx;background-color: #f2f2f2;text-align: center;.loadong-img {width: 200rpx;height: auto;}}.swiper {width: 100%;height: 100%;.swiper-item {display: flex;align-items: center;justify-content: center;width: 522rpx;.img-box {overflow: hidden;width: 522rpx;height: 929rpx;background-color: #fff;border-radius: 16rpx;transition: 500ms;&.small {transform: scale(0.9);}.img {width: 100%;height: 100%;}}}}}.canvas-box {position: fixed;bottom: -3000rpx;left: -4000rpx;}.btn-box {width: 70%;margin: 86rpx auto 0;.poster-btn {background-image: url(../../static/img/userCenter/poster-btn.png);background-size: 100%;color: #fff;font-size: 26rpx;width: 230rpx;height: 88rpx;}.share-btn {background-image: url(../../static/img/userCenter/share-btn.png);background-size: 100%;color: #fff;font-size: 26rpx;width: 230rpx;height: 88rpx;}}</style>

大概思路就是这样，有问题留言。

这篇关于uniapp微信小程序生成分享海报，进入页面就循环生成多张~的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/870413。

相关文章

MybatisGenerator文件生成不出对应文件的问题

MybatisGenerator文件生成不出对应文件的问题

《MybatisGenerator文件生成不出对应文件的问题》本文介绍了使用MybatisGenerator生成文件时遇到的问题及解决方法,主要步骤包括检查目标表是否存在、是否能连接到数据库、配置生成... 目录MyBATisGenerator 文件生成不出对应文件先在项目结构里引入“targetProje
阅读更多...
Golang操作DuckDB实战案例分享

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck
阅读更多...
Python使用qrcode库实现生成二维码的操作指南

Python使用qrcode库实现生成二维码的操作指南

《Python使用qrcode库实现生成二维码的操作指南》二维码是一种广泛使用的二维条码,因其高效的数据存储能力和易于扫描的特点,广泛应用于支付、身份验证、营销推广等领域,Pythonqrcode库是... 目录一、安装 python qrcode 库二、基本使用方法1. 生成简单二维码2. 生成带 Log
阅读更多...
将Python应用部署到生产环境的小技巧分享

将Python应用部署到生产环境的小技巧分享

《将Python应用部署到生产环境的小技巧分享》文章主要讲述了在将Python应用程序部署到生产环境之前,需要进行的准备工作和最佳实践,包括心态调整、代码审查、测试覆盖率提升、配置文件优化、日志记录完... 目录部署前夜：从开发到生产的心理准备与检查清单环境搭建：打造稳固的应用运行平台自动化流水线：让部署像
阅读更多...
Python使用Pandas库将Excel数据叠加生成新DataFrame的操作指南

Python使用Pandas库将Excel数据叠加生成新DataFrame的操作指南

《Python使用Pandas库将Excel数据叠加生成新DataFrame的操作指南》在日常数据处理工作中,我们经常需要将不同Excel文档中的数据整合到一个新的DataFrame中,以便进行进一步... 目录一、准备工作二、读取Excel文件三、数据叠加四、处理重复数据（可选）五、保存新DataFram
阅读更多...
四种简单方法 轻松进入电脑主板 BIOS 或 UEFI 固件设置

四种简单方法 轻松进入电脑主板 BIOS 或 UEFI 固件设置

《四种简单方法轻松进入电脑主板BIOS或UEFI固件设置》设置BIOS/UEFI是计算机维护和管理中的一项重要任务，它允许用户配置计算机的启动选项、硬件设置和其他关键参数，该怎么进入呢？下面... 随着计算机技术的发展，大多数主流 PC 和笔记本已经从传统 BIOS 转向了 UEFI 固件。很多时候，我们也
阅读更多...
SpringBoot生成和操作PDF的代码详解

SpringBoot生成和操作PDF的代码详解

《SpringBoot生成和操作PDF的代码详解》本文主要介绍了在SpringBoot项目下,通过代码和操作步骤,详细的介绍了如何操作PDF,希望可以帮助到准备通过JAVA操作PDF的你,项目框架用的... 目录本文简介PDF文件简介代码实现PDF操作基于PDF模板生成，并下载完全基于代码生成，并保存合并P
阅读更多...
C#读取本地网络配置信息全攻略分享

C#读取本地网络配置信息全攻略分享

《C#读取本地网络配置信息全攻略分享》在当今数字化时代,网络已深度融入我们生活与工作的方方面面,对于软件开发而言,掌握本地计算机的网络配置信息显得尤为关键,而在C#编程的世界里,我们又该如何巧妙地读取... 目录一、引言二、C# 读取本地网络配置信息的基础准备2.1 引入关键命名空间2.2 理解核心类与方法
阅读更多...
Golang使用etcd构建分布式锁的示例分享

Golang使用etcd构建分布式锁的示例分享

《Golang使用etcd构建分布式锁的示例分享》在本教程中,我们将学习如何使用Go和etcd构建分布式锁系统,分布式锁系统对于管理对分布式系统中共享资源的并发访问至关重要,它有助于维护一致性,防止竞... 目录引言环境准备新建Go项目实现加锁和解锁功能测试分布式锁重构实现失败重试总结引言我们将使用Go作
阅读更多...
使用JavaScript将PDF页面中的标注扁平化的操作指南

使用JavaScript将PDF页面中的标注扁平化的操作指南

《使用JavaScript将PDF页面中的标注扁平化的操作指南》扁平化(flatten)操作可以将标注作为矢量图形包含在PDF页面的内容中,使其不可编辑,DynamsoftDocumentViewer... 目录使用Dynamsoft Document Viewer打开一个PDF文件并启用标注添加功能扁平化
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2