uniapp+vue2做的微信小程序实现分享功能
问题描述
uniapp+vue2做的微信小程序,发布以后点击右上角三个点,分享小程序的时候,转发和分享按钮都是灰色
解决方案
转发、分享、复制链接这几个功能需要自己来手动写方法,考虑到每个页面都需要能够实现分享功能,以下我会使用 Vue.js 的全局混入【mixin】的方法来实现
onShareAppMessage() 发送给朋友
onShareTimeline() 分享到朋友圈
api参数配置可以参考:uniapp-onShareAppMessage(OBJECT)
【复制链接】功能不需要单独写方法,【发送给朋友】功能实现了,复制功能自然也能使用
1. 创建一个全局分享的js文件【minix】
文件中定义全局转发、分享的内容
结构
在pages目录下创建一个minix目录
代码
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()方法全局混入
import App from './App'
import myMixin from 'pages/minix/index.js';
Vue.mixin(myMixin)
实现效果
完成以上两步操作再点击右上方三个点,会看到转发和分享功能均可以使用
如果不想全局调用,单个页面也可以实现,利用单个页面单独使用方法,或者单个页面单独使用mixin()混入方法均可
vue3的全局使用方法可以参考以下文章(主要main.js中全局引入和挂载不同):
【uniapp】uniapp+vue3微信小程序实现分享功能