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.最后一个问题。打包之前要配置第三方的信息