前言

小程序的頂部有一個膠囊按鈕，點擊第一個按鈕便會在屏幕下方彈出菜單列表，其中變包含了分享相關的操作，如下圖所示：

當我們創(chuàng)建一個小程序工程之后運行，進行如上操作之后會發(fā)現(xiàn)，此時底部菜單中的分享功能是被禁用的。

一、啟用分享功能

旁邊的掃地大爺微笑道：小朋友，這問題好解決，只要傳遞給Page的Object對象中提供了onShareAppMessage方法，那么運行當前頁面便可點擊右上角菜單按鈕進行分享，并且如果要支持分享到朋友圈的話，只需要提供onShareTimeline方法即可！

Page({
	//定義此方法之后，點擊右上角按鈕彈出的菜單中"發(fā)送給朋友"菜單變?yōu)榭牲c擊
    onShareAppMessage: function (param) {

  	},
    
    //定義此方法之后，點擊右上角按鈕彈出的菜單中"分享到朋友圈"按鈕變?yōu)榭牲c擊
    onShareTimeline:function(){

  	}
})
復制代碼

這問題確實很簡單，連掃地的大爺都會，不過說的對也不全對，但總感覺這大爺深藏不露，得好生招呼。

“哇塞，大爺您真棒，一看您就是深藏功與名，您能多說一點分享功能方面的嗎？”

“小伙子，看你人不錯，挺好學的，大爺我就多跟你嘮嗑幾句?！?/p>

1、發(fā)送給朋友（分享）

只有定義了onShareAppMessage處理函數(shù)，右上角菜單才會顯示“轉(zhuǎn)發(fā)（發(fā)送給朋友）”按鈕

該函數(shù)接收一個Object對象參數(shù),關于參數(shù)字段的介紹如下表：

字段名	類型	說明
from	String	轉(zhuǎn)發(fā)事件來源。button：頁面內(nèi)轉(zhuǎn)發(fā)按鈕；menu：右上角轉(zhuǎn)發(fā)菜單
target	Object	如果 from 值是 button，則 target 是觸發(fā)這次轉(zhuǎn)發(fā)事件的 button，否則為 undefined
webViewUrl	String	面中包含web-view組件時，返回當前web-view的url

從from和target兩個字段中我們可以看到，除了通過右上角膠囊菜單入口處進行分享外，我們還可以通過頁面內(nèi)的button進行分享操作。

可以通過該事件處理函數(shù)返回一個對象，用于描述自定義的分享內(nèi)容，從基礎庫2.8.1版本開始，分享圖片支持云圖片；

關于返回的對象介紹如下表

字段名	說明	默認值
title	轉(zhuǎn)發(fā)標題	當前小程序名稱
path	轉(zhuǎn)發(fā)路徑	當前頁面 path ，必須是以 / 開頭的完整路徑
imageUrl	自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡圖片路徑。支持PNG及JPG。顯示圖片長寬比是 5:4。	使用默認截圖

以下示例代碼自定義了分享內(nèi)容的標題和點擊之后打開的路徑：

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕
      console.log(res.target)
    }
    return {
      title: '自定義分享標題',
      path: '/page/user?id=123'
    }
  }
})

復制代碼

運行截圖：

其中紅色框為指定的自定義標題，藍色框封面圖由于我們沒有指定分享的圖片路徑，因此會根據(jù)當前界面進行截圖作為分享內(nèi)容的封面圖。

關于默認截圖:不自定義轉(zhuǎn)發(fā)圖片的情況下，默認會取當前頁面，從頂部開始，高度為 80% 屏幕寬度的圖像作為轉(zhuǎn)發(fā)圖片。

2、分享到朋友圈

只有定義了onShareTimeline處理函數(shù)，右上角菜單才會顯示“分享到朋友圈”按鈕

基礎庫2.11.3開始支持；Beta版本，暫只在Android平臺支持;

注意：如果要支持分享到朋友圈，則必須同時提供onShareAppMessage事件處理函數(shù)的定義，否則此功能無效。

可以通過該事件處理函數(shù)返回一個對象，用于描述自定義的分享內(nèi)容，不支持自定義頁面路徑，返回內(nèi)容如下:

字段名	說明	默認值
title	轉(zhuǎn)發(fā)標題	當前小程序名稱
query	自定義頁面路徑中攜帶的參數(shù)，如 path?a=1&b=2 的 “?” 后面部分	當前頁面路徑攜帶的參數(shù)
imageUrl	自定義圖片路徑，可以是本地文件或者網(wǎng)絡圖片。支持 PNG 及 JPG，顯示圖片長寬比是 1:1。	默認使用小程序 Logo

3、頁面內(nèi)分享

官方介紹

基礎庫 1.2.0 開始支持,通過給button組件設置屬性open-type="share"，可以在用戶點擊按鈕后觸發(fā)Page.onShareAppMessage事件獲取自定義分享內(nèi)容進行轉(zhuǎn)發(fā)。

示例代碼：

//index.wxml
<button open-type="share">點擊進行分享</button>
復制代碼

注意：

• 只能使用button組件，而不能是其他組件。

• 經(jīng)測試在Page中未提供onShareAppMessage事件也能執(zhí)行頁面內(nèi)轉(zhuǎn)發(fā)。

• 只支持分享朋友而不允許分享到朋友圈

裝逼知識補充：小游戲是沒有頁面的概念的，所以分享的時候大多是分享不同的query參數(shù)而非路徑地址。

二、動態(tài)分享

前面使用分享的方式比較固化，也就是要嘛在頁面中定義好分享事件處理方法，要嘛通過指定的按鈕實現(xiàn)指定的分享行為，無法更靈活的處理一些場景；比如如下場景：

1、 某個界面A用戶可以分享給朋友，B用戶可以分享給朋友和分享到朋友圈

2、用戶需要達到一定條件之后才可啟用分享特定內(nèi)容（比如與用戶推廣業(yè)績掛勾的分享內(nèi)容，比如用戶達到條件之后，當前界面分享出去的內(nèi)容就是當前用戶綁定的分享海報，通過海報增長的用戶會給對應的用戶增加業(yè)績，而如果用戶沒有達到條件時，只是分享出去的是普通內(nèi)容或者是不能分享）

3、分享動態(tài)內(nèi)容：

當然，以上場景為杜撰，只是想表達分享的靈活性的需求，那么如果真的有上述需求，有沒有辦法可以實現(xiàn)呢？

答案是有的，只是我沒摸透，實際運行結(jié)果與我所猜測的結(jié)果產(chǎn)生了分歧，并且模擬器上運行的效果與真機預覽的效果也產(chǎn)生了差異，因此不敢妄自揣測這部分內(nèi)容，所以只是做個記錄，待后面進一步理解，如果有對這一部分了解的朋友，也希望不吝賜教。

三、分享內(nèi)容的圖片解決方案探究

我們先看一下之前我那個界面的分享內(nèi)容：

這是一個沒有靈魂的分享，封面是整個分享內(nèi)容的靈魂所在，分享內(nèi)容在沒有設置自定義圖片路徑時，會采用頁面的默認截圖作為封面，所以我們頁面內(nèi)容的好看與否，直接影響最終的默認截圖效果，但是即便當前的界面設計的再好看，作為分享內(nèi)容的封面圖也不一定恰當。

官方支持將分享圖片設置成網(wǎng)路圖片地址，那么這一問題在某些層面上來講也得到了很好的解決，但是是提供固定的云端圖片地址，還是提供專門用于分享封面的云端服務，亦或者其他方案，畢竟每一種封面圖方案都有其存在價值。

現(xiàn)在看來關于分享的圖片來源就兩個途徑，要嘛小程序內(nèi)部解決，要嘛通過服務端提供分享的圖片來源；

1、本地方案

即不依賴服務器解決分享內(nèi)容封面圖問題；

• 默認截圖方案

即分享時不提供自定義圖片地址，默認會取當前頁面，從頂部開始，高度為 80% 屏幕寬度的圖像作為轉(zhuǎn)發(fā)圖片。此方案的弊端由于是根據(jù)頁面內(nèi)容進行生成，無法進行定制化，比較適合對分享沒什么要求或者頁面內(nèi)容比較符合分享的內(nèi)容場景。

• 本地圖片方案

即使用本地文件路徑、代碼包文件路徑作為分享的圖片地址，此方法的弊端在于無法動態(tài)更新，只能提供有限的分享圖片資源，并且還會增加小程序體積。對于分享場景比較固化的自定義圖片場景比較適合。

• 本地動態(tài)生成分享圖的方案

即本地生成所需要的分享圖片進行分享，也就是使用canvas繪圖并生成所需分享的圖片，此方案能夠解決內(nèi)容動態(tài)展示的問題，缺點就是技術(shù)要求高一些，并且也要解決生成的模板多樣性問題，不過此方案能夠應對絕大部分場景，所以重點在于研究這個方案。

2、云端方案

• 云端固定圖片地址

即服務器提供分享所需圖片內(nèi)容地址，此方案相比于本地圖片方案來講更為靈活，可以更新分享的圖片源從而提供分享時更多的樣式。但此方案的缺點就是無法對內(nèi)容進行動態(tài)生成，即后端提供的是固定圖片地址，此方案比較適合固化分享場景，又略微會進行圖片更新的場景，比如中秋節(jié)提供的是與中秋節(jié)主題相關的圖片地址，春節(jié)提供的是春節(jié)相關的圖片地址，而如果是小程序本地圖片方案的話，要實現(xiàn)此效果就必須進行升級。

• 云端動態(tài)內(nèi)容支持

即后端動態(tài)生成所需內(nèi)容返回給前端使用，此方案理論上是可行的，畢竟有條件的公司完全可以創(chuàng)建獨立的多媒體庫支持，但是對服務端的開發(fā)人員和服務器的要求都頗高。

四、動態(tài)分享內(nèi)容生成解決方案

在找這方面的輪子的時候，找到如下一些方案（具體還未進一步研究，整理本文內(nèi)容已耗費很多時間）：

1、wxml-to-canvas

此方按是官方提供的方案

小程序內(nèi)通過靜態(tài)模板和樣式繪制 canvas ，導出圖片，可用于生成分享圖等場景。

支持view、text、image三種標簽，通過class匹配style對象中的樣式。

雖然有人詬病說此方案支持的標簽種類太少，但是其實對于一個分享圖來說，組成的元素不外乎就是文本和圖片，所以理論上此方案已足夠應對大部分場景。至于是否有其他什么坑，還未探，不敢瞎說，后續(xù)會專門研究。

2、開源方案Painter

Github

由于掛載在github page上，打開速度會慢一些，請耐心等待或自行解決git網(wǎng)速問題。

如果嫌棄打開太慢，可以先查看下微信小程序社區(qū)里面的介紹地址

據(jù)說還有基于此方案的可視化海報生成方案;介紹地址,至于好用不好用，我還未體驗過。