微信小程序之分享到朋友圈

阅读次数: 7,487

  • A+
所属分类:建站

微信小程序没有直接分享到朋友圈的功能,所以只能利用迂回的方法。

直接上代码...

1、首先判断手机图片存储权限

 //保存图片权限判断
  quanxian: function(){
    var that=this;
    wx.getSetting({
      success(res) {
        // console.log(res);
        if (!res.authSetting['scope.writePhotosAlbum']) {
          console.log('授权失败');
          that.setData({
            truew:true,
            shoquan1: "none",
            shoquan2: "bolck"
          });
        } else {
          console.log('授权成功');
          that.setData({
            truew: false,
            shoquan1: "bolck",
            shoquan2: "none"
          });
        }
      }
    })

  },

2、将分享页面用canvas画出来

//画图
  path_img: function(m) {
    var that = this;
    //资源
    var titles = that.data.title;
    titles = titles.substring(0, 10);

    var newstext1 = that.data.newstext1;
    newstext1 = newstext1.substring(0, 12);

    var newstext2 = that.data.newstext1;
    newstext2 = newstext2.substring(12, 20);
    console.log(newstext2);
    //绘图
    const ctx = wx.createCanvasContext('myCanvas');
    var imgPath = '../../images/4.jpg'
    var bgImgPath = '../../images/favicon.jpg';
    var bgImgPaths = '../../images/er.jpg';
    //banner图
    ctx.drawImage(imgPath, 0, 0, 300, 150); //广告图片
    //背景
    ctx.setFillStyle('#fff'); //文字区域背景颜色
    //页面大小
    ctx.fillRect(0, 150, 300, 500); //文字区域大小
    //其他图片设置
    ctx.drawImage(bgImgPath, 20, 250, 60, 60);   //商品图片
    ctx.drawImage(bgImgPaths, 200, 350, 80, 80); //二维码图片
    //字体大小
    ctx.setFontSize(18); //字体大小
    ctx.setFillStyle('#252525'); //字体颜色
    ctx.fillText(titles, 20, 200); //字体内容及位置

    ctx.setFontSize(16); //字体大小
    ctx.setFillStyle('#252525'); //字体颜色
    ctx.fillText(newstext1, 105, 270); //字体内容及位置
    ctx.fillText(newstext2, 105, 295); //字体内容及位置

    ctx.setFontSize(16) //字体大小
    ctx.fillText('长按扫码查看详情', 30, 400); //字体内容及位置
    ctx.draw(); //绘图结束
    fale = true;
  },

3、将canvas转换为图片

// 转换
  fenxiang: function() {
    var that = this;
    that.path_img(0);
    var times = setInterval(function() {
      // console.log(fale);
      if (fale == true) {
        that.setData({
          disply: "path_img", //path_img
          page_body: "page_body", //page_body
          page_class: 'page_class' //page_class
        });
        // 3. canvas画布转成图片
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 600,
          height: 960,
          destWidth: 600,
          destHeight: 960,
          canvasId: 'myCanvas',
          success: function(res) {
            console.log(res.tempFilePath);
            that.setData({
              shareImgSrc: res.tempFilePath
            })
            app.globalData.lang = res.tempFilePath;
          },
          fail: function(res) {
            console.log(res)
          }
        });
        fale = false;
        clearInterval(times);
      }
    }, 100);

  },

4、保存到手机文件夹

// 保存
  baocun: function() {
    var that = this;
    console.log(that.data.shareImgSrc);
    //4. 当用户点击分享到朋友圈时,将图片保存到相册
    wx.saveImageToPhotosAlbum({
      filePath: that.data.shareImgSrc,
      success(res) {
        wx.showModal({
          title: '存图成功',
          content: '图片成功保存到相册了,去发圈噻~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
            that.hideShareImg(); //返回到首页
            that.setData({
              disply: "", //path_img
              page_body: "", //page_body
              page_class: '' //page_class
            });
          }
        })
      },
      fail: function(res) {
        console.log("保存失败");
        that.quanxian();
      }
    });
  },

微信小程序之分享到朋友圈

 

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: