微信小程序生成海报并保存到系统相册(前端代码)

生成海报并保存到系统相册(前端)

该功能我用的是 Vant Weapp 组件

wxml文件

<!-- 触发底部弹框的按钮 -->
<button bindtap="share"></button>

<!-- 分享弹框 -->	   
<van-popup show="{{ shareShow }}"  custom-style="height: 25%" closeable close-icon-position="top-right" safe-area-inset-bottom round position="bottom" bind:close="onCloseShare">
		<view class="fl-r fl-j-sa fl-a-c" style="height:100%">
			<view class="optionItem fl-c fl-a-c">
					<button open-type="share" class="optionItem_button">
						<text class="iconfont iconicon_weixin-logo"></text>
						<view>分享小程序</view>
					</button>
					
			</view>
			<view class="optionItem fl-c fl-a-c" bindtap="generatePoster">
				<text class="iconfont iconweixinpengyouquan"></text>
				<view>生成分享海报</view>
			</view>
		</view>
</van-popup>

注：van-popup API 解释

• shareShow ->变量，用来控制弹框是否显示。默认为false custom-style ->弹框样式
• closeable->是否显示关闭icon
• close-icon-position=“top-right” ->将关闭按钮位置放到右上
• safe-area-inset-bottom ->是否为 iPhoneX 留出底部安全距离
• round -> 弹框圆角
• position=“bottom” ->弹框位置–下

js文件

data:{
	shareShow :false, //弹框是否显示
},
// 显示分享弹框
share(){
	this.setData({shareShow:true})
},
 // 分享弹框 关闭
onCloseShare(){
    this.setData({shareShow:false})
},
//生成海报
generatePoster(){
	wx.showLoading({
		title:"加急生成中......"
	})
	const token  = wx.getStorageSync('token')
	// 向后端传递的参数
	let params = {
		商品名...,
		图片...,
		...
	}
	 wx.request({
        url: 'url路径',
        data:params,
        method: 'POSt',
        header: {
            'Authorization': token
        },
        success: res => {
        	if(res.data.code === 1){
        		// 检查相册访问授权
        		this.checkAuthentication(返回值的图片路径)
        		// 关闭弹框
           		this.setData({shareShow:false})	
        	}
        },
        complete: str=> {
           wx.hideLoading()
            wx.showToast({
                title: str.data.meg,
                icon: 'none'
            })
        }
    })
},

// 先检查相册访问授权情况
// url -> 后端返回值的url路径
  checkAuthentication: function(url) {
	// wx.getSetting获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
    wx.getSetting({
        success: (res) => {
            //检查是否有访问相册的权限，如果没有则通过wx.authorize方法授权
            if (!res.authSetting['scope.writePhotosAlbum']) {
                wx.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success: (res) => {
                        //用户点击允许获取相册信息后进入下载保存逻辑
                        this.savePost(url)
                    }
                })
            } else {
                this.savePost(url)
            }
        }
    })
},
//保存海报
   savePost: function(url) {
        let me = this;
        wx.showLoading({
            title: '保存中...',
        })
        wx.downloadFile({
            url: `${url}`,
            success(res) {
                wx.getFileSystemManager()
                    .saveFile({ //下载成功后保存到本地
                        tempFilePath: res.tempFilePath,
                        // filePath: savePath,
                        success(res2) {
                            //获取了相册的访问权限，使用 wx.saveImageToPhotosAlbum 将图片保存到相册中
                            wx.saveImageToPhotosAlbum({
                                filePath: res2.savedFilePath,
                                success: (res) => {
                                    //保存成功弹出提示，告知一下用户
                                    wx.showToast({
                                        title: '保存成功！'
                                    })
                                    me.setData({
                                        share: false
                                    })
                                },
                                fail: (err) => {
                                    wx.showToast({
                                        title: '保存失败！',
                                        icon: 'none'
                                    })
                                }
                            })
                            wx.hideLoading()
                        },
                        fail: (err) => console.log(err)
                    })
            },
            fail: (err) => wx.showToast({
                title: '保存失败',
                icon: 'none'
            })
        })
    },

wxss文件

/* 这部分可以做成统一样式*/
.fl-r {
  display: flex;
  flex-direction: row;
}

.fl-c {
  display: flex;
  flex-direction: column;
}

.fl-j-c {
  justify-content: center;
}

.fl-j-sa {
  justify-content: space-around;
}

.fl-j-sb {
  justify-content: space-between;
}
.fl-a-c {
  align-items: center;
}
/* 统一样式结束 */

/* 分享海报样式 */
.optionItem {
	font-size: 30rpx;
}
.optionItem>.iconfont {
	font-size: 50rpx;
	margin-bottom: 10rpx;
	color: rgb(26, 173, 25)
}
.optionItem_button{
    background-color: #fff;
    line-height: normal;
	font-size: 30rpx;
}
.optionItem_button>.iconfont{
    font-size: 50rpx;
	margin-bottom: 10rpx;
	color: rgb(26, 173, 25)
}
.sharePoster{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
}
.sharePoster .shareicon{
    font-size: 40rpx;
    color: #fff;
    line-height: 100rpx;
    position: absolute;
    top: 0;
    z-index: 101;
    width: 100%;
    box-sizing: border-box;
    padding: 100rpx 100rpx 0;

}

效果图如下：

希望可以帮助需要帮助的你，我是前端小白，有问题随时提哈。别客气。