微信小程序通過(guò)保存圖片分享到朋友圈功能
說(shuō)明
首先說(shuō)明一點(diǎn)，小程序內(nèi)是不能直接分享到朋友圈的。所以只能通過(guò)生成圖片，攜帶小程序二維碼，保存到手機(jī)相冊(cè)，讓用戶自己選擇發(fā)到朋友圈。然后可以通過(guò)在小程序中識(shí)別二維碼來(lái)進(jìn)入小程序的指定頁(yè)面。參考市面上支持分享的應(yīng)用，基本都是這種實(shí)現(xiàn)方式。
準(zhǔn)備階段
1.通過(guò)服務(wù)器獲取小程序碼
這里可以參考下微信的官方文檔，給后臺(tái)指定的參數(shù)和路徑等信息，讓后臺(tái)生成指定的小程序碼。然后調(diào)用wx.getImageInfo將后臺(tái)生成的小程序碼保存起來(lái)。
注意一定要仔細(xì)看下微信的文檔，如果生成小程序碼的路徑正式服務(wù)器不存在，將會(huì)生成失敗。這點(diǎn)也很蛋疼，很不方便調(diào)試。
wx.getImageInfo({
src:'https://xxx.jpg',//服務(wù)器返回的帶參數(shù)的小程序碼地址
success: function (res) {
//res.path是網(wǎng)絡(luò)圖片的本地地址
qrCodePath = res.path;
},
fail: function (res) {
//失敗回調(diào)
}
});
1.通過(guò)canvas繪制所需信息
準(zhǔn)備好所有的圖片之后就可以通過(guò)canvas繪制了，然后再將canvas導(dǎo)出為圖片。關(guān)于繪制這塊，可以參考微信的canvas api，下面的基本都是查著api的方法走的。
其中需要注意的有幾點(diǎn)。
1.是不知道繪出來(lái)的文字長(zhǎng)度，所以不知道文字到底什么時(shí)候該換行，所以針對(duì)商品標(biāo)題，可能多行的數(shù)據(jù)固定了一行18個(gè)字符。
2.是關(guān)于繪制圖片的導(dǎo)出，按照官方api的說(shuō)法應(yīng)該在draw()完成的回調(diào)中執(zhí)行，但是通過(guò)
canvasCtx.draw(false,function(res){
});
這種方式，一直不回調(diào)完成。不知道哪里出問(wèn)題了。所以最后只好加了一個(gè)延時(shí)去保存圖片。
/**
* 繪制分享的圖片
* @param goodsPicPath 商品圖片的本地鏈接
* @param qrCodePath 二維碼的本地鏈接
*/
drawSharePic: function (goodsPicPath, qrCodePath) {
wx.showLoading({
title: '正在生成圖片...',
mask: true,
});
//y方向的偏移量，因?yàn)槭菑纳贤吕L制的，所以y一直向下偏移，不斷增大。
let yOffset = 20;
const goodsTitle = this.data.orderDetail.paltProduct.name1;
let goodsTitleArray = [];
//為了防止標(biāo)題過(guò)長(zhǎng)，分割字符串,每行18個(gè)
for (let i = 0; i < goodsTitle.length / 18; i++) {
if (i > 2) {
break;
}
goodsTitleArray.push(goodsTitle.substr(i * 18, 18));
}
const price = this.data.orderDetail.price;
const marketPrice = this.data.orderDetail.marketPrice;
const title1 = '您的好友邀請(qǐng)您一起分享精品好貨';
const title2 = '立即打開看看吧';
const codeText = '長(zhǎng)按識(shí)別小程序碼查看詳情';
const imgWidth = 780;
const imgHeight = 1600;
const canvasCtx = wx.createCanvasContext('shareCanvas');
//繪制背景
canvasCtx.setFillStyle('white');
canvasCtx.fillRect(0, 0, 390, 800);
//繪制分享的標(biāo)題文字
canvasCtx.setFontSize(24);
canvasCtx.setFillStyle('#333333');
canvasCtx.setTextAlign('center');
canvasCtx.fillText(title1, 195, 40);
//繪制分享的第二行標(biāo)題文字
canvasCtx.fillText(title2, 195, 70);
//繪制商品圖片
canvasCtx.drawImage(goodPicPath, 0, 90, 390, 390);
//繪制商品標(biāo)題
yOffset = 490;
goodsTitleArray.forEach(function (value) {
canvasCtx.setFontSize(20);
canvasCtx.setFillStyle('#333333');
canvasCtx.setTextAlign('left');
canvasCtx.fillText(value, 20, yOffset);
yOffset += 25;
});
//繪制價(jià)格
yOffset += 8;
canvasCtx.setFontSize(20);
canvasCtx.setFillStyle('#f9555c');
canvasCtx.setTextAlign('left');
canvasCtx.fillText('￥', 20, yOffset);
canvasCtx.setFontSize(30);
canvasCtx.setFillStyle('#f9555c');
canvasCtx.setTextAlign('left');
canvasCtx.fillText(price, 40, yOffset);
//繪制原價(jià)
const xOffset = (price.length / 2 + 1) * 24 + 50;
canvasCtx.setFontSize(20);
canvasCtx.setFillStyle('#999999');
canvasCtx.setTextAlign('left');
canvasCtx.fillText('原價(jià):¥' + marketPrice, xOffset, yOffset);
//繪制原價(jià)的刪除線
canvasCtx.setLineWidth(1);
canvasCtx.moveTo(xOffset, yOffset - 6);
canvasCtx.lineTo(xOffset + (3 + marketPrice.toString().length / 2) * 20, yOffset - 6);
canvasCtx.setStrokeStyle('#999999');
canvasCtx.stroke();
//繪制最底部文字
canvasCtx.setFontSize(18);
canvasCtx.setFillStyle('#333333');
canvasCtx.setTextAlign('center');
canvasCtx.fillText(codeText, 195, 780);
//繪制二維碼
canvasCtx.drawImage(qrCodePath, 95, 550, 200, 200);
canvasCtx.draw();
//繪制之后加一個(gè)延時(shí)去生成圖片，如果直接生成可能沒(méi)有繪制完成，導(dǎo)出圖片會(huì)有問(wèn)題。
setTimeout(function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 390,
height: 800,
destWidth: 390,
destHeight: 800,
canvasId: 'shareCanvas',
success: function (res) {
that.setData({
shareImage: res.tempFilePath,
showSharePic: true
})
wx.hideLoading();
},
fail: function (res) {
console.log(res)
wx.hideLoading();
}
})
}, 2000);
},
最后看下繪制出來(lái)的效果圖。
生成圖片之后就可以提示用戶去保存分享了。
總結(jié)
以上所述是小編給大家介紹的微信小程序通過(guò)保存圖片分享到朋友圈，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了js數(shù)組去重的5種算法實(shí)現(xiàn)，詳細(xì)解釋了實(shí)現(xiàn)思路，以及每個(gè)算法的優(yōu)缺點(diǎn)，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了原生js編寫的autoComplete插件，感興趣的小伙伴們可以參考一下2016-04-04
HTML中不支持靜態(tài)Expando的元素的問(wèn)題
HTML中不支持靜態(tài)Expando的元素的問(wèn)題...2007-03-03
詳解webpack4多入口、多頁(yè)面項(xiàng)目構(gòu)建案例
這篇文章主要介紹了詳解webpack4多入口、多頁(yè)面項(xiàng)目構(gòu)建案例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
CSS3+JavaScript實(shí)現(xiàn)翻頁(yè)幻燈片效果
這篇文章主要介紹了CSS3+JavaScript實(shí)現(xiàn)翻頁(yè)幻燈片效果,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了原生JS之this綁定規(guī)則，這樣大家再也不用擔(dān)心this指向問(wèn)題了。文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-09-09
這篇文章主要介紹了js打開word文檔預(yù)覽操作,結(jié)合實(shí)例形式分析了兩種javascript打開word文檔在線預(yù)覽相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
javascript命名約定(變量?函數(shù)?類?組件)
這篇小文章主要是通過(guò)一些例子來(lái)介紹一些Javascript中一些關(guān)于命名變量，函數(shù)，類或者是組件的通用約定，雖然這些規(guī)則并不是強(qiáng)制性的，但是呢，他們卻被一些JS社區(qū)所廣泛采用，所以，了解他們還是很有必要的2023-03-03
echarts浮動(dòng)顯示單位的實(shí)現(xiàn)方法示例
這篇文章主要給大家介紹了關(guān)于echarts浮動(dòng)顯示單位的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單的表格增刪，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01