其实无论是不是Vue版都是这些坑，记录一下配置config与自定义分享踩坑记录
网上找了一下，制作一个300300的图标， 然后在模版里加入代码 <img src="300300的图标" width="0" height="0" /> 这样做了发现还是没有缩略图。
微信6.5.5版本以后调整了分享规则，针对的是没有接入公众号的网页分享，必须接入微信认证公众号！
看详情
所以想用图片方式，或WeixinJSBridge（微信内置JSAPI）等方式均不可能，已经明确必须使用JSSDK，那就使用Js-sdk吧。
vue安装Js-sdk
npm install weixin-js-sdk mint-ui --save
然后新建一个wechat.js文件，src目录下任意地方
注意这里有访问api获取签名数据，建议调试时最好把 wx.config的debug设为true
//weixin-js-sdk应用
//weixin-js-sdk应用
const wx = require('weixin-js-sdk')
export default {
methods: {
wechatShare(info) {
const that = this
// 判断苹果手机
let _url = ''
if (window.__wxjs_is_wkwebview === true) {
_url = window.location.href.split('#')[0] || window.location.href
} else {
_url = window.location.href
}
//这里是封装的axios，换成任意请求皆可
this.http.post("get_sign",{url:_url}).then(res=>{
wx.config({
debug: false,
appId: res.data.appid, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.noncestr, // 必填，生成签名的随机串
signature: res.data.sign, // 必填，签名，见附录1
jsApiList: [
'previewImage',
'hideAllNonBaseMenuItem',
'showMenuItems',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'chooseWXPay'
] // 必填，需要使用的 JS 接口列表，所有JS接口列表见附录2
})
});
wx.ready(() => {
const share_title = info.title
const share_desc = info.desc
const share_link = info.link
const share_img = info.img
wx.showOptionMenu()
wx.onMenuShareTimeline({
title: share_title, // 分享标题
link: share_link, // 分享链接
imgUrl: share_img, // 分享图标
})
wx.onMenuShareAppMessage({
title: share_title, // 分享标题
desc: share_desc, // 分享描述
link: share_link, // 分享链接
imgUrl: share_img, // 分享图标
})
})
}
}
}
import wxShare from "../wechat"; //自己找对路径
export default {
mixins: [wxShare],
methods: {
setShare() {
const shareInfo = {
title: `自定义标题`,
desc: `自定义描述`,
link: "http://www.phps.shop/#/",
img: "https://www.phps.shop/wx.png"
}
this.wechatShare(shareInfo)
},
},
created(){
this.setShare()
}
}
wx.config的debug设为true的话打开页面会显示签名是否成功，若显示 invalid signature，不要去纠结其他问题了，就是签名错误。
不是通过页面工具进行校验，签名就一定正确的，因为签名和当前url是关联的，当前url多个字符都会报签名错误
invalid signature 很明显签名错误
解决办法
1、确认签名算法是否正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2、确认config中noncestr, timestamp与用以签名中的对应noncestr, timestamp一致。
3、确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
4、确认url是页面完整的url，包括GET参数部分。
确定123都没问题，那基本就是4的问题。比如你生成签名是url是http://www.phps.shop
但访问的页面是http://www.phps.shop?id=1或者http://www.phps.shop/#，都会提示签名错误，注意vue的/#
另记录一下api端获取签名的记录
下面没有做对应的保存，只是log记录了下
//获取公众号的access_token，注意这里不是用户的access_token
public function access_token(){
$url='https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s';
$surl=sprintf($url,$this->gzhAppID,$this->gzhAppSecret);
$access = curl_get($surl);
$access = json_decode($access,true);
$access_token = $access['access_token'];
Log::error('access_token:'.$access_token);
$this->get_ticket($access_token);
return $access_token;
}
//获取ticket
public function get_ticket($access_token)
{
$url='https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$access_token.'&type=jsapi';
$json = curl_get($url);
$arr = json_decode($json,true);
$ticket = $arr['ticket'];
Log::error('ticket:'.$ticket);
$this->get_sign($ticket);
return $ticket;
}
//获取签名
public function get_sign($ticket){
$time=time();
$jsapi_ticket = $ticket;
$noncestr='Wmt8dfcjPz0z';
$timestamp=$time;
$url='http://m.phps.shop/#/';
$str="jsapi_ticket=%s&noncestr=%s×tamp=%s&url=%s";
$sign = sprintf($str,$jsapi_ticket,$noncestr,$timestamp, $url);
$sign = sha1($sign);
Log::error('sign:'.$sign);
Log::error('time:'.$time);
return $sign;
}
