关于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,进行修改即可

相关推荐
CSharp精选营1 小时前
记一次家庭物品管理的折腾:从“收纳”到“可检索”
微信小程序·aicoding·屋册有序·物品收纳管理·家庭收纳管理工具
软件技术NINI5 小时前
基于SpringBoot和Vue的新能源汽车销售推荐系统
java·vue.js·spring boot·后端·汽车·毕业设计·毕设
招风的黑耳7 小时前
SpringBoot+Vue+MySQL 民宿在线预定平台 完整可运行版(源码+文档)
vue.js·spring boot·mysql
dreams_dream20 小时前
微信小程序:页面事件-上拉触底
微信小程序·小程序
10share1 天前
基于大模型的 i18n 方案:把中文原文当 Key,轻松搞定多语言维护
前端·vue.js
鹏多多1 天前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程
啾咪orJIUMI1 天前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
FRing031 天前
vue2干货总结8(路由模块封装、router-link、声明式导航、路由重定向、编程式导航)
开发语言·前端·vue.js·vue2
无懈可击1 天前
Vue 可视化AI表单设计器 FcDesigner v3.6 版本发布,支持导出 SQL功能!
vue.js·开源·ai编程
徐小夕1 天前
JitArchives,一款基于JitWord协同AI文档打造的企业级电子档案系统
前端·vue.js·github