# 生成海报方式一
封装成组件方便调用
{
"component": true,
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"van-icon": "@vant/weapp/icon/index"
}
}
@前端进阶之旅: 代码已经复制到剪贴板
<canvas canvas-id="poster-share" class="poster" />
<view bind:tap="handleShare">
<slot wx:if="{{useSlot}}" />
</view>
<van-popup custom-class="page-van-popup" show="{{ showShare }}" bind:close="shareClose">
<view class="df fxdc h100v w100v" wx:if="{{showShare}}">
<view class="df jcc aic fxa posr mt120" bind:tap="shareClose">
<image class="poster-image" src="{{ tempFilePath }}" mode="aspectFit" />
</view>
<view class="fxn h238 bgfff df aic jcc bdrs16t">
<view class="fxa w0 df aic jcc">
<view class="df fxdc posr">
<button class="posa t0 l0 w100p h100p op0" open-type="share" />
<image class="h108 w108" src="./assets/ic_fenxiang.svg" />
<text class="mt16 c333 fz28">分享好友</text>
</view>
</view>
<view class="fxa w0 df aic jcc">
<view class="df fxdc" bind:tap="savePicture">
<image class="h108 w108" src="./assets/ic_baocun.svg" />
<text class="mt16 c333 fz28">保存图片</text>
</view>
</view>
</view>
</view>
</van-popup>
@前端进阶之旅: 代码已经复制到剪贴板
@import "../../../../libs/wxss/index.wxss";
.container {
width: 100%;
}
.h377 {
height: 377rpx;
}
.h417 {
height: 417rpx;
}
.pb70 {
padding-bottom: 70rpx;
}
.bgview {
height: 651rpx;
opacity: .63;
}
.tip,
.share {
right: 0;
border-radius: 100rpx 0 0 100rpx;