1、配置小程序页面静态转发信息
关于小程序转发问题，文档
在 page 页面填加了该监听函数，会在小程序右上角 ... 菜单中显示“转发”按钮；
监听函数需要 return {} 其中的内容配置转发信息；
1 onShareAppMessage: function (res) { 2 return { 3 title: `${this.data.data.column_share_title}`, 4 path: `/pages/column/column?id=${this.data.data.id}`,
// imageUrl: this.data.data.author_header, 5 success: res => { 6 wx.reportAnalytics(‘foward_column_success‘, { column_id: this.data.data.id, column_name: this.data.data.column_title }) 7 // 分享赠书 8 if (this.data.data.is_shareget) { 9 this.setData({ ifShared : true }) 10 if (!this.data.data.had_sub) this.getBookData() 11 } 12 }, 13 fail: res => { 14 } 15 }
2、动态配置分享图
注意，这是静态的转发信息配置，其中的 imageUrl 指转发配图，自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
如果需求场景是，在不同的状态下，呈现自定义图片，这样就用到了两个知识点：（1）小程序 canvas 绘制转发图 （2）通过 wx.hideShareMenu(OBJECT) wx.showShareMenu(OBJECT) 控制转发按钮的显示与隐藏；达到的效果是，用户进入页面，在canvas绘制好转发小图之后，再显示转发按钮，转发图上的文字，根据业务场景的需求动态显示；
1 const painter = require(‘./painter‘) 2 3 page({ 4 data: { 5 user: {} 6 }, 7 shareimgpath: ‘‘, // 分享小图临时路径 8 onShow: function () { 9 getApp().login().then(data => { // 确保登陆的前提下家在数据 10 this.setData({ user: data || {} }) 11 this.requestData() 12 }) 13 }, 14 requestData () { 15 wx.hideShareMenu() // 先关闭按钮的显示 16 painter.draw(‘share-canvas-id‘,{ 17 parame1: ‘1234‘, // 传入的动态参数 18 parame2: ‘asdf‘ 19 }) 20 .then(data => { 21 this.shareimgpath = data
wx.showShareMenu() // 分享小图绘制好之后，再打开分享按钮 22 } 23 .catch(err => { }) 24 } 25 })
外部的功能模块 painter.js 专门用来绘制分享小图
1 // painter.js 2 module.export = { 3 /** 4 * data.parame1 .... 5 * data.parame2 .... 6 */ 7 draw (canasId, data) { 8 var ctx = wx.createCanvasContext(canasId) 9 var bg_url = ‘https://static001.geekbang.org/resource/image/3b/db/3bc3ad3e72aa19a2521c17cf1e5aa8db.png‘ 10 return new Promise((resolve, reject) => { 11 wx.downloadFile({ 12 url: bg_url, 13 success: res => { 14 if (res.statusCode === 200) { 15 ctx.beginPath() 16 ctx.drawImage(res.tempFilePath, 0, 0, 500, 400) // 画 背景 17 ctx.setTextAlign(‘center‘) 18 // ,,,,,,, 19 ctx.draw(true, () => { 20 wx.canvasToTempFilePath({ 21 canvasId: canvasId, 22 success: res => { 23 resolve(res.tempFilePath) 24 }, 25 fail: err => { 26 reject(err) 27 } 28 }) 29 }) 30 } 31 }) 32 } 33 }