【uniapp】uniapp+vue2微信小程序实现分享功能

TTong___2024-08-12 16:21

uniapp+vue2做的微信小程序实现分享功能

问题描述

uniapp+vue2做的微信小程序，发布以后点击右上角三个点，分享小程序的时候，转发和分享按钮都是灰色

解决方案

转发、分享、复制链接这几个功能需要自己来手动写方法，考虑到每个页面都需要能够实现分享功能，以下我会使用 Vue.js 的全局混入【mixin】的方法来实现

onShareAppMessage() 发送给朋友

onShareTimeline() 分享到朋友圈

api参数配置可以参考：uniapp-onShareAppMessage(OBJECT)

【复制链接】功能不需要单独写方法，【发送给朋友】功能实现了，复制功能自然也能使用

1. 创建一个全局分享的js文件【minix】

文件中定义全局转发、分享的内容

结构

代码

javascript 复制代码

let mixin = {
	data() {
    return {
      title: '分享Title',
			imgUrl: 'https://xxxx.com/a8962f26b07e7605c6.png'
    }
  },
  created() {
    //#ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		//#endif
  },
	onShareAppMessage(res) {
		return {
			title: this.title,
			imageUrl: this.imgUrl
		}
	},
	onShareTimeline(res) {
		return {
			title: this.title,
			imageUrl: this.imgUrl
		}
	},
  methods: {
  }
}

export default mixin;

2. 在main.js中全局引入，并使用mixin()方法全局混入

javascript 复制代码

import App from './App'
import myMixin from 'pages/minix/index.js';

Vue.mixin(myMixin)

实现效果

完成以上两步操作再点击右上方三个点，会看到转发和分享功能均可以使用

如果不想全局调用，单个页面也可以实现，利用单个页面单独使用方法，或者单个页面单独使用mixin()混入方法均可

vue3的全局使用方法可以参考以下文章（主要main.js中全局引入和挂载不同）：
【uniapp】uniapp+vue3微信小程序实现分享功能