uniapp微信小程序全局分享和自定义页面分享

uniapp 实现微信小程序的全局 转发给好友/分享到朋友圈 的功能。主要使用 Vue.js 的 全局混入 概念。

1.在项目根目录创建mixins文件夹，然后创建全局分享的 js 文件。mixins/share.js 

export default {
	data() {
		return {
			share: {
				title: '页面分享的标题',
				path: '/pages/index/index',
				imageUrl: '/static/imgs/share_img.png' // 全局分享的图片(可本地可网络)
			}
		}
	},
	onLoad() {

	},
	onShareAppMessage(res) { //发送给朋友
		return this.share
	},
	onShareTimeline(res) { //分享到朋友圈
		return this.share
	}

}

2.在项目的 main.js 文件中引入该 share.js 文件并使用 Vue.mixin() 方法将之全局混入：

// 导入并挂载全局的分享方法
import share from '@/mixins/share.js'
Vue.mixin(share)

3.自定义页面分享，

（1）方法一：使用onShareAppMessage() 和 onShareTimeline() 方法自定义分享的内容，全局的分享会被页面定义的分享内容覆盖。适用于绑定到分享按钮上。

export default {
    onLoad() {

	},

    onShow() {

	},
 
    // 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
	onShareAppMessage(res) {
	    return {
	      title: '页面分享的标题',
	      path: '/pages/home/home',
		  imageUrl: '/static/imgs/share.png'
	    }
	},


	// 自定义页面的分享到朋友圈
	onShareTimeline(res) {
		return {
			title: '页面分享的标题',
			path: '/pages/home/home',
			imageUrl: '/static/imgs/share.png'
		}
	}
}

（2）方法二：直接修改页面data的share数据即可覆盖全局分享

export default {
    data() {
		return {
            share: {
				title: '自定义分享标题',
				path: '/activity/index/index',
				imageUrl: '/static/imgs/share_img.png'
			},
         }
    
    }    
}