一、簡介

做個(gè)簡單的生成二維碼海報(bào)分享，我做的時(shí)候也找簡單的方法看能不能實(shí)現(xiàn)頁面直接截圖那種生成圖片，原生小程序不支持，不多介紹下面有全部代碼有注釋、參數(shù)自行替換運(yùn)行看看，還有需要優(yōu)化的地方，有問題可以咨詢我，我寫的已經(jīng)上線

如圖：

文章來源地址http://www.zghlxwxcb.cn/news/detail-664940.html

二、?js:

// 產(chǎn)品詳情
import {
  getProductDetails,
  getDataList,
  getShareData,
  getUnlimitedQRCode
} from "../../../../../api/dsxapi";
const ui = require("../../../../../utils/ui");

Page({
  data: {
    id: null, //跳轉(zhuǎn)傳過來的產(chǎn)品id
    datas: null, //詳情數(shù)據(jù)
    images: null, //輪播圖
    current: 0,
    proTags: null, //產(chǎn)品標(biāo)簽
    images2: null, //詳情圖片
    routeId: null, //哪里打開的
    show: false, //遮罩層
    showShare: false, //分享面板
    shareImg: false, //控制分享圖標(biāo)
    options: [{
        name: '微信',
        icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
        openType: 'share'
      },
      {
        name: '生成分享圖',
        icon: 'https://wx.applet.style.51dsx.cn/img/share_button_fxt.png'
      },
    ],
    posterDatas: {
      width: 281, //畫布寬度
      height: 460, //畫布高度
      // 緩沖區(qū)，無需手動(dòng)設(shè)定
      pic: null,
      buttonType: 1,
      show: false, // 顯示隱藏跳轉(zhuǎn)設(shè)置
      success: false, // 是否成功生成過海報(bào)
      canvas: null, // 畫布的節(jié)點(diǎn)
      ctx: null, // 畫布的上下文
      dpr: 1, // 設(shè)備的像素比
    },
    QRcodeImg: null, //小程序二維碼
    photoWidth: null //產(chǎn)品圖片寬度
  },

  onLoad(options) {
    this.getlength()
    this.setData({
      id: options.id
    })
    if (options.routeId) {
      this.setData({
        routeId: options.routeId
      })
    }
    if (options.scene) { //掃二維碼進(jìn)來的
      this.setData({
        id: decodeURIComponent(options.scene).split('id=')[1].split('&')[0],
        routeId: decodeURIComponent(options.scene).split('routeId=')[1]
      })
    }
    let that = this;
    //生成海報(bào)初始化
    let posterDatas = that.data.posterDatas
    const query = wx.createSelectorQuery()
    query.select('#firstCanvas').fields({
        node: true,
        size: true
      },
      function (res) {
        const canvas = res.node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = posterDatas.width * dpr
        canvas.height = posterDatas.height * dpr
        ctx.scale(dpr, dpr)
        posterDatas.canvas = canvas
        posterDatas.ctx = ctx
        posterDatas.dpr = dpr
        //存儲(chǔ)
        that.setData({
          posterDatas
        })
      }).exec()
    this._getProductDetails(this.data.id)
  },
  onShow() {
    // 判斷分享打開并且沒登錄的跳轉(zhuǎn)登錄
    if (this.data.routeId) {
      if (wx.getStorageSync("appuser") == undefined || wx.getStorageSync("appuser") == '') {
        wx.navigateTo({
          url: "/subPackag/pages/me_jump/login/login",
        });
      }
    }
    this.getlength()
    this._getProductDetails(this.data.id)
    this.setData({
      show: false
    })
  },

  //自定義導(dǎo)航欄計(jì)算
  getlength() {
    let windowWidth = wx.getSystemInfoSync().windowWidth;
    const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
    const menuButton = wx.getMenuButtonBoundingClientRect();
    let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);
    let statusBarTop = statusBarHeight * (750 / windowWidth);
    this.setData({
      navHeight: navHeight + statusBarTop,
      statusBarTop: menuButton.top,
    })
  },
  //自定義返回按鈕
  onBack() {
    if (this.data.routeId && this.data.routeId == 5 || this.data.routeId == 797 || this.data.routeId == 6) { //5好友里打開797朋友圈打開1未登錄點(diǎn)擊登錄后大師兄頁面返回
      // wx.navigateTo({
      //   url: `/subPackag/pages/consult_jump/EnterprisePiece/market/market`,
      // });
      // 判斷從分享和掃碼打開點(diǎn)擊為關(guān)閉小程序
      wx.exitMiniProgram({
        success: function () {},
        fail: function () {}
      })
    } else {
      wx.navigateBack();
    }
  },

  //跳轉(zhuǎn)企業(yè)/園區(qū)詳情
  goEnterprise(event) {
    if (this.data.datas.type == 2) {
      //園區(qū)
      wx.navigateTo({
        url: `/subPackag/pages/consult_jump/EnterprisePiece/park/park?id=${event.currentTarget.dataset.id}`,
      });
    } else {
      //企業(yè)
      wx.navigateTo({
        url: `/subPackag/pages/consult_jump/EnterprisePiece/enterprise/enterprise?id=${event.currentTarget.dataset.id}`,
      });
    }
  },
  //跳轉(zhuǎn)案例詳情
  goCase(event) {
    let params = {
      type: 4,
      id: event.currentTarget.dataset.id,
    };
    getShareData(params)
      .then((res) => {
        wx.navigateTo({
          url: `/sDsxPackag/pages/webview/webview?url=${res.data.shareUrl}&title=${res.data.shareTitle}`
        })
      })
  },

  //跳轉(zhuǎn)大師兄詳情
  goDSXdetails(event) {
    getDataList({
      brotherName: event.currentTarget.dataset.item.realName,
      current: 1,
      size: 10
    }).then((res) => {
      console.log(1111111111111, res);
      const nowdata = {
        item: res.data.records[0],
      };
      console.log(111, nowdata);
      var queryBean = JSON.stringify(nowdata);
      if (wx.getStorageSync('queryBean') !== undefined) {
        let qb = wx.getStorageSync("queryBean");
        qb = queryBean;
        wx.setStorageSync("queryBean", qb);
      } else {
        wx.setStorageSync("queryBean", queryBean);
      }
      wx.navigateTo({
        url: `/sDsxPackag/pages/dsx/dsxcard/dsxcard?queryBean=${encodeURIComponent(
            queryBean
          )}`,
      });
    });
  },

  //產(chǎn)品詳情
  _getProductDetails(id) {
    let params = {
      id: id
    };
    getProductDetails(params).then((res) => {
      this.setData({
        datas: res.data,
        images: res.data.proImgs.split(","),
        proTags: res.data.proTags.split(","),
        images2: res.data.proDetailsImgs.split(","),
        shareImg: true
      });
    }).catch(function (imError) {
      console.log(imError);
    })
  },

  //客服電話
  servicePhone() {
    if (this.data.datas.phone) {
      wx.makePhoneCall({
        phoneNumber: this.data.datas.phone
      })
    } else {
      wx.makePhoneCall({
        phoneNumber: '4001512051'
      })
    }
  },

  //輪播圖預(yù)覽
  tapAvatar(event) {
    console.log(event);
    wx.previewImage({
      current: event.currentTarget.dataset.item,
      urls: this.data.images,
    })
    console.log(event);
  },

  //輪播數(shù)字指示
  swiperChange(e) {
    var that = this;
    if (e.detail.source == 'touch') {
      that.setData({
        current: e.detail.current
      })
    }
  },
  //獲取二維碼
  //產(chǎn)品詳情
  _getUnlimitedQRCode() {
    let params = {
      id: this.data.id,
      type: 1,
      envVersion: 'release' //正式版為 "release"，體驗(yàn)版為 "trial"，開發(fā)版為 "develop
    };
    getUnlimitedQRCode(params).then((res) => {
      const base64 = res.data.qrcode;
      const time = new Date().getTime();
      //USER_DATA_PATH：文件系統(tǒng)中的用戶目錄路徑 (本地路徑)
      const imgPath = wx.env.USER_DATA_PATH + "/poster" + time + "" + ".png";
      const imageData = base64.replace(/^data:image\/\w+;base64,/, "");
      const file = wx.getFileSystemManager();
      file.writeFileSync(imgPath, imageData, "base64");
      console.log(imgPath);
      this.setData({
        QRcodeImg: imgPath,
      });
    }).catch(function (imError) {
      console.log(imError);
    })
  },

  //引導(dǎo)打開相冊權(quán)限取消按鈕
  onClickHide1() {
    let posterDatas = this.data.posterDatas;
    posterDatas["buttonType"] = 1;
    this.setData({
      show: false,
      showShare: false,
      posterDatas,
      options: [{
          name: '微信',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
          openType: 'share'
        },
        {
          name: '生成分享圖',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_fxt.png'
        },
      ],
    });
  },

  //分享按鈕
  onClick(event) {
    if (!this.data.QRcodeImg) {
      //獲取二維碼
      this._getUnlimitedQRCode()
    }

    //獲取產(chǎn)品圖片寬度
    wx.getImageInfo({
      src: this.data.datas.proCover,
      success: res => {
        this.setData({
          photoWidth: res.width
        })
      }
    })
    this.setData({
      showShare: true,
      options2: [{
          name: '微信',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
          openType: 'share'
        },
        {
          name: '生成分享圖',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_fxt.png'
        },
      ],
    });
  },

  //隱藏分享面板
  onClose() {
    this.onIsCanvas()
    this.data.posterDatas["buttonType"] = 1;
    this.setData({
      showShare: false,
      options: [{
          name: '微信',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
          openType: 'share'
        },
        {
          name: '生成分享圖',
          icon: 'https://wx.applet.style.51dsx.cn/img/share_button_fxt.png'
        },
      ],
    });
  },

  //分享面板里面的點(diǎn)擊事件
  onSelect(event) {
    console.log(event);
    if (event.detail.index == 0) {
      this.setData({
        showShare: false
      })
      this.onIsCanvas()
    } else if (event.detail.index == 1) {
      if (this.data.posterDatas.buttonType == 1) {
        if (this.data.QRcodeImg) {
          this.data.posterDatas["buttonType"] = 2;
          this.onBuildPosterSaveAlbum()
          this.setData({
            options: [{
                name: '微信',
                icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
                openType: 'share'
              },
              {
                name: '保存到相冊',
                icon: 'https://wx.applet.style.51dsx.cn/img/share_button_down.png'
              },
            ]
          })
        }
      } else if (this.data.posterDatas.buttonType == 2) {
        this.onDownloadImges()
        this.setData({
          options: [{
              name: '微信',
              icon: 'https://wx.applet.style.51dsx.cn/img/share_button_wechat.png',
              openType: 'share'
            },
            {
              name: '保存到相冊',
              icon: 'https://wx.applet.style.51dsx.cn/img/share_button_down.png'
            },
          ]
        });
      } else if (this.data.posterDatas.buttonType == 3) {
        let posterDatas = this.data.posterDatas;
        posterDatas["show"] = false;
        this.setData({
          posterDatas,
          show: true
        })
      }
    }
  },
  //海報(bào)生成
  onBuildPosterSaveAlbum() {
    let that = this;
    let posterDatas = that.data.posterDatas
    let canvas = posterDatas.canvas
    let ctx = posterDatas.ctx
    //已生成過海報(bào)的直接顯示彈窗
    if (posterDatas.success) {
      posterDatas["show"] = true;
      that.setData({
        posterDatas
      })
      return;
    }
    posterDatas.show = true;
    that.setData({
      posterDatas
    })
    wx.showLoading({
      title: '海報(bào)生成中',
      mask: true
    });
    //二維碼
    let promise1 = new Promise(function (resolve, reject) {
      const photo = canvas.createImage();
      photo.src = that.data.QRcodeImg;
      photo.onload = (e) => {
        resolve(photo);
      }
    });
    // 背景圖
    let promise2 = new Promise(function (resolve, reject) {
      const photo = canvas.createImage();
      photo.src = "https://wx.applet.style.51dsx.cn/img/share_ig_bg.png";
      photo.onload = (e) => {
        resolve(photo);
      }
    });
    // 產(chǎn)品圖
    let promise3 = new Promise(function (resolve, reject) {
      const photo = canvas.createImage();
      photo.src = that.data.datas.proCover;
      photo.onload = (e) => {
        resolve(photo);
      }
    });
    //獲取圖片信息
    Promise.all(
      [promise1, promise2, promise3]
    ).then(res => {
      //背景圖
      ctx.drawImage(res[1], 0, 0, posterDatas.width, posterDatas.height);
      // 產(chǎn)品圖
      // ctx.drawImage(res[2], 18, 18, posterDatas.width-36, 245);
      ctx.drawImage(res[2], 0, 0, that.data.photoWidth, that.data.photoWidth, 18, 18, posterDatas.width - 36, posterDatas.width - 36);
      //二維碼
      ctx.drawImage(res[0], posterDatas.width - 82, posterDatas.height - 82, 64, 64);
      if (that.data.datas.payType == 2) {
        //面議
        ctx.font = "bold 20px sans-serif";
        ctx.fillStyle = "#EF3822";
        ctx.fillText('面議', 18, 290);
        ctx.fill();
      } else {
        //現(xiàn)價(jià)
        ctx.font = "14px"; //字體大小
        ctx.fillStyle = "#EF3822"; //字體顏色
        ctx.fillText('￥', 18, 290);
        ctx.font = "bold 20px sans-serif";
        ctx.fillStyle = "#EF3822";
        const proPrice = ctx.measureText(that.data.datas.proPrice)
        ctx.fillText(that.data.datas.proPrice, 26, 290);
        ctx.fill();
        // 原價(jià)
        let text = '￥' + that.data.datas.proOriginalPrice
        ctx.font = "10px sans-serif";
        ctx.fillStyle = "#9A9A9A";
        ctx.fillText(text, proPrice.width + 32, 290);
        ctx.fillStyle = '#9A9A9A';
        ctx.beginPath();
        const textWidth = ctx.measureText(text).width;
        ctx.rect(proPrice.width + 32, 286, textWidth, 1);
        ctx.fill();
      }
      //地區(qū)
      ctx.font = "10px sans-serif";
      ctx.fillStyle = "#9A9A9A";
      //畫布寬度減去文字長度
      ctx.fillText(that.data.datas.serviceAreaText, posterDatas.width - ctx.measureText(that.data.datas.serviceAreaText).width - 18, 290);
      ctx.fill();
      //標(biāo)題
      ctx.fillStyle = "#333333";
      ctx.font = "bold 14px sans-serif";
      // ctx.fillText('專精特新企業(yè)股權(quán)融資方案設(shè)計(jì)', 18, 310);
      that.toFormateStr(ctx, that.data.datas.proName, 245, 1, 18, 312, 16, 1) // 繪制文字并換行
      ctx.fill();
      //板塊
      ctx.font = "11px sans-serif";
      ctx.fillStyle = "#646464";
      ctx.fillText(that.data.datas.proDesc, 18, 332);
      ctx.fill();
      //機(jī)構(gòu)信息
      ctx.font = "11px";
      ctx.fillStyle = "#9D9D9D";
      ctx.fillText('機(jī)構(gòu)信息：' + that.data.datas.institutionName, 18, 352);
      ctx.fill();
      //線條
      ctx.save();
      ctx.rect(18, 390, 140, 0.5);
      ctx.strokeStyle = "#9A9A9A"
      ctx.fill();

      ctx.font = "10px";
      ctx.fillStyle = "#9D9D9D";
      ctx.fillText('實(shí)際價(jià)格以掃碼頁面展示為準(zhǔn)', 18, 410);
      ctx.fill();
      ctx.font = "10px";
      ctx.fillStyle = "#9D9D9D";
      ctx.fillText('長按識(shí)別查看、聯(lián)系', 18, 426);
      ctx.fill();
      // 關(guān)閉loading
      wx.hideLoading();
      //顯示海報(bào)
      posterDatas.success = true;
      that.setData({
        posterDatas
      })
    }).catch(err => {
      console.log(err)
      wx.hideLoading();
      wx.showToast({
        icon: 'none',
        title: '海報(bào)生成失敗,請(qǐng)稍后再試.',
      })
    })
  },

  // 文字換行
  toFormateStr(ctx, str, draw_width, lineNum, startX, startY, steps, number) {
    //ctx：canvas的 2d 對(duì)象，str：繪制的文字，startX,startY:文字坐標(biāo)，draw_width：文字最大寬度，lineNum：需要的行數(shù)，steps：行高,number:減少最后幾個(gè)字變成...
    let strWidth = ctx.measureText(str).width; // 測量文本源尺寸信息（寬度）
    let startpoint = startY,
      keyStr = '',
      sreLN = strWidth / draw_width; // 文本長度除以換行的寬 得到一共生成多少行
    let liner = Math.ceil(sreLN); // 計(jì)算文本源一共能生成多少行
    let strlen = parseInt(str.length / sreLN); // 等比縮放測量一行文本顯示多少個(gè)字符
    // 若文本不足一行，則直接繪制，反之大于傳入的最多行數(shù)（lineNum）以省略號(hào)（...）代替
    if (strWidth < draw_width) {
      ctx.fillText(str, startX, startpoint);
    } else {
      for (let i = 1; i < liner + 1; i++) {
        let startPoint = strlen * (i - 1);
        if (i < lineNum || lineNum == -1) {
          keyStr = str.substr(startPoint, strlen);
          ctx.fillText(keyStr, startX, startpoint);
        } else {
          keyStr = str.substr(startPoint, strlen - number) + '...';
          ctx.fillText(keyStr, startX, startpoint);
          break;
        }
        startpoint = startpoint + steps;
      }
    }
  },

  //畫布轉(zhuǎn)圖片
  onCanvasBuildImges() {
    let that = this;
    let posterDatas = that.data.posterDatas;
    wx.canvasToTempFilePath({
      canvas: posterDatas.canvas,
      width: posterDatas.width,
      height: posterDatas.height,
      // destWidth: posterDatas.width * 3,
      // destHeight: posterDatas.height * 3,
      quality: 1,
      success: function success(res) {
        posterDatas["pic"] = res.tempFilePath;
        that.setData({
          posterDatas
        })
        that.onDownloadImges();
      },
      fail: function complete(e) {
        wx.hideLoading();
        wx.showToast({
          icon: 'none',
          title: 'sorry 保存失敗,請(qǐng)稍后再試.',
        })
        return;
      }
    });
  },

  //下載圖片
  onDownloadImges() {
    wx.showLoading({
      title: '保存中',
      mask: true
    });
    let that = this;
    let posterDatas = that.data.posterDatas;
    if (!posterDatas.pic) {
      that.onCanvasBuildImges();
      return;
    }
    wx.saveImageToPhotosAlbum({
      filePath: posterDatas.pic,
      success(res) {
        wx.hideLoading();
        wx.showToast({
          icon: 'none',
          title: '已保存到相冊',
        })
        that.onIsCanvas()
        posterDatas["buttonType"] = 1;
        that.setData({
          showShare: false,
          posterDatas
        })
      },
      fail: function (res) {
        wx.hideLoading();
        wx.showToast({
          icon: 'none',
          title: '已取消',
        })
        posterDatas["buttonType"] = 3;
        that.setData({
          posterDatas
        })
        return;
      }
    })
  },

  //在打開授權(quán)設(shè)置頁后回調(diào)
  onBindOpenSetting() {
    let that = this;
    let posterDatas = that.data.posterDatas;
    posterDatas["buttonType"] = 1;
    that.setData({
      posterDatas
    })
  },

  //隱藏海報(bào)
  onIsCanvas() {
    let that = this;
    let posterDatas = that.data.posterDatas;
    posterDatas["buttonType"] = 1;
    posterDatas["show"] = false;
    that.setData({
      posterDatas
    })
  },

  onShareAppMessage: function (res) { //分享給好友
    var that = this
    return {
      title: that.data.datas.proName + '—產(chǎn)品詳情',
      path: 'subPackag/pages/consult_jump/EnterprisePiece/product/product?id=' + that.data.datas.id + '&routeId=' + 5,
      imageUrl: '',
      success: function (res) {
        console.log(res);
        wx.showToast({
          title: '分享成功',
          icon: "none"
        });
      },
      fail: function (res) {
        wx.showToast({
          title: '分享失敗',
          icon: "none"
        })
      }
    }
  },
  onShareTimeline: function () { //分享朋友圈
    var tha = this
    return {
      title: tha.data.datas.proName + '—產(chǎn)品詳情',
      query: 'id=' + tha.data.datas.id + '&routeId=' + 797,
      imageUrl: tha.data.datas.proCover,
      success: function (res) {
        wx.showToast({
          title: '分享成功',
          icon: "none"
        });
      },
      fail: function (res) {
        wx.showToast({
          title: '分享失敗',
          icon: "none"
        })
      }
    }
  },
})

?三、?wxml:

<!-- 自定義導(dǎo)航 -->
<view class="nav-back" style="height: {{navHeight}}rpx;">
  <image class="imgbackw" style="margin-top: {{statusBarTop}}px" src="https://wx.applet.style.51dsx.cn/img/icon_navigation_return.png" catchtap="onBack" />
  <view class="nav-name" style="margin-top: {{statusBarTop}}px">產(chǎn)品詳情</view>
</view>

<view class="product" wx:if="{{datas}}" style="margin-top: {{navHeight}}rpx;">
  <!-- 輪播 -->
  <view wx:if="{{images[0]!==''}}" class="swiper1" style="overflow: hidden;">
    <swiper bindchange="swiperChange" class="swiper" indicator-active-color="white" current="0" indicator-color="#fff6" display-multiple-items circular="{{true}}">
      <swiper-item wx:for="{{images}}" wx:key="index">
        <image data-item="{{item}}" bindtap="tapAvatar" src="{{item}}" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <view class="imageCount" wx:if="{{images.length>1}}">{{current+1}}/{{images.length}}</view>
  </view>
  <view class="middle">
    <view class="price">
      <view class="price-div">
      <!-- 價(jià)錢、地區(qū) -->
        <view style="display: inline-block;">
          {{ datas.payType == 2 ? "" : "￥"
          }}<span class="item1">{{
            datas.payType == 2 ? "面議" : datas.proPrice
            }}</span>
          <span class="item3">{{
            datas.payType == 2 || datas.proOriginalPrice == 0
            ? ""
            : "￥" + datas.proOriginalPrice
            }}</span>
        </view>
        <view class="area">
          {{datas.serviceAreaText}}
        </view>
      </view>
      <view class="info">
        <!-- 標(biāo)題、板塊、標(biāo)簽 -->
        <view class="item1">{{ datas.proName }}</view>
        <view class="item2" wx:if="{{datas.proDesc}}">{{ datas.proDesc }}</view>
        <view wx:if="{{proTags[0]!==''}}">
          <view class="item3" wx:for="{{proTags}}" wx:key="index">
            {{item}}
          </view>
        </view>
      </view>
    </view>
    <view class="institution">
      <view class="title">機(jī)構(gòu)信息</view>
      <!-- 機(jī)構(gòu)信息 -->
      <view class="info2" data-id="{{datas.companyId}}" bindtap="goEnterprise">
        <image src="{{datas.institutionLogo}}" class="img1" mode="aspectFit" />
        <view class="right">
          <view class="item1">
            {{ datas.institutionName }}
          </view>
          <view class="item2">
            {{ datas.institutionAddress }}
          </view>
        </view>
      </view>
      <view wx:if="{{datas.userNames.length > 0}}">
      <!-- 大師兄左右滑動(dòng)列表 -->
        <van-divider customStyle="margin:0;" />
        <view class="BigMasterBox">
          <view class="BigMasterItem" data-item="{{item}}" bindtap="goDSXdetails" wx:for="{{datas.userNames}}" wx:key="index">
            <image src="{{item.photo}}" class="img" mode="aspectFill"/>
            <view class="right">
              <view class="item1">
                {{ item.realName }}
              </view>
              <view class="{{item.online == 1 ? 'item2' : 'red'}}">
                {{
                item.online == 1
                ? "可咨詢"
                : "可預(yù)約"
                }}
              </view>
              <view class="item3">
                {{ item.roleName }} |
                {{ item.unitStartTimeText }}
              </view>
            </view>
          </view>
        </view>
        <view class="prompt">
          以上大師兄由產(chǎn)品方所列，由用戶自主選擇
        </view>
      </view>
    </view>
    <view class="case" wx:if="{{datas.serviceNames.length > 0}}">
      <view class="title">服務(wù)案例</view>
      <view class="caseBox">
        <view class="caseItem" data-id="{{item.id}}" bindtap="goCase" wx:for="{{datas.serviceNames}}" wx:key="index">
          <!-- 案例左右滑動(dòng)列表 -->
          <image src="https://wx.applet.style.51dsx.cn/img/store_icon_fwal.png" class="img" mode='widthFix' />
          <view class="right">
            <view class="item1">
              {{ item.customerName }}
            </view>
            <view class="item2">
              {{ item.sectionText }}
            </view>
            <view class="item2">
              {{ item.serviceTime }}年
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="details">
      <view class="median"></view>
      <span> 產(chǎn)品詳情 </span>
      <view class="median"></view>
    </view>
  </view>
  <!-- 產(chǎn)品介紹長圖列 -->
  <view class="introduce">
    {{ datas.proDetails }}
  </view>
  <image wx:if="{{images2[0]!==''}}" class="img3" wx:for="{{images2}}" wx:key="index" src="{{item}}" mode='widthFix' />
  <view class="bottomBox">
    <view class="FixedBottom">
      <view>
        <!-- <view class="item1" bindtap="servicePhone">
          <image class="img" src="https://image-cos.51dsx.cn/images/2023-05-08/store_button_service.png" />
          <view class="text">客服</view>
        </view> -->
        <view class="item2" data-id="{{datas.companyId}}" bindtap="goEnterprise">
          <image class="img" src="https://image-cos.51dsx.cn/images/2023-05-08/store_button_store.png" />
          <view class="text">店鋪</view>
        </view>
      </view>
      <view class="item3" bindtap="servicePhone">
        聯(lián)系機(jī)構(gòu)
      </view>
    </view>
  </view>
</view>
<!-- 海報(bào) -->
<view class="canvasMain" hidden="{{!posterDatas.show}}">
  <canvas type="2d" id="firstCanvas" class="firstCanvas" style="width:{{posterDatas.width}}px;height:{{posterDatas.height}}px;"></canvas>
</view>
<!-- 分享圖標(biāo) -->
<image wx:if="{{shareImg}}" class="shareImg" bindtap="onClick" src="https://wx.applet.style.51dsx.cn/img/xiangqing_button_share.png" mode="aspectFill" />
<!-- 彈窗去打開相冊權(quán)限 -->
<van-overlay z-index="999999" show="{{ show }}">
  <view class="wrapper">
    <view class="block" catch:tap="noop">
      <view class="popup-box">
        <view class="telephone">進(jìn)入設(shè)置頁，開啟“保存到相冊”</view>
        <van-divider customStyle="margin:0;" />
        <view class="ncontent">
          <button class='button' bindtap='onClickHide1'>取消</button>
          <button class='button' open-type='openSetting' bindopensetting='onBindOpenSetting'>確定</button>
        </view>
      </view>
    </view>
  </view>
</van-overlay>
<!-- 分享面板 -->
<van-share-sheet show="{{ showShare }}" title="" options="{{ options }}" bind:select="onSelect" bind:close="onClose" />

?四、wxss:

.nav-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  text-align: center;
  background: #fff;
  z-index: 9999999;
}

.nav-back .nav-name {
  font-size: 32rpx;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 40rpx;
  width: 100%;
  color: #000;
  height: 60rpx;
  line-height: 60rpx;
}

.imgbackw {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  left: 0rpx;
  z-index: 100;
}

.imageCount {
  padding: 4rpx 20rpx;
  font-size: 24rpx;
  border-radius: 40rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color:#fff;
  position:absolute;
  right:16rpx;
  bottom:16rpx;
}
.swiper1 {
  width: 100vw;
  height: 100vw;
  transform: translateY(0);
}

/* 廣告輪播圖 */
.swiper {
  /*再設(shè)置個(gè)transform的屬性*/
  transform: translateY(0);

}

.swiper image,
.swiper {
  width: 100vw;
  height: 100vw;
}

.swiper swiper-item {
  position: relative;
}
.product {
  padding-bottom: 164rpx;
  width: 100%;
  height: auto;
}

.product .FixedBottom .item3 {
  /* width: 2.47rpx; */
  /* width: 70%; */
  width: 88%;
  height: 88rpx;
  background: linear-gradient(138deg, #5092f7 0%, #3171e8 100%);
  border-radius: 80rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}

.product .FixedBottom .img {
  width: 48rpx;
  height: 48rpx;
}

.product .FixedBottom .text {
  font-size: 24rpx;
  font-weight: 400;
  color: #000000;
  line-height: 36rpx;
}

.product .FixedBottom .item1,
.product .FixedBottom .item2 {
  font-size: 24rpx;
  color: #000000;
  line-height: 36rpx;
}

.product .FixedBottom .item1,
.product .FixedBottom .item2,
.product .FixedBottom .item3 {
  display: inline-block;
  text-align: center;
}

.product .bottomBox {
  width: 100%;
  background: #fff;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
  padding: 20rpx 0rpx 52rpx 0rpx;
  border-top: 1px solid rgb(247, 246, 246);
}

.product .FixedBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx 0rpx 40rpx;
  /* margin: 0 auto; */
}

.product .img3 {
  width: 100vw;
}

.product .introduce {
  padding: 20rpx;
  font-size: 28rpx;
  color: #444444;
  line-height: 42rpx;
}

/* 內(nèi)容 價(jià)錢信息、機(jī)構(gòu)、案例 */
.middle .details span {
  margin: 0 20rpx;
}

.middle .details .median {
  display: inline-block;
  width: 96rpx;
  border-bottom: #d8d8d8 2rpx solid;
}

.middle .details {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
}

.middle .case .caseBox .caseItem .right .item2 {
  font-size: 24rpx;
  color: #6f6f6f;
  line-height: 36rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.middle .case .caseBox .caseItem .right .item1 {
  font-size: 28rpx;
  font-weight: 600;
  color: #000000;
  line-height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.middle .case .caseBox .caseItem .right {
  margin-left: 20rpx;
}

.middle .case .caseBox .caseItem .img {
  width: 112rpx;
  min-width: 112rpx;
  height: 112rpx;
  border-radius: 12rpx;
}

.middle .case .caseBox .caseItem {
  display: flex;
  align-items: center;
  margin-right: 16rpx;
  flex-shrink: 0;
  background: #f6f6f6;
  border-radius: 8rpx;
  height: 160rpx;
  padding: 0rpx 20rpx;
  min-width: 400rpx;
  max-width: 400rpx;
}

.middle .case .caseBox .caseItem:last-child {
  margin-right: 0 !important;
}

.middle .case .caseBox {
  border-radius: 12rpx;
  /* padding: 0.12rpx 0.1rpx; */
  /* 設(shè)置超出滾動(dòng) */
  overflow-x: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.product .middle .case {
  margin-top: 16rpx;
  padding: 28rpx 20rpx 20rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  border: 2rpx solid #ffffff;
}

::-webkit-scrollbar {
  /* 隱藏滾動(dòng)條 */
  display: none;
}

.BigMasterItem .right {
  display: inline-block;
  font-size: 24rpx;
  color: #000000;
  line-height: 32rpx;
  margin-left: 8rpx;

}

.product .middle .institution .BigMasterBox .BigMasterItem .img {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  object-fit: cover;
}

.product .middle .institution .prompt {
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #9a9a9a;
  line-height: 36rpx;
}

.product .middle .institution .BigMasterBox .BigMasterItem:last-child {
  margin-right: 0 !important;
}

.product .middle .institution .BigMasterBox .BigMasterItem .item1 {
  display: inline-block;
  font-size: 28rpx;
  font-weight: 600;
  color: #444444;
  line-height: 36rpx;
}

.product .middle .institution .BigMasterBox .BigMasterItem .red {
  margin-left: 8rpx;
  display: inline-block;
  padding: 0 8rpx;
  height: 32rpx;
  background: #3a89ff;
  color: #fff;
  font-size: 24rpx;
  line-height: 32rpx;
  border-radius: 8rpx;
}

.product .middle .institution .BigMasterBox .BigMasterItem .item2 {
  margin-left: 8rpx;
  display: inline-block;
  padding: 0 8rpx;
  height: 32rpx;
  background: #4dc741;
  color: #fff;
  font-size: 24rpx;
  line-height: 32rpx;
  border-radius: 8rpx;
}

.product .middle .institution .BigMasterBox .BigMasterItem .item3 {
  margin-top: 4rpx;
  font-size: 24rpx;
  color: #9a9a9a;
  line-height: 28rpx;
}

.BigMasterItem {
  display: flex;
  align-items: center;
  margin-right: 16rpx;
  flex-shrink: 0;
  background: #f3f8ff;
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
}

.BigMasterBox {
  /* 設(shè)置超出滾動(dòng) */
  overflow-x: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

::v-deep .el-divider--horizontal {
  margin: 0;
  background-color: #e5e5e5 !important;
}

.product .middle .institution .info2 {
  margin-top: 24rpx;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
}

.product .middle .institution .img1 {
  display: inline-block;
  width: 88rpx;
  min-width: 88rpx;
  max-height: 88rpx;
  border-radius: 12rpx;
  border: 1rpx solid #ededed;
}

.product .middle .institution .info2 .right {
  margin-left: 16rpx;
  display: inline-block;
}

.product .middle .institution .info2 .right .item1 {
  font-size: 32rpx;
  font-weight: 600;
  color: #000000;
  line-height: 40rpx;
}

.product .middle .institution .info2 .right .item2 {
  margin-top: 6rpx;
  font-size: 26rpx;
  color: #9a9a9a;
  line-height: 36rpx;
  min-height: 36rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.product .middle .institution {
  margin-top: 16rpx;
  padding: 28rpx 20rpx 20rpx 20rpx;
  background: linear-gradient(180deg, #e0edff 0%, #ffffff 23%, #ffffff 100%);
  border-radius: 20rpx;
  border: 2rpx solid #ffffff;
}

.product .middle .institution .title,
.product .middle .case .title {
  font-size: 30rpx;
  font-weight: 600;
  color: #000000;
  line-height: 40rpx;
}

.product .middle .info .item1 {
  width: 100%;
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  line-height: 48rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product .middle .info .item2 {
  width: 100%;
  font-size: 26rpx;
  color: #868686;
  line-height: 40rpx;
  margin-top: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 8rpx;
}

.product .middle .info .item3 {
  display: inline-block;
  height: 32rpx;
  font-size: 24rpx;
  color: #9a9a9a;
  line-height: 32rpx;
  background: #f7f7f7;
  border-radius: 4rpx;
  padding: 0 12rpx;
  margin-right: 20rpx;
}

.product .middle .info .item3:last-child {
  margin-right: 0 !important;
}

.custom-indicator {
  position: absolute;
  right: 16rpx;
  bottom: 16rpx;
  padding: 4rpx 20rpx;
  font-size: 24rpx;
  border-radius: 40rpx;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}

.swipeItem {
  height: 100vw;
  width: 100%;
}

.itemImg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-color: #f2f2f2;
}

.product .middle {
  padding: 16rpx 12rpx 24rpx;
  background: #f7f7f7;
}

.product .middle .price {
  background: #fff1f1;
  border-radius: 20rpx;
  padding: 16rpx 0 0;
}

.product .middle .info {
  padding: 28rpx 20rpx 32rpx 20rpx;
  border-radius: 20rpx;
  background: #fff;
}

.middle .price .price-div {
  margin-bottom: 12rpx;
  margin-left: 20rpx;
  color: #ef3822;
  font-size: 28rpx;
  position: relative;
}

.middle .price .price-div .area {
  font-size: 26rpx;
  color: #808080;
  display: inline-block;
  position: absolute;
  right: 20rpx;
  top:50%;
  transform:translate(0,-50%);
  line-height: 80rpx;
}

.middle .price .price-div .item1 {
  color: #ef3822;
  font-size: 44rpx;
  font-weight: 600;
}

.middle .price .price-div .item2 {
  color: #ef3822;
  font-size: 24rpx;
}

.middle .price .price-div .item3 {
  text-decoration: line-through;
  margin-left: 20rpx;
  color: #9a9a9a;
  font-size: 24rpx;
}

/* 生成海報(bào) */
.shareImg{
  width: 100rpx;
  height: 100rpx;
  position: fixed;
  right: 14rpx;
  top: 80%;
  z-index: 99;
}
.popup-box {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform:translate(-50%,-50%);
  width: 62vw;
  background:#fff;
  border-radius: 16rpx;
  opacity: 1;
  margin: auto;
  text-align: center;
  padding: 34rpx 32rpx 36rpx;
}
.telephone{
  margin-bottom: 20rpx;
}
.canvasMain{
  position: fixed;
  top: 8vh;
  width: 100vw;
  z-index: 999999 !important;
}
.firstCanvas{
  margin: 5vh auto 0;
  z-index: 9999 !important;
}
.ncontent{
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
}

.van-share-sheet__cancel {
  font-size: 32rpx !important;
}

.van-share-sheet__name{
  font-size: 26rpx !important;
  color: #333333 !important;
}
.van-share-sheet__header, .van-share-sheet__options{
  background: #F5F5F5;
}
.van-share-sheet__icon {
  width: 128rpx !important;
  height: 128rpx !important;
}
.van-share-sheet__cancel:before{
  background-color: #F5F5F5 !important;
}

到了這里，關(guān)于微信小程序canvas type=2d生成海報(bào)保存到相冊、文字換行溢出顯示...、文字刪除線、分享面板的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！