通過社交軟件分享的方式來進(jìn)行營銷小程序，是一個常用的運營途徑。小程序本身支持直接將一個小程序的鏈接卡片分享至微信好友或微信群，然后別人就可以通過點擊該卡片進(jìn)入該小程序頁面。但是小程序目前不支持直接分享到微信朋友圈，而對我們來說，微信朋友圈又是一個很重要的吸引別人關(guān)注的入口，所以，得想辦法把這個資源利用起來。

可能有的人已經(jīng)知道，微信小程序支持通過掃描/長按識別二維碼或小程序碼圖片的方式進(jìn)入一個小程序首頁或小程序中某個特定頁面（如何生成這類常規(guī)二維碼、小程序碼，可參考《微信小程序之生成自定義參數(shù)小程序二維碼》這篇文章），我們可以將二維碼或小程序碼分享到朋友圈去。

不過，這種二維碼看起來比較單調(diào)，不太感人！

為了提升吸引力，我們可以把這種用于分享出去的二維碼圖片做的盡量美觀、有情景感一些，比如像騰訊出品的小程序《長城你造不造》里生成的這種分享圖片：

這種配有圖文的圖片，就比單單給一個硬邦邦的二維碼要吸引人得多啦！你是不是也想試試做這種分享圖呢？我們今天就來討論一下如何實現(xiàn)這樣的分享圖。

實現(xiàn)這種合并圖文的方案，選擇無外乎就是在前端做還是在后端做。如果在后端做的話，可選的技術(shù)方案還是挺多的，各種后端語言都有自己的繪圖工具庫，比如nodejs里可以用node-canvas來做，或者也可以通過調(diào)用一些圖片編輯軟件（如ImageMagic）來實現(xiàn)。

而在前端做的話，由于微信小程序也提供了一系列基于canvas的繪圖相關(guān)API，所以繪制這樣的圖片還是比較簡單易上手的，且調(diào)試起來也比較方便直觀。所以，決定先在小程序前端這邊來實現(xiàn)了。

添加畫布

首先，在小程序里進(jìn)行繪圖操作需要用到組件，那我們就先在我們的wxml代碼中放入如下的：

1. canvas-id="shareCanvas" style="width:600px;height:900px">

這樣一來我們就有了一個600x900的繪圖區(qū)域。然后，我們要開始寫JS代碼在這張畫布上進(jìn)行繪圖操作。

步驟1：繪制背景圖

通過觀察《長城你造不造》合成的那張分享圖，我們可以分析得出它的組成主要有以下3個部分：一張大的背景圖，一段動態(tài)的文字（xxxx 喊你“一起來為修長城獻(xiàn)磚”），以及一個小程序碼圖片。

那么我們就先找一張圖片來當(dāng)做背景圖，將它畫到畫布上去，代碼大致如下：

1. const wxGetImageInfo = promisify(wx.getImageInfo)
2.  
3. wxGetImageInfo({
4. src: 'http://some-domain/bg.png'
5. }).then(res => {
6. const ctx = wx.createCanvasContext('shareCanvas')
7. ctx.drawImage(res.path, 0, 0, 600, 900)
8. ctx.draw()
9. })

在這段代碼中，我們通過使用wx.getImageInfo這個API來下載一個網(wǎng)絡(luò)圖片到本地（并可獲取該圖片的尺寸等其他信息），然后調(diào)用ctx.drawImage方法將圖片繪制到畫布上，填滿畫布。

步驟2：繪制文字

接著，讓我們來在畫布上繼續(xù)繪制一段文字，一般這種宣傳用的分享圖，少不了文字描述，而且可能是根據(jù)場景內(nèi)容不同而產(chǎn)生的動態(tài)信息，比如可能是一篇文章的作者、文章的標(biāo)題和內(nèi)容。

我們嘗試下在畫布上添加一段居中顯示的文字：“作者：一斤代碼”，還是基于前面的那段代碼接著寫：

1. const wxGetImageInfo = promisify(wx.getImageInfo)
2.  
3. wxGetImageInfo({
4. src: 'http://some-domain/bg.png'
5. }).then(res => {
6. const ctx = wx.createCanvasContext('shareCanvas')
7.  
8. // 底圖
9. ctx.drawImage(res.path, 0, 0, 600, 900)
10.  
11. // 作者名稱
12. ctx.setTextAlign('center') // 文字居中
13. ctx.setFillStyle('#000000') // 文字顏色：黑色
14. ctx.setFontSize(22) // 文字字號：22px
15. ctx.fillText(“作者：一斤代碼”, 600 / 2, 500)
16.  
17. ctx.stroke()
18. ctx.draw()
19. })

由于在canvas上繪制文字不會自動折行，如果要畫一段比較長的文本，可以考慮限制一行的字?jǐn)?shù)，將長文本拆分成幾行來畫。

步驟3：繪制小程序碼

最后，我們在畫布最后添加一個小程序碼，可以是靜態(tài)的小程序碼，也可以是比如為每一篇文章動態(tài)生成的小程序碼（參考《微信小程序之生成自定義參數(shù)小程序二維碼》這篇文章），反正這個小程序碼也就是一張圖片，所以繪制方法跟繪制底圖差不多。最后的代碼類似如此：

1. const wxGetImageInfo = promisify(wx.getImageInfo)
2.  
3. Promise.all([
4. wxGetImageInfo({
5. src: 'http://some-domain.com/background.png'
6. }),
7. wxGetImageInfo({
8. src: 'http://some-domain.com/api/generate/qrcode'
9. })
10. ]).then(res => {
11. const ctx = wx.createCanvasContext('shareCanvas')
12.  
13. // 底圖
14. ctx.drawImage(res[0].path, 0, 0, 600, 900)
15.  
16. // 作者名稱
17. ctx.setTextAlign('center') // 文字居中
18. ctx.setFillStyle('#000000') // 文字顏色：黑色
19. ctx.setFontSize(22) // 文字字號：22px
20. ctx.fillText(“作者：一斤代碼”, 600 / 2, 500)
21.  
22. // 小程序碼
23. const qrImgSize = 180
24. ctx.drawImage(res[1].path, (600 - qrImgSize) / 2, 530, qrImgSize, qrImgSize)
25.  
26. ctx.stroke()
27. ctx.draw()
28. })

這樣，差不多我們的分享圖就生成好了。

保存到系統(tǒng)相冊

接著，我們要把它保存進(jìn)用戶的系統(tǒng)相冊中去，實現(xiàn)這個功能，我們主要靠wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum這兩個API。

主要的流程就是先通過wx.canvasToTempFilePath將上繪制的圖像生成臨時文件的形式，然后再通過wx.saveImageToPhotosAlbum進(jìn)行保存到系統(tǒng)相冊的操作。

1. const wxCanvasToTempFilePath = promisify(wx.canvasToTempFilePath)
2. const wxSaveImageToPhotosAlbum = promisify(wx.saveImageToPhotosAlbum)
3.  
4. wxCanvasToTempFilePath({
5. canvasId: 'shareCanvas'
6. }, this).then(res => {
7. return wxSaveImageToPhotosAlbum({
8. filePath: res.tempFilePath
9. })
10. }).then(res => {
11. wx.showToast({
12. title: '已保存到相冊'
13. })
14. })

以上就是在微信小程序里合成一個朋友圈分享用的小程序推廣圖片的簡要流程了，代碼僅供參考，實戰(zhàn)可自由發(fā)揮：）