本文實(shí)例講述了微信小程序實(shí)現(xiàn)分享朋友圈的圖片功能。分享給大家供大家參考，具體如下：
由于微信小程序只支持分享給朋友或者群，不支持分享到朋友圈，又有分享到朋友圈這個(gè)需求，那就要想辦法實(shí)現(xiàn)這個(gè)需求。查閱各種資料，發(fā)現(xiàn)基本思路有兩種，一種是后端實(shí)現(xiàn)，另一種是前端實(shí)現(xiàn)，后端實(shí)現(xiàn)的方式這里就不討論了，因?yàn)槲沂遣欢蠖说模粫?huì)前端的東西，所以這里就記錄一下前端的實(shí)現(xiàn)方法。
前端要實(shí)現(xiàn)分享到朋友群，都是通過(guò)canvas做一張圖片，然后用戶手動(dòng)分享朋友圈。前端具體要做的就是把要分享的頁(yè)面用canvas重做一遍，生成一個(gè)圖片，保存這個(gè)圖片到用戶本地相冊(cè)。
要想用canvas，需要在頁(yè)面上使用canvas標(biāo)簽，把它定位到頁(yè)面之外，以免影響頁(yè)面，在繪制圖片時(shí)，圖片的地址必須是通過(guò)微信下載圖片后返回的虛擬地址，要不canvas無(wú)法繪制出來(lái)，接下來(lái)最主要的就是canvas的使用了，小程序的canvas和h5的canvas一樣，并沒(méi)有多大的區(qū)別。
下面是一個(gè)例子：
首先是在頁(yè)面上創(chuàng)建canvas
index.wxml
<view class="canvas-box"> <canvas canvas-id="myCanvas" style="width:100%;height:{{windowHeight}}px;"></canvas></view><button bindtap='startDraw'>分享朋友圈</button>寫一個(gè)樣式把canvas定位到頁(yè)面之外，以免影響頁(yè)面的效果
.canvas-box{ width: 100%; position: fixed; left: 0; top: 999999rpx;}接下來(lái)就是繪圖了，具體可以參考繪圖文檔
startDraw:function(){ const ctx = wx.createCanvasContext('myCanvas'); let windowWidth = wx.getSystemInfoSync().windowWidth; let windowHeight = wx.getSystemInfoSync().windowHeight; let _this=this; this.setData({ scale: 1.6 }); ctx.setFillStyle('#333'); ctx.fillRect(0, 0, windowWidth, 100); ctx.setFontSize(20); ctx.setFillStyle('#fff'); ctx.fillText('開(kāi)始繪制圖片', 30, 50); ctx.setFillStyle('#FFF'); ctx.fillRect(0, 70, windowWidth, 600); ctx.setFillStyle('#666'); ctx.setFontSize(19); ctx.fillText('我是標(biāo)題',100, 140); ctx.setFontSize(20); ctx.fillText('微信小程序文本部分',20 , 170); ctx.draw()}到這為止，canvas繪圖是做完了，現(xiàn)在要把canvas繪制的圖形轉(zhuǎn)化為圖片，調(diào)用微信小程序已有的接口，接上面方法內(nèi)：
wx.canvasToTempFilePath({ x: 0, y: 0, width: windowWidth, height: windowHeight, destWidth: windowWidth, destHeight: windowHeight, canvasId: 'myCanvas', success: function (res1) { console.log('朋友圈分享圖生成成功:' + res1.tempFilePath); }});這樣就完成了分享圖片的制作。
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
