溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了微信小程序實現分享朋友圈的圖片功能。分享給大家供大家參考，具體如下：
由于微信小程序只支持分享給朋友或者群，不支持分享到朋友圈，又有分享到朋友圈這個需求，那就要想辦法實現這個需求。查閱各種資料，發現基本思路有兩種，一種是后端實現，另一種是前端實現，后端實現的方式這里就不討論了，因為我是不懂后端的，只會前端的東西，所以這里就記錄一下前端的實現方法。
前端要實現分享到朋友群，都是通過canvas做一張圖片，然后用戶手動分享朋友圈。前端具體要做的就是把要分享的頁面用canvas重做一遍，生成一個圖片，保存這個圖片到用戶本地相冊。
要想用canvas，需要在頁面上使用canvas標簽，把它定位到頁面之外，以免影響頁面，在繪制圖片時，圖片的地址必須是通過微信下載圖片后返回的虛擬地址，要不canvas無法繪制出來，接下來最主要的就是canvas的使用了，小程序的canvas和h6的canvas一樣，并沒有多大的區別。
下面是一個例子：
首先是在頁面上創建canvas
index.wxml
<view class="canvas-box">
<canvas canvas-id="myCanvas" ></canvas>
</view>
<button bindtap='startDraw'>分享朋友圈</button>
寫一個樣式把canvas定位到頁面之外，以免影響頁面的效果
.canvas-box{
width: 100%;
position: fixed;
left: 0;
top: 999999rpx;
}
接下來就是繪圖了，具體可以參考繪圖文檔
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('開始繪制圖片', 30, 50);
ctx.setFillStyle('#FFF');
ctx.fillRect(0, 70, windowWidth, 600);
ctx.setFillStyle('#666');
ctx.setFontSize(19);
ctx.fillText('我是標題',100, 140);
ctx.setFontSize(20);
ctx.fillText('微信小程序文本部分',20 , 170);
ctx.draw()
}
到這為止，canvas繪圖是做完了，現在要把canvas繪制的圖形轉化為圖片，調用微信小程序已有的接口，接上面方法內：
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: windowWidth,
height: windowHeight,
destWidth: windowWidth,
destHeight: windowHeight,
canvasId: 'myCanvas',
success: function (res1) {
console.log('朋友圈分享圖生成成功:' + res1.tempFilePath);
}
});
這樣就完成了分享圖片的制作。
希望本文所述對大家微信小程序開發有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
