快捷導(dǎo)航

微信小程序點(diǎn)擊生成朋友圈分享圖(遇到的坑)

更新時(shí)間：2020年06月17日 14:12:49 作者：微涼_1993

這篇文章主要介紹了微信小程序點(diǎn)擊生成朋友圈分享圖,本文給大家分享小編在實(shí)現(xiàn)此功能時(shí)遇到的各種坑，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

上個(gè)月boss交給我個(gè)微信小程序的活，告訴我只需要負(fù)責(zé)前端頁(yè)面這塊，問(wèn)我多久做完，于是我不知天高地厚的說(shuō) 一禮拜就能完工，哈哈哈，果然，現(xiàn)實(shí)總是那么無(wú)情的來(lái)打臉了。。。磨磨蹭蹭一共用了將近3個(gè)禮拜才算完事。

今天就來(lái)總結(jié)下遇到的各種坑好了~~~

由于做的是仿照包你說(shuō)的小程序，這里就借用包你說(shuō)的截圖好啦

（這個(gè)做出來(lái)是模擬器跟真機(jī)上都會(huì)顯示生成的圖片的，鬼知道是為啥。。）

唔，不廢話(huà)了，直接上代碼好啦

A:wxml(一定要加上image標(biāo)簽，如果你沒(méi)有加的話(huà)，那么即使圖片生成了，在頁(yè)面上也是不會(huì)顯示的，問(wèn)過(guò)大神之后我才知道我之前一直沒(méi)弄出來(lái)是因?yàn)槲覜](méi)加image標(biāo)簽)

<view hidden="{{maskHidden}}" class="mask"></view> 
<view class='canvas-box'>
 <canvas style="width:750rpx; height:940rpx;" canvas-id="myCanvas"/>
 <image src='{{imagePath}}'></image> 
</view>

B:wxss（canvas-box的樣式運(yùn)行出來(lái)不會(huì)受影響，就是千萬(wàn)別寫(xiě)top：0；一定要往下點(diǎn)，要不然會(huì)遮蓋住原頁(yè)面本身的東西，導(dǎo)致原頁(yè)面button按鈕全沒(méi)效果）

.mask
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0,1);
opacity: 0; 
display: flex;
justify-content: center; 
align-items: center;
}
 .canvas-box
 {
 position: fixed;
 top: 999999rpx;left: 0
 }

C:js重點(diǎn)來(lái)了（實(shí)話(huà)實(shí)說(shuō)，我也是照著網(wǎng)上的demo改的，不懂的千萬(wàn)不要來(lái)找我問(wèn)，跪求，本人渣渣一枚。。。）

//share.js
Page({
 data: {
 imagePath: "/images/shareimg_bg.jpg",
 imageTx: "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg",
 imageEwm: "/images/ewm.jpg",
 maskHidden: true,
 },
 onLoad: function (options) {
 // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
 var size = this.setCanvasSize();//動(dòng)態(tài)設(shè)置畫(huà)布大小
 // this.createNewImg();
 //創(chuàng)建初始化圖片
 },
 //適配不同屏幕大小的canvas 生成的分享圖寬高分別是 750 和940，老實(shí)講不知道這塊到底需不需要，然而。。還是放了，因?yàn)椴粚?xiě)這塊的話(huà)，模擬器上的圖片大小是不對(duì)的。。。
 setCanvasSize: function () {
 var size = {};
 try {
  var res = wx.getSystemInfoSync();
  var scale = 750;//畫(huà)布寬度
  var scaleH = 940 / 750;//生成圖片的寬高比例
  var width = res.windowWidth;//畫(huà)布寬度
  var height = res.windowWidth * scaleH;//畫(huà)布的高度
  size.w = width;
  size.h = height;
 } catch (e) {
  // Do something when catch error
  console.log("獲取設(shè)備信息失敗" + e);
 }
 return size;
 },
 //將1繪制到canvas的固定
 settextFir: function (context) {
 let that=this;
 var size = that.setCanvasSize();
 var textFir = "發(fā)了一個(gè)紅包";
 console.log(textFir);
 context.setFontSize(24);
 context.setTextAlign("center");
 context.setFillStyle("#fee6b5");
 context.fillText(textFir, size.w / 2, size.h * 0.25);
 context.stroke();
 },
 //將2繪制到canvas的固定
 settextSec: function (context) {
 let that = this;
 var size = that.setCanvasSize();
 var textSec = "長(zhǎng)按識(shí)別小程序，領(lǐng)獎(jiǎng)金";
 context.setFontSize(14);
 context.setTextAlign("center");
 context.setFillStyle("#fee6b5");
 context.fillText(textSec, size.w / 2, size.h * 0.88);
 context.stroke();
 },
 //將canvas轉(zhuǎn)換為圖片保存到本地，然后將圖片路徑傳給image圖片的src
 createNewImg: function () {
 var that = this;
 var size = that.setCanvasSize();
 var context = wx.createCanvasContext('myCanvas');
 var path = "/images/shareimg_bg.jpg";
 var imageTx = that.data.imageTx;
 var imageEwm = that.data.imageEwm;
 var imageZw = "/images/xcxewm.png";
 context.drawImage(path, 0, 0, size.w, size.h);
 context.drawImage(imageTx, size.w / 2 - 25, size.h * 0.02, size.w * 0.14, size.w * 0.14);
 context.drawImage(imageEwm, size.w / 2 - 60, size.h * 0.32, size.w * 0.33, size.w * 0.33);
 context.drawImage(imageZw, size.w / 2 - 25, size.h * 0.7, size.w * 0.14, size.w * 0.14);
 this.settextFir(context);
 this.settextSec(context);
 console.log(size.w, size.h)
 //繪制圖片
 context.draw();
 //將生成好的圖片保存到本地，需要延遲一會(huì)，繪制期間耗時(shí)
 wx.showToast({
  title: '生成中...',
  icon: 'loading',
  duration: 2000
 });
 setTimeout(function () {
  wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: function (res) {
   var tempFilePath = res.tempFilePath;
   console.log(tempFilePath);
   that.setData({
   imagePath: tempFilePath,
   canvasHidden: false,
   maskHidden: true,
   });　　　　　　　　//將生成的圖片放入到《image》標(biāo)簽里
   var img = that.data.imagePath;
   wx.previewImage({
   current: img, // 當(dāng)前顯示圖片的http鏈接
   urls: [img] // 需要預(yù)覽的圖片http鏈接列表
   })
  },
  fail: function (res) {
   console.log(res);
  }
  });
 }, 2000);
 },

})

以上，出來(lái)的效果是醬紫的（渣渣實(shí)在不知道要怎么把頭像和二維碼畫(huà)成圓角矩形的和圓形的了，還好產(chǎn)品大大不挑剔，感謝）