uniapp二维码与背影图片并分享微信或朋友圈

本人是前端小白一枚。代码粗糙。如果对你有用。请帮我点一赞谢谢。

1.准备好二维码的插件和指定的背影图片

2.从服务器端获取二维码的信息（该分享用户的信息）

getyq() {
	let that = this;
		var option = {};
		option.url = 'user/Profile/get_invitation_url';
		option.success = function(res) {
			if (res.code) {
			    // 给二维码赋值相应的信息
				that.qrval = res.data
               
			} 
		};
		option.fail = function(res) {
			uni.showToast({title: '网络异常'});
		};
		util.ajaxGet(option);
	},

生成二维码
creatQrcode() {
				this.$refs.qrcode._makeCode();
			},

3.调取合并图片的组件。（这里是用canvas将二维码与图片合成一张图片）

//从二维码那里获取二维码的图片放在合成组件当中
			result1(data) {
				this.img2 = {
					src: data,
					width: 100,
					height: 100,
					top: uni.getSystemInfoSync().screenHeight - 180,
					left: uni.getSystemInfoSync().screenWidth - 230
				}
			},

4.贴出合成组件的代码（要懂一些vue父子组件传值和调用函数的方法，此组件是子组件）

<template>
	<view style="position: absolute;top: 0;left: 0;z-index: 2;width: 100%;height: 100%;" @longtap="save">
		<canvas :style="{width: width+'px', height: height+'px'}" canvas-id="firstCanvas"  ></canvas>
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: Number,
				default: uni.getSystemInfoSync().screenWidth,
			},
			height: {
				type: Number,
				default: uni.getSystemInfoSync().screenHeight
			},
			img1: {
				type: JSON,
				default: {
					src: '../../static/img/share.png', //这是背影图片
					top: 0,
					left: 0,
					width: uni.getSystemInfoSync().screenWidth, //获取手机设备的宽度
					height: uni.getSystemInfoSync().screenHeight
				}
			},
			img2: {
				type: JSON,
				default: {
					src: '../../static/img/erweima.jpeg', //这里是二维图片
					width: 100,
					height: 100,
					top: uni.getSystemInfoSync().screenHeight - 180,
					left: uni.getSystemInfoSync().screenWidth - 220
				}
			},
		},
		data() {
			return {
				context: '',
				time1: '',
				imgurl:""
			};
		},
		onReady: function(e) {
			this.time1 = setInterval(() => {
				if (this.img2.src) {
					clearInterval(this.time1)
					//开始绘制canvas将图片与二维码放在一起
					var context = uni.createCanvasContext('firstCanvas') 
					context.drawImage(this.img1.src, this.img1.left, this.img1.top, this.img1.width, this.img1.height)
					context.drawImage(this.img2.src, this.img2.left, this.img2.top, this.img2.width, this.img2.height)
					context.draw()
					
				}  
			}, 1000)
			
		}, 
		methods: {
			
			//保存图片的方法
			save() {
				var that=this;
				uni.showModal({
					title: '提示',
					content: '是否保存图片并分享？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title:'保存中...'
							})
							uni.canvasToTempFilePath({
								canvasId: 'firstCanvas',
								success: function(res) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.hideLoading()
											uni.showToast({
												title: '已经保存到相册，可以分享了',
												icon:'none'
											})
											that.$emit("sendmes",100);//告诉父组件图片保存成功
										}
									});
								},
								fail:function(error){
									uni.hideLoading()
								}
							})
						} else if (res.cancel) {

						}
					}
				});
			}
		}
	}
</script>

<style>
</style>

5.生成合成图片最好是一个单独的页面。要不然会有很多麻烦
6.为页面添加一个分享按钮

7.当用户点按分享按钮的时候

8.用户点击确定就会走save方法

9.保存完成通知父组件

10.父组件得到通知后会调起分享列表

sendmes(data) {
				if(data){
					this.open=true;
					this.beginshare(); //获取用户手机的服务商列表
					}
			},

11.这里需要注意服务商软件的列表在安卓上和ios上的排列位置会不同。我这里手动排序了一下。

	//调起用户手机的服务商列表
			beginshare() {
				var that = this;
				uni.getProvider({
					service: 'share',
					success: function(res) {
						var provider = res.provider.splice(',')
						var newarr = [];
						for (var i in provider) {
							
							if (provider[i] == 'qq') {
								newarr[2] = '分享到QQ'
							}
							if (provider[i] == 'weixin') {
								newarr[0] = '分享到微信'
								newarr[1] = '分享到朋友圈'
							}
						}
						that.provider = newarr
						console.log(that.provider);
						that.share();

					}
				});
			},

           //对服务商列表进行排序分配相应的参数
			share() {
				var that = this
				uni.showActionSheet({
					itemList: that.provider,
					success: function(rest) {
						if (rest.tapIndex == 0) {
                              that.sendimg("weixin","WXSceneSession");
						}else if (rest.tapIndex == 1) {
							
                              that.sendimg("weixin","WXSenceTimeline");
						}else if (rest.tapIndex == 2) {
                              that.sendimg("qq","");
						}

					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
           //用户从相册中选择图片进行分享
			sendimg(strProvider,strScene) {
				// 选取图片			
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], 
					sourceType: ['album'], 
					success: function(res) {
						
						uni.share({
							provider: strProvider,
							scene:strScene,
							type: 2,
							imageUrl:res.tempFilePaths[0],
							success: function(res) {
								uni.showToast({
									title: JSON.stringify(err),
									duration: 2000,
									icon:'none'
								});
							},
							fail: function(err) {
								
								console.log("fail:" + JSON.stringify(err));
							}
						});
						

					},
				}) // 选取图片		
			},

11.最后一个问题。打包之前要配置第三方的信息