1.先看效果圖，點擊分享海報按鈕，然后彈出分享海報

?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屬性畫布里面的圖片不能用本地的，不然會顯示不出來！

需要用到的數(shù)據(jù)源

data () {
    return {
      isschb: true,
      xsxyid: 0,
      painting: null,
      showSharePosterPopup: false,
      sharePosterImg: '',
      xssptp: '', //現(xiàn)實的商品圖片路徑
      nickname: ''
    }
  },

我這里點擊的分享海報是用的一個vant組件庫的圖標(biāo)

<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彈出層

<!-- 預(yù)覽海報彈窗 -->
      <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里面的方法文章來源地址http://www.zghlxwxcb.cn/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

到了這里，關(guān)于微信小程序 api+前端實現(xiàn)生成分享海報的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！