uni-app 微信小程序设置全局的分享onShareAppMessage
[
前景：使用uni-app开发微信小程序，实现分享转发的话，要每个页面都写一个onShareAppMessage，这样代码太臃肿，因此使用vue的mixins 设置一个全局的分享。
vue的mixin的使用
创建一个 mixins ，我的文件路径为 ： common/share.js
export default {
onShareAppMessage(res) {
//发送给朋友
return {
}
},
onShareTimeline(res) {
//分享到朋友圈
return {
}
},
}
或
export default {
created() {
//#ifdef MP-WEIXIN
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
});
//#endif
},
}
两种写法效果是一样的
image.png
全局使用，在 main.js 里面 添加全局的 mixin
import share from './common/share.js'
Vue.mixin(share)
这样设置后，每个页面都会有分享按钮了。
自定义分享内容
export default {
data() {
return {
share:{
title: '自定义分享标题',
imageUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
}
}
},
onShareAppMessage(res) {
//发送给朋友
return {
title: this.share.title,
imageUrl: this.share.imageUrl,
}
},
onShareTimeline(res) {
//分享到朋友圈
return {
title: this.share.title,
imageUrl: this.share.imageUrl,
}
},
}
在页面的 data 里面设置和 mixin 一样的参数就可以修改分享的参数了
export default {
data() {
return {
share:{
title: '首页',
imageUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10002.jpg',
}
}
},
}
l:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10002.jpg',
}
}
},
}