由于微信小程序沒(méi)有分享朋友圈的api接口，只有分享給好友和微信群的api，但是很多小程序?yàn)榱藬U(kuò)大宣傳，需要進(jìn)行朋友圈分享，所以 ，要解決分享朋友圈的這個(gè)問(wèn)題，就要用到它的繪圖api，也就是我們常說(shuō)的canvas繪圖，現(xiàn)將你要分享的內(nèi)容繪制出來(lái)，再將其轉(zhuǎn)化為圖片，進(jìn)行保存，然后用戶選擇相冊(cè)圖片手動(dòng)分享就OK了
接下來(lái)我們一步一步說(shuō)
首先在wxml建立canvas畫(huà)布以及點(diǎn)擊事件需要的按鈕，按照你自己的需求
<!-- 畫(huà)布大小按需定制 這里我按照手機(jī)的大小 -->
<canvas canvas-id="myCanvas" style="width:{{Width}}px;height:{{Height}}px;"/>
<!-- 生成分享圖 這里的操作是把canvas繪制的圖預(yù)覽出來(lái) -->
<button class='share' type='primary' bindtap='share'>生成分享圖</button>
<!-- 剛開(kāi)始是隱藏的 生成分享圖之后顯示, 用一個(gè)布爾變量來(lái)控制 -->
<!-- 這里的樣式可以自己定義，如大小和位置 -->
<view hidden='{{hidden}}' class='preview'>
<image src='{{imagePath}}' style="width:{{Width*0.8}}px;height:{{Height*0.8}}px;"></image>
<button type='primary' size='mini' bindtap='save'>保存分享圖</button>
</view>
好的，接下來(lái)在wxss里面大概寫(xiě)一下樣式
/* 畫(huà)布繪制過(guò)程不能隱藏 但是又不能被用戶看見(jiàn) 所以定位在用戶看不到地方 */
canvas{
position: fixed;
top: 0;
left: 9999px;
}
image{
margin: 10% 10%;
}
哈哈哈，下面就是js了，因?yàn)閏anvas的繪制基本上都是在js中實(shí)現(xiàn)的
按照上面的栗子當(dāng)我們點(diǎn)擊"生成分享圖"按鈕，開(kāi)始繪制canvas并將其轉(zhuǎn)化為圖片，當(dāng)然繪制canvas會(huì)消耗一定的時(shí)間，所以你也可以在頁(yè)面加載時(shí)就繪圖，在需要的時(shí)候直接用
這里我們還是在點(diǎn)擊分享時(shí)繪制
share: function () {
var that = this
//獲取系統(tǒng)信息，具體的屬性請(qǐng)前往微信小程序官網(wǎng)查看
wx.getSystemInfo({
success: res => {
console.log(res);
that.setData({
Width: res.screenWidth,
Height: res.screenHeight
})
console.log(that.data.Width)
}
})
var qrcode = '../../image/qrcode.jpg'//二維碼圖片一般為網(wǎng)絡(luò)圖片后臺(tái)生成
var imgPath = '../../image/touxiang.png'//頭像的圖片
var bgImgPath = '../../image/mine_invite.png'//首先你需要準(zhǔn)備一張背景圖
var width = that.data.Width
var height = that.data.Height
const ctx = wx.createCanvasContext('myCanvas')//創(chuàng)建 canvas 繪圖上下文
ctx.drawImage(bgImgPath, 0, 0, width, height)//將背景圖繪制到畫(huà)布中
//繪制頭像，這里繪制圓形頭像算是一個(gè)小重點(diǎn)
ctx.save()
ctx.beginPath()
//首先繪制一個(gè)圓形的弧線，大小位置根據(jù)你的需求而定，也就是說(shuō)你想讓它放在什么位置，就讓它放在什么位置
ctx.arc(width / 8, height / 3 + 0.10 * width + 20, 0.10 * width, 0, 2 * Math.PI)
//這塊我是用獲取到的width和height來(lái)確定頭像的位置
ctx.setStrokeStyle('#000')
ctx.stroke()
//使用clip() 方法從原始畫(huà)布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)
ctx.clip()
ctx.drawImage(imgPath, width / 8 - 0.10 * width, height / 3 + 20, 0.20 * width, 0.20 * width)
ctx.restore()
//用戶的名稱，位置你隨意
ctx.setFontSize(20)//字體大小
ctx.setFillStyle('#6F6F6F')//設(shè)置填充色
ctx.fillText('昵稱：妖妖靈', width * 0.3, height / 3 + 60)
//下面你需要描述的文字，因?yàn)閏anvas文字不能夠換行，所以這里我們按行一行一行寫(xiě)，當(dāng)然你也可以自己寫(xiě)一個(gè)函數(shù)將文字截成一段一段的循環(huán)放入畫(huà)布中
//第一行文字
ctx.setFontSize(14)
ctx.setFillStyle('#111111')
ctx.fillText('身前哪管身后事，浪得幾日是幾日', width * 0.03, height * 0.54)
ctx.fillText('兄長(zhǎng)，我想帶一人回云深不知處，', width * 0.03, height * 0.58)
ctx.fillText('帶回去……藏起來(lái)。', width * 0.03, height * 0.62)
ctx.fillText('你特別好，我喜歡你', width * 0.03, height * 0.66)
ctx.drawImage(qrcode, width / 2 + width * 0.2, height / 2 + 15, 0.25 * width, 0.25 * width)
ctx.setFontSize(12)
ctx.fillText('掃碼查收你的美味', width / 2 + width * 0.2, height / 2 + height * 0.2)
ctx.setFontSize(16)
ctx.setFillStyle('#00ffff')
ctx.fillText('可愛(ài)多邀你暑假共享美味', width * 0.25, height * 0.84)
ctx.fillText('來(lái)騰訊視頻看好劇', width * 0.30, height * 0.88)
ctx.draw()
//將canvas畫(huà)布轉(zhuǎn)化為圖片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.Width,
height: that.data.Height,
destWidth: that.data.Width,
destHeight: that.data.Height,
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath);
/* 這里 就可以顯示之前寫(xiě)的 預(yù)覽區(qū)域了 把生成的圖片url給image的src */
that.setData({
imagePath: res.tempFilePath,
hidden: false
})
},
fail: function (res) {
console.log(res)
}
})
},
重點(diǎn)就是圓形頭像，其他的根據(jù)需求，了解canvas繪圖，然后就自己添加就好了
這里還有一個(gè)問(wèn)題就是微信小程序官方文檔中說(shuō)將canvas轉(zhuǎn)化為圖片，只能在draw方法中使用，但好像也不是必須，有點(diǎn)懵。
好，接下來(lái)就是點(diǎn)擊"保存分享圖"，將圖片保存，這里就都是微信的api，直接用就好
save:function(){
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success:function(res) {
wx.showModal({
content: '圖片已保存到相冊(cè)，趕緊曬一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定');
/* 該隱藏的隱藏 */
that.setData({
hidden: true
})
}
}
})
}
})
},
嗯哼，大概就這么多了，上效果圖看一下
效果圖
保存到手機(jī)的圖片是這個(gè)樣子
手機(jī)效果圖
