uniapp后端合成分享海报

选择海报组件 share.vue

<template> <view class=''> <u-popup class="popup flex flex-column" height="790" v-model="isshow" mode="bottom" @close="close"> <!-- 分享按钮 --> <view class="bg-white fixed-bottom"> <view class="center bb" style="height: 88rpx;">选择海报</view> <swiper class="swiper u-p-t-20 u-p-l-50 u-p-r-50" :indicator-dots="false" :display-multiple-items="2"> <!-- :style="{backgroundImage:'url('+item.img+')'}" --> <swiper-item class="item text-center relative" v-for="(item,i) in list" :key="i" @click="getPoster(i)"> <image :src="item.img" mode=""></image> <image class="absolute radio" v-if="i==current" src="../static/share-active.png" mode=""></image> <image class="absolute radio" v-else src="../static/share-no-active.png" mode=""></image> </swiper-item> </swiper> <view class="flex1 u-p-30 bt u-m-t-20"> <view class="u-flex-1 text-center" @click="toWx(1)"> <image class="icon-img" src="../static/vx-icon.png" mode=""></image> <view class="gray-1 u-font-24">微信好友</view> </view> <view class="u-flex-1 text-center" @click="toWx(2)"> <image class="icon-img" src="../static/moments-icon.png" mode=""></image> <view class="gray-1 u-font-24">微信朋友圈</view> </view> <view class="u-flex-1 text-center" @click="toSave()"> <image class="icon-img" src="../static/share-save.png" mode=""></image> <view class="gray-1 u-font-24">保存图片</view> </view> <view class="u-flex-1 text-center" @click="toCopy()"> <image class="icon-img" src="../static/link-icon.png" mode=""></image> <view class="gray-1 u-font-24">复制链接</view> </view> </view> <view class="center bt blue" style="height: 88rpx;" @click="close">取消</view> </view> </u-popup> </view> </template> <script> export default { props: { isshow: { type: Boolean, value: false }, code: { type: String, value: '' } }, data() { return { current: 0, list: [{ img: '../../static/share-1-zh.png' }, { img: '../../static/share-2-zh.png' }, { img: '../../static/share-3-zh.png' } ], img: '', //合成的海报 } }, mounted() { }, onUnload() { uni.hideLoading() }, onShow() { if(this.$i18n.locale == "zh"){ this.list[0].img = '../../static/share-1-zh.png' this.list[1].img = '../../static/share-2-zh.png' this.list[2].img = '../../static/share-3-zh.png' }else if(this.$i18n.locale == "hk"){ this.list[0].img = '../../static/share-1-hk.png' this.list[1].img = '../../static/share-2-hk.png' this.list[2].img = '../../static/share-3-hk.png' }else{ this.list[0].img = '../../static/share-1-en.png' this.list[1].img = '../../static/share-2-en.png' this.list[2].img = '../../static/share-3-en.png' } }, methods: { getPoster(i) { this.current = i }, close() { this.$emit('close') }, toWx(type) { uni.showLoading({ title: this.$t('share.toast3') }) this.$http('/api/share_url', { type: this.current + 1 }).then(data => { console.log(data) this.img = data uni.share({ provider: "weixin", scene: type == 1 ? "WXSceneSession" : "WXSenceTimeline", type: 2, imageUrl: this.img, success: function(res) { uni.hideLoading() console.log("success:" + JSON.stringify(res)); }, fail: function(err) { uni.hideLoading() console.log("fail111:" + JSON.stringify(err)); } }); }) }, toSave() { //type: this.current + 1 let _this = this this.$http('/api/share_url').then(data => { this.img = data uni.downloadFile({ url: _this.img, //仅为示例，并非真实的资源 success: (res) => { if (res.statusCode === 200) { _this.save(res.tempFilePath) } } }); }) }, save(file) { uni.saveImageToPhotosAlbum({ filePath: file, success: () => { uni.showToast({ title: this.$t('share.toast1') }) }, fail: () => { uni.showToast({ title: this.$t('share.toast2') }) }, }); }, toCopy() { uni.setClipboardData({ data: "http://teex.xjdm88.com/webTeex/?invite=" + this.code, success: function() { uni.getClipboardData({ success: function(res) { } }); } }); } }, } </script> <style scoped lang='scss'> .popup { background-color: rgba(0, 0, 0, .1); } /* /deep/ .u-drawer-bottom { background-color: transparent !important; } */ uni-swiper { height: 400rpx; image { height: 100%; width: 250rpx; border-radius: 10rpx; } } .item { background-repeat: no-repeat; background-position: center; background-size: contain; position: relative; .radio { width: 40rpx; height: 40rpx; bottom: 10rpx; right: 50rpx; } } .code-con { position: absolute; left: 50%; top: 64%; transform: translate(-50%, -50%); width: 400rpx; height: 380rpx; padding: 20rpx; border-radius: 10rpx; margin: 500rpx auto 0; text-align: center; padding: 50rpx; } .icon-img { width: 70rpx; height: 70rpx; } </style>

页面中应用

// 全局注册 import share from "./components/share.vue"; Vue.component('share', share) <!-- 分享 --> <share :isshow="showShare" :code="userInfo.invite_code" @close="closeShare"></share>