1.有过小程序基础的同学都应该知道，小程序是不能直接分享到朋友圈，起码是自从我写下这边文章起，小程序还没有提供分享朋友圈的api。

2.但是公司很多时候都会想要传播自己的小程序，从而获取更多的流量，从而分享朋友圈的功能就诞生了。

3.老规矩，先说说我的实现思路：

4.1、通过canvas组件把要分享出去的东西画出来

5.2、通过saveImageToPhotosAlbum方法把canvas生成的画布转成图片保存到本地

6.3、通过发朋友圈的方式把之前保存的图片发到朋友圈

7.实现过程中要注意的点：

8.1、如果是请求网络图片的话，绘制图片的方法一定要写在请求的回调方法里面。

9.2、获取相册的授权scope.writePhotosAlbum

10.3、如果发现绘制出来的图片很模糊，那一定是没有将deswidth和desheight乘2

11.4、找准每一个元素在画布上的坐标，切记文字的Y轴坐标是文字的最底下

12.好了，说了这么多，直接上干货。

13.分享前的图片

14.分享后的图片

15.实现代码：

16./**

17.*生命周期函数--监听页面加载

18.*/

19.onLoad:function(options){

20.varthat=this;

21.//获取用户设备信息，屏幕宽度

22.wx.getSystemInfo({

23.success:res={

24.console.log(res);

25.that.setData({

26.screenWidth:res.screenWidth,

27.screenHeight:res.screenHeight,

28.});

29.}

30.});

31.varname=decodeURIComponent(options.queryString);

32.that.setData({

33.queryString:name

34.});

35.//请求后台数据

36.wx.request({

37.url:'https://xxx.do',

38.data:{

39.'queryString':name,

40.},

41.method:'POST',

42.header:{'content-type':'application/x-www-form-urlencoded;charset=utf-8'},

43.success:function(res){

44.varlist=res.data.data;

45.if(list!=null&&list.length0){

46.varobj1=list[0];

47.varobj2=list[1];

48.varobj3=list[2];

49.if(obj1!=null){

50.that.setData({

51.guanname:obj1.name,

52.guancount:obj1.displayPercent,

53.imgpath:obj1.imgUrl,

54.desc:obj1.description,

55.txtone:true

56.});

57.}

58.if(obj2!=null){

59.that.setData({

60.yaname:obj2.name,

61.yacount:obj2.displayPercent,

62.txttwo:true

63.});

64.}

65.if(obj3!=null){

66.that.setData({

67.jiname:obj3.name,

68.jicount:obj3.displayPercent,

69.txtthree:true

70.});

71.}

72.//制作要分享的图片

73.constctx=wx.createCanvasContext('sharecan')

74.//主要就是计算好各个图文的位置

75.//绘制红色背景

76.ctx.setFillStyle('#FF5554')

77.ctx.fillRect(0,0,that.data.screenWidth,528)

78.//绘制文字

79.ctx.setFontSize(25)

80.ctx.setFillStyle("#ffffff")

81.ctx.fillText("品牌鉴定",12,64)

82.//绘制机器人

83.ctx.drawImage('/pages/images/jqr.png',115,42,29,24);

84.//绘制文字

85.ctx.setFontSize(14)

86.ctx.setFillStyle("#ffffff")

87.vardsj='经过商标大数据分析，最符合'+name+'™品牌的商品是';

88.ctx.fillText(dsj,12,89)

89.ctx.setFillStyle('#ffffff')//设置矩形的背景颜色

90.ctx.fillRect(12,96,351,244)

91.//请求的网络图片路径

92.wx.getImageInfo({

93.src:that.data.imgpath,

94.success:function(res){

95.//请求成功后将会生成一个本地路径即res.path,

96.//然后将该路径缓存到storageKeyUrl关键字中

97.wx.setStorageSync("imgUrl",res.path);

98.varimgurl=wx.getStorageSync("imgUrl");

99.ctx.drawImage(imgurl,12,96,351,173);

100.ctx.setFillStyle('#E21917')//设置水印

101.ctx.fillText(name+'™',293,145)

102.vardesc=name+'™牌'+that.data.guanname+','+that.data.desc;

103.vardescone="";

104.vardesctwo="";

105.if(desc.length18){

106.descone=desc.substring(0,18);

107.desctwo=desc.substring(18,desc.length);

108.console.log(descone);

109.console.log(desctwo)

110.ctx.setFillStyle("#222222")

111.ctx.setFontSize(18)

112.ctx.fillText(descone,24,302)

113.ctx.setFillStyle("#222222")

114.ctx.setFontSize(18)

115.ctx.fillText(desctwo,24,326)

116.}else{

117.ctx.setFillStyle("#222222")

118.ctx.setFontSize(18)

119.ctx.fillText(desc,24,302)

120.}

121.ctx.setFontSize(12)

122.ctx.setFillStyle('#FFAAA9')

123.ctx.fillText("*图源网络，非商业用途，如有侵权请联系删除",12,360);

124.ctx.setFontSize(20)

125.ctx.setFillStyle('#FFFFFF')

126.vardds='大多数注册'+name+'™相关商标品牌中'

127.ctx.fillText(dds,12,390)

128.if(that.data.txtone){

129.ctx.drawImage('/pages/images/guanjun.png',12,404.5,9.5,15);

130.ctx.setFontSize(14)

131.ctx.setFillStyle('#FFBFBF')

132.vargn=that.data.guancount+'的人用做';

133.ctx.fillText(gn,27.5,419.5)

134.ctx.setFontSize(14)

135.ctx.setFillStyle('#ffffff')

136.ctx.fillText(that.data.guanname+'；',120,419.5);

137.}

138.if(that.data.txttwo){

139.ctx.drawImage('/pages/images/yajun.png',12,430.5,9.5,15);

140.ctx.setFontSize(14)

141.ctx.setFillStyle('#FFBFBF')

142.varya=that.data.yacount+'的人使用';

143.ctx.fillText(ya,27.5,444)

144.ctx.setFontSize(14)

145.ctx.setFillStyle('#ffffff')

146.ctx.fillText(that.data.yaname+'；',120,444);

147.}

148.if(that.data.txtthree){

149.ctx.drawImage('/pages/images/jijun.png',12,456.5,9.5,15);

150.ctx.setFontSize(14)

151.ctx.setFillStyle('#FFBFBF')

152.varjn=that.data.jicount+'的人用来';

153.ctx.fillText(jn,27.5,471)

154.ctx.setFontSize(14)

155.ctx.setFillStyle('#ffffff')

156.ctx.fillText(that.data.jiname+'；',120,471);

157.}

158.//绘制底部的分享图片

159.ctx.drawImage('/pages/images/botshare.png',0,528,that.data.screenWidth,139);

160.//绘制完成之后的回调方法

161.ctx.draw(false,function(e){

162.that.data.isCompletedDraw=true

163.});

164.}

165.});

166.}else{

167.wx.navigateTo({

168.url:'/pages/ppblank/ppblank?name='+encodeURIComponent(that.data.queryString),

169.})

170.}

171.}

172.});

173.}

174.sharepyq:function(e){//点击分享朋友圈

175.varthat=this;

176.if(!that.data.isCompletedDraw){

177.wx.showToast({

178.image:'/pages/images/tishi.png',

179.title:'图片正在生成中',

180.icon:'none',

181.});

182.return;

183.}

184.console.log("是否拒绝过授权："+that.data.auth)

185.if(that.data.auth==false){

186.wx.showModal({

187.content:'T_T请打开保存相册的权限',

188.showCancel:false,

189.confirmText:'去打开',

190.confirmColor:'#72B9C3',

191.success:function(res){

192.//进入授权页面

193.wx.openSetting({

194.success:(res)={

195.res.authSetting={

196."scope.writePhotosAlbum":true

197.}

198.that.setData({

199.modaltwo:false,

200.auth:true

201.});

202.}

203.});

204.}

205.});

206.returnfalse;

207.}

208.varfinwid=that.data.screenWidth*2;

209.varfinhei=that.data.screenHeight*2;

210.wx.canvasToTempFilePath({

211.x:0,

212.y:0,

213.width:that.data.screenWidth,

214.height:that.data.screenHeight,

215.destWidth:finwid,

216.destHeight:finhei,

217.canvasId:'sharecan',

218.success:function(res){

219.that.setData({

220.preurl:res.tempFilePath,

221.canvasHidden:false

222.});

223.//生产环境时记得这里要加入获取相册授权的代码

224.wx.getSetting({

225.success(res){

226.if(!res.authSetting['scope.writePhotosAlbum']){//未授权，则重新授权

227.wx.authorize({

228.scope:'scope.writePhotosAlbum',

229.success(){

230.//用户已经同意小程序使用保存相册功能，

231.//后续调用wx.saveImageToPhotosAlbum接口不会弹窗询问

232.wx.saveImageToPhotosAlbum({

233.filePath:that.data.preurl,

234.success(res){

235.wx.showModal({

236.content:'图片已保存到相册，赶紧晒一下吧~',

237.showCancel:false,

238.confirmText:'好哒',

239.confirmColor:'#72B9C3',

240.success:function(res){

241.if(res.confirm){

242.console.log('用户点击确定');

243.that.setData({

244.canvasHidden:true

245.});

246.}

247.that.setData({

248.modaltwo:false,

249.});

250.}

251.})

252.}

253.});

254.},fail:function(res){

255.console.log("拒绝授权");

256.console.log(res);

257.that.setData({

258.canvasHidden:true,

259.modaltwo:false,

260.auth:false

261.});

262.}

263.})

264.}else{//已经授权，则保存图片

265.wx.saveImageToPhotosAlbum({

266.filePath:that.data.preurl,

267.success(res){

268.wx.showModal({

269.content:'图片已保存到相册，赶紧晒一下吧~',

270.showCancel:false,

271.confirmText:'好哒',

272.confirmColor:'#72B9C3',

273.success:function(res){

274.if(res.confirm){

275.console.log('用户点击确定');

276.that.setData({

277.canvasHidden:true

278.});

279.}

280.that.setData({

281.modaltwo:false

282.});

283.}

284.})

285.}

286.});

287.}

288.}

289.});

290.},

291.fail:function(res){

292.console.log("保存失败")

293.}

294.})

295.}

296.如果我的文章帮助到了大家，减少大家的弯路，愿意打赏的请扫下面的二维码，也可留言。

297.