【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序如何通過保存圖片分享到朋友圈的功能

在下給大家分享一下微信小程序如何通過保存圖片分享到朋友圈的功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！小程序內(nèi)是不能直接分享到朋友圈的。所以只能通過生成圖片，攜帶小程序二維碼，保存到手機(jī)相冊(cè)，讓用戶自己選擇發(fā)到朋友圈。然后可以通過在小程序中識(shí)別二維碼來進(jìn)入小程序的指定頁面。下面在下給大家分享實(shí)現(xiàn)代碼，需要的朋友參考下吧說明首先說明一點(diǎn)，小程序內(nèi)是不能直接分享到朋友圈的。所以只能通過生成圖片，攜帶小程序二維碼，保存到手機(jī)相冊(cè)，讓用戶自己選擇發(fā)到朋友圈。然后可以通過在小程序中識(shí)別二維碼來進(jìn)入小程序的指定頁面。參考市面上支持分享的應(yīng)用，基本都是這種實(shí)現(xiàn)方式。準(zhǔn)備階段1.通過服務(wù)器獲取小程序碼這里可以參考下微信的官方文檔，給后臺(tái)指定的參數(shù)和路徑等信息，讓后臺(tái)生成指定的小程序碼。然后調(diào)用wx.getImageInfo將后臺(tá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.通過canvas繪制所需信息準(zhǔn)備好所有的圖片之后就可以通過canvas繪制了，然后再將canvas導(dǎo)出為圖片。關(guān)于繪制這塊，可以參考微信的canvasapi，下面的基本都是查著api的方法走的。其中需要注意的有幾點(diǎn)。1.是不知道繪出來的文字長(zhǎng)度，所以不知道文字到底什么時(shí)候該換行，所以針對(duì)商品標(biāo)題，可能多行的數(shù)據(jù)固定了一行18個(gè)字符。2.是關(guān)于繪制圖片的導(dǎo)出，按照官方api的說法應(yīng)該在draw()完成的回調(diào)中執(zhí)行，但是通過canvasCtx.draw(false,function(res){

});這種方式，一直不回調(diào)完成。不知道哪里出問題了。所以最后只好加了一個(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.paltP1;

let

goodsTitleArray

=

[];

//為了防止標(biāo)題過長(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í)去生成圖片，如果直接生成可能沒有繪制完成，導(dǎo)出圖片會(huì)有問題。

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,

showShar