uniapp 电商app从0到1实战（三）——微信分享给好友与朋友圈

我不是女神ヾ 2021-09-02 07:51 442阅读 0赞

## 微信分享给好友与朋友圈 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]

分享：一般都是分享到微信好友/朋友圈/QQ/微博之类的，虽然现在只有2项内容，为了兼容其他的分享途径，代码如下：

js代码部分：

import mosoweCanvasImage from "@/components/mosowe-canvas-image/mosowe-canvas-image"
    import { mapState,mapMutations,mapActions} from 'vuex';
    export default { 
    	data() { 
    		return { 
    			imgData: "",
    			distSourceStorage: "",
    			transform: 'translateY(50vh)',
    			timer: 0,
    			backgroundColor: 'rgba(0,0,0,0)',
    			show: false,
    			config: { },
    			isShowPhoto: true,
    			canvasUrl: '',
    			lists: [],
    			ifShow: true,
    			val: 'http://mallconsole.zjddwl.com/', // 要生成的二维码值
    			size: 420, // 二维码大小
    			unit: 'upx', // 单位
    			background: '#fff', // 背景色
    			foreground: '#000', // 前景色
    			pdground: '#000', // 角标色
    			icon: '', // 二维码图标
    			iconsize: 40, // 二维码图标大小
    			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
    			onval: false, // val值变化时自动重新生成二维码
    			loadMake: true, // 组件加载完成后自动生成二维码
    			src: '', // 二维码生成后的图片地址或base64
    			detail: { },
    			showRe: false
    		};
    	},
    	components: { 
    		mosoweCanvasImage,tkiQrcode
    	},
    	computed: { 
    		...mapState(['distSource','pk','pt'])
    	},
    	props:{ 
    		item:{ 
    			type:Object
    		},
    		url:{ 
    			type:String
    		},
    		contentHeight:{ 
    			type: Number,
    			default: 0
    		},
    		//是否是tabbar页面
    		hasTabbar:{ 
    			type: Boolean,
    			default: false
    		},
    		shareList:{ 
    			type: Array,
    			default: function(){ 
    				return [
    					{ 
    						type: 1,
    						text: "微信好友",
    						icon: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/%E5%BE%AE%E4%BF%A1%E5%A5%BD%E5%8F%8B%402x_1599632137000.png"
    					},
    					{ 
    						type: 2,
    						text: "朋友圈",
    						icon: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/%E5%BE%AE%E4%BF%A1%E6%9C%8B%E5%8F%8B%E5%9C%88%20(1)%402x_1599186963000.png",
    						// https://58d.oss-cn-hangzhou.aliyuncs.com/category/2020-09-02/1599032792951.png
    					}
    				];
    			}
    		}
    	},
    	created() { 
    		const height = uni.upx2px(this.contentHeight) + 'px';
    		this.config = { 
    			height: height,
    			transform: `translateY(${ height})`,
    			backgroundColor: 'rgba(0,0,0,.4)',
    		}
    		this.transform = this.config.transform;
    	},
    	methods:{ 
    		...mapActions([
    			  "distSourceAction"
    		    ]),
    		getDistSource(){ 
    			let _this = this;
    			_this.distSourceAction({ }).then((res) => { 
    				if(res.code === 200){ 
    					_this.distSourceStorage = res.result;
    				}else{ 
    					uni.showToast({ 
    						title: res.msg,
    						icon: 'none',
    						duration: 4000
    					});
    				}
    			});
    		},
    		getEr(){ 
    			let _this = this;
    			let scene = "d="+_this.distSourceStorage+ "&i=" + this.detail.id;
    			let token = uni.getStorageSync('token')|| '';
    			let openId = uni.getStorageSync('openId');
    			let val = { 
    					"page": "pages/product/product",
    					"scene": scene
    				};
    				_this.$store.commit("showLoading", true);
    			uni.request({ 
    			    url: _this.$store.state.path+"/gate/wechat/appcode/unlimit/create",
    			    data: JSON.stringify(Object.assign(val)),
    			    header: { 
    			      'ak': token,
    					'dk': openId,
    					'pk': _this.pk,
    					'pt': _this.pt,
    					'Accept': 'application/json',
    					'Content-Type': 'application/json',
    			    },
    			    method: "post",
    			    success: (data) => { 
    					console.log(data)
    					_this.imgData = 'data:image/png;base64,'+data.data.result;
    					// uni.hideLoading();
    					_this.$store.commit("showLoading", false);
    					},
    					fail(err) { 
    						reject("网络链接错误")
    					},
    					complete: () => { }
    			});
    		},
    		_canvasImage(e) { 
    			this.canvasUrl = e;
    				uni.share({ 
    					provider: "weixin",
    					scene: "WXSenceTimeline",
    					type: 2,
    					href: "http://58d.zjddwl.com",
    					title: "58°C商城",
    					summary: "58°C商城",
    					imageUrl: e,
    					success: function (res) { 
    						console.log("success:" + JSON.stringify(res));
    					},
    					fail: function (err) { 
    						console.log("fail:" + JSON.stringify(err));
    					}
    				});
    		},
    		toggleMask(detail){ 
    			if(detail){ 
    				this.detail = detail;
    			}else{ 
    				this.detail = item;
    			}
    			if(this.timer == 1){ 
    				return;
    			}
    			this.timer = 1;
    			setTimeout(()=>{ 
    				this.timer = 0;
    			}, 500)
    			this.lists = [];
    			if(this.show){ 
    				this.transform = this.config.transform;
    				this.backgroundColor = 'rgba(0,0,0,0)';
    				setTimeout(()=>{ 
    					this.show = false;
    					// this.hasTabbar && uni.showTabBar();
    				}, 200)
    				return;
    			}
    			this.show = true;
    			this.distSourceStorage = uni.getStorageSync('distSource');
    			if(this.distSourceStorage){ 
    				console.log("有源")
    			}else{ 
    				console.log("无源")
    				this.getDistSource();
    			}
    			this.getEr();
    			//等待mask重绘完成执行
    			if(this.hasTabbar){ 
    				uni.hideTabBar({ 
    					success: () => { 
    						setTimeout(()=>{ 
    							this.backgroundColor = this.config.backgroundColor;
    							this.transform = 'translateY(0px)';
    						}, 10)
    					}
    				});
    			}else{ 
    				setTimeout(()=>{ 
    					this.backgroundColor = this.config.backgroundColor;
    					this.transform = 'translateY(0px)';
    				}, 10)
    			}
    		},
    		//防止冒泡和滚动穿透
    		stopPrevent(){ },
    		//分享操作
    		shareToFriend(shareItem){ 
    			let value = uni.getStorageSync('userToken');
    			if(!value){ 
    				uni.showModal({ 
    				    title: '提示',
    				    content: '当前账户已失效，请重新登录',
    					confirmText	:'重新登录',
    				    success:(res)=> { 
    				        if (res.confirm) { 
    				            uni.reLaunch({ 
    				            	url:"/pages/public/loginIn"
    				            })
    				        }
    						uni.removeStorageSync('userToken');
    				    }
    				});
    				return;
    			}
    			if(shareItem.type === 1){ 
    				let item = this.item;
    				if(!item.itemImage){ 
    					item.medias.forEach(goods => { 
    						if(goods.mediaIndex === 1){ 
    							item.itemImage = goods.mediaUrl;
    						}
    					})
    				}
    				if(!item.itemImage){ 
    					item.itemImage = "https://58d.oss-cn-hangzhou.aliyuncs.com/category/2020-09-02/1599009402796.jpg";
    				}
    				// #ifdef APP-PLUS
    				// if(this.userInfo && this.userInfo.inviteCode){ 
    					uni.share({ 
    						provider: 'weixin',
    						scene: "WXSceneSession",
    						type: 5,
    						imageUrl: item.itemImage,
    						title: '58°C商城',
    						miniProgram: { 
    							id: 'gh_15a170a7ea63',
    							path: 'pages/product/product?d='+this.distSourceStorage + "&id=" + item.id,
    							type: 2,
    							webUrl: 'https://uniapp.dcloud.io'
    						},
    						success: ret => { 
    							console.log(JSON.stringify(ret));
    						},
    						fail: function (err) { 
    							console.log("fail:" + JSON.stringify(err));
    						}
    					});
    				// #endif
    			}else if(shareItem.type === 2) { 
    				if(!this.imgData){ 
    					return;
    				}
    				console.log(this.detail)
    				if(!this.detail.itemImage){ 
    					this.detail.medias.forEach(goods => { 
    						if(goods.mediaIndex === 1){ 
    							this.detail.itemImage = goods.mediaUrl;
    						}
    					})
    				}
    				this.lists.push(
    					{ 
    						type: 'image',
    						content: this.detail.itemImage,
    						width: 375,
    						height: 375,
    						x: 0,
    						y: 0,
    					},
    					{ 
    						type: 'base',
    						content: this.imgData,
    						width: 102,
    						height: 102,
    						x: 255,
    						y: 400,
    					}
    				);
    				let text = this.detail.itemName;
    				let l = parseInt(text.length/12);
    				for(let i=0; i< l; i++){ 
    					if(i<3){ 
    						this.lists.push(
    							{ 
    								type: 'text',
    								content: text.substring(i*12,(i+1)*12),
    								width: 200,
    								x: 25,
    								y: 440+(i*20),
    								color: '#333333',
    								size: 16
    							}
    						)
    					}
    				}
    				this.$refs.mosoweCanvasComponents.createCanvas();
    			}
    		},
    	}
    }

此处的分享给好友的是商品，是一个小程序的链接，把商品的参数也通过"miniProgram"传递过去。

分享给朋友圈的是一个商品图+商品名称+商品对应的小程序二维码。

在真机运行时，商品分享给好友时会出现调用分享失败的情况，此时分享失败的原因就是图片太大。

参考大神博客：  
[微信分享失败的原因之分享图片太大 https://blog.csdn.net/dl10210950/article/details/53125589?utm\_medium=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add\_param\_isCf&depth\_1-utm\_source=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add\_param\_isCf][https_blog.csdn.net_dl10210950_article_details_53125589_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/4be18416dfb24af389c629a8e4284f60.png
[https_blog.csdn.net_dl10210950_article_details_53125589_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf]: https://blog.csdn.net/dl10210950/article/details/53125589?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf