页面基础分享能力
基本的页面分享，只需要在页面中设置 onShareAppMessage 即可，如果分享的内容各个页面保持一致，建议进行一定的封装，如封装到 Page 的能力中。
App({
// 获取分享卡片内容
getShareMessage(path) {
return {
title: '分享标题',
imageUrl: '分享图片',
path: path || '分享默认路径'
};
},
enhancePage() {
const oPage = Page;
Page = config => oPage(Object.assign(config, {
getShareMessage: this.getShareMessage,
}));
},
onLaunch() {
this.enhancePage();
},
})
Page({
onShareAppMessage() {
return this.getShareMessage(1);
}
})
用户点击按钮主动触发分享
只需要设置按钮的 open-type 为 share 就可以自动触发页面的 onShareAppMessage 了。
<button open-type="share">分享按钮</button>
获取群聊中的分享信息
限于隐私保护，个人分享的信息已经不再能拿到了，但是我们可以获取分享所在群的信息。
- 1.需要在分享页设置
ticket信息
onLoad() {
// 配置分享，用以区分分享到个人还是群
wx.showShareMenu({withShareTicket: true});
}
- 2.在
onShareAppMessage里获取群信息
onShareAppMessage() {
return {
title: '分享',
path: '/pages/index',
success: (res) => {
const tickets = res.shareTickets;
if (res.shareTickets) {
wx.getShareInfo({
shareTicket: tickets[0],
success: (data) => {
console.log('分享到群: ', data);
},
});
} else {
console.log('分享到个人');
}
},
};
}
- 3.在
APP.onLaunch或者App.onShow里获取群信息
App({
onShow: (options) => {
wx.getShareInfo({
shareTicket: options.shareTicket,
success: (res) => {
// 请求微信服务器获取群信息
}
})
}
})
分享到朋友圈
小程序是不支持直接分享到朋友圈的，只能通过保存图片并引导用户主动发送朋友圈。下面的例子是一个分享动态生成的图片。
- 第一步：素材预下载，素材不支持远程URL，需要下载到本地（如小程序二维码和书封）
// 获取小程序二维码
downloadAppCode() {
return new Promise((resolve, rej) => {
wx.downloadFile({
url: '后台获取二维码接口',
success: (res) => { resolve(res.tempFilePath); },
fail: (res) => { resolve(''); }
});
});
},
// 下载文件
downloadFile(url) {
return new Promise((resolve, rej) => {
if (url){
wx.downloadFile({
url: url,
success: (res) => { resolve(res.tempFilePath); },
});
} else resolve();
});
},
// 下载所有书封到本地
downloadCovers(books) {
const urls = books.map((book) => this.getBookCover(book.bookId));
Promise.all([
this.downloadFile(urls[0]),
this.downloadFile(urls[1]),
this.downloadFile(urls[2]),
this.downloadFile(urls[3]),
this.downloadFile(urls[4]),
this.downloadAppCode(),
]).then((res) => {
const appCode = res[res.length - 1]; // 获取小程序二维码地址
res = res.splice(0, res.length - 1); // 所有书封地址
res = res.filter(item => item); // 过滤空书封
this.setData({ localCovers: res, appCode });
this.drawShareImg();
});
}
- 第二步：通过canvas绘制需要被保存分享的图片
// 绘制分享图片
drawShareImg() {
const ctx = wx.createCanvasContext('shareImg');
const covers = this.data.localCovers;
// 背景
ctx.save()
ctx.setFillStyle('white')
ctx.fillRect(0, 0, 260, 370);
ctx.restore()
// nickname
ctx.setFillStyle('#111111');
ctx.setFontSize(14);
ctx.setTextAlign('center');
ctx.fillText(this.data.userInfo.nickName, 130, 42, 260);
// 文案 心愿书屋
// ctx.drawImage('../assets/images/share/share_icon_xysw.svg', 70, 52, 120, 30);
ctx.setFillStyle('#111111');
ctx.setTextAlign('center');
ctx.font = "30px SourceHanSerifCNMedium";
ctx.fillText('心愿书屋', 130, 82, 260);
// 书封边框
ctx.setStrokeStyle('rgba(0,0,0,0.1)');
if(covers[3]) ctx.strokeRect(21, 150, 42, 56);
if(covers[4]) ctx.strokeRect(197, 150, 42, 56);
if(covers[1]) ctx.strokeRect(51, 126, 60, 80);
if(covers[2]) ctx.strokeRect(149, 126, 60, 80);
if(covers[0]) ctx.strokeRect(91, 102, 78, 104);
// 书封
if(covers[3]) ctx.drawImage(covers[3], 21, 150, 42, 56);
if(covers[4]) ctx.drawImage(covers[4], 197, 150, 42, 56);
if(covers[1]) ctx.drawImage(covers[1], 51, 126, 60, 80);
if(covers[2]) ctx.drawImage(covers[2], 149, 126, 60, 80);
if(covers[0]) ctx.drawImage(covers[0], 91, 102, 78, 104);
// 矩形背景
ctx.rect(0, 226, 260, 66);
ctx.setFillStyle('#FFDCE7');
ctx.fill();
// 引号
ctx.drawImage('/assets/images/share/share_icon_left.png', 20, 242, 20, 12);
ctx.drawImage('/assets/images/share/share_icon_right.png', 220, 264, 20, 12);
// 二维码
ctx.drawImage(this.data.appCode, 108, 309, 44, 44);
// 文案 我已经领了129书币
ctx.setFillStyle('#773A4D');
ctx.font = "14px SourceHanSerifCNMedium";
ctx.setTextAlign('center');
ctx.fillText('我已经领了129书币', 130, 254, 260);
// 文案 天天领币，免费看书
ctx.setFillStyle('#773A4D');
ctx.font = "14px SourceHanSerifCNMedium";
ctx.setTextAlign('center');
ctx.fillText('天天领币，免费看书', 130, 274, 260);
// 文案 识别小程序码
ctx.setFillStyle('#9B9B9B');
ctx.setFontSize(12);
ctx.setTextAlign('left');
ctx.fillText('识别小程序码', 30, 337, 260);
// 文案 进入心愿书屋
ctx.setFillStyle('#9B9B9B');
ctx.font = "12px SourceHanSerifCNMedium";
ctx.setTextAlign('left');
ctx.fillText('进入心愿书屋', 158, 337, 260);
ctx.draw();
},
- 第三步：通过微信api下载图片到手机相册
canvasToFile() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 260, // 画布区域宽度
height: 370, // 画布区域高度
destWidth: 260 * 4, // 保存图片宽度
destHeight: 370 * 4, // 保存图片高度
canvasId: 'shareImg',
success: (res) => {
this.saveImage(res.tempFilePath);
},
fail: function (err) {
console.log('生成图片失败');
},
});
},
// 保存图片
saveImage(filePath) {
wx.saveImageToPhotosAlbum({
filePath:filePath,
success: (res) => {
this.showSuccess('图片保存成功');
},
fail: () => {
this.showError('图片保存到相册失败', '图片无法保存到相册，请稍后重试');
},
});
},
- 本地图片处理注意事项 模拟器上都是骗人的
1. 不要使用相对路径，只能使用绝对路径
2. 图片不支持svg不支持svg不支持svg
3. 图片不支持base64，只支持本地图片和网络图片两种
* 如果使用了相对路径、svg、base64，模拟器上运行顺畅的毫无破绽，但是在真机上是绘制不出来的！！！
还是老老实实转化成网络图片再下载吧！！！
相关问题：https://developers.weixin.qq.com/community/develop/doc/00048c046f0028e62247f403651800?highLine=drawimage%2520base64
- 模拟器坑爹二连
明明在模拟器上特殊字体是有效的，为什么到了真机上就又变成了默认字体了？？？
想要用字体？那就让设计切个图片给你吧
分享参数问题：新用户扫描后处理scene值
生成二维码时会带上scene值，当其他人扫描后可以从scene值中解析出有用的参数
decodeURLParams(str) {
const result = {}
const params = str.split('&');
for (let param of params) {
const keyValue = param.split('=');
result[keyValue[0]] = keyValue[1];
}
return result;
},
onLoad() {
let bookId = '';
if (options.bookId) bookId = options.bookId;
else if (options.scene) bookId = this.decodeURLParams(decodeURIComponent(options.scene)).bookId || '';
this.setData({ bookId: bookId });
}
