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

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

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

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

2、其他的信息：比如上圖中的標(biāo)題、作者、時間、字?jǐn)?shù)信息、圖片等，也是需要服務(wù)端獲得。

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

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

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

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

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

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

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

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

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

3、…..

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

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

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