2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > H5微信自定义分享图文链接(设置标题+简介+图片)——附源码

H5微信自定义分享图文链接(设置标题+简介+图片)——附源码

时间:2022-06-21 08:20:46

相关推荐

H5微信自定义分享图文链接(设置标题+简介+图片)——附源码

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 为分享的图片,必须是完整路径

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。