uni-App小程序、canvas 生成海报 +下载图片+分享微信好友

最新推荐文章于 2025-04-07 12:06:48 发布

永不脱发的程序猿

最新推荐文章于 2025-04-07 12:06:48 发布

阅读量3.9k

点赞数

分类专栏： uni-app Vue 小程序文章标签： vue 小程序

本文链接：https://blog.youkuaiyun.com/weixin_45459904/article/details/108639355

版权

本文介绍了如何使用uni-App插件在微信小程序中实现分享弹窗、生成海报并支持海报的保存功能。具体实现依赖于插件'hch-poster'，目前该功能仅适用于微信小程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：分享弹窗，生成海报并支持保存,目前仅支持微信小程序

·插件包链接 https://ext.dcloud.net.cn/plugin?id=586

代码：

<template>
  <view class="content">
    <img class="poster-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600321599704&di=e783c9fb544111260187fde8dfd534d3&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F29%2F20180829101545_xevcy.thumb.400_0.jpg" alt="" srcset="">
    <button class="share-btn" @tap="shareEvn">生成主海报</button>
    <img class="poster-img" src="https://huangchunhongzz.gitee.io/imgs/poster/poster_2.jpg" alt="" srcset="">
    <button class="share-btn" @tap="shareEvn('simple')">生成简单版海报</button>
    <!-- 分享弹窗-->
    <view class="share-pro">
      <view class="share-pro-mask" v-if="deliveryFlag"></view>
      <view class="share-pro-dialog" :class="deliveryFlag?'open':'close'">
        <view class="close-btn" @tap="closeShareEvn">
          <span class="font_family">&#xe81d;</span>
        </view>
        <view class="share-pro-title">分享</view>

最低0.47元/天解锁文章