大家之所以都開(kāi)始看重微信小程序，就是因?yàn)樗谋澈笫俏⑿诺暮Ａ坑脩?，很多人在提到微信小程序與app比較的時(shí)候，就會(huì)說(shuō)小程序推廣更加容易。熟悉微信小程序的朋友也知道，微信小程序目前開(kāi)放的能力中，我們僅能夠把小程序分享到微信好友或者群聊天中，而不能夠直接分享到其他渠道中。

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

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

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

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

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

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

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

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

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

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

用戶保存到相冊(cè)中的圖片就是如以上今日頭條的圖片，有了這個(gè)圖片就可以到處傳播啦。以上就是基本的流程，然而在實(shí)際項(xiàng)目運(yùn)用過(guò)程中，還是需要解決一些問(wèn)題，比如典型的一些問(wèn)題：

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

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

3、…..

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

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

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