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

相关推荐
Gracemark6 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼7 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_8 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing9 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工11 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
Emma歌小白13 小时前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子14 小时前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
艾小码14 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
2501_9159184114 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
wusp199414 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏