微公号(微商城)-- 自定义分享(vue)

1、安装 weixin-js-sdk 包

npm install weixin-js-sdk --save

2、配置js接口安全域名

1、登录微公号后台
2、公众号设置-功能设置-js接口安全域名，添加要分享的域名
注意：添加域名，需要下载 域名验证文件 放到域名指定的web服务器

3、页面注入权限验证配置

1、页面引入 JS-SDK

import wx from 'weixin-js-sdk'

2、注入权限验证、设置分享

点击查看微信官方文档

请注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。

注意：权限验证信息调用后台获取，需要传一个当 页面url 的参数给后台，安卓与ios存在差异；
安卓：地址会根据路由实时改变，所以传入url为 window.location.href；
ios：地址不会根据路由而改变，所以传入url为 首次进入系统的url，首次进入就要存储url地址；
报错 invalid signature：很可能就是url的问题
路由为hash模式，需要去掉 url地址中的 #

wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'showMenuItems'] // 必填，需要使用的JS接口列表
});

//通过ready处理成功验证
wx.ready(res=>{
	//设置显示按钮
	wx.showMenuItems({
		menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:QZone']
	});
	//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
	wx.updateAppMessageShareData({ 
	    title: '', // 分享标题
	    desc: '', // 分享描述
	    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	    imgUrl: '', // 分享图标
	    success: function () {
	      // 设置成功
	    }
 	 })
 	 //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
 	 wx.updateTimelineShareData({ 
	    title: '', // 分享标题
	    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	    imgUrl: '', // 分享图标
	    success: function () {
	      // 设置成功
	    }
	 })
})