vue+h5分享

需求

点击h5右上角进行，分享时 需要带上标题，描述，图片

实现

新增 shar.js文件

import axios from 'axios'
//调用接口获取后台返回的值
function getConfig() {
	return new Promise(async (reslove, reject) => {
		let _result = await axios.get('http://campaign-api/we_chat', {
      params: {
        url:location.href.split('#')[0]
      },
    })
		let { appId, timestamp, nonceStr, signature, jsApiList } = _result.data.config
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId, // 必填，公众号的唯一标识
			timestamp, // 必填，生成签名的时间戳
			nonceStr, // 必填，生成签名的随机串
			signature,// 必填，签名
			jsApiList // 必填，需要使用的JS接口列表
		})
		reslove()
	})
}

// 处理分享信息
export async function wxShare(if_share, data) {
	await getConfig()
	// 微信接口配置
	wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
		if (!if_share) {
			wx.hideMenuItems({
				menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:copyUrl'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
			})
			// wx.hideAllNonBaseMenuItem()
		} else {
			wx.showMenuItems({
				menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
			})
			wx.updateAppMessageShareData({
				title: data.title || '关将军微信营销数字化平台', // 分享标题
				desc: data.desc || '智能免开发微信h5和微信小程序***', // 分享描述
				link: data.link || '此处就是h5的连接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: data.imgUrl || '此处就是h5分享的图片连接', // 分享图标
			})
			wx.updateTimelineShareData({
				title: data.title || '关将军微信营销数字化平台', // 分享标题
				link: data.link || '智能免开发微信h5和微信小程序***', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: data.imgUrl || '此处就是h5分享的图片连接', // 分享图标
			})
		}
	});
}

在需要的vue页面引入

具体后台配置，公众号配置，戳这里~