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

相关推荐
长空任鸟飞_阿康3 分钟前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
JNU freshman1 小时前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼1 小时前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
墨鸦_Cormorant3 小时前
Vue 概述以及基本使用
前端·javascript·vue.js
韩立学长3 小时前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
鹏多多3 小时前
使用imaskjs实现js表单输入卡号/日期/货币等掩码的教程
前端·javascript·vue.js
2501_915918413 小时前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview
正在学习前端的---小方同学6 小时前
vue-easy-tree树状结构
前端·javascript·vue.js