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

2024-04-02 15:58

本文主要是介绍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

相关文章

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

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

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

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

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

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

Java中的for循环高级用法

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

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

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

Python循环结构全面解析

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

Python虚拟环境与Conda使用指南分享

《Python虚拟环境与Conda使用指南分享》:本文主要介绍Python虚拟环境与Conda使用指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、python 虚拟环境概述1.1 什么是虚拟环境1.2 为什么需要虚拟环境二、Python 内置的虚拟环境工具

MySQL存储过程之循环遍历查询的结果集详解

《MySQL存储过程之循环遍历查询的结果集详解》:本文主要介绍MySQL存储过程之循环遍历查询的结果集,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言1. 表结构2. 存储过程3. 关于存储过程的SQL补充总结前言近来碰到这样一个问题:在生产上导入的数据发现

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt