微信小程序分享海报

最新推荐文章于 2023-08-01 18:04:42 发布
最新推荐文章于 2023-08-01 18:04:42 发布
阅读量243 收藏
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43136379/article/details/106944946
版权

包括有功能：多张商品图排版、保存海报到本地、预览转发海报、转发小程序
图片包括了功能

wxml文件

<!-- 分享海报弹窗 -->
<view class="mask" bindtap='formatHide' wx:if="{{showPostersStatus}}"></view>
<view class="share_con" animation="{{animationData}}" wx:if="{{showPostersStatus}}">
  <!-- 海报区域 -->
  <view class="poster_area" style="height:{{ctxh}}rpx">
    <view class='dialog-close2' bindtap='formatHide'><image src='{{dialogClose2}}'></image></view>
    <image src="{{shareImgPath}}"  wx:if='{{drawposters}}'></image>
  </view>
  <!-- 按钮区域 -->
  <view class="btn_area">
    <view class='dialog-close' bindtap='formatHide'><image src='{{dialogClose}}'></image></view>
    <view class="set_type">
      <text>选择排版</text>
      <view class="{{tabobj.tabbool==1?'picTabs':''}}" data-tab='1' data-imgnum="0" data-ctxdiff="0" bindtap="picTab">单张图</view>
      <view wx:if="{{goods.imgs.length>1}}" class="{{tabobj.tabbool==2?'picTabs':''}}" data-tab='2' data-imgnum="4" data-ctxdiff="115" bindtap="picTab">四张图</view>
    </view>
    <view class="posters_btn">
      <button wx:if="{{!openset}}" class="posters_btn1" bindtap="savePosters"><image src="{{posters_icon1}}"></image> 保存海报</button>
      <button wx:if="{{openset}}" class="posters_btn1" bindtap="openSet" bindopensetting="openSet"><image src="{{posters_icon1}}"></image> 保存海报</button>
      <button class="posters_btn2" open-type="share"><image src="{{posters_icon2}}}"></image> 转发小程序</button>
      <view class="posters_btn3" bindtap='imgYu' data-src="{{shareImgPath}}}"><image src="{{posters_icon3}}}"></image> 转发海报</view>
    </view>
    <view class="bottom_tip">※专属链接,转发可锁粉</view>
  </view>
</view>
<canvas canvas-id='share' style="width:{{ctxw}}px;height:{{ctxh}}px;position:fixed;left: -10000px;background:#fff;" hidden='{{canvasHidden}}'></canvas> 
<!-- 分享海报弹窗end -->

js文件

const wxGetImageInfo = promisify(wx.getImageInfo)
function promisify（ api）{
    return (options, ...params) => {
      return new Promise((resolve, reject) => {
        const extras = {
          success: resolve,
          fail: reject
        }
        api({ ...options, ...extras }, ...params)
      })
    }
}
Page({
  data: {
    showModalStatus: false,
    showParaModalStatus: false,
    showShareStatus: false,
    showPlaybillStatus: false,
    scrollStatus: true,
    userInfo:{},
    goods_item: {},
    goods: {},
    goods_list: {},
    animationData: {},
    dialogClose: app.globalData.Domain + 'img/common/dialog_close.png?' + random,
    dialogClose2: app.globalData.Domain + 'img/common/dialog_close2.png?' + random,
    share_icons: app.globalData.Domain + 'img/common/share_icon.png?' + random,
    posters_icon1: app.globalData.Domain + 'img/common/posters_icon1.png?' + random,
    posters_icon2: app.globalData.Domain + 'img/common/posters_icon2.png?' + random,
    posters_icon3: app.globalData.Domain + 'img/common/posters_icon3.png?' + random,
    posters_pic1: app.globalData.Domain + 'img/goods/posters_pic1.png?' + random,
    posters_pic2: app.globalData.Domain + 'img/goods/posters_pic2.png?' + random,
    avatarUrl_default: app.globalData.Domain + 'img/goods/post_logo.png?' + random,
    qrcode_default: app.globalData.Domain + 'img/goods/codeImg.jpg?' + random,
    is_show_service: false,
    canvasHidden: true,
    tabobj: {
      tabbool: 1,
      imgnum: 0,
      ctxdiff: 0
    },
    ctxw: 483,
    ctxh: 755,
    shareImgPath: '',
    backIndex: false,
    drawposters: false,
    openset: false,
    showPostersStatus: false, //分享海报
    userInfos: "",
  },

/**
 * 展示海报
 */
  sharePosters(e) {
    this.setData({
      scrollStatus: false,
      shareImgPath: ''
    })
    var animation = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(500).step()

    this.setData({
      animationData: animation.export(),
      showPostersStatus: true
    })

    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showPostersStatus: true
      })

    }.bind(this), 100)
    this.saveImg(this.data.tabobj);
  },
    /**
   * 隐藏海报
   */
  formatHide: function (e) {
    this.setData({
      showPostersStatus: false, //分享海报
    })
  },
  // 选择排版切换
  picTab(e) {
    let tabbool = e.currentTarget.dataset.tab;
    let imgnum = e.currentTarget.dataset.imgnum;
    let ctxdiff = e.currentTarget.dataset.ctxdiff;
    let tabobj = {
      tabbool,
      imgnum,
      ctxdiff
    }
    this.saveImg(tabobj)
  },
  // 图片预览
  imgYu() {
    if (this.data.shareImgPath) {
      Promise.all(
        [wxGetImageInfo({
          src: this.data.shareImgPath
        })]
      ).then((res)=>{
        //图片预览
        wx.previewImage({ 
          current: res[0].path, // 当前显示图片的http链接
          urls: [res[0].path],
          success() {
            // wx.showToast({
            //   title: '长按发送给朋友',
            // })
          }
        })
      })
    } else {
      util.showErrorToast('请等绘制完成')
    }
  },
  /**
   * 分享
   */
  onShareAppMessage(res) {
    wx.showShareMenu({
      withShareTicket: true
    })
    let userInfo = wx.getStorageSync('userInfo');
    let sellerId = userInfo.seller_id || 0;
    let path = `/pages/goods/detail/detail?item_id=${this.data.item_id}&goods_id=${this.data.goods_id}&backIndex=true&share_seller_id=${sellerId}`;
    
    return {
      title: this.data.goods_item.title,
      path: path,
      imageUrl: this.data.goods.imgs[0].big,
      success(shareTickets) {
        console.log(path)
      }
    }
  },
  /**
   * 查看是否授权&&获取用户信息
   */
  getUserInfo() {
    let _this = this
    return new Promise((resolve, reject) => {
      // 查看是否授权
      wx.getSetting({
        success(res) {
          if (res.authSetting['scope.userInfo']) {
            wx.getUserInfo({
              success(res){
                let userInfos = res.userInfo
                _this.setData({
                  userInfos
                })
                _this.sharePosters()
                return resolve(res)
              },  
              fail(res){
                util.showErrorToast('信息获取失败!')
              }
            })
          } else {
            util.showErrorToast('请先授权！！')
          }
        },
        fail(err){
          util.showErrorToast('请先授权！！')
          return false
        }
      })
    })
  },
  // 获取图片信息
  getImageInfo(img) {
    var imgarr = [];
    wx.getImageInfo({
      src: img,
      success: (res)=>{
        imgarr = [res.width, res.height]
        return imgarr
      },
      fail: (res)=>{
        console.log(res)
      }
    })
  },
  /**
   * 文字处理
   */
  fillTextLineBreak(ctx, text, y, lw, lh, lineNum, ellipsis) {
    let i = 0;
    let n = 0;
    let r = -1;
    while (i < text.length) {
      while (ctx.measureText(text.substring(n, i)).width < lw && i < text.length) {
        i++
      }
      r++
      if(lineNum == r) {
        let texts = text.substring(n, i)
        let measureW = ctx.measureText(text.substring(n, i)).width
        let obj = {
          text: ellipsis ? measureW > lw ? texts + '...':texts : texts,
          y: y + lh * r
        }
        return obj
      }
      n = i
    }
  },
  product_imgs(imgnums, product_img) {
    let product_img_arr = [];
    for(let i = 1; i< imgnums; i++) {
      if (product_img[i]) {
        product_img_arr.push(
          wxGetImageInfo({
            src: product_img[i].big
          })
        )
      }
    }
    return product_img_arr
  },
  /**
   * 获取图片
   */
  getImg(callback, tabobj) {
    let imgnums = tabobj ? tabobj.imgnum || 0 : 0
    Promise.all([
      wxGetImageInfo({
        src: this.data.posters_pic1
      }),
      wxGetImageInfo({
        src: this.data.posters_pic2
      }),
      wxGetImageInfo({
        src: this.data.userInfos.avatarUrl || this.data.avatarUrl_default
      }),
      wxGetImageInfo({
        src: this.data.qrcode_default
      }),
      wxGetImageInfo({
        src: this.data.goods.imgs[0].big
      }),
      ...(this.product_imgs(imgnums, this.data.goods.imgs)),
    ]).then(res=>{
      wx.showLoading({
        title: '绘制中......',
      })
      callback && callback(res)
    }).catch(err=>{
        console.log(`报错${err}`);
    })
  },
  /**
 * 画图
 */
  drawImages(ctx, imgInfos, tabobj, scale_img){
    let [
      { path: plantsImg1 },
      { path: plantsImg2 },
      { path: avatarUrl },
      { path: qrcode_default },
      { path: product_img0 }
    ] = imgInfos
    let tabbool = tabobj ? tabobj.tabbool || 1 : 1
    let imgnums = tabobj ? tabobj.imgnum || 0 : 0
    let ctxdiff = tabobj ? tabobj.ctxdiff || 0 : 0
    ctx.drawImage(plantsImg1, 0, 0, ctx.width, 544 / scale_img);
    ctx.drawImage(plantsImg2, 33 / scale_img, ctx.height - 80, 690 / scale_img, 62 / scale_img);
    ctx.drawImage(qrcode_default, 380, 480 + (ctxdiff | 0), 85, 85);
    ctx.drawImage(product_img0, 20, 160, 690 / scale_img, 460 / scale_img);
    if (tabbool == 2) {
      for (let i = 1; i < imgnums; i++) {
        imgInfos[i + 4] && ctx.drawImage(imgInfos[i + 4].path, 20 + (220 / scale_img + 10) * (i - 1), 470, 220 / scale_img, 147 / scale_img)
      }
    };
    ctx.arc(60, 95, 40, 0, 2 * Math.PI, false);
    ctx.clip();
    ctx.drawImage(avatarUrl, 20, 55, 80, 80);
    ctx.restore();
  },
  saveImg(tabobj) {
    this.getImg(res=>{
      let imgInfos = res;
      let ctxdiff = tabobj ? tabobj.ctxdiff || 0 : 0
      let ctxh = 755 + (ctxdiff|0);
      let ctxw = this.data.ctxw
      var that = this;
      let goodsname = this.data.goods_item.title;
      let nickName = this.data.userInfos.nickName;
      // let product_img = this.data.goods.imgs;
      // let qrcode_default = this.data.qrcode_default; // 二维码
      let oldprize = '￥' + this.data.shop_price;
      let nowprize = '￥'+ this.data.price;
      this.setData({
        canvasHidden: false,
        drawposters: false
      })
      let timers = setTimeout((res)=>{
        if (this.data.shareImgPath) {
          return false
        } else {
          wx.hideLoading()
          util.showErrorToast('网络不好,重绘！')
        }
      }, 5500)
      let ctx = wx.createCanvasContext('share');
      this.setData({
        ctxh,
        tabobj
      })
      ctx.height = ctxh;
      ctx.width = ctxw;
      let scale_img = 1.55; //缩放比例
      ctx.save();
      ctx.beginPath(); 
      ctx.setFillStyle('#fff')
      ctx.fillRect(0, 0, ctxw, ctxh);
      this.drawImages(ctx, imgInfos, tabobj, scale_img);
      ctx.setFontSize(25);
      ctx.setFillStyle('white');
      ctx.fillText(nickName || '你好大象', 110, 90);
      ctx.setFontSize(18);
      ctx.fillText('邀请您享受大象居家优惠', 110, 115);
      ctx.setFontSize(20);
      ctx.setFillStyle('black');
      let fillTextObj1 = this.fillTextLineBreak(ctx, goodsname, 495 + (ctxdiff|0), 285, 25, 0);
      let fillTextObj2 = this.fillTextLineBreak(ctx, goodsname, 495 + (ctxdiff|0), 275, 25, 1, 1);
      ctx.fillText(fillTextObj1.text, 20, fillTextObj1.y);
      fillTextObj2 && ctx.fillText(fillTextObj2.text, 20, fillTextObj2.y);
      ctx.setFillStyle('#ff2323');
      ctx.fillText(nowprize, 20, 575+(ctxdiff|0));
      let nowprizeW = ctx.measureText(nowprize).width;
      if (oldprize != nowprize && nowprize < oldprize) {
        ctx.setFillStyle('#a8a8a8');
        ctx.setFontSize(16);
        ctx.fillText(oldprize, 30 + nowprizeW, 575 + (ctxdiff|0));
        let oldprizeW = ctx.measureText(oldprize).width;
        ctx.moveTo(30 + nowprizeW, 570 + (ctxdiff | 0));
        ctx.lineTo(30 + nowprizeW + oldprizeW, 570 + (ctxdiff | 0));
        ctx.setStrokeStyle('#a8a8a8')
        ctx.stroke();
      }
      ctx.setFontSize(14);
      ctx.setFillStyle('#111');
      ctx.fillText('长按识别二维码', 365, 585 + (ctxdiff|0));
      ctx.restore();
      //把画板内容绘制成图片，并回调 画板图片路径
      ctx.draw(false, () => {
        setTimeout(() => {
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: ctx.width,
            height: ctx.height,
            destWidth: ctx.width * 2,
            destHeight: ctx.height * 2,
            fileType: 'jpg',
            canvasId: 'share',
            success: (res) => {
              if (!res.tempFilePath) {
                wx.showModal({
                  title: '提示',
                  content: '图片绘制中，请稍后重试',
                  showCancel: false
                })
              }
              this.setData({
                shareImgPath: res.tempFilePath, 
                ctxh,
                tabobj,
                drawposters: true
              })
              wx.hideLoading()
            },
            fail: (err) => {
              console.log(`${new Date} 报错${err}`)
              wx.hideLoading()
            }
          })
          timers && clearTimeout(timers)
        }, 800)
      })
    }, tabobj)

  },

  // 保存分享海报
  //画板路径保存成功后，调用方法吧图片保存到用户相册
  savePosters() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareImgPath,
      //保存成功失败之后，都要隐藏画板，否则影响界面显示。
      success: (res) => {
        wx.hideLoading();
        this.setData({
          canvasHidden: true
        })
        wx.showModal({
          content: '保存成功',
          showCancel: false
        })
      },
      fail: (res) => {
        console.log(res)
        if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || res.errMsg === "saveImageToPhotosAlbum:fail auth deny"){
          console.log("打开设置窗口");
          util.showErrorToast('请打开设置授权相册')
          this.setData({
            openset: true
          })
        }
      }
    })
  },
  openSet() {
    this.setData({ openset:false })
    wx.openSetting({
      success(settingdata) {
        if (settingdata.authSetting["scope.writePhotosAlbum"]) {
          console.log("获取权限成功，再次点击图片保存到相册")
        } else {
          console.log("获取权限失败")
        }
      },
      fail(err) {
        console.log(`报错${new Date}:${err}`)
        util.showErrorToast('请打开设置授权相册')
      }
    })
  },
  getShareCode() {
    let that = this;
    //获取分享码
    let page = 'pages/goods/detail/detail';
    let userInfo = wx.getStorageSync('userInfo');
    let sellerId = userInfo.seller_id || 0;
    //scene可自定义规则，注意长度微信有限制
    let scene = `${that.data.item_id},${that.data.goods_id},${sellerId}`;
    util.request(api.WxacodeUnlimited, {
      'page': page, 'scene': scene
    }, 'POST').then((res) => {
      if (res.code == 200) {
        that.setData({
          qrcode_default: res.data.qrcode
        });
      }
    });
  },
 onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
    wx.showLoading({
      title: '加载中...',
    });
    let item_id = parseInt(options.item_id);
    let goods_id = parseInt(options.goods_id);
    let backIndex = options.backIndex || false;
    let share_seller_id = parseInt(options.share_seller_id) || 0;
    if (options.scene != undefined) {//扫码进入
      let scene = decodeURIComponent(options.scene);
      backIndex = true;
      let param = scene.split(',');
      item_id = param[0] || 0;
      goods_id = param[1] || 0;
      share_seller_id = param[2] || 0;
    }
    if (share_seller_id > 0) {
      app.globalData.userInfo.share_seller_id = share_seller_id;
    }
    this.setData({
      'item_id': item_id,
      'goods_id': goods_id,
      'backIndex':backIndex,
    });
    this.getGoodsInfo();
    this.getShareCode();
    // .then(()=>{
    //   this.saveImg();
    // });
    // this.getUserInfo()
    wx.hideLoading();
  },

  onShow: function () {
    // 分享
    let userInfo = wx.getStorageSync('userInfo');
    let token = wx.getStorageSync('token');
    // 页面显示
    if (userInfo && token) {
      app.globalData.userInfo = userInfo;
      app.globalData.token = token;
    }
    this.setData({
      userInfo: app.globalData.userInfo,
    });
  },
  })

wxss文件

/* 分享海报 */
.share_btn {
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  top: 10rpx;
  right: 0rpx;
  border-radius: 50%;
  box-shadow: 0 0 25rpx -5rpx rgb(0, 0, 0, 0.35);
  background: transparent;
  line-height: 100%;
  padding: 0;
  margin: 0;
}
.share_con {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 101;
}
.btn_area {
  position: absolute;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  height: 360rpx;
  background-color: #fff;
  z-index: 101;
}
.set_type {
  width: 485rpx;
  height: 60rpx;
  margin: 40rpx auto 40rpx;
}
.set_type text {
  float: left;
  line-height: 60rpx;
  font-size: 20rpx;
  color: #666;
}
.set_type view {
  float: left;
  margin-left: 30rpx;
  padding: 10rpx 25rpx;
  font-size: 32rpx;
  border: 1px solid #ccc;
  border-radius: 30rpx;
}
.set_type .picTabs {
  border: 1px solid #333;
  color: #333;
}
.posters_btn {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 500rpx;
  margin: 0 auto 40rpx;
}
.posters_btn::after {
  position: absolute;
  content: "";
  bottom: -20rpx;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}
.posters_btn view,.posters_btn button  {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  height: 140rpx;
}
.posters_btn button {
  font-size: 24rpx;
  color:#333;
  background: transparent;
  line-height: 100%;
  padding: 0;
  margin: 0;
}
.posters_btn view image,.posters_btn button image {
  width: 80rpx;
  height: 80rpx;
}
.bottom_tip {
  width: 100%;
  color: #333;
  text-align: center;
}
.poster_area {
  position: absolute;
  bottom: 360rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 483rpx;
  height: 755rpx;
}
兵荒码乱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分享功能，canvas绘制微信小程序分享海报
09-28
1.open-type=“share”，onShareAppMessage实现分享微信功能。2.canvas绘制分享海报。
微信小程序分享海报生成的实现方法
10-17
微信小程序分享海报生成的实现方法主要涉及到微信小程序的前端开发技术，其中的核心在于canvas的使用、网络图片的处理、二维码的生成以及图片的保存和性能优化等方面。 首先，微信小程序分享海报的设计要求是，海报...
微信小程序实现分享海报
无名之辈-_-
10-22 4836
实现前的注意事项： 1、使用的是微信小程序官方的canvas组件官方文档地址 2、在canvas中不能绘制网络图片，需要使用wx.getImageInfo({}),文档地址 注意最好在画布绘制之前对图片进行转化，我在绘制画布的过程中转化时获取到的地址一直是空的，感觉这个接口是异步的，设置了async、await也不起作用。 wx.getImageInfo({ src: '网络图片地址', success: (res) => {
微信小程序商品分享海报
ChauncyT_T的博客
07-18 1476
使用canvas画布实现小程序分享海报功能
小程序分享海报功能
Acitylion的博客
03-19 543
小程序文档说是画布不更新了 但是还能用 所以我就把部分代码粘贴出来仅供参考 <!-- 分享 --> <view class="share" hidden="{{share}}"> <view class="share_top"> <view></view> <view class="share_name">分享</view> <view class="cl...
微信小程序 分享海报
weixin_30699831的博客
03-02 330
const app = getApp(); const template = require('../../template/templates.js'); Page({ /** * 页面的初始数据 */ data: { hidden: true, dataList: { img_bg: '../../img/share_pic...
微信小程序实现分享商品海报功能
12-13
在微信小程序中，实现分享商品海报的功能是一项常见的需求，它能增强用户互动并促进商品的推广。以下将详细解析如何实现这一功能，我们将基于uni-app框架进行讲解，但原理适用于其他微信小程序开发框架。 首先，...
微信小程序生成分享海报方法（附带二维码生成）
10-17
微信小程序生成分享海报是一个重要的功能，尤其对于推广和分享来说至关重要。这篇文章为我们详细地介绍了如何在微信小程序中生成分享海报，并且包括生成二维码的方法。以下知识点是根据文章内容提炼出的详细介绍。 ...
微信小程序生成分享海报（附带二维码生成）.rar
03-12
微信小程序生成分享海报（附带二维码生成） 包含了获取网络图片转换为本地文件和前端生成二维码，和保存图片到用户相册用于分享
微信小程序分享朋友圈生成海报
aaa123aaasqw的博客
08-01 649
微信小程序实现分享到朋友圈分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存，然后自行转发朋友圈。最近项目有这个需求, 于是就记录一下。
微信小程序生成海报分享朋友圈的实现方法
10-17
利用微信强大的社交能力通过小程序达到裂变的目的，拉取新用户。下面小编给大家带来了微信小程序生成海报分享朋友圈的实现方法，感兴趣的朋友跟随小编一起看看吧
java生成微信小程序分享图海报图的全过程 可作为util直接使用
11-01
java后台生成小程序海报、小程序分享图 png不变黑，java生成微信小程序分享图海报图的全过程 可作为util直接使用
微信小程序实现canvas分享朋友圈海报
11-20
本文实例为大家分享了微信小程序分享朋友圈海报的具体代码，供大家参考，具体内容如下 思路：生成朋友圈海报放在公共文件，首先需要绘制canvas，点击分享朋友圈按钮，在手机屏幕看不见的地方（定位left：1000px）绘制出canvas，绘制完成将canvas转为图片显示。点击保存按钮，将本地缓存路径的图片下载到手机相册，在这里需要进行授权处理 untils.js文件 // 参数说明: mainImg 商品图 headImg 微信头像 onshareImg 二维码 goodsName 商品名称 goodsDec 商品描述 goodsTime 截图时间 goodsPrice 商品价格 callba
微信小程序实现生成分享海报案例
韩旭不会敲代码吧的博客
06-06 4423
微信小程序实现生成分享海报案例
小程序之分享海报
幽冥雪羽的博客
06-12 1256
在开发小程序的时候，难免需要制作小程序的分享海报，什么是分享海报？有做过小程序的人都知道，小程序有分享到微信群、微信朋友的方式，但是却不能直接分享到空间和其它地方，这就需要我们利用其它接口或者’曲线救国’了,而分享海报就是可以间接分享小程序的途径，它的原理就是：在小程序中生成一张带二维码的图片保存到手机，然后在去微信朋友圈发表动态贴图片！！ ------什么还要保存图片，占我内存，还要发表动态，简...
微信小程序-生成分享海报
森海北屿 ღ
06-25 501
实现主页面点击分享按钮，跳转至海报预览和保存页面。 分享按钮点击事件代码： // shareImage为图片网络地址，跳转页面是作为参数传递 creatPoster(){ // 每日英语生成海报 const shareImage=this.data.shareImage if(shareImage){ wx.navigateTo({ url: '../poster/poster?shareImage=' + shareImage, }) }
微信小程序生成分享海报
qq_37604998的博客
12-07 1118
最近开发海报生成并分享的功能时，想参考一下网上做法，但是搜索了一下网上调用的大多数是低版本的Canvas官方接口，而且在开发的过程也遇到了真机图片不显示、真机字体模糊的问题，所以自己整理一个新接口样例，提供大家参考下，具体代码如下： // wxml代码 <view class="card" style="width: {{width}}px;"> <canvas type="2d" id="shareCard" style="width: {{width}}px;height: 4
uniapp 微信小程序 分享海报
最新发布
09-01
Uniapp 是一种基于 Vue.js 的跨平台开发框架，可以在同一份代码中...总的来说，使用Uniapp开发的微信小程序可以通过uni.sharePoster()方法来实现海报分享的功能，而具体的实现也需要根据项目需求来进行相关配置和操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值