Bootstrap

uniapp微信小程序分享

uniapp微信公众号H5端分享:uniapp微信公众号h5端分享_停留的章小鱼的博客-CSDN博客

一、uniapp微信小程序分享(点击右上角胶囊 ··· 分享)

1、全局分享(每个页面胶囊都可以分享)

!!!在根目录下新建utils文件夹下新建share.js文件,复制下方代码:

export default {
	data() {
		return {
			// 默认的全局分享内容(待测试)
			share: {
				title: '分享标题',
				path: '/pages/index/index', // 全局分享的路径
				imageUrl: '', // 全局分享的图片(可本地可网络)
			}
		}
	},
	// 定义全局分享
	// 1.发送给朋友
	onShareAppMessage(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
		}
	},
	//2.分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
		}
	},
}

!!!在main.js文件导入并挂载:

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

2、单页面分享:(在onLoad同级挂载)

onShareAppMessage() { // 分享到微信好友
  // 更多参数配置,参考文档
  return {
    title: '分享标题',
    path: '/pages/index/index',
    imageUrl: '图片',
  }
},
onShareTimeline() { // 分享到朋友圈
  return {
    title: '分享标题',
    path: '/pages/index/index',
    imageUrl: '图片',
  }
}

;