基于vue的h5网页微信分享链接图标丢失问题解决
基于vue的h5网页微信分享链接图标丢失问题解决微信JS-SDK说明文档怎样调用微信JS-SDK重点对于目前的移动互联网，客户端分成了安卓、IOS和h5三大块，为了引流，安卓和ios往往会分享到微信、QQ、微博等社交工具，第一次分享时图标、标题和描述是IOS和安卓配置的，对于web前端所做的分享页无需做任何操作。但如果我们在微信打开这个链接之后，再次分享出去，分享的描述会变成链接地址，分享的图标也
·
基于vue的h5网页微信分享链接图标丢失问题解决
对于目前的移动互联网，客户端分成了安卓、IOS和h5三大块，为了引流，安卓和ios往往会分享到微信、QQ、微博等社交工具，第一次分享时图标、标题和描述是IOS和安卓配置的，对于web前端所做的分享页无需做任何操作。
但如果我们在微信打开这个链接之后，再次分享出去，分享的描述会变成链接地址，分享的图标也不见了。
查了相关文章，有说直接再网页body标签里面直接写img标签，设置样式，然而并不行，就选择用了另外一种方法，调用微信JS-SDK接口文档，利用微信自带的分享功能进行实现二次转发。
微信JS-SDK说明文档
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫等微信特有的能力，为微信用户提供更优质的网页体验。
怎样调用微信JS-SDK
1.引入JS文件 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
也可以使用npm下载：
// 下载
npm install weixin-js-sdk
// 引用
import wx from 'weixin-js-sdk'
- 通过config接口注入权限验证配置；我觉得这是是最关键的了，首先这个你需要后台给你返回config接口所需要的参数：timestamp、noncestr和signature。
let param={
url:location.href
}
let title = ''//这里是标题
let desc = ''//这里是描述
let imgUrl = ''//这里是图标
axios.post('后台给你的接口',param)
.then((res)=>{
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage","onMenuShareQQ", "onMenuShareQZone","wx-open-launch-app"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
// wx.ready(function () {
wx.onMenuShareTimeline({
title: title,// 分享标题
link: link,// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl,// 分享图标
success: function () {
// 设置成功
// alert('成功')
}
});
//分享给微信好友
wx.onMenuShareAppMessage({
title: title,
desc: desc, // 分享描述
link: link,
imgUrl: imgUrl,
type: "",// 分享类型,music、video或link，不填默认为link
dataUrl: "",// 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// alert('成功')
}
});
// “分享到朋友圈”
wx.onMenuShareQZone({
title: title,
link: link,
imgUrl: imgUrl,
success: function () {
// alert('成功')
}
});
// “分享到QQ”按钮的分享内容
wx.onMenuShareQQ({
title: title,
desc: desc,
link: link,
imgUrl: imgUrl,
success: function () {
// alert('成功')
}
})
// })
})
后台配置接口：
#region 获取AccessToken
private static string GetAccessToken()
{
//https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
string tokenUrl = string.Format("https://api.weixin.qq.com/cgi-bin/token?grant_type={0}&appid={1}&secret={2}", "client_credential", ConfigurationManager.AppSettings["appid"], ConfigurationManager.AppSettings["secret"]);
var wc = new WebClient();
var strReturn = wc.DownloadString(tokenUrl);return strReturn;
}
#endregion
#region 获取Jsapi_Ticket
private static string GetWeiXinJsapi_Ticket(string accessToken)
{
string tokenUrl = string.Format("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type={1}", accessToken, "jsapi");
var wc = new WebClient();
var strReturn = wc.DownloadString(tokenUrl); //取得微信返回的json数据 return strReturn;
}
#endregion
#region 基础字符
private static string[] strs = new string[]
{
"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"
};
#endregion
#region 创建随机字符串
private static string CreatenNonce_str()
{
Random r = new Random();
var sb = new StringBuilder();
var length = strs.Length;
for (int i = 0; i < 15; i++)
{
sb.Append(strs[r.Next(length - 1)]);
}
return sb.ToString();
}
#endregion
#region 创建时间戳
private static long CreatenTimestamp()
{
return (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
}
#endregion
#region 签名算法
/// <summary>
/// 签名算法
///本代码来自开源微信SDK项目：https://github.com/night-king/weixinSDK
/// </summary>
/// <param name="jsapi_ticket">jsapi_ticket</param>
/// <param name="noncestr">随机字符串(必须与wx.config中的nonceStr相同)</param>
/// <param name="timestamp">时间戳(必须与wx.config中的timestamp相同)</param>
/// <param name="url">当前网页的URL，不包含#及其后面部分(必须是调用JS接口页面的完整URL)</param>
/// <returns></returns>
public static string GetSignature(string jsapi_ticket, string noncestr, long timestamp, string url, out string string1)
{
var string1Builder = new StringBuilder();
string1Builder.Append("jsapi_ticket=").Append(jsapi_ticket).Append("&")
.Append("noncestr=").Append(noncestr).Append("&")
.Append("timestamp=").Append(timestamp).Append("&")
.Append("url=").Append(url.IndexOf("#") >= 0 ? url.Substring(0, url.IndexOf("#")) : url);
string1 = string1Builder.ToString();return FormsAuthentication.HashPasswordForStoringInConfigFile(string1, "SHA1");
}
#endregion
//GET api/GetInfoMation
/// <summary>
///初始化的数据调用微信接口返回参数
/// </summary>
/// <returns></returns>
[WebMethod]
public static string GetInfoMation(string url)
{
try
{
//生成tokcen
string tocken = GetAccessToken();
JObject TokenJO = (JObject)JsonConvert.DeserializeObject(tocken);
//验证签名
string Jsapi_Ticket = GetWeiXinJsapi_Ticket(TokenJO["access_token"].ToString());
JObject Jsapi_TicketJo = (JObject)JsonConvert.DeserializeObject(Jsapi_Ticket);
#region
string rtn = "";
string jsapi_ticket = Jsapi_TicketJo["ticket"].ToString();
string noncestr = CreatenNonce_str();
long timestamp = CreatenTimestamp();
string outstring = "";
string JS_SDK_Result = GetSignature(jsapi_ticket, noncestr, timestamp, url, out outstring);
//拼接json串返回前台
rtn = "{\"appid\":\"" + ConfigurationManager.AppSettings["appid"] + "\",\"jsapi_ticket\":\"" + jsapi_ticket + "\",\"noncestr\":\"" + noncestr + "\",\"timestamp\":\"" + timestamp + "\",\"outstring\":\"" + outstring + "\",\"signature\":\"" + JS_SDK_Result.ToLower() + "\"}";#endregion
return rtn;
}
catch (Exception ex)
{
return string.Empty;
}
}
重点
后台配置config成功信息时，必须要在你申请好的公众号配置JS接口安全域名，还需要进行IP白名单配置。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)