uniapp小程序实现全局分享
一般情况下,我们希望每个页面都可以分享,那就需要每个页面都写一遍 onShareAppMessage 生命周期,很繁琐。
这里通过mixin的形式,给每一个页面注入了 onShareAppMessage 生命周期,让每一个页面都有分享功能。
首先创建一个 share.js 文件。
module.exports = {
onLoad() {
// 设置默认的转发参数
this.share = {
title: '', // 默认为小程序名称
path: '', // 默认为当前页面路径
imageUrl: '' // 默认为当前页面的截图
}
},
onShareAppMessage() {
return this.share
},
// #ifdef MP-WEIXIN
onShareTimeline() {
return this.share
}
// #endif
}
然后在 main.js 文件中引入 share.js 文件即可。
// 其他内容
// 引入小程序分享的mixin封装
let mpShare = require('utils/share.js');
Vue.mixin(mpShare)
// 其他内容
这时,所有页面已经有了分享。如果某一个页面您需要自定义分享信息时,可以通过"this.share"对进行修改,在页面的onLoad生命周期修改即可。
export default {
onLoad() {
this.share.title = 'Echo博客';
}
}
如果某个页面,需要更改自定义的实现逻辑,可以在页面中重写 onShareAppMessage 生命周期即可覆盖通过mixin监听的 onShareAppMessage 生命周期。
export default {
onShareAppMessage(res) {
if (res.from === 'button') {// 来自页面内分享按钮
console.log(res.target)
}
return {
title: '自定义分享标题',
path: '/pages/goods/item?id=123'
}
}
}
1
博主你好,我用了你的主题,结果后台设置修改显示修改成功,却没有