微信小程序 api+前端实现生成分享海报-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序 api+前端实现生成分享海报。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.先看效果图，点击分享海报按钮，然后弹出分享海报

微信小程序 api+前端实现生成分享海报

2.前端代码

这里用的组件有vant组件库还有canvas_drawer（一个画布组件）

canvas_drawer下载地址https://github.com/kuckboy1994/mp_canvas_drawer

把 components 中的 canvasdrawer 拷贝到自己项目下，然后再app.json中引用就行了，如下

"usingComponents": {

"canvasdrawer": "/static/canvasdrawer/canvasdrawer"

}

注意！注意！注意！canvas_drawer的painting属性画布里面的图片不能用本地的，不然会显示不出来！

需要用到的数据源

data () {
    return {
      isschb: true,
      xsxyid: 0,
      painting: null,
      showSharePosterPopup: false,
      sharePosterImg: '',
      xssptp: '', //现实的商品图片路径
      nickname: ''
    }
  },

我这里点击的分享海报是用的一个vant组件库的图标

<view style="position: fixed;bottom: 15%;left: 86%;">
        <view v-if="isschb">
          <van-icon name="photo-o" size="40px" style="margin-bottom: 10px;" color="#87CEEB"
            @click="generateSharePoster" />
        </view>
      </view>

然后弹窗也是用的vant里面的Popup弹出层

<!-- 预览海报弹窗 -->
      <van-popup :show="showSharePosterPopup" :close-on-click-overlay="true" round position="bottom"
        custom-style="height:80%;" @close="handleSharePosterPopupClose">
        <view style="height:50px;background:#eee;">
          <van-row>
            <van-col span="22">
              <view style="line-height:50px;" class="margin-left text-xl">保存到相册</view>
            </van-col>
            <van-col span="2">
              <van-icon custom-class="margin-top-sm" size="25" name="cross" @click="handleSharePosterPopupClose">
              </van-icon>
            </van-col>
          </van-row>
        </view>
        <img :src="sharePosterImg"
          style="width:70%;height:70%;margin-left:15%;margin-top:10px;border:1px solid #ddd;" />
        <view class="margin-lr margin-tb">
          <van-button type="danger" block @click="savePosterImg">保存图片</van-button>
        </view>
        <view class="margin-bottom text-center text-gray">保存图片到手机相册后，将图片分享到您的圈子</view>
        <canvasdrawer :painting="painting" @getImage="sharePosterImage" />
      </van-popup>

然后是Js里面的方法文章来源地址https://www.toymoban.com/news/detail-490869.html

// 生成分享海报
    generateSharePoster () {
      let that = this
      wx.downloadFile({
        url: that.bzyrtx.replace('https://thirdwx.qlogo.cn', 'https://wx.qlogo.cn'),
        success: (res) => {
          var picurl = res.tempFilePath
          wx.showLoading({
            title: '海报生成中..',
            mask: true
          })
          let url = 'api/Xys/create/xcxcode?api-version=1&xyid=' + that.xsxyid
          that.$http
            .get(url)
            .then((res) => {
              if (res) {
                console.log(that.xssp

到了这里，关于微信小程序 api+前端实现生成分享海报的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！