小程序分享朋友圈
最近公司项目涉及到分享这个功能 ,网上看了很多的教程,截止今天,小程序官方并没有给出直接分享到朋友圈的方法,目前世面大多都是利用canvas去画得一个带小程序码的图片。尝试了一下 ,做得不是很好,但功能基本实现 ,可能还有点小细节需要处理一下 ,这里呢,大佬们别喷,我就做个笔记。下面贴一下关键代码
wxml
<view class="container" wx-if="{{show==1}}">
<view class='share-box'>
<view class='share' style="width:{{widthc+'px'}};height:800rpx">
<canvas canvas-id="shareCanvas" style="width:{{widthc+'px'}};height:800rpx"></canvas>
</view>
<view class='btn-box'>
<button bindtap='downloadImg' class='save-btn'>保存图片</button>
<view>分享海报时可到相册选取图片</view>
</view>
</view>
这个呢 期间遇到些问题,就是如果直接去定义canvas的宽度,兼容方面会有一些问题,所以我这边动态的去取了一个宽度,问题是解决了,但还是有些小细节需要处理。
wxss
page{
background:#FAFAFA;
}
.fl {
float: left;
}
.fr {
float: right;
}
.center{
margin-left:73rpx;
}
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.invite-title{
color:#81868F;
font-size: 32rpx;
text-align: center;
padding: 58rpx 0
}
.invite-box{
background:#ffffff;
margin:0 32rpx;
border-radius: 20rpx;
}
.invite-bg{
position: relative;
padding:100rpx 36rpx 36rpx 36rpx;
}
.invite-bg image{
width:100%
}
.invite-message{
text-align: center;
position: absolute;
top: 355rpx;
left: 142rpx;
}
.invite-m{
color:#FFFFFF;
font-size:30rpx;
}
.invite-p{
color:#ffffff;
font-size:88rpx;
}
.invite-x{
color:#ffffff;
font-size:30rpx;
}
.invite-approach{
margin-top:20rpx;
margin-bottom: 100rpx;
}
.invite-connect{
text-align: center;
width:158rpx;
height:158rpx;
}
.invite-pic{
width:158rpx;
height:158rpx;
}
.invite-connect view{
color:#25282E;
font-size:24rpx;
margin-top:-34rpx;
}
/*遮罩层 */
.shade {
width: 100%;
height: 100%;
top: 0;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
/*要显示在wrap的上面 */
z-index: 1;
position: absolute;
}
/*显示与隐藏的内容即点击核算后所展示的详细内容 */
.conts {
width: 100%;
height: 428rpx;
background-color: white;
position: fixed;
top: 636rpx;
text-indent: 60rpx;
}
/*显示整个conts */
.show {
display: block;
}
/*隐藏整个conts */
.hide {
display: none;
}
/*关闭按钮(关闭整个conts) */
.closeImg {
width: 60rpx;
height: 60rpx;
float: right;
position: relative;
top: -123rpx;
left: 2rpx;
background-color: white;
border-radius: 50%;
}
.share-pic{
width:100rpx;
height:100rpx;
}
.share-shade{
margin:100rpx auto;
width: 100%;
}
.share-box{
text-align: center;
}
.c{
border-radius: 0;
border:0;
padding:0;
overflow:visible;
line-height: normal;
background:#fff;
}
.button-hover {
color:#fff;
background-color: #fff;
}
button::after{
border:none;
}
.share-image {
width: 530rpx;
height: 888rpx;
margin: 0 80rpx;
}
button {
margin-top: 20rpx;
}
.canvas-box{
margin:32rpx 32rpx 40rpx 32rpx;
background:#fff;
}
.share-box{
margin: 32rpx 32rpx 40rpx 32rpx;
background: #fff;
border-radius: 20rpx;
}
.share{
height: 830rpx;
margin: auto;
box-shadow: 0rpx 20rpx 20rpx -20rpx #f6f8ff;
}
.btn-box{
padding-top:80rpx;
text-align: center;
padding-bottom:80rpx;
}
.save-btn{
background: #1EAE4F;
width:520rpx;
height:90rpx;
border-radius: 44rpx;
color:#fff;
font-size:32rpx;
}
.btn-box view{
color:#454545;
font-size:28rpx;
padding-top:10rpx;
}
有些没必要的 请忽视
js
// pages/login/login.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
widthc:'',
show:'0',
painting: {},
shareImage: '',
navBar: {
"color": "#000",
"flag": 1,
"name": "邀请好友"
},
sharebg: 'http://qiniu.jnwtv.com/H520181206092255188568494.png', // 分享底部背景图
shareTitle: '', // 分享标题
shareCoverImg: 'https://7775-wuliao8736-zuypm-1259633856.tcb.qcloud.la/yaoqingbaii%403x.png?sign=7780bfe58ffdc21503006c3b3e724544&t=1562920998', // 分享封面图
shareQrImg: 'https://7775-wuliao8736-zuypm-1259633856.tcb.qcloud.la/gh_5a3a9a7fe19e_1280.jpg?sign=ae8a44c283c9b3e60ce29df232d4d109&t=1562922434', // 分享小程序二维码
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
var width = app.globalData.width-32-20;
console.log(width)
that.setData({
widthc: width
})
var user = app.globalData.userInfo;
// 创建画布
const ctx = wx.createCanvasContext('shareCanvas')
// 白色背景
ctx.setFillStyle('#fff')
ctx.fillRect(0, 0, 300, 400)
ctx.draw()
// 下载底部背景图
wx.getImageInfo({
src: that.data.sharebg,
success: (res1) => {
// ctx.drawImage(res1.path, 0, 250, 300, 130)
ctx.setFillStyle('#81868F') // 文字颜色:黑色
ctx.setFontSize(12) // 文字字号:16px
ctx.fillText('彩车位(彩生活旗下小程序)', 90, 390)
//这个地方我想的是取到设备宽度然后-375之后/2再加上90作为X轴的坐标的 ,有需要的可以去尝试一下
// 下载视频封面图
wx.getImageInfo({
src: that.data.shareCoverImg,
success: (res2) => {
ctx.drawImage(res2.path, 0, 100, width, 175)
// 分享标题
// ctx.setTextAlign('center') // 文字居中
ctx.setFillStyle('#000') // 文字颜色:黑色
ctx.setFontSize(20) // 文字字号:20px
// 下载二维码
wx.getImageInfo({
src: that.data.shareQrImg,
success: (res3) => {
let qrImgSize = 70
ctx.drawImage(res3.path, 125, 300, qrImgSize, qrImgSize)
ctx.stroke()
ctx.draw(true)
// 用户昵称
ctx.setFillStyle('#454545') // 文字颜色:黑色
ctx.setFontSize(18) // 文字字号:16px
ctx.fillText('你的好友' + app.globalData.userInfo.nickName, 110, 52)
// 观看日期
ctx.setFillStyle('#454545') // 文字颜色:黑色
ctx.setFontSize(18) // 文字字号:16px
ctx.fillText('给你分享了一个车位', 110, 74)
// 下载用户头像
wx.getImageInfo({
src: app.globalData.userInfo.avatarUrl,
success: (res4) => {
// 先画圆形,制作圆形头像(圆心x,圆心y,半径r)
ctx.arc(70, 58, 28, 0, Math.PI * 2, false)
ctx.clip()
// 绘制头像图片
let headImgSize = 64
ctx.drawImage(res4.path, 35, 25, headImgSize, headImgSize)
// ctx.stroke() // 圆形边框
ctx.draw(true)
// 保存到相册
}
})
}
})
}
})
}
})
},
eventSave() {
wx.saveImageToPhotosAlbum({
filePath: this.data.shareImage,
success(res) {
wx.showToast({
title: '保存图片成功',
icon: 'success',
duration: 2000
})
}
})
},
eventGetImage(event) {
console.log(event)
wx.hideLoading()
const { tempFilePath, errMsg } = event.detail
if (errMsg === 'canvasdrawer:ok') {
this.setData({
shareImage: tempFilePath
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
onShareAppMessage:function(){
return {
title: '你是我的眼',
path: '../../../../index/index',//这里的path是当前页面的path,必须是以 / 开头的完整路径,后面拼接的参数 是分享页面需要的参数 不然分享出去的页面可能会没有内容
imageUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562664662373&di=c37f0b13e208d401a03b253d6b892d7a&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F27%2F87%2F08n58PICW2N_1024.jpg",
desc: '最亮的星',
success: (res) => {
console.log("转发成功", res);
console.log("成功了")
},
fail: (res) => {
console.log("转发失败", res);
}
}
},
share_quan:function(){
var that= this;
this.setData({
show:1,
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
change: function () {
let that = this;
that.setData({
showView: (!that.data.showView)
})
},
// 通过点击“conts”区域里右上角的关闭按钮来关闭整个“conts”,当然了,你可以把该事件作用于“conts”上,此时点击“conts”
// 的任意一个地方,都会使得这个“conts”关闭
close: function () {
let that = this;
that.setData({
showView: (!that.data.showView)
})
},
downloadImg: function () {
wx.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (res) {
wx.showToast({
title: '分享图片已保存到相册'
})
}
})
}
}, this)
}
})