uniapp微信小程序全局分享和自定义页面分享-Toy模板网

这篇具有很好参考价值的文章主要介绍了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数据即可覆盖全局分享文章来源地址https://www.toymoban.com/news/detail-534892.html

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

到了这里，关于uniapp微信小程序全局分享和自定义页面分享的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！