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编写朋克风格的天气查询程序

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

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

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境：Ubuntu22.04 带图
阅读更多...
Python实现自动化Word文档样式复制与内容生成

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现：样式与表格的深度复制1. 表格复制（含样式与内容）2
阅读更多...
Python程序打包exe,单文件和多文件方式

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》：本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一（适用于文件较少的程
阅读更多...
python如何生成指定文件大小

python如何生成指定文件大小

《python如何生成指定文件大小》：本文主要介绍python如何生成指定文件大小的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python生成指定文件大小方法一(速度最快)方法二(中等速度)方法三(生成可读文本文件–较慢)方法四(使用内存映射高效生成
阅读更多...
Maven项目中集成数据库文档生成工具的操作步骤

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin（推荐）的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事
阅读更多...
Python程序的文件头部声明小结

Python程序的文件头部声明小结

《Python程序的文件头部声明小结》在Python文件的顶部声明编码通常是必须的,尤其是在处理非ASCII字符时,下面就来介绍一下两种头部文件声明,具有一定的参考价值,感兴趣的可以了解一下... 目录一、# coding=utf-8二、#!/usr/bin/env python三、运行Python程序四、
阅读更多...
如何基于Python开发一个微信自动化工具

如何基于Python开发一个微信自动化工具

《如何基于Python开发一个微信自动化工具》在当今数字化办公场景中,自动化工具已成为提升工作效率的利器,本文将深入剖析一个基于Python的微信自动化工具开发全过程,有需要的小伙伴可以了解下... 目录概述功能全景1. 核心功能模块2. 特色功能效果展示1. 主界面概览2. 定时任务配置3. 操作日志演示
阅读更多...
Python处理大量Excel文件的十个技巧分享

Python处理大量Excel文件的十个技巧分享

《Python处理大量Excel文件的十个技巧分享》每天被大量Excel文件折磨的你看过来！这是一份Python程序员整理的实用技巧,不说废话,直接上干货,文章通过代码示例讲解的非常详细,需要的朋友可... 目录一、批量读取多个Excel文件二、选择性读取工作表和列三、自动调整格式和样式四、智能数据清洗五、
阅读更多...
MybatisX快速生成增删改查的方法示例

MybatisX快速生成增删改查的方法示例

《MybatisX快速生成增删改查的方法示例》MybatisX是基于IDEA的MyBatis/MyBatis-Plus开发插件,本文主要介绍了MybatisX快速生成增删改查的方法示例,文中通过示例代... 目录1 安装2 基本功能2.1 XML跳转2.2 代码生成2.2.1 生成.xml中的sql语句头2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2