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 }    

微信小程序 | 小程序的轉發問題