关于微信二次分享，描述变连接的解决方法(一)----文档说明

时间 2019-11-21

标签关于微信二次分享描述连接解决方法文档说明繁體版

原文原文链接

http://www.cnblogs.com/joshua317/p/4761948.htmlphp

前言：html

最近工做中遇到了使用微信二次分享的时候，标题被截短，描述也变成了连接，图片也没有，运营人员半夜还在嚷嚷，无奈只好硬着头皮去百度，去google，可是悲催的是没有详细的解决方法，最终只能本身去研究，还好最终搞出来了，决定分享一下，帮助须要的人。博文，分两篇，第一篇主要是微信的官方文档说明，第二篇主要是代码部分；前端

1、微信JS-SDK说明文档web

1.概述

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。ajax

经过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时能够直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。算法

此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项api

2.JSSDK使用步骤

　　2.1步骤一：绑定域名缓存

　　先登陆微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，能够按照提示进行填写，最多填写三个。安全

　　备注：登陆后可在“开发者中心”查看对应的接口权限，只有获取了权限才能保证后面的工做继续进行。服务器

2.2 步骤二：引入JS文件

　　在须要调用JS接口的页面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

　　备注：支持使用 AMD/CMD 标准模块加载方法加载

　　2.3 步骤三：经过config接口注入权限验证配置

　　全部须要使用JS-SDK的页面必须先注入配置信息，不然将没法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，因此使用pushState来实现web app的页面会致使签名失败，此问题会在Android6.2中修复）。

wx.config({
    debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的惟一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，须要使用的JS接口列表，全部JS接口列表见附录2
});

　　2.4 步骤四：经过ready接口处理成功验证

wx.ready(function(){

    // config信息验证后会执行ready方法，全部接口调用都必须在config接口得到结果以后，config是一个客户端的异步操做，因此若是须要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则能够直接调用，不须要放在ready函数中。
});

　　2.5 步骤五：经过error接口处理失败验证

wx.error(function(res){

    // config信息验证失败会执行error函数，如签名过时致使验证失败，具体错误信息能够打开config的debug模式查看，也能够在返回的res参数中查看，对于SPA能够在这里更新签名。

});

3.接口调用说明

　　全部接口经过wx对象(也可以使用jWeixin对象)来调用，参数是一个对象，除了每一个接口自己须要传的参数以外，还有如下通用参数：

success：接口调用成功时执行的回调函数。
fail：接口调用失败时执行的回调函数。
complete：接口调用完成时执行的回调函数，不管成功或失败都会执行。
cancel：用户点击取消时的回调函数，仅部分有用户取消操做的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

　　备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，由于客户端分享操做是一个同步操做，这时候使用ajax的回包会尚未返回。

　　以上几个函数都带有一个参数，类型为对象，其中除了每一个接口自己返回的数据以外，还有一个通用属性errMsg，其值格式以下：

调用成功时："xxx:ok" ，其中xxx为调用的接口名
用户取消时："xxx:cancel"，其中xxx为调用的接口名
调用失败时：其值为具体错误信息

4.基础接口(只列出了使用到的接口)

　　4.1判断当前客户端版本是否支持指定JS接口（测试的时候使用很不错）

　　备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口都可不使用checkJsApi来检测。

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 须要检测的JS接口列表，全部JS接口列表见附录2,
    success: function(res) {
        // 以键值对的形式返回，可用的api值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

5.分享接口

　　5.1 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享连接
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

　　5.2 获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享连接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 若是type是music或video，则要提供数据连接，默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

　　5.3 获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享连接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
       // 用户取消分享后执行的回调函数
    }
});

　　5.4 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口

wx.onMenuShareWeibo({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享连接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

　　5.5 获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

wx.onMenuShareQZone({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享连接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

附录1-JS-SDK使用权限签名算法

　　首先获取jsapi_ticket

　　生成签名以前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常状况下，jsapi_ticket的有效期为7200秒，

　　经过access_token来获取。因为获取jsapi_ticket的api调用次数很是有限，频繁刷新jsapi_ticket会致使api调用受限，影响自身业务，

　　开发者必须在本身的服务全局缓存jsapi_ticket 。

参考如下文档获取access_token（有效期7200秒，开发者必须在本身的服务全局缓存access_token）：获取access token的方法
用第一步拿到的access_token 采用http GET方式请求得到jsapi_ticket（有效期7200秒，开发者必须在本身的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

　　成功返回以下JSON：

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

　　得到jsapi_ticket以后，就能够生成JS-SDK权限验证的签名了。

　　其次获取签名，签名的算法以下：

　　签名生成规则以下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。

　　对全部待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。

　　这里须要注意的是全部参数名均为小写字符。对string1做sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

　　　即signature=sha1(string1)。示例：

　　　　noncestr=Wm3WZYTPz0wzccnW

　　　　jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg

　　　　timestamp=1414587457

　　　　url=http://mp.weixin.qq.com?params=value

　　步骤1. 对全部待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

　　步骤2. 对string1进行sha1签名，获得signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

　　注意事项

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL。
出于安全考虑，开发者必须在服务器端实现签名的逻辑。

　　如出现invalid signature 等错误详见附录5常见错误及解决办法，开启debug，如签名无效会弹出invalid signature的提示

附录2-全部JS接口列表

版本1.0.0接口

onMenuShareTimeline
onMenuShareAppMessage
onMenuShareQQ
onMenuShareWeibo
onMenuShareQZone
startRecord
stopRecord
onVoiceRecordEnd
playVoice
pauseVoice
stopVoice
onVoicePlayEnd
uploadVoice
downloadVoice
chooseImage
previewImage
uploadImage
downloadImage
translateVoice
getNetworkType
openLocation
getLocation
hideOptionMenu
showOptionMenu
hideMenuItems
showMenuItems
hideAllNonBaseMenuItem
showAllNonBaseMenuItem
closeWindow
scanQRCode
chooseWXPay
openProductSpecificView
addCard
chooseCard
openCard

附录5-常见错误及解决方法

调用config 接口的时候传入参数 debug: true 能够开启debug模式，页面会alert出错误信息。如下为常见错误及解决方法：

invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，若是使用了端口号，则配置的绑定域名也要加上端口号（一个appid能够绑定三个有效域名）
invalid signature签名错误。建议按以下顺序检查：
1. 确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2. 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
3. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
5. 确保必定缓存access_token和jsapi_ticket。
6. 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。若是是html的静态页面在前端经过ajax将url传到后台签名，前端须要用js获取当前页面除去'#'hash部分的连接（可用location.href.split('#')[0]获取,并且须要encodeURIComponent），由于页面一旦分享，微信客户端会在你的连接末尾加入其它参数，若是不是动态获取当前连接，将致使分享后的页面签名失败。
the permission value is offline verifying这个错误是由于config没有正确执行，或者是调用的JSAPI没有传入config的jsApiList参数中。建议按以下顺序检查：
1. 确认config正确经过。
2. 若是是在页面加载好时就调用了JSAPI，则必须写在wx.ready的回调中。
3. 确认config的jsApiList参数包含了这个JSAPI。
permission denied该公众号没有权限使用这个JSAPI，或者是调用的JSAPI没有传入config的jsApiList参数中（部分接口须要认证以后才能使用）。
function not exist当前客户端版本不支持该接口，请升级到新版体验。
为何6.0.1版本config:ok，可是6.0.2版本以后不ok（由于6.0.2版本以前没有作权限验证，因此config都是ok，但这并不意味着你config中的签名是OK的，请在6.0.2检验是否生成正确的签名以保证config在高版本中也ok。）
在iOS和Android都没法分享（请确认公众号已经认证，只有认证的公众号才具备分享相关接口权限，若是确实已经认证，则要检查监听接口是否在wx.ready回调函数中触发）
服务上线以后没法获取jsapi_ticket，本身测试时没问题。（由于access_token和jsapi_ticket必需要在本身的服务器缓存，不然上线后会触发频率限制。请确保必定对token和ticket作缓存以减小2次服务器请求，不只能够避免触发频率限制，还加快大家本身的服务速度。目前为了方便测试提供了1w的获取量，超过阀值后，服务将再也不可用，请确保在服务上线前必定全局缓存access_token和jsapi_ticket，二者有效期均为7200秒，不然一旦上线触发频率限制，服务将再也不可用）。
uploadImage怎么传多图（目前只支持一次上传一张，多张图片需等前一张图片上传以后再调用该接口）
无法对本地选择的图片进行预览（chooseImage接口自己就支持预览，不须要额外支持）
经过a连接(例如先经过微信受权登陆)跳转到b连接，invalid signature签名失败（后台生成签名的连接为使用jssdk的当前连接，也就是跳转后的b连接，请不要用微信登陆的受权连接进行签名计算，后台签名的url必定是使用jssdk的当前页面的完整url除去'#'部分）
出现config:fail错误（这是因为传入的config参数不全致使，请确保传入正确的appId、timestamp、nonceStr、signature和须要使用的jsApiList）
如何把jsapi上传到微信的多媒体资源下载到本身的服务器（请参见文档中uploadVoice和uploadImage接口的备注说明）
Android经过jssdk上传到微信服务器，第三方再从微信下载到本身的服务器，会出现杂音（微信团队已经修复此问题，目先后台已优化上线）
绑定父级域名，是否其子域名也是可用的（是的，合法的子域名在绑定父域名以后是彻底支持的）
在iOS微信6.1版本中，分享的图片外链不显示，只能显示公众号页面内链的图片或者微信服务器的图片，已在6.2中修复
是否须要对低版本本身作兼容（jssdk都是兼容低版本的，不须要第三方本身额外作更多工做，但有的接口是6.0.2新引入的，只有新版才可调用）
该公众号支付签名无效，没法发起该笔交易（请确保你使用的jweixin.js是官方线上版本，不只能够减小用户流量，还有可能对某些bug进行修复，拷贝到第三方服务器中使用，官方将不对其出现的任何问题提供保障，具体支付签名算法可参考 JSSDK微信支付一栏）
目前Android微信客户端不支持pushState的H5新特性，因此使用pushState来实现web app的页面会致使签名失败，此问题已在Android6.2中修复
uploadImage在chooseImage的回调中有时候Android会不执行，Android6.2会解决此问题，若需支持低版本能够把调用uploadImage放在setTimeout中延迟100ms解决
require subscribe错误说明你没有订阅该测试号，该错误仅测试号会出现
getLocation返回的坐标在openLocation有误差，由于getLocation返回的是gps坐标，openLocation打开的腾讯地图为火星坐标，须要第三方本身作转换，6.2版本开始已经支持直接获取火星坐标
查看公众号（未添加）: "menuItem:addContact"不显示，目前仅有从公众号传播出去的连接才能显示，来源必须是公众号
ICP备案数据同步有一天延迟，因此请在第二日绑定

其余：

1.最好把微信的js以及对应的配置放在前面

2.关于图片不能正确获取的问题：

通常状况下，只要配置没问题，基本上就能够的，可是有时候，配置文件的图片明明给到了，可是那张分享图片仍不是咱们想要的效果，而是可能直接抓取了body里面的第一张图片，因此

处理方法就是：在body里面最前面加入一张不影响页面的图片：

<div style=" overflow:hidden; width:0px; height:0; margin:0 auto; position:absolute; top:-800px;"><img src="http://pic4.nipic.com/20090907/1628220_101501018346_2.jpg"></div>

3.关于标题及描述获取不正确的问题：

虽然配置里面title，desc，都是完整的，但分享出去的结果仍是错误的，因此最好在html的head里面也加上title，及描述

<title>微信二次分享</title>
<meta name="keywords" content="微信二次分享" />
<meta name="description" content="获取微信二次分享描述" />

4.分享小技巧：

获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享连接
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

因为分享到朋友圈，是没有分享描述的，右边的文字取的是title的值，因此为了右边的文字可以更好地展现咱们须要传达的信息，咱们能够把title的值换成描述的值

5.建议使用微信web开发者工具进行调试，因为集成了Chrome DevTools，因此调试起来更加方便

http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html

6.确保公众号已获取基础权限以及分享权限

官网文档《微信JS-SDK说明文档》

因为博文不能保持和官网最新同步，因此可能会有出入

#JS-SDK

https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.9227353854310705#buzhou2

以上就是文档部分，下篇将把代码部分放出来，供你们参考。下篇地址：关于微信二次分享，描述变连接的解决方法(二)----代码部分