Donut App 分享到微信记录

donut app 的微信分享

1. 需要在 wxml文件中设置按钮的 open-type='share'
   和新建两个 canvas 标签

<button class="sharetowechat" open-type="share" bindtap="sharetowechat">
  <view class="sharetext">分享给朋友</view>
</button>Ï

<canvas id="myShareCanvas" canvas-id="myShareCanvas" type="2d" style="width: 100%; height: 200px;position:fixed;top:-1000px"></canvas>
<canvas id="myShareCanvasDefault" canvas-id="myShareCanvasDefault" type="2d" style="width: 100%; height: 200px;position:fixed;top:-1000px"></canvas>

      2.在 js文件中对 sharetowechat 事件进行编辑，分享的事件叫做                                wx.miniapp.shareMiniProgramMessage，其中有一个参数 imagePath，用做于分享后的图片         展示，这个参数还不能使用网络图片，所以最大的问题就在这里。
        
      3.我先尝试了使用 wx.compressImage 压缩接口来处理，可以成功的获取到能使用的图片地              址，虽然经过压缩，但图片还是太大，wx.miniapp.shareMiniProgramMessage这个接受的图          片最大限度为 128k,所以在压缩方法下加了下面两个参数，大小是符合了，但出来的图片太模糊了。所以这个方法不行。

      4.定睛一想，现在要做的是将图片转成符合的格式，并且大小要在 128k之下，所以想到了用 canvas 的方式来处理图片，就有了下面的方法。

async function refCanvas(target, id) {
  return new Promise((resolve) => {
    target
      .createSelectorQuery()
      .select(id)
      .fields({ node: true, size: true })
      .exec((res) => resolve(res?.[0]));
  });
}

async function initCanvas(target, id) {
  const res = await refCanvas(target, id);
  const canvas = res.node;
  const context = canvas.getContext('2d');

  const dpr = wx.getSystemInfoSync().pixelRatio;
  canvas.width = res.width * dpr;
  canvas.height = res.height * dpr;
  context.scale(dpr, dpr);
  return {
    context,
    canvas,
  };
}

  let imageUrl // 这个是你需要进行转化的 URL

  const { context, canvas } = await initCanvas(target, '#myShareCanvas');

  //以上，先生成对应的 canvas 容器


  const imageInfo = await new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: imageUrl,
      success: resolve,
      fail: reject,
    });
  }); //获取一下图片的初始信息
  const width = imageInfo.width;
  const height = Math.floor(width / 1.25);
  const dpr = wx.getSystemInfoSync().pixelRatio;
  const w = width * dpr;
  const h = height * dpr;
  canvas.width = w;
  canvas.height = h;
  context.scale(dpr, dpr);
  const image = canvas.createImage();
  image.onload = () => {
    //画图，截取对应你需要的尺寸
    context.drawImage(image, 0, 0, width, 1000, 0, 0, width, 1000);
    setTimeout(()=>{
      //导出， 这里注意，如果 canvas 那里设置了 display: none，这个导出在真机测试的时候会失 
      //败，但在模拟器上不会，这里是个坑.
      //fileType: 'jpg',这里必须这么设置，否则在一些安卓机型当中，会出现裁剪后图片大于128k的提 
      //示
      wx.canvasToTempFilePath({
        canvas: canvas,
        canvasId: "#myShareCanvas",
        destWidth: 500,
        destHeight: 400,
        fileType: 'jpg',
        complete: (res) => {
          const tempFilePath = res.tempFilePath;
          wx.compressImage({
            src: tempFilePath || imageUrl, // 图片路径
            quality: 80, // 压缩质量
            complete: (res) => {
              console.log(res, 'compressImage res mini');
              const isSuccess = res.errMsg === 'compressImage:ok';
              //defaultShareImgValue这个是弄了个默认的图片，操作方式和这个方法类似，这就是为 
              //什么一开始创建了两个 canvas，第二个就是给默认图片使用的，导出失败时，可以使用默 
              //认图片进行分享
              wx.miniapp.shareMiniProgramMessage({
                // 注： 小程序原始id 不是小程序 appid，通常是 gh_xxx 开头的内容
                userName,
                title:'标题',
                path:'跳转的地址',
                imagePath: isSuccess ? res.tempFilePath : defaultShareImgValue,
                webpageUrl:'',
                withShareTicket: true,
                miniprogramType: 1,
                scene: 0,
                success(res) {
                  showToast('分享成功')
                  console.log(res);
                },
                fail(e) {
                  console.log(e, 'err');
                },
              });
            },
          });
        },
        fail(err) {
          showToast('分享失败，请稍后重试！');
          console.log(err, 'canvasToTempFilePath err');
        },
      });
    },100)
  };
  image.src = imageUrl;

所以，以上就是解决分享的问题，经测试，压缩过后的图片大小只有 10 几 k,清晰度也并没有受影响。