使用javascript获取wx.config内部字段解决微信分享

⼿把⼿带你使⽤JS-SDK⾃定义微信分享效果前⾔刚进⼊⼀家新公司，接到的第⼀个任务就是需要需要⾃定义微信分享的效果（⾃定义缩略图，标题，摘要），⼀开始真是⼀脸懵逼，在⽹上搜索了半天之后⼤概有了⽅案。

值得注意的是⼀开始搜索到的解决⽅案全是调⽤微信的⾃带的JS-SDK，然⽽腾讯是不会让⼴⼤吃⽠群众这么轻⽽易举的调⽤他们的东西的。

微信开发团队已经把调⽤的权限收回，现在⽆法直接在页⾯直接调⽤JS-SDK了。

话不多说，直接上⼲货。

预期效果原始的分享效果：使⽤微信JS-SDK的分享效果：可以看出缩略图，标题，摘要样式良好，给⽤户的体验很好。

准备⼯作现在的思路已经很明确了，就是通过调⽤微信的JS-SDK实现⾃定义分享效果。

但是这个调⽤过程⽐较繁琐，需要提前准备如下东西：（1）微信服务号⼀个，并且已经通过了实名认证； 没有实名认证的话，⼀些接⼝没有调⽤权限。

（2）⼀个ICP备案的域名；这个域名需要设置为微信公众号后台的JS接⼝安全域名，否则微信仍然不允许调⽤它的接⼝。

这时⼤家应该就犯难了，这样的话岂不是不能在本地测试，只能部署到⽣产环境才能测试？不⽤着急，解决⽅案告诉⼤家：花⽣壳的内⽹穿透服务（收费，20元以内）选择个⼈免费版就可以了，虽然说是免费版，但是其实注册过程中还是要收⼏块钱的，因为我⾃⼰买了域名和流量所以花的钱更多⼀些，但也在20元以内。

不建议⼤家购买流量，送的流量可以⽤很久了。

当准备好上⾯提到的就可以开始敲代码了。

（3）安装微信开发者⼯具，⽤于本地调试。

具体步骤（1）查看AppId，AppSecret以及绑定域名进⼊微信后台，找到下⾯的菜单获取AppID和AppSecret设置JS接⼝安全域名注意第三步，如果微信服务器不能在我们的服务器上访问到这个txt⽂件，域名是⽆法设置成功的，这⾥先告诉⼤家在哪⾥设置，想要成功设置域名还需要使⽤花⽣壳的服务，让微信服务器访问我们本地⼯程中的的txt⽂件才⾏。

hkh3321313.vicp.io是在花⽣壳上购买的域名，免费送的域名是在太难记了，完全不能忍。

⾃定义微信分享标题和描述信息概述环境： python3.4, Django1.9.6准备⼯作⾸先要搞到微信公众平台开发者ID和开发者密码，这个在公众号平台的公众号开发信息⾥查看和修改然后在IP⽩名单中，把服务器的IP加进去。

最后在公众号设置--功能设置⾥把域名加进去添加域名的时候，会看到提⽰下载⼀个txt⽂件，放到web服务器；这⾥我是把它放在static⽬录下，然后给它单独做了个url，单独写了view访问。

urlpatterns = [url(r'^admin/', admin.site.urls),url(r'^$', views.index),url(r'^MP_verify_xdl1MStBzOrk6qLu.txt', views.gettxt),]def gettxt(request):with open('MP_verify_xdl1MStBzOrk6qLu.txt', 'r') as f:return HttpResponse(f.read())这样是为了http://你的域名/MP_verify_xdl1MStBzOrk6qLu.txt可以访问到它。

当然直接把它放到nginx根⽬录下也可以，我是在IIS下配置的站点，其实不写路由不写views也是可以的，详细见最后的部署基本流程基本流程步骤如下：1. 通过开发者ID和密码获取到 token2. 通过token获取到ticket3. 拿到ticket⽣成签名4. 后台返回数据给前台js调⽤注意的是token和ticket是2个⼩时过期，⽽且api每天有请求次数，所以我们要把ticket存到本地，过期后再去请求。

代码settings.py 我只列出⽐较重要的内容STATIC_URL = '/static/'STATIC_ROOT = os.path.join(BASE_DIR, 'static')TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'templates'),'app',)STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)#微信API信息WEIXINAPI = {"tokenUrl": "https:///cgi-bin/token?","ticketUrl": "https:///cgi-bin/ticket/getticket?","appID": "开发者ID","appwd": "开发者密码"}#分享页⾯信息PAGEINFO = {"Title": "这⾥是标题信息","Description": "这⾥是描述信息","PicUrl": "这⾥是你要分享的url"}views.py我是图省事把所有代码都写在views.py⾥了，其实这些可以写到别的⽂件⾥，然后import进来，views.py只写它该写的东西先写⼀个获取token的⽅法：def flush_token():token_url = settings.WEIXINAPI["tokenUrl"]appID = settings.WEIXINAPI["appID"]appwd = settings.WEIXINAPI["appwd"]url = "%sgrant_type=client_credential&appid=%s&secret=%s" % (token_url, appID, appwd)ssl._create_default_https_context = ssl._create_unverified_contextjsondata = urllib.request.urlopen(url).read().decode()json_dic = json.loads(jsondata)return json_dic["access_token"]再来写⼀个获取ticket的⽅法def flush_ticket(access_token):ticket_url = settings.WEIXINAPI["ticketUrl"]url = '%saccess_token=%s&type=jsapi' % (ticket_url, access_token)jsondata = urllib.request.urlopen(url).read().decode()json_dic = json.loads(jsondata)json_dic["expires_time"] = time.time()with open("ticket.txt", 'w') as f:json.dump(json_dic, f)return json_dic["ticket"]因为每次分享的时候，ticket要先从ticket.txt中获取，然后对⽐当前时间，如果超过两个⼩时了，需要更新；没有超过，则直接使⽤，那就写⼀个get_ticket⽅法：def get_ticket():if os.path.exists("ticket.txt"):with open('ticket.txt', 'r') as f:ticket_dic = json.load(f)expires_time = ticket_dic['expires_time']now_time = time.time()if now_time - expires_time >= 7200:#更新ticketaccess_token = flush_token()ticket = flush_ticket(access_token)else:ticket = ticket_dic["ticket"]else:access_token = flush_token()ticket = flush_ticket(access_token)return ticket获取到ticket之后，就要⽣成签名信息了，签名信息需要⼏个参数，⼀个是16位的随机字符串，⼀个是ticket, ⼀个是timestamp这的单位是秒，最后⼀个是你要分享的url，然后将它们按照ASCII码由⼩到⼤的顺序以url参数⽅式拼接起来⽤sha1加密。

微信⼆次分享报错invalidsignature问题及解决⽅法基于微信公众号开发的h5页⾯（使⽤jssdk接⼝），由⽤户A分享给⽤户B，⽤户B再次分享这个页⾯时，不能成功分享。

问题出在⽤户B收到的分享链接与⽤户A打开的链接不同A⽤户的链接为B⽤户收到的连接from=singlemessage是微信客户端为了区分分享来源再链接后⾃动添加的标记，再次分享时，需要在js代码中对⾃动获取的连接进⾏encodeURIComponent处理，后台再对收到的url进⾏urldecode处理。

js与php⽰例代码如下：注意ajax，⽤的post，⽤get据说不⽤转义（get⽅式本⼈未做测试）js代码function share(){var nowurl = window.location.href;var nowurlo = nowurl.split('&')[0];$.ajax({type : "post",url : "***********************", //后端接⼝dataType : "json",data : { 'url': encodeURIComponent(nowurl) }, // 注意此处对nowurl进⾏encode；success : function (data) {wx.config({debug : false, //调试模式appId : data.appId, //公众号appidtimestamp : data.timestamp, //时间戳nonceStr : data.noncestr, //⽣成签名的随机串signature : data.signature, //签名jsApiList : ['updateAppMessageShareData','updateTimelineShareData','onMenuShareAppMessage','onMenuShareTimeline','chooseWXPay','showOptionMenu',"hideMenuItems","showMenuItems","onMenuShareTimeline",'onMenuShareAppMessage',] // 必填，需要使⽤的JS接⼝列表});wx.ready(function () { //需在⽤户可能点击分享按钮前就先调⽤wx.updateAppMessageShareData({title : '', // 分享标题desc : '', // 分享描述link : nowurlo, // ⾃动获取（上⾯js代码中）imgUrl : '', // 分享图标success : function () {}});wx.updateTimelineShareData({title : '', // 分享标题link : nowurlo, ⾃动获取（上⾯js代码中）imgUrl : '', // 分享图标success : function () {},});});}});}php代码public function generateSignature(){$timestamp = time();$jsapiTicket = ;//此处获取jsapi_ticket$noncestr = md5(uniqid(microtime(true),true));//我⽤的noncestr$url = urldecode(I('post.url'));$signature = sha1('jsapi_ticket=' . $jsapiTicket . '&noncestr=' . $noncestr . '&timestamp=' . $timestamp . '&url=' . $url);$shareConfig['appId'] = '';//此处为appId$shareConfig['timestamp'] = $timestamp;$shareConfig['noncestr'] = $noncestr;$shareConfig['signature'] = $signature;$shareConfig['url'] = $url;echo json_encode($shareConfig);}总结以上所述是⼩编给⼤家介绍的微信⼆次分享报错invalid signature问题及解决⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

uni-app第三⽅应⽤中调起微信分享最近做项⽬的时候遇到⼀个问题在APP中的某个单独的⼩项⽬中使⽤uni-app写的项⽬调起微信分享单独引⼊jweixin-1.6.0.js在需要分享的页⾯中时，页⾯会报错，导致原有的数据都没有展⽰出来；可以使⽤第三地⽅组件npm install jweixin-module --save安装微信分享模块安装完成后你会得到⼀个jweixin-module 的包，然后import wx from "@/jweixin-module/jweixin-module/lib/index.js"在页⾯中引⼊模块wxShare(config, news, users){ var _this = this; //微信分享 wx.config({ appId: config.appId, timestamp: config.timestamp, nonceStr: config.nonceStr, signature: config.signature, debug: config.debug, jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "chooseImage", "uploadImage", "hideMenuItems", "closeWindow" ] // 所有要调⽤的 API 都要加到这个列表中 }); wx.ready(function() { // 在这⾥调⽤ API wx.hideMenuItems({ menuList: ['menuItem:copyUrl', 'menuItem:favorite', 'menuItem:originPage','menuItem:openWithQQBrowser','menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:share:qq','menuItem:share:weiboApp','menuItem:share:QZone' ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3,分享朋友：'menuItem:share:appMessage',分享朋友圈：'menuItem:share:timeline' }); wx.onMenuShareTimeline({ //分享到朋友圈 ******* }); wx.onMenuShareAppMessage({ //分享给朋友 **** }); });;注意：wx.config不要放到wx.ready⽅法⾥⾯。

调⽤微信内置的⽅法及wx.config的配置问题⾸先请看⽹址：重点说下怎么配置wx.config（为了安全，所有的参数都在服务端获取）var link = location.href;$.ajax({ url: "/WxJSSDK/WxJS_SDK.aspx/GetInfoMation",//后台给你提供的接⼝ type: "Post", data: "{ 'url': '"+link+"' }", async: false, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { var datad = JSON.parse(data.d); //转译为Json字符串 wx.config({ debug: false, // 开启调试模式,调⽤的所有api的返回值会在客户端alert出来 appId: datad.appid, // 必填，公众号的唯⼀标识 timestamp: datad.timestamp, // 必填，⽣成签名的时间戳 nonceStr: datad.noncestr, // 必填，⽣成签名的随机串 signature: datad.signature,// 必填，签名，见附录1 jsApiList: [ "openLocation" ] // 必填，需要使⽤的JS接⼝列表，所有JS接⼝列表见附录2 }); wx.error(function (res) { layer.msg(res); }); }, error: function (error) { layer.msg(error) }});访问的页⾯⽅法：#region获取AccessTokenprivate static string GetAccessToken(){//https:///cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRETstring tokenUrl = string.Format("https:///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_Ticketprivate static string GetWeiXinJsapi_Ticket(string accessToken){string tokenUrl = string.Format("https:///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:///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{//⽣成tokcenstring 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);#regionstring 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\":\"return rtn;}catch (Exception ex){return string.Empty;}}调⽤接⼝⽅法（例如：打开地图）：//打开地图function funOpenLocation(id){var dataArray = [[40.036692, 116.425381, "北苑⼤酒店", "双营路12号 "], [40.020808, 116.433250, "北京会议中⼼", "北京市朝阳区来⼴营西路88号"], [39.818720, 119.505420, "国海宾馆", "河北省秦皇岛市北戴河东经路154号"]];wx.openLocation({latitude: dataArray[id][0], // 纬度，浮点数，范围为90 ~ -90longitude: dataArray[id][1], // 经度，浮点数，范围为180 ~ -180。

关于微信二次分享的使用步骤及遇到的问题首先，为什么会用到微信的这个功能呢？这是因为，当我们分享一篇主站的文章到了微信之后，首次分享到里面，微信接收到的是有标题，图片，和描述的一个分享链接。

但是使用微信二次分享的时候，标题被截短，描述也变成了链接，图片也没有变成了一个链接图标的默认图。

但是这时候我们又需要出现自己网站的图标，和描述，和完整的标题。

所以，我们需要微信的二次分享的接口来完善这个功能。

下面就说下如果使用该接口，步骤如何：1.首先，需要登录到微信公众平台，进入微信公众号设置—功能设置模块，里面有个js接口安全域名，在这里需要填写我们要把js接口用到哪个站下，就填写该站的域名。

2.域名设置好之后，就可以去咱们需要的项目中添加代码啦。

在需要调用JS接口的页面引入如下JS文件，（支持https）：/open/js/jweixin-1.0.0.js。

3.通过config接口注入权限验证配置所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。

这步就是将wx的配置参数都赋好值。

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名，见附录1jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});以上的这些参数，需要我们用程序处理好，ajax获取。

参数配置完成以后，才会执行wx.ready中的内容。

config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后想要我们的分享在哪里出现什么样的形式，就需要在该方法中完成了。

H5微信⾃定义分享链接（设置标题+简介+图⽚）起源：最近公司在做招募⼴告的html5页⾯，然后做出来后，产品提出⼀个问题，需要分享出去的链接是卡⽚形式，内容也要⾃⼰定义，这下就难到我了，因为是第⼀次遇到这种需求，果断百度，然⽽，我就像⼤家⼀样，看都看不懂，⼀⼤堆什么微信jssdk官⽅⽂档，看得我眼花缭乱，博客上⾯的也⼤多都是php形式的解释，也不知道怎么导⼊进来，然⽽接着去了解这个卡⽚分享，发现官⽅的分享卡⽚，是众多在微信⽣态中传播的html5静态页⾯的⼀个重点。

所以我解决了这个问题之后，就来写这个博客，希望能帮助⼀些初步了解这个微信⾃定义分享链接的园友。

产品需要做的：1.微信认证过的公众号:必须是经过认证的，没有认证的或者认证过期的都不可以；2.经过备案的域名：必须是备案过的，不然是⽆法使⽤的；3.绑定域名：⾸先你需要将需要分享的⽹址的域名绑定到微信公众平台上⾯，具体操作：先登录微信公众平台进⼊“公众号设置”的“功能设置”⾥填写“JS接⼝安全域名”；注：博主这次开发中，就遇到了第三点问题，我代码都写好了，后台也做好了，但是就是分享出去不是卡⽚形式遇到 config:invalid url domain后来发现是产品忘记绑定域名，设置⽩名单了。

(域名不要加http://)好，后来这个问题解决了，但是还是分享不成功，⼜进⾏⼀次排查，因为要在⼿机端上线才能看到效果，就⼀直上线⼀直改，改到下午5点，后来发现是产品appid给错了，我TM......后台需要做的：1.后台服务器：前台页⾯需要后台服务器传过来⼀些配置参数，⽐如appId、timestamp、nonceStr、signature这⼏个参数都是后台从微信公众平台获取到的，需要后台进⾏配合；2.获取access_token：利⽤公共号APPID、APPSECRET从微信服务器获取对应的access_token，这⾥是后台开发⼩伙伴的范围不多做解释；后台需要传的参数格式：前端你需要做的：1.引⼊js⽂件：在分享的页⾯需要引⼊⼀个微信官⽅的js⽂件；<script src="https:///open/js/jweixin-1.0.0.js"></script>2.通过ajax获取参数 :通过后台给你的接⼝，取到那些必要的参数，然后你需要把当前分享的页⾯的url传到后台去，必须动态的获取当前页⾯，⽽且⼀定要对url进⾏编码，要不然会不起作⽤；3.因为重复上线你⼿机需要清理缓存，这⼜是⼀个⿇烦事，⼿机打开：然后滑到底部，有四个清理缓存的选择框，选择清理就好，不会影响别的地⽅的缓存，⽆需担⼼；好，到这⾥就贴代码了，代码⾥⾯都特意详细的进⾏了注释：$(function() {//对url进⾏编码var localUrl = encodeURIComponent(location.href.split('#')[0]);//url传到后台格式var Url = "URL=" +localUrl;//这⼏个参数都是后台从微信公众平台获取到的var nonceStr, signature, timestamp, appId, shareUrl;$.ajax({//后台获取参数接⼝url: "https:///user/xxxxxxxx/",beforeSend: function(xhr) {xhr.setRequestHeader("Token", getCookie("token"));},type: 'get',data: Url,success: function(data) {//得到参数var appId = JSON.parse(data).appId;var nonceStr = JSON.parse(data).nonceStr;var signature = JSON.parse(data).signature;var timestamp = JSON.parse(data).timestamp;var shareUrl = JSON.parse(data).url;//通过微信config接⼝注⼊配置wx.config({debug: false, // 默认为false 为true的时候是调试模式，会打印出⽇志appId: appId,timestamp: timestamp,nonceStr: nonceStr,signature: signature,jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo']});//配置⾃定义分享内容window.share_config = {'share': {'imgUrl': 'https:///cecerecruit/img/%E6%B5%8B%E6%B5%8B%E6%8B%9B%E5%8B%9F.png', // 这⾥是需要展⽰的图标'desc': '120秒，48项天赋解析，90分钟专家咨询解读，深度剖析您的天赋⼈⽣。

微信分享功能微信app右上⾓⾃带分享功能--不论是微信公众号还是微信⼩程序或者是⽤微信打开的别的链接，⽤户都可以进⾏微信分享出去，对于⾃定义微信分享功能会和默认分享存在⼀些样式区别。

这就是为什么还要⾃定义微信分享功能。

以下是步骤：三：在微信公众号的后台进⾏设置：公众号设置-->功能设置-->JS接⼝安全域名，打开这个页⾯之后你会看到下⾯的提⽰。

需要先下载这个⽂件并上传到指定域名的根⽬录。

四：可以通过开发-->接⼝权限查看⾃⼰是否获取到了分享事件的权限。

五：⾸先要说明的是分享功能是⼀个配置功能，绑定在按钮的click事件中是没有效果的。

也就是说只有点击微信右上⾓的分享才有效果。

微信分享要引⼊wx.js，此js⽂件必须是低版本的wx.js的低版本，最新版本的1.4.0的版本没有分享功能，之前这个也琢磨了很久，搜了半天都没有找到这个也是个问题，也没有看到前⼈博客的关于这个js⽂件版本的指点。

六：要注意分享功能的签名signature必须要在后台获取，如果前端的话会暴露appID和密钥，这样的话⾮常不安全，微信也不建议这么做。

七：获取签名时的url不能带有#，必须是去掉#之后的url。

var url=window.location.href;url= rote.split("#")[0];九：注意开启微信分享调试功能，debug:true;这样在console后台可以看到报错，⽽且要注意的是微信分享或者微信的其他功能在浏览器的⼿机模拟端时是不会显⽰效果的，必须要使⽤微信开发者⼯具，当数据获取成功的时候回提⽰errMsg：‘config：ok’,刚开始看到是errMsg我还以为这不是成功的提⽰⽽是失败的提⽰呢，其实并不然。

当⼀切都完成的时候，要把alert测试信息去掉，不然苹果⼿机会莫名的出现弹框。

⼗：关于分享出去的图⽚链接也页⾯的链接，必须和当前页的域名⼀致，⽽且此域名必须要配置在公司公众号的IP⽩名单上，否则分享不成功。

微信jssdk实现分享到微信相同之处：在微信分享的时候，分享的链接都不能获取到缩略图。

不同之处：百度分享在微信低版本是可以看到缩略图的（但是⼀点⽤都没有，不过还是要说⼀下）这两个在分享带图⽚的⽂章的时候，都是不符合要求的（在这上⾯耗费了我好多时间，⼀度让我怀疑⼈⽣了。

）最后得出的你想要带标题描述图⽚都是完整的，就需要⽤微信的jssdk这是必须的吗，没啥其他好的⽅法现在说⼀下jssdk实现微信分享的步骤：1.打开微信开发者平台。

输⼊你的微信公众号账号和密码，进⼊到这个页⾯可以看到我的账号是订阅号⽽且是未认证的因为我项⽬中⽤的账号是公司的号，我现在只是以我⾃⼰的号简单说⼀下。

你⾃⼰需要的账号是已经认证的（据说要花300元，好贵。

）然后看⼀下左边菜单的接⼝权限⾥⾯的分享接⼝是否已经授权了（同样的我的是未获得的因为我是以我的为例⼦的我实际上⽤的是公司的号不是我⾃⼰的号）2.设置js安全域名接⼝打开公众号设置⾥⾯的功能设置，然后看到js接⼝安全域名，开始设置打开设置之后页⾯是这样的。

我就说⼀下注意的点吧（1）在下⾯填写的时候填域名就可以了，然后将需要下载的这个txt下载下来，放到你的域名的根域名下⾯，怎样检测⾃⼰是否放置正确在浏览器中输⼊你的域名/txt的名字能看内容就是对的，看不到就看看是否放置错误以上是准备⼯作做好了下⾯是⽐较正式的步骤1.打开左侧菜单的基本配置在⾥⾯已经知道的是你的appID 然后⾃⼰设置⼀下开发者密码，并且在设置的时候需要将密码保存⼀下，如果你⼀直进⾏完成没有保存，那么你的密码是不会显⽰在页⾯中的现在就可以知道 appId 和secret2.打开开发者⽂档中的jssdk可以看到具体步骤，前1步已经完成了，现在需要的是将微信官⽅的⽂件放到你的项⽬中，然后再页⾯中引⼊就可以了3.基本的都可以了，现在是开始写代码，我先贴⼀下我的代码这是前端的代码，很简单，前端需要做的就是将当前这个页⾯的url的去掉#后⾯的东西之后的部分传给后台然后从后台获取到随机数时间戳签名就可以了 share:function(){var _this=this;//标题描述var t=document.title;//获取第⼀张图⽚var src=_this.$("img").eq(0).attr("src");var img=location.origin+'/home'+src.split('/home')[1];console.log(img);//要传给后台的urlvar strUrl = encodeURIComponent(location.href.split('#')[0]);var url=location.href;type: "Post",url : 'xxx?url='+strUrl,contentType: "application/json; charset=utf-8",dataType: "json",success : function(result) {console.log(result)WXDate=result;wxconifg(WXDate);}});function wxconifg(WXDate) {wx.config({debug: false,appId: '',timestamp: WXDate.timestamp,nonceStr: WXDate.nonceStr,signature: WXDate.signature,jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage'] });wx.ready(function () {wx.checkJsApi({jsApiList: ['getLocation','onMenuShareTimeline','onMenuShareAppMessage'],success: function (res) {console.log(res.errMsg)}});wx.onMenuShareAppMessage({title: t,desc: t,link: url,imgUrl: img,trigger: function (res) {},success: function (res) {},cancel: function (res) {},fail: function (res) {alert(JSON.stringify(res));}});//分享到朋友圈wx.onMenuShareTimeline({title: t,desc: t,link: url,imgUrl: img,type: 'link',trigger: function (res) {},success: function (res) {cancel: function (res) {},fail: function (res) {alert(JSON.stringify(res));}});wx.error(function(res){console.log(res);});});}},4.⾄于后台的代码我不是很懂我看官⽅应该有给后台代码（在最后⾯）说⼀下在整个过程中遇到⽐较坑的地⽅：1.第⼀次解除微信jssdk这种东西，刚⼀开始没明⽩jssdk的本质，我直接在pc端打开的时候，什么都没有显⽰。

微信公众号H5之微信分享常见错误和问题（⼩结）url转码确认url是页⾯完整的url(请在当前页⾯alert(location.href.split('#')[0])确认)，包括'http(s) /'部分，以及'？'后⾯的GET参数部分,但不包括'#'hash后⾯的部分即获取url完成地址的⽅法为let url = window.location.href.split('#')[0];如果链接带有中⽂字符或者特殊符号,前端需要使⽤encodeURIComponent编码,同时后端需要配合解码let url = encodeURIComponent(window.location.href.split('#')[0]);config注⼊同⼀个url仅需调⽤⼀次，对于变化url的SPA的web app可在每次url变化时进⾏调⽤,注意,每次使⽤jssdk⽅法前都要先注⼊配置信息,并且,每使⽤⼀次,就要注⼊config⼀次.在vue⾥,可以写在每次路由变化时router.beforeEach((to, from, next) => {// 获取权限验证配置(签名) 后端返回 getConfig, 注意返回字段的⼤⼩写!let res// 注⼊配置信息wx.config({debug: false, // 调试开关appId: res.appId, // 必填，公众号的唯⼀标识timestamp:res.timestamp , // 必填，⽣成签名的时间戳nonceStr: res.nonceStr, // 必填，⽣成签名的随机串signature: res.signature,// 必填，签名jsApiList: ["updateAppMessageShareData","updateTimelineShareData"] // 必填，需要使⽤的JS接⼝列表});wx.ready(() => {// doSoming});})安全域名⼀定要再三确认安全域名等微信公众号配置信息,如分享链接link字段很多时候的错误并不是前端⽅法或者sdk等问题,⽽是后台有没有设置正确的安全域名和⽩名单等.wx.updateAppMessageShareData({title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页⾯对应的公众号JS安全域名⼀致imgUrl: '', // 分享图标success: function () {// 设置成功}})常见错误参考微信官⽹⽂档-附录5在开发过程遇到invalid signaturethe permission value is offline verifyingpermission denied先参考⽂档,排除基本因素,还是不⾏,再查找搜索引擎的答案.以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。