1、 最近突然发现微信“卡片式”分享链接变成了如下形式:
原来的是这样的:
后来也解决了,原来是部署域名换了,微信公众号的相关配置没有改造成的。微信的其他域名都可以写多个,唯独服务器地址只能写一个,所以非常好看的“卡片式”分享图文链接变成了光秃秃的文字。
错误提示:(出现这种提示要查看公众号ip白名单、相关域名、appid等是否正确)
2、代码案例:
依赖
"weixin-js-sdk": "^1.4.0-test"
封装wxshare.js
import wx from 'weixin-js-sdk'export default{install(Vue) {Vue.prototype.shareList = function (imgUrl, link, desc, title) {// var url = encodeURIComponent(link)var url = link// 分享this.$http.post('wxSignPackage', {url: url}, 'json').then(function (res) {// alert(JSON.stringify(res))res = res.data.data;wx.config({debug: false, // true:是调试模式,调试时候弹窗,会打印出日志appId: res.appId, // 微信appidtimestamp: res.timestamp, // 时间戳nonceStr: res.noncestr, // 随机字符串signature: res.signature, // 签名jsApiList: [// 所有要调用的 API 都要加到这个列表中'onMenuShareTimeline', // 分享到朋友圈接口'onMenuShareAppMessage', // 分享到朋友接口'onMenuShareQQ', // 分享到QQ接口'onMenuShareWeibo', // 分享到微博接口'updateTimelineShareData','updateAppMessageShareData']})wx.checkJsApi({jsApiList: [// 所有要调用的 API 都要加到这个列表中'onMenuShareTimeline', // 分享到朋友圈接口'onMenuShareAppMessage', // 分享到朋友接口'onMenuShareQQ', // 分享到QQ接口'onMenuShareWeibo', // 分享到微博接口'updateTimelineShareData','updateAppMessageShareData'],success: function (res) {// alert("checkJsApi:success");}})wx.ready(function () {// 微信分享的数据var shareData = {imgUrl: imgUrl, // 分享显示的缩略图地址link: link, // 分享地址desc: desc, // 分享描述title: title, // 分享标题success: function () {// 分享成功可以做相应的数据处理// alert('分享成功')// alert('appId:' + res.appId)// alert('timestamp:' + res.timestamp)// alert('nonceStr:' + res.nonceStr)// alert('signature:' + res.signature)},fail: function () {// alert('调用失败')},complete: function () {// alert('调用结束')}}wx.updateTimelineShareData(shareData)wx.updateAppMessageShareData(shareData)wx.onMenuShareQQ(shareData)wx.onMenuShareWeibo(shareData)})wx.error(function (res) {// config信息验证失败会执行error函数,如签名过期导致验证失败,// 具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,// 对于SPA可以在这里更新签名。console.log(res)//alert('分享失败')})}, function (res) {// alert(res)// console.log(parseInt(res.code))})}}}
使用
this.shareList(res.data.imgUrl, window.location.href, res.data.desc, res.data.title) // image 为分享的图片,必须是完整路径