微信小程序实现朋友圈分享功能，以及保存图片到手机功能

分享到朋友圈

代码展示：

效果图：

onShareAppMessage(Object object)参数：

监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。

return的参数：

onShareTimeline()的参数：

只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮
自定义转发内容（暂只在 Android 平台支持，不支持自定义页面路径）

保存图片到手机

实例代码：

js：

const app = getApp();
var api = require('../../utils/api.js');
var time = null;

/**
* 页面的初始数据
* 这里的back_img,headimg是从后台接收的信息，为了有更好的效果展示直接用的image文件夹里的图片
*/
data: {
show: false,
back_img:"../../image/1.jpg",
headimg: "../../image/1.jpg",
img: '',
back_img1: "",
headimg1: "",
img1: '',
goods_data: {name:'ps小可爱写的保存图片哦'},
sku: {old_sell_price:'4.5',market_price:'4.5'},
bg_explain: "",
share: '',
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取分享的信息
var that = this;
var data = {
actoken: api.封装文件的接口,
service: '接口'
};
api.request(data, function(res) {
console.log(res)
if (res.data.code == 0) {
that.setData({
img: res.data.img,
})
that.downloadimg3(res.data.headimgurl);
that.downloadimg2(res.data.img);
that.downloadimg1(res.data.goods_img);
}
})
},

canvastoimg() {
var that = this;
wx.getImageInfo({
src: that.data.back_img1,
success: function(res) {
console.log(res)
var x1 = res.width;
var y1 = res.height;
const ctx = wx.createCanvasContext('img')
ctx.setFillStyle('#fff')
ctx.fillRect(0, 0, 275, 475)
ctx.drawImage(that.data.back_img1, 0, 0, 275, 233);
ctx.drawImage(that.data.img1, 77, 320, 120, 120);
let textareaWidth = Math.ceil(245 / 14);
ctx.setFillStyle('#000')
ctx.setFontSize(14)
var text = [];
var content = that.data.goods_data.name
if (content.length > 0) {
text.push(content.substr(0, textareaWidth))
text.push(content.substr(textareaWidth, textareaWidth - 6))
if (text[1].length > 0 && content.length >= 30) {
text[1] = text[1] + '...'
}
}
ctx.fillText(text[0], 11, 248)
ctx.fillText(text[1], 11, 262)
ctx.setFontSize(12)
ctx.setFillStyle('#bbb')
ctx.setFillStyle('#e61e1e')
ctx.setFontSize(12)
ctx.fillText('¥', 15, 285)
ctx.setFontSize(18)
ctx.fillText(that.data.sku.old_sell_price, 25, 285)
ctx.setFontSize(12)
ctx.fillText(that.data.bg_explain, 15, 300)
ctx.fillText('长按识别小程序码，查看商品', 70, 460)
ctx.save();
ctx.beginPath()
ctx.arc(137, 380, 27, 0, 2 * Math.PI, false)
ctx.stroke();
ctx.clip()
ctx.drawImage(that.data.headimg1, 110, 353, 54, 54)
ctx.restore()
ctx.draw(false, function() {
console.log();
setTimeout(function() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 450,
height: 950,
canvasId: 'img',
success(res1) {
console.log(res1.tempFilePath)
that.setData({
share: res1.tempFilePath
})
}
}, 500)
})
})
}
})
},

saveimgfun() {
var that = this;
clearTimeout(time);
if (!this.data.share) {
wx.showLoading({
title: '正在生成图片',
icon: 'none',
mask: true
})
time = setTimeout(function() {
that.saveimgfun();
}, 2000)
} else {
var url = this.data.share;
wx.downloadFile({
url: that.data.img,
success: function(res) {
if (res.statusCode === 200) {
wx.saveImageToPhotosAlbum({
filePath: url,
success(res) {
wx.showToast({
title: '保存图片成功！',
})
},
fail(res) {
wx.showToast({
title: '保存图片失败！',
icon: 'none',
duration: 1500
})
}
})
}
}
})
}
},

saveimg() {
var that = this;
wx.getSetting({
success: (res) => {
console.log(res);
console.log(res.authSetting['scope.writePhotosAlbum']);
if (res.authSetting['scope.writePhotosAlbum'] != undefined && res.authSetting['scope.writePhotosAlbum'] != true) { //非初始化进入该页面,且未授权
wx.showModal({
title: '是否授权图片保存',
content: '需要获取您的图片保存授权，请确认授权，否则图片保存功能将无法使用',
success: function(res) {
if (res.cancel) {
console.info("授权失败返回数据");
} else if (res.confirm) {
wx.openSetting({
success: function(data) {
console.log(data);
if (data.authSetting["scope.writePhotosAlbum"] == true) {
wx.showToast({
title: '授权成功',
icon: 'success',
duration: 5000
})
that.saveimgfun();
//再次授权，调用getLocationt的API
} else {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 5000
})
}
}
})
}
}
})
} else if (res.authSetting['scope.writePhotosAlbum'] == undefined) { //初始化进入
that.saveimgfun();
} else if (res.authSetting['scope.writePhotosAlbum'] == true) {
that.saveimgfun();
}
}
})
},

downloadimg1(img) {
var that = this;
wx.downloadFile({
url: img,
success(res) {
console.log(res)
if (res.statusCode === 200) {
that.setData({
back_img1: res.tempFilePath
})
setTimeout(function() {
that.canvastoimg();
}, 1000)
}
}
})
},

downloadimg2(img) {
var that = this;
wx.downloadFile({
url: img,
success(res) {
console.log(res)
if (res.statusCode === 200) {
that.setData({
img1: res.tempFilePath
})
}
}
})
},

downloadimg3(img) {
var that = this;
wx.downloadFile({
url: img,
success(res) {
console.log(res)
if (res.statusCode === 200) {
that.setData({
headimg1: res.tempFilePath
})
}
}
})
},

opentop() {
this.setData({
show: true
})
},

WXML：

<view bindtap="opentop">分享</view>

<!-- 保存到手机的图片 -->
<canvas canvas-id="img" style="width: 275px; height: 475px;position:absolute;left:0;top:-1000px;opacity:0;z-index:-100;">  </canvas>

<!-- 弹窗 -->
<view class="open" wx:if="{{show}}" catchtouchmove="preventTouchMove">
<view class="top_floor" bindtap="closetop"></view>
<view class="o_main">
<image class="o_goods_img" mode='aspectFill' src="{{back_img}}"></image>
<view class="o_title">
{{goods_data.name}}
</view>
<view class="o_price"><text>¥</text>{{sku.old_sell_price}}</view>
<view class='o_price1'>¥{{sku.market_price}}</view>
<view class="o_price_p">{{bg_explain}}</view>
<view class="o_img_box">
<image class="o_code_img" mode='aspectFit' src="{{img}}"></image>
<image class="o_head" src="{{headimg}}"></image>
</view>
<view class="o_tc">长按识别小程序码，查看商品</view>
</view>
<view class="o_btn" bindtap='saveimg'>保存图片</view>
</view>

效果图：

点击分享二字之后，弹出如下图，再点击保存图片就可以了