uniapp开发微信小程序通过 mixin 统一设置页面的分享 onShareAppMessage

uniapp开发微信小程序通过 mixin 统一设置页面的分享 onShareAppMessage

这个文章本来是在之前做项目的时候收藏的， 但是当时比较忙，就搁置了， 最近在学习vue3的时候正好学到了mixin这个高级的功能， 正好拿出来分享一下哦。下面就介绍一下如何在uniapp开发微信小程序通过 mixin 统一设置页面的分享onShareAppMessage。

为什么要这么做呢？

实现分享转发的话，要每个页面都写一个 onShareAppMessage，这样代码太臃肿，因此想起使用vue的mixins 可以设置一个全局的分享。

如何实现？

1、创建一个 mixins ，我的文件路径为 ： static/js/mixins/share.js

export default{
	data(){
		return {
					   //设置默认的分享参数
			share:{
				title:'ALAPI',
				path:'/pages/index/index',
				imageUrl:'',
				desc:'',
				content:''
			}
		}
	},
	onShareAppMessage(res) {
		return {
			title:this.share.title,
			path:this.share.path,
			imageUrl:this.share.imageUrl,
			desc:this.share.desc,
			content:this.share.content,
			success(res){
				uni.showToast({
					title:'分享成功'
				})
			},
			fail(res){
				uni.showToast({
					title:'分享失败',
					icon:'none'
				})
			}
		}
	}
}

2、全局使用, 在 main.js 里面 添加全局的 mixin

import share from ‘@/static/js/mixins/share.js’

Vue.mixin(share)

3、这样设置后，每个页面都会有分享按钮了,在页面的 data 里面设置和 mixin 一样的参数就可以修改分享的参数了

export default {
	data(){
		return {
					   //设置默认的分享参数
			share:{
				title:'ALAPI',
				path:'/pages/index/index',
				imageUrl:'',
				desc:'',
				content:''
			}
		}
	},
}	

以上的代码就可以实现通过 mixin 统一设置页面的分享 onShareAppMessage，在做项目的时候很多时候都可以利用mixin来巧妙的解决一些重复的问题。

下面给大家分享一些微信小程序的学习教程吧

超火套餐推荐： 【 一套搞定小程序 】

1、《 uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码) 》百度云

2、《 微信小程序入门与实战（全新版）2020版》 百度网盘

3、《 掌握Taro多端框架 快速上手小程序/H5开发 》 百度云盘下载

4、《 纯正商业级应用-微信小程序开发实战 》-完整无秘

加客服微信： ITBOKE ，下载套餐有优惠哦。