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微信小程序生成分享海报，进入页面就循环生成多张~的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---