微信小程序分享功能

button类型 open-type="share"

<button class="share-btn" open-type="share" bindtap="onShareArticle"><image class="share-img" src="../../static/分享.png"></image></button>

onShareArticle() {
    uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
    });
},
//分享携带的路径以及参数回显到文章详情
onShareAppMessage() {
    return {
        title: this.item.title,
        imageUrl: this.articleImage,
	path: '/pages/detail/detail?item=' + this.options
    };
 },
onShareTimeline() {
    return {
        title: this.articleTitle,
	imageUrl: this.articleImage,
	query: 'url=' + this.options
    };
},
		

效果图

分享插件，使用ref调用子方法进行图片保存本地

//template
<l-painter ref="painter" isCanvasToTempFilePath @success="path = $event"
hidden css="width: 750rpx; padding-bottom: 40rpx;background:linear-gradient(,#ff971b 0%, #ff5000 100%) ">
	<l-painter-image :src="userList.avatarUrl" css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;"
	/>
	<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
		<l-painter-text :text="userList.nickName" css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold"
		/>
		<l-painter-text text="为您推荐一个前端日常开发记录的小程序" css="color: rgba(255,255,255,.7); font-size: 24rpx"
		/>
	</l-painter-view>
	<l-painter-view css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
		<l-painter-image src="在线图片"
		css="width: 100%;object-fit: contain; background: #eee" />
	</l-painter-view>
</l-painter>

saveBase64ImageToLocal() {
	this.$refs.painter.canvasToTempFilePathSync({
		fileType: 'jpg',
		// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
		pathType: 'url',
		quality: 1,
		success: res = >{
			console.log(res.tempFilePath);
			uni.saveImageToPhotosAlbum({
				filePath: res.tempFilePath,
				success: function() {
					uni.showToast({
						title: '分享图保存成功'
					});
				},
				fail(error) {
					uni.showToast({
						title: '保存失败：' + error.errMsg
					});
				}
			});
		}
	});
}

效果图