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。

相关文章

python生成随机唯一id的几种实现方法

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1：使用 UUID 模块（推荐）方法 2：使用 Secrets 模块（安全敏感场景）方法
阅读更多...
一文详解如何使用Java获取PDF页面信息

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸（宽高）四、获取页面旋转角度五、判断
阅读更多...
Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建
阅读更多...
golang程序打包成脚本部署到Linux系统方式

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译（设置GOOS为linux生成无后缀二进制文件）,上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序
阅读更多...
使用Docker构建Python Flask程序的详细教程

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker
阅读更多...
Python中你不知道的gzip高级用法分享

Python中你不知道的gzip高级用法分享

《Python中你不知道的gzip高级用法分享》在当今大数据时代,数据存储和传输成本已成为每个开发者必须考虑的问题,Python内置的gzip模块提供了一种简单高效的解决方案,下面小编就来和大家详细讲... 目录前言：为什么数据压缩如此重要1. gzip 模块基础介绍2. 基本压缩与解压缩操作2.1 压缩文
阅读更多...
java向微信服务号发送消息的完整步骤实例

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》：本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试
阅读更多...
Java中的for循环高级用法

Java中的for循环高级用法

《Java中的for循环高级用法》本文系统解析Java中传统、增强型for循环、StreamAPI及并行流的实现原理与性能差异,并通过大量代码示例展示实际开发中的最佳实践,感兴趣的朋友一起看看吧... 目录前言一、基础篇：传统for循环1.1 标准语法结构1.2 典型应用场景二、进阶篇：增强型for循环2.
阅读更多...
Go语言代码格式化的技巧分享

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具：gofmt 与 go fmt（一）
阅读更多...
Python循环结构全面解析

Python循环结构全面解析

《Python循环结构全面解析》循环中的代码会执行特定的次数,或者是执行到特定条件成立时结束循环,或者是针对某一集合中的所有项目都执行一次,这篇文章给大家介绍Python循环结构解析,感兴趣的朋友跟随... 目录for-in循环while循环循环控制语句break语句continue语句else子句嵌套的循
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2