uni开发微信小程序解决全局分享分销问题

uni开发微信小程序解决全局分享分销问题

1. 需求

1.小程序内每个页面都要打开胶囊分享按钮并实现分销
2.分享功能应该是在用户登录之后才予以打开
3.不想做在每个页面都写分享钩子的傻逼操作

2.实现

1.技术点：
vueX 、 Vue.mixin 、 路由监听（uni.onAppRoute）、 async await
2.实现思路：
用户登录后立即获取分销 parentId 置入state 或者挂载原型备用 == >> ; 使用mixin混入打开分享按钮
、监听路由并重写分享钩子
3.代码

//此处是在登陆完成后的操作 ； 分享信息中使用了 async await 保证正确加载信息  
//登录成功的话就请求分享信息全局使用  &&  表示可以打开全局分享了 !!!
								FUN.shareUP({ //调起分享方法 == >> 配置分享信息置入state 的 share中
									commit,
									rootState
								});
								Vue.mixin({ // 打开分享按钮
								 //同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。  //两次调用 ; 不大行
									onLoad() {
										// console.log('注入!=======-=-=-=-=-=-=-')
										uni.showShareMenu({})
									},
								});
								uni.onAppRoute(function(res) { //在此监听路由
									//获取加载的页面
									let pages = getCurrentPages(),
										//获取当前页面的对象
										view = pages[pages.length - 1],
										data;
									if (view) {
										console.log('监听路由')
										// console.log(view)
										data = view.data;
										// console.log(data)
										console.log('是否重写分享方法', data.isOverShare ? '是!' : '否!'); //这里  首次渲染的时候没有打开 ; 首次切换路由的时候也没打开 !! 03 14 // 监听路由?
										if (!data.isOverShare) {
											data.isOverShare = true;
											// console.log(data)
											view.onShareAppMessage = function() {
												console.log(_this.share)
												//分享配置
												return {
													..._this.share
												};
											};
											console.log(view)
										}
									}
								});
//整理分享信息 at vuex中
	//分享
	async shareUP({
		commit,
		rootState
	}) {
		//请求文案
		let imageUrl;
		await FUN.GetShareImg().then((val) => {
			imageUrl = val; //这里实际上是写上了 ; 不用管了 ;
		});
		console.log(imageUrl)
		$http.get('yourUrl', {
				params: {
					
				}
			})
			.then(res => {
				// console.log(res.data.data.shareId) // || shareName
				//分享的父级ID
				let shareId = res.data.data.shareId;
				//分享的父级名称
				let shareName = res.data.data.shareName;
				let share = {
					title: '来自' + shareName + '的分享',
					desc: '标题',
					//封面ID?
					imageUrl: imageUrl,
					//分享的路径接收一个传入字符串
					path: `pages/index/index?parentId=${shareId}`,
				}
				//派发
				commit(SHARE, share);
				//分享信息也写入原型一份 ; 方便调用
				_this.share = share;
				// console.log(_this);
				if (res.data.resultSign == 0) {
					// console.log('确实获得了分享信息;')
				}
			})
			.catch(err => {
				console.log(err)
			});
	},
//获取到分享文案  at vuex
async GetShareImg() {
		let pageImg
		await $http.get('yourUrl', {
				params: {}
			})
			.then(res => {
				pageImg = _this.URL + res.data.data.pageImg;
			})
		return pageImg
	},

3.注意事项

单个商品的分享分销功能要单独处理
因为混入的原因 、  初始化函数会执行两次 但是网路请求只发送了一次 ；性能应该不会损耗
//同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。 == 官网
关键页不允许打开分享怎么办？
监听路由的方法是借鉴的