微信小程序 | 小程序的转发问题

1、配置小程序页面静态转发信息

　　关于小程序转发问题，文档

　　在 page 页面填加了该监听函数，会在小程序右上角 ... 菜单中显示“转发”按钮；

　　监听函数需要 return {} 其中的内容配置转发信息；

 onShareAppMessage: function (res) {
     return {
       title: `${this.data.data.column_share_title}`,
       path: `/pages/column/column?id=${this.data.data.id}`,
　　  // imageUrl: this.data.data.author_header,
       success: res => {
         wx.reportAnalytics('foward_column_success', { column_id: this.data.data.id, column_name: this.data.data.column_title })
         // 分享赠书
         if (this.data.data.is_shareget) {
           this.setData({ ifShared : true })
           if (!this.data.data.had_sub) this.getBookData()
         }
       },
       fail: res => {
       }
     }

2、动态配置分享图

注意，这是静态的转发信息配置，其中的 imageUrl 指转发配图，自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4

　　

如果需求场景是，在不同的状态下，呈现自定义图片，这样就用到了两个知识点：（1）小程序 canvas 绘制转发图 （2）通过 wx.hideShareMenu(OBJECT) wx.showShareMenu(OBJECT) 控制转发按钮的显示与隐藏；达到的效果是，用户进入页面，在canvas绘制好转发小图之后，再显示转发按钮，转发图上的文字，根据业务场景的需求动态显示；

 const painter = require('./painter')

 page({
 data: {
     user: {}
 },
 shareimgpath: '', // 分享小图临时路径
 onShow: function () {
     getApp().login().then(data => { // 确保登陆的前提下家在数据
       this.setData({ user: data || {} })
       this.requestData()
     })
 },
 requestData () {
     wx.hideShareMenu() // 先关闭按钮的显示
     painter.draw('share-canvas-id',{
         parame1: '1234', // 传入的动态参数
         parame2: 'asdf'
     })
     .then(data => {
          this.shareimgpath = data
　　　　　　  wx.showShareMenu() // 分享小图绘制好之后，再打开分享按钮
     }
     .catch(err => { })
 }
 })

外部的功能模块 painter.js 专门用来绘制分享小图

 // painter.js
 module.export = {
   /**
    *  data.parame1   ....
    *  data.parame2   ....
    */
    draw (canasId, data) {
        var ctx = wx.createCanvasContext(canasId)
        var bg_url = 'https://static001.geekbang.org/resource/image/3b/db/3bc3ad3e72aa19a2521c17cf1e5aa8db.png'
        return new Promise((resolve, reject) => {
             wx.downloadFile({
                url: bg_url,
                success: res => {
                     if (res.statusCode === 200) {
                        ctx.beginPath()
                        ctx.drawImage(res.tempFilePath, 0, 0, 500, 400) // 画 背景
                        ctx.setTextAlign('center')
                        // ,,,,,,,
                        ctx.draw(true, () => {
                        wx.canvasToTempFilePath({
                        canvasId: canvasId,
                        success: res => {
                            resolve(res.tempFilePath)
                        },
                        fail: err => {
                            reject(err)
                        }
                      })
                  })
              }
        })
    }
 }    

---