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 ,下载套餐有优惠哦。

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?