- A+
所属分类:建站
微信小程序没有直接分享到朋友圈的功能,所以只能利用迂回的方法。
直接上代码...
1、首先判断手机图片存储权限
//保存图片权限判断
quanxian: function(){
var that=this;
wx.getSetting({
success(res) {
// console.log(res);
if (!res.authSetting['scope.writePhotosAlbum']) {
console.log('授权失败');
that.setData({
truew:true,
shoquan1: "none",
shoquan2: "bolck"
});
} else {
console.log('授权成功');
that.setData({
truew: false,
shoquan1: "bolck",
shoquan2: "none"
});
}
}
})
},
2、将分享页面用canvas画出来
//画图
path_img: function(m) {
var that = this;
//资源
var titles = that.data.title;
titles = titles.substring(0, 10);
var newstext1 = that.data.newstext1;
newstext1 = newstext1.substring(0, 12);
var newstext2 = that.data.newstext1;
newstext2 = newstext2.substring(12, 20);
console.log(newstext2);
//绘图
const ctx = wx.createCanvasContext('myCanvas');
var imgPath = '../../images/4.jpg'
var bgImgPath = '../../images/favicon.jpg';
var bgImgPaths = '../../images/er.jpg';
//banner图
ctx.drawImage(imgPath, 0, 0, 300, 150); //广告图片
//背景
ctx.setFillStyle('#fff'); //文字区域背景颜色
//页面大小
ctx.fillRect(0, 150, 300, 500); //文字区域大小
//其他图片设置
ctx.drawImage(bgImgPath, 20, 250, 60, 60); //商品图片
ctx.drawImage(bgImgPaths, 200, 350, 80, 80); //二维码图片
//字体大小
ctx.setFontSize(18); //字体大小
ctx.setFillStyle('#252525'); //字体颜色
ctx.fillText(titles, 20, 200); //字体内容及位置
ctx.setFontSize(16); //字体大小
ctx.setFillStyle('#252525'); //字体颜色
ctx.fillText(newstext1, 105, 270); //字体内容及位置
ctx.fillText(newstext2, 105, 295); //字体内容及位置
ctx.setFontSize(16) //字体大小
ctx.fillText('长按扫码查看详情', 30, 400); //字体内容及位置
ctx.draw(); //绘图结束
fale = true;
},
3、将canvas转换为图片
// 转换
fenxiang: function() {
var that = this;
that.path_img(0);
var times = setInterval(function() {
// console.log(fale);
if (fale == true) {
that.setData({
disply: "path_img", //path_img
page_body: "page_body", //page_body
page_class: 'page_class' //page_class
});
// 3. canvas画布转成图片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 600,
height: 960,
destWidth: 600,
destHeight: 960,
canvasId: 'myCanvas',
success: function(res) {
console.log(res.tempFilePath);
that.setData({
shareImgSrc: res.tempFilePath
})
app.globalData.lang = res.tempFilePath;
},
fail: function(res) {
console.log(res)
}
});
fale = false;
clearInterval(times);
}
}, 100);
},
4、保存到手机文件夹
// 保存
baocun: function() {
var that = this;
console.log(that.data.shareImgSrc);
//4. 当用户点击分享到朋友圈时,将图片保存到相册
wx.saveImageToPhotosAlbum({
filePath: that.data.shareImgSrc,
success(res) {
wx.showModal({
title: '存图成功',
content: '图片成功保存到相册了,去发圈噻~',
showCancel: false,
confirmText: '好哒',
confirmColor: '#72B9C3',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
}
that.hideShareImg(); //返回到首页
that.setData({
disply: "", //path_img
page_body: "", //page_body
page_class: '' //page_class
});
}
})
},
fail: function(res) {
console.log("保存失败");
that.quanxian();
}
});
},
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-