大家之所以都開始看重微信小程序，就是因為它的背后是微信的海量用戶，很多人在提到微信小程序與app比較的時候，就會說小程序推廣更加容易。熟悉微信小程序的朋友也知道，微信小程序目前開放的能力中，我們僅能夠把小程序分享到微信好友或者群聊天中，而不能夠直接分享到其他渠道中。

為此很多小程序，特別是新聞資訊、淘寶客等類型的小程序中，就轉化了一種思維用來實現把微信小程序轉發(fā)的微信朋友圈。比如以下就是今日頭條的做法，點擊底部朋友圈后我們可以獲得一張帶有小程序碼的圖片。

那么這是怎么實現的呢？其實在傳統(tǒng)互聯網當中，這種一般是采用后臺服務端生成的方式，比如使用服務端的GD庫，然而這種生成過程是非常消耗資源的。而微信小程序是支持canvas的，我們完全可以利用canvas組件及其對應的API來實現。開始之前需要準備幾個東西：

1、動態(tài)的小程序碼：每個頁面的小程序碼肯定要不相同的，否則就沒啥意義了，我們可以通過微信開發(fā)的接口通過服務端拿到對應頁面的小程序碼（需要通過http請求服務端數據）；

2、其他的信息：比如上圖中的標題、作者、時間、字數信息、圖片等，也是需要服務端獲得。

下面就是基本創(chuàng)建這種圖片的基本流程：

1、當用戶點擊分享按鈕的時候，請求服務端拉取我們以上所需要的數據，并且把圖片下載到客戶端本地臨時文件；

2、創(chuàng)建一個canvas，并且顯示畫布區(qū)域；

3、把所得的數據畫到畫布上面，其中可能需要用到fillText、drawImage等API，具體請參考微信小程序官方文檔的《API-畫布》部分。

4、通過wx.canvasToTempFilePath把畫布轉化為圖片，并得到圖片的臨時路徑。

5、通過所得圖片的臨時路徑，可以通過wx.saveImageToPhotosAlbum保存到用戶設備的相冊（需要用戶授權）。

用戶保存到相冊中的圖片就是如以上今日頭條的圖片，有了這個圖片就可以到處傳播啦。以上就是基本的流程，然而在實際項目運用過程中，還是需要解決一些問題，比如典型的一些問題：

1、wx.canvasToTempFilePath轉化的圖片模糊，我們可以按照設備的顯示倍率輸出圖片來解決，這里提醒各位網上很多文章描述這個問題的時候有問題，很多作者僅從理論來描述，實際上誤導了讀者。

2、canvas文字自動換行，在H5中我們可以通過measureText來獲取文字寬度然后分段截取，在小程序中目前主流的基礎庫版本不支持該方法，但在開發(fā)工具中最新的1.9.91支持該方法，以后是否支持看微信官方。

3、…..

總而言之，在實際實踐過程中有很多坑要填，如果大家想嘗試，請仔細閱讀微信小程序官方文檔關于canvas部分的內容，同時也可以參考網上公開資料文檔。但必須提醒的是，需要有自我的思考與判斷，網上很多文章作者自己都沒實操，僅僅憑理論推演就把文章給寫了，然而那些坑可能就出現在一些簡單的細節(jié)上面。

當然，如果你自己嫌麻煩，可以把這部分交給我們，我們將提供完善的解決方案。另外，如果你有小程序相關需求，也可以聯系我們，我們將給你提供全面的微信小程序解決方案(特別是湖南長沙及周邊的朋友哦)。

以下就是一個簡單的demo（數據非正式數據，樣式也沒調整，僅供演示；實際使用需要進一步優(yōu)化）：