uni-app WeChat アプレットのグローバル設定で友人、友人の輪を共有...

実際のプロジェクトで uni-app を使用して WeChat アプレットを開発すると、WeChat の友人と共有するためにプロジェクトに追加する機能、モーメントに遭遇することがよくあります... 一般的に、特定のページを共有したい場合は、それを次の場所に追加する必要があります。現在のページ:

<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>

 そして、onShareAppMessage() と onShareTimeline() はメソッドと同じレベルにあります。！！

公式ウェブサイト: uniapp.dcloud.io/api/plugins…

このようにして共有機能が実現されますが、各ページに上記のコードを追加する必要があり、コードが重複するだけでなく、非常に混乱しやすく、うっかりパラメータを見逃したり、変更を忘れたりすることがあります。

グローバル共有

コードの量と繰り返しを減らすために、グローバル共有コードを設定できます。

現在のプロジェクトの下に utils フォルダーを作成し、utils フォルダー内に新しい share.js ファイルを作成します。

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'
				})
			}
		}
	},
}

 次に、エントリファイルmain.jsに導入します

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

 そうすればうまくいきます！！！

Vue.mixin() の使用方法:ミックスイン — Vue.js