uni-app分享至第三方平台组件(仅限APP)

川长思鸟来 2023-07-02 10:25 79阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70][]

<template>
    	<view>
    		
    		<template v-if="show">
    			<view class="more-share-model" @tap="toggle"></view>
    			<view class="more-share animated fadeInUp fast">
    				<view class="more-share-title u-f-ajc">分享到</view>
    				<scroll-view scroll-x class="more-share-body">
    					<block v-for="(val, index) in providerList" :key="index">
    						<view class="more-share-item" hover-class="more-share-hover" @tap="share(val)">
    							<view class="icon iconfont u-f-ajc" :class="['icon-' + val.zicon, 'more-share-' + val.zclass]"></view>
    							<view>{
       { val.name }}</view>
    						</view>
    					</block>
    					<view class="more-share-item" hover-class="more-share-hover" @tap="sharemore">
    						<view class="icon iconfont icon-ziyuan u-f-ajc more-share-more"></view>
    						<view>更多</view>
    					</view>
    				</scroll-view>
    				<view class="more-share-bottom u-f-ajc" hover-class="more-share-hover" @tap="toggle">取消</view>
    			</view>
    		</template>
    	</view>
    </template>
    
    <script>
    export default {
    	props: {
    		show: Boolean
    	},
    	data() {
    		return {
    			shareText: 'uni-app可以同时发布成原生App、小程序、H5，邀请你一起体验！',
    			href: 'https://uniapp.dcloud.io',
    			image: '',
    			shareType: 1,
    			providerList: []
    		};
    	},
    	mounted() {
    		uni.getProvider({
    			service: 'share',
    			success: e => {
    				// console.log('success', JSON.stringify(e));
    				let data = [];
    				for (let i = 0; i < e.provider.length; i++) {
    					switch (e.provider[i]) {
    						case 'weixin':
    							data.push({
    								name: '微信',
    								id: 'weixin',
    								sort: 0,
    								// 自定义变量存储图标类名与图标背景颜色类
    								zicon: 'weixin',
    								zclass: 'wx'
    							});
    							data.push({
    								name: '朋友圈',
    								id: 'weixin',
    								type: 'WXSenceTimeline',
    								sort: 1,
    								zicon: 'pengyouquan',
    								zclass: 'pyq'
    							});
    							break;
    						case 'sinaweibo':
    							data.push({
    								name: '新浪微博',
    								id: 'sinaweibo',
    								sort: 2,
    								zicon: 'weibo',
    								zclass: 'xlwb'
    							});
    							break;
    						case 'qq':
    							data.push({
    								name: 'QQ好友',
    								id: 'qq',
    								sort: 3,
    								zicon: 'qq',
    								zclass: 'qq'
    							});
    							break;
    						default:
    							break;
    					}
    				}
    				this.providerList = data.sort((x, y) => {
    					return x.sort - y.sort;
    				});
    			},
    			fail: e => {
    				console.log('获取分享通道失败', e);
    				uni.showModal({
    					content: '获取分享通道失败',
    					showCancel: false
    				});
    			}
    		});
    	},
    
    	methods: {
    		// 切换菜单显示
    		toggle() {
    			this.$emit('toggle');
    		},
    
    		// 更多分享
    		sharemore() {
    			plus.share.sendWithSystem(
    				{ content: '分享内容', href: 'http://www.dcloud.io/' },
    				function() {
    					console.log('分享成功');
    				},
    				function(e) {
    					console.log('分享失败：' + JSON.stringify(e));
    				}
    			);
    		},
    		// 分享
    		async share(e) {
    			console.log('分享通道:' + e.id + '； 分享类型:' + this.shareType);
    
    			if (!this.shareText && (this.shareType === 1 || this.shareType === 0)) {
    				uni.showModal({
    					content: '分享内容不能为空',
    					showCancel: false
    				});
    				return;
    			}
    
    			if (!this.image && (this.shareType === 2 || this.shareType === 0)) {
    				uni.showModal({
    					content: '分享图片不能为空',
    					showCancel: false
    				});
    				return;
    			}
    
    			let shareOPtions = {
    				provider: e.id,
    				scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : 'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏
    				type: this.shareType,
    				success: e => {
    					console.log('success', e);
    					// 分享完成之后,关闭分享菜单
    					this.toggle();
    					uni.showModal({
    						content: '已分享',
    						showCancel: false
    					});
    				},
    				fail: e => {
    					console.log('fail', e);
    					uni.showModal({
    						content: e.errMsg,
    						showCancel: false
    					});
    				},
    				complete: function() {
    					console.log('分享操作结束!');
    				}
    			};
    
    			switch (this.shareType) {
    				case 0:
    					shareOPtions.summary = this.shareText;
    					shareOPtions.imageUrl = this.image;
    					shareOPtions.title = '欢迎体验uniapp';
    					shareOPtions.href = 'https://uniapp.dcloud.io';
    					break;
    				case 1:
    					shareOPtions.summary = this.shareText;
    					break;
    				case 2:
    					shareOPtions.imageUrl = this.image;
    					break;
    				case 5:
    					shareOPtions.imageUrl = this.image ? this.image : 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png';
    					shareOPtions.title = '欢迎体验uniapp';
    					shareOPtions.miniProgram = {
    						id: 'gh_33446d7f7a26',
    						path: '/pages/tabBar/component/component',
    						webUrl: 'https://uniapp.dcloud.io',
    						type: 0
    					};
    					break;
    				default:
    					break;
    			}
    
    			if (shareOPtions.type === 0 && plus.os.name === 'iOS') {
    				//如果是图文分享，且是ios平台，则压缩图片
    				shareOPtions.imageUrl = await this.compress();
    			}
    			if (shareOPtions.type === 1 && shareOPtions.provider === 'qq') {
    				//如果是分享文字到qq，则必须加上href和title
    				shareOPtions.href = 'https://uniapp.dcloud.io';
    				shareOPtions.title = '欢迎体验uniapp';
    			}
    			uni.share(shareOPtions);
    		},
    		compress() {
    			//压缩图片 图文分享要求分享图片大小不能超过20Kb
    			console.log('开始压缩');
    			let img = this.image;
    			return new Promise(res => {
    				var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
    				console.log('after' + localPath);
    				// 压缩size
    				plus.io.resolveLocalFileSystemURL(
    					localPath,
    					entry => {
    						entry.file(file => {
    							// 可通过entry对象操作图片
    							console.log('getFile:' + JSON.stringify(file));
    							if (file.size > 20480) {
    								// 压缩后size 大于20Kb
    								plus.zip.compressImage(
    									{
    										src: img,
    										dst: img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG'),
    										width: '10%',
    										height: '10%',
    										quality: 1,
    										overwrite: true
    									},
    									event => {
    										console.log('success zip****' + event.size);
    										let newImg = img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG');
    										res(newImg);
    									},
    									function(error) {
    										uni.showModal({
    											content: '分享图片太大,需要请重新选择图片!',
    											showCancel: false
    										});
    									}
    								);
    							}
    						});
    					},
    					e => {
    						console.log('Resolve file URL failed: ' + e.message);
    						uni.showModal({
    							content: '分享图片太大,需要请重新选择图片!',
    							showCancel: false
    						});
    					}
    				);
    			});
    		}
    	}
    };
    </script>
    
    <style scoped>
    /* 分享 */
    .more-share-model {
    	position: fixed;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	z-index: 99;
    	background-color: rgba(51, 51, 51, 0.39);
    }
    .more-share-title,
    .more-share-bottom {
    	padding: 20rpx 0;
    }
    .more-share {
    	position: fixed;
    	bottom: 0;
    	right: 0;
    	left: 0;
    	border-radius: 25rpx 25rpx 0 0;
    	z-index: 100;
    	background-color: #fff;
    }
    .more-share-body {
    	display: flex;
    	white-space: nowrap;
    	width: 100%;
    	height: 100px;
    	border-bottom: 1px solid #eee;
    }
    
    .more-share-item {
    	width: 25%;
    	height: 100px;
    	display: inline-flex;
    	/* inline-flex：将对象作为内联块级弹性伸缩盒显示** */
    	justify-content: center;
    	align-items: center;
    	flex-direction: column;
    }
    .more-share-item > view:first-child {
    	width: 100rpx;
    	height: 100rpx;
    	font-size: 60rpx;
    	border-radius: 50%;
    	color: #fff;
    }
    .more-share-item > view:last-child {
    	color: #878787;
    }
    .more-share-hover {
    	background-color: #eee;
    }
    .more-share-wx {
    	background-color: #01c80d;
    }
    .more-share-pyq {
    	background-color: #45d501;
    }
    .more-share-xlwb {
    	background-color: #f76466;
    }
    .more-share-qq {
    	background-color: #19b9ef;
    }
    .more-share-more {
    	background-color: #17e667;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200129025432931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70