configuración global del subprograma WeChat de la aplicación compartida compartir amigos, círculo de amigos...

Al usar uni-app para desarrollar applets de WeChat en proyectos reales, a menudo encuentra la función de agregar al proyecto para compartir con amigos de WeChat, Momentos... En términos generales, si desea compartir una página determinada, debe agregarla a la página actual:

<template>
<view></view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		methods: {},
		// 分享给好友
		onShareAppMessage(res) {
			console.log(res);
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'title', //自定义分享标题
				path: 'path', // '/pages/...'分享页面路径（打开分享时进入页），以/开头
				imageUrl: '', //可设置默认分享图，不设置默认截取头部5:4
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			console.log(res);
			return {
				//同上
			}
		}
	}
</script>
<style></style>

 ¡Y onShareAppMessage() y onShareTimeline() están al mismo nivel que los métodos! ! !

Sitio web oficial: uniapp.dcloud.io/api/plugins…

Aunque la función de compartir se logra de esta manera, el código anterior debe agregarse a cada página. Sin mencionar el código repetido, es muy fácil confundirse y perder accidentalmente los parámetros y olvidar modificarlos.

intercambio mundial

Para reducir la cantidad de código y repetición, puede configurar el código compartido global:

Cree una carpeta utils en el proyecto actual y cree un nuevo archivo share.js en la carpeta utils:

código share.js:

export default {
	data() {
		return {
			//设置默认的分享参数
			//如果页面不设置share，就触发这个默认的分享
			share: {
				title: '',//自定义标题
				path: `/pages/index/index`,  //默认跳转首页
				imageUrl: '',  //可设置默认分享图，不设置默认截取头部5:4
			}
		}
	},
    onShareAppMessage(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'
				})
			}
		}
	},
	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'
				})
			}
		}
	},
}

 Luego introduce en el archivo de entrada main.js

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

 ¡Entonces funciona! ! !

Cómo usar Vue.mixin(): mezclar — Vue.js