uniapp-vue3语法实现小程序全局分享（setup，mixin）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp-vue3语法实现小程序全局分享（setup，mixin）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp-vue3语法实现小程序全局分享（setup，mixin）

随着vue3的普及uniapp官方也支持了vue3语法的编写

相信大家在开发过程中肯定碰到过小程序所有页面都要开启分享功能的需求；指定的页面(如：文章详情页)有单独的配置，而非单独配置的页面(如：付费的订单详情页)都是统一跳转到首页

我的做法如下：

1. 创建share.js

// utils/share.js
export default {
	onLoad(){ // 创建时设置统一页面的默认值
		uni.$mpShare = {
			title: 'xxxx',
			desc: 'yyyy',
			path: '/pages/tabList/index',
			imageUrl: 'https://zzzzzzz.com/images/fx.jpg'
		}
	},
	onShareAppMessage() { //发送给朋友
		console.log(uni.$mpShare);
		return uni.$mpShare
	},
	onShareTimeline() { //分享到朋友圈
		return uni.$mpShare
	},
    onUnload(){ // 关闭页面时重置
		uni.$mpShare = {
			title: 'xxxx',
			desc: 'yyyy',
			path: '/pages/tabList/index',
			imageUrl: 'https://zzzzzzz.com/images/fx.jpg'
		}
	}
};

2. main.js引入share.js文件

// main.js
import App from './App'
import {
	createSSRApp
} from 'vue'

import share from '/utils/share' // 引入share.js

export function createApp() {
	const app = createSSRApp(App)
	app.mixin(Share) // 使用mixin全局混入
	uni.$u.config.unit = 'rpx'
	return {
		app
	}
}

此时小程序所有页的分享功能都打开并且都统一跳转到首页分享的图片也是统一的

3. 修改需要单独配置分享的页面

// pages/news/news.vue

<script setup>
import { computed, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { Get_newsDetails } from '../../config/api'; // 文章详情接口

const detail= reactive({}); // 文章详情


const shareData = computed(()=>{ // 分享的数据
	return {
		title: data.detail.title,
		desc: data.detail.title,
		path: '/pages/news/detail?id=' + data.detail.id,
		imageUrl: data.detail.cover
	}
})

async function getDetail() { // 获取新闻详情
	const res = await Get_newsDetails({
		id: data.id
	});
	
	detail.value = res.data
}

onLoad(async (options) => {
	data.id = options.id;
	await getDetail();
    uni.$mpShare = shareData.value // 修改uni.$mpShare的值
});

onShow(()=>{
    uni.$mpShare = shareData.value // 修改uni.$mpShare的值
})
</script>

在页面你想要修改的地方修改uni.$mpShare的值就可实现差异化, 上面代码在页面onLoad时会将其设置为初始的统一页面的值，并且在页面onUnload时也会被设置为初始的统一页面文章来源地址https://www.toymoban.com/news/detail-810662.html

到了这里，关于uniapp-vue3语法实现小程序全局分享（setup，mixin）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！