집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 애플릿은 사진을 저장하고 Moments에서 공유하는 기능을 통해 구현됩니다.

WeChat 애플릿은 사진을 저장하고 Moments에서 공유하는 기능을 통해 구현됩니다.

不言원래의: 2018-06-26 15:51:066148검색

이 글은 주로 사진을 저장하고 모멘트에 공유하는 WeChat 미니 프로그램의 기능을 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유합니다.

미니 내에서는 직접 공유할 수 없습니다. 프로그램. 따라서 우리는 사진을 생성하고, 미니 프로그램의 QR 코드를 휴대하고, 휴대폰 앨범에 저장하고, 사용자가 선택하여 친구들에게 보낼 수 있도록 할 수 있습니다. 그러면 미니프로그램에 있는 QR코드를 인식하여 미니프로그램의 지정된 페이지로 들어갈 수 있습니다. 편집자는 아래에서 구현 코드를 공유할 것입니다. 필요한 친구는 이를 참조할 수 있습니다

설명

먼저 미니 프로그램은 친구들에게 직접 공유할 수 없다는 점을 설명하겠습니다. 따라서 우리는 사진을 생성하고, 미니 프로그램의 QR 코드를 휴대하고, 휴대폰 앨범에 저장하고, 사용자가 선택하여 친구들에게 보낼 수 있도록 할 수 있습니다. 그러면 미니프로그램에 있는 QR코드를 인식하여 미니프로그램의 지정된 페이지로 들어갈 수 있습니다. 시중에서 공유를 지원하는 애플리케이션을 살펴보면 기본적으로 이런 방식으로 구현되어 있습니다.

준비 단계

1. 서버를 통해 미니 프로그램 코드를 얻습니다

여기에서 WeChat의 공식 문서를 참조하고 배경에 대한 매개변수, 경로 및 기타 정보를 지정하여 배경이 생성될 수 있도록 합니다. 지정된 미니 프로그램 코드. 그런 다음 wx.getImageInfo를 호출하여 백그라운드에서 생성된 작은 프로그램 코드를 저장합니다.

미니 프로그램 코드를 생성하는 공식 서버가 없으면 WeChat 문서를 주의 깊게 읽어야 합니다. 이는 디버깅에도 매우 짜증나고 불편합니다.

wx.getImageInfo({            
  src:&#39;https://xxx.jpg&#39;,//服务器返回的带参数的小程序码地址
  success: function (res) {
    //res.path是网络图片的本地地址
    qrCodePath = res.path;
  },
  fail: function (res) {
    //失败回调
  }
});

1. 캔버스를 통해 필요한 정보를 그립니다.

그림을 모두 준비한 후 캔버스를 통해 그린 다음 캔버스를 그림으로 내보낼 수 있습니다. 그리기에 관해서는 WeChat의 Canvas API를 참고할 수 있습니다. 다음은 기본적으로 API 메소드를 기반으로 합니다.

몇가지 주의사항이 있습니다.

1. 그려지는 텍스트의 길이를 모르기 때문에 텍스트를 언제 줄바꿈해야 할지 알 수 없습니다. 따라서 상품 제목의 경우 여러 줄의 데이터가 한 줄에 18자로 고정될 수 있습니다.

2 드로잉 그림 내보내기에 관한 내용입니다. 공식 API에 따르면 draw() 완료 콜백에서 실행되어야 하는데,

canvasCtx.draw(false,function(res){
});

을 통해서는 콜백 없이는 절대 완료되지 않습니다. . 무엇이 잘못되었는지 모르겠습니다. 그래서 결국 사진을 저장하기 위해 지연을 추가해야 했습니다.

/**
 * 绘制分享的图片
 * @param goodsPicPath 商品图片的本地链接
 * @param qrCodePath 二维码的本地链接
 */
drawSharePic: function (goodsPicPath, qrCodePath) {
  wx.showLoading({
    title: &#39;正在生成图片...&#39;,
    mask: true,
  });
  //y方向的偏移量，因为是从上往下绘制的，所以y一直向下偏移，不断增大。
  let yOffset = 20;
  const goodsTitle = this.data.orderDetail.paltProduct.name1;
  let goodsTitleArray = [];
  //为了防止标题过长，分割字符串,每行18个
  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 = &#39;您的好友邀请您一起分享精品好货&#39;;
  const title2 = &#39;立即打开看看吧&#39;;
  const codeText = &#39;长按识别小程序码查看详情&#39;;
  const imgWidth = 780;
  const imgHeight = 1600;

  const canvasCtx = wx.createCanvasContext(&#39;shareCanvas&#39;);
  //绘制背景
  canvasCtx.setFillStyle(&#39;white&#39;);
  canvasCtx.fillRect(0, 0, 390, 800);
  //绘制分享的标题文字
  canvasCtx.setFontSize(24);
  canvasCtx.setFillStyle(&#39;#333333&#39;);
  canvasCtx.setTextAlign(&#39;center&#39;);
  canvasCtx.fillText(title1, 195, 40);
  //绘制分享的第二行标题文字
  canvasCtx.fillText(title2, 195, 70);
  //绘制商品图片
  canvasCtx.drawImage(goodPicPath, 0, 90, 390, 390);
  //绘制商品标题
  yOffset = 490;
  goodsTitleArray.forEach(function (value) {
    canvasCtx.setFontSize(20);
    canvasCtx.setFillStyle(&#39;#333333&#39;);
    canvasCtx.setTextAlign(&#39;left&#39;);
    canvasCtx.fillText(value, 20, yOffset);
    yOffset += 25;
  });
  //绘制价格
  yOffset += 8;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle(&#39;#f9555c&#39;);
  canvasCtx.setTextAlign(&#39;left&#39;);
  canvasCtx.fillText(&#39;￥&#39;, 20, yOffset);
  canvasCtx.setFontSize(30);
  canvasCtx.setFillStyle(&#39;#f9555c&#39;);
  canvasCtx.setTextAlign(&#39;left&#39;);
  canvasCtx.fillText(price, 40, yOffset);
  //绘制原价
  const xOffset = (price.length / 2 + 1) * 24 + 50;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle(&#39;#999999&#39;);
  canvasCtx.setTextAlign(&#39;left&#39;);
  canvasCtx.fillText(&#39;原价:¥&#39; + marketPrice, xOffset, yOffset);
  //绘制原价的删除线
  canvasCtx.setLineWidth(1);
  canvasCtx.moveTo(xOffset, yOffset - 6);
  canvasCtx.lineTo(xOffset + (3 + marketPrice.toString().length / 2) * 20, yOffset - 6);
  canvasCtx.setStrokeStyle(&#39;#999999&#39;);
  canvasCtx.stroke();
  //绘制最底部文字
  canvasCtx.setFontSize(18);
  canvasCtx.setFillStyle(&#39;#333333&#39;);
  canvasCtx.setTextAlign(&#39;center&#39;);
  canvasCtx.fillText(codeText, 195, 780);
  //绘制二维码
  canvasCtx.drawImage(qrCodePath, 95, 550, 200, 200);
  canvasCtx.draw();
  //绘制之后加一个延时去生成图片，如果直接生成可能没有绘制完成，导出图片会有问题。
  setTimeout(function () {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 390,
      height: 800,
      destWidth: 390,
      destHeight: 800,
      canvasId: &#39;shareCanvas&#39;,
      success: function (res) {
        that.setData({
          shareImage: res.tempFilePath,
          showSharePic: true
        })
        wx.hideLoading();
      },
      fail: function (res) {
        console.log(res)
        wx.hideLoading();
      }
    })
  }, 2000);
},

마지막으로 그려진 렌더링을 살펴보세요.

이미지를 생성한 후 사용자에게 이미지를 저장하고 공유하라는 메시지가 표시될 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

WeChat 애플릿은 사진을 저장하고 Moments에서 공유하는 기능을 통해 구현됩니다.

관련 기사