关于uniapp分享功能实现

创建一个混入

javascript 复制代码
export default {
	data() {
		return {
			//设置默认的分享参数
			//如果页面不设置share,就触发这个默认的分享
			share: {
				title: '商会宝',//自定义标题
				path: `/pages/home/home?appId=${uni.getStorageSync("appid")}`,  //默认跳转首页
				imageUrl: '',  //可设置默认分享图,不设置默认截取头部5:4
			}
		}
	},
    onShareAppMessage(res) { //发送给朋友
		// let that = this;
		console.log(this.share)
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log('success(res)==', res);
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				console.log('fail(res)==', res);
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
	onShareTimeline(res) { //分享到朋友圈
		//下面的代码是获取页面栈,自动分享,如果有自定义分享的话,可以单个页面设置
		// let that = this
		// 动态获取当前页面栈
		// let pages = getCurrentPages(); //获取所有页面栈实例列表
		// let nowPage = pages[pages.length - 1]; //当前页页面实例
		// // let prevPage = pages[pages.length - 2]; //上一页页面实例
		// that.share.path = `/${nowPage.route}`
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log('success(res)==', res);
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				console.log('fail(res)==', res);
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
}

在main.js文件里面进入引入挂载

javascript 复制代码
// 全局分享
// 小程序分享的封装
import share from "./utils/share.js"
Vue.mixin(share)

然后在每个页面使用this.share就可以获取混入的data,进行修改即可

相关推荐
小宋的踩坑日记31 分钟前
全网最全!Tailwind/Unocss 类名速查表,前端开发必备神器!
css·小程序·前端框架
卜凡.35 分钟前
Vue是对HTML、CSS、JS的标准化、组件化和响应式的上层抽象与增强
javascript·vue.js·html
Ww.xh2 小时前
鸿蒙系统中HTML与Vue集成方案
vue.js·html·harmonyos
低代码布道师3 小时前
健身房私教课小程序需求规格说明书
小程序·规格说明书
萧曵 丶4 小时前
Vue3组件通信全方案
前端·javascript·vue.js·typescript·vue3
前端那点事4 小时前
双Token无感刷新:Vue3 + Axios 企业级完整实现
前端·vue.js
前端那点事4 小时前
Vue Token鉴权避坑指南|5步完整实现(从生成到失效全解析)
前端·vue.js
前端那点事4 小时前
企业级Vue前端鉴权方案全解析|从Token到OAuth2.0,覆盖多端适配+权限管控
前端·vue.js
亲亲小宝宝鸭4 小时前
从Vben-Admin里面学习hooks
前端·vue.js
天蓝色的鱼鱼5 小时前
当AI开始替我写代码,我还要纠结选Vue还是React吗?
vue.js·react.js·ai编程