微信分享填坑指南

准备工做

若是想要是使用微信的分享功能，须要使用微信JS-SDK来完成。且只能点击微信右上角的...调起分享面板，不能直接由页面行为唤起！

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。经过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时能够直接使用微信分享、扫一扫、卡券、支付等微信特有的能力。

JS-SDK使用

一、绑定域名：

登陆微信公众平台 --> 公众号设置 --> 功能设置 --> 填写“JS接口安全域名”

二、在页面引入JS文件：

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

注：支持https；支持使用 AMD/CMD 标准模块加载方法加载；应尽量早的加载，建议放置到页面head里加载。

三、配置config：

全部须要使用JS-SDK的页面必须先注入配置信息，不然将没法调用。

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

注意：

• config是一个客户端的异步操做
• 在JS-SDK后调用，也应该尽量早的调用
• 同一个url仅需调用一次
• 对于变化url的SPA的web app可在每次url变化时进行调用
• 低于Android6.2版本的微信客户端，不支持pushState的H5新特性，使用pushState来实现web app的页面会致使签名失败

四、配置成功回调：

wx.ready(function(){
   // ...
});

因为config是一个异步操做，因此若是须要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则能够直接调用，不须要放在ready函数中。

注：不管config成功或失败，ready中的内容都会被执行！

五、配置失败回调：

config信息验证失败会执行error函数。

wx.error(function(res){
    // ...
});

六、通用参数：

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

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

回调参数：

{
    xxx: xxx,
    errMsg: '' // 接口调用成功/失败信息
}

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

微信分享

用户调用微信的分享功能，能够自定义分享的title和描述，以及小图标和连接。能够分享到群、好友、朋友圈、QQ、QQ空间等。

分享设计规范

• 分享标题：14字之内，建议使用朋友般亲切的口吻
• 分享图标：尺寸120*120，大小不超过10K，不支持GIF格式。必须采用https协议。
• 分享描述：20字之内，对标题的简要解读。
• 分享连接：外链页面所在服务器至少能支持每秒1500次的访问压力，且每次访问的响应时间200ms之内。必须采用https协议。
• 分享行为：页面上无分享按钮，页面上无诱导分享行为，包含但不限于分享后才能看到特定的信息，分享后才能进行下一步流程，分享后能够得到奖励等
• 分享文案：分享时“文案”和“图片”能够正常显示，分享后连接能够访问。

分享标题和描述不能出现敏感词汇，不然会致使部分不可预知的问题。好比分享者能够看到分享图标，被分享者看不到图标等。

敏感词举例：红包、现金、到帐等

注：分享的图标连接和分享连接尽可能保持为同一域名下的资源。不然可能会出现分享不成功或分享图标不显示的状况。

因为不能由页面直接唤起微信的分享面板，因此就须要一个弹窗浮层来引导用户用户去点击...按钮唤起分享面板。注意这个弹窗浮层不能出现诱导分享的内容。

分享或广告文案禁止内容：

• 特殊字符：不容许使用特殊字符与符号 ，例如：“：）” “-。-”等； 不容许使用 emoji 表情
• 诱导或引导操做： 不容许出现诱导或引导用户操做的描述。包含但不限于如下文案：“请点击查看详情”、 “赶快戳开看一看”、“点一下下面你就知道是什么”、“点击下方了解公众号”
• 微信产品功能词汇：未经微信官方受权，禁止使用如下产品功能词汇及其谐音词汇。包含但不限于如下内容：“朋友圈” 、“点赞” 、“评论” 、“公众号”、 “微信”、 “红包”
• URL：不容许直接放URL连接内容
• 电话号码：不容许出现电话号码
• 破折号：不容许出现破折号，破折号在移动端显示容易产生歧义
• 空行&空格：不容许使用空行或空格
• 不规范折行：不容许出现单个词语或文字折行
• 股票代码：不容许出现公司股票代码
• 非简体中文文字&方言&小语种：不容许使用非简体中文文字（单字、词语、成语）。暂不支持使用方言和小语种做为文案。
• 产品销量数据：不容许使用任何维度的产品销量数据。

分享接口

分享到朋友圈、好友、QQ、QQ空间对应的接口为'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone'

分享到朋友圈

wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享连接，该连接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});

注：分享到朋友圈，只有title分享标题，没有desc描述。

分享到好友或群

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享连接，该连接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 若是type是music或video，则要提供数据连接，默认为空
    success: function () {
    // 用户确认分享后执行的回调函数
    },
    cancel: function () {
    // 用户取消分享后执行的回调函数
    }
});

分享到QQ和QQ空间

分享接口：onMenuShareQQ, onMenuShareQZone

分享参数：

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

分享开发调试时注意事项

一、分享出去的外链的域名必须和公众号后台配置的JS安全域名一致，不然会致使分享的失败

二、分享出去的外链，会自动给加上微信标识，致使二次分享失败。

如打开页面：

https://www.xxx.com/m/#/activity/invite/friends

分享出去连接：

https://www.xxx.com/m/?from=groupmessage&isappinstalled=0#/activity/invite/friends

微信自动在分享后边加上了query字符串：

from=groupmessage   分享到群
from=timeline  分享到朋友圈
from=singlemessage  分享到好友
isappinstalled=0    0或1，表示是否安装了app

注：安卓手机分享到朋友圈的连接，只会带from=timeline。

因为微信的签名生成时，须要传一个url参数，而这个url则是经过：

location.href.split('#')[0]

获取的url，取的是url的#前边的部分来生成签名，第一次分享成功，生成签名的url不带query字段。经过一次分享出去的连接，带上了query后，生成的签名就无效了，致使二次分享失败。

解决办法：

R一、替换路径，简单粗暴（query字段只对微信有用，对咱们没用）

let href = window.location.href;
if(href.indexOf('groupmessage') > -1 || href.indexOf('singlemessage') > -1 || href.indexOf('timeline') > -1){
    href = href.replace(/\?from=(groupmessage|singlemessage|timeline)(\S*)#/, '#');
    window.location.href = href;
}

不过这样，会致使页面请求两次，细心的用户可能会感知到。或者用户网络不稳定时，可能他会感受到两次页面的刷新。

R二、生成签名的时候，动态的获取url，传给生成签名的接口。

每次打开页面时，都获取到url的#前边部分传给签名生成接口，保证每次的签名都是有效的。

三、微信分享时invalid signature错误解决和查找顺序

1. 确认签名算法正确，可用http://mp.weixin.qq.com/debug... 页面工具进行校验。
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），由于页面一旦分享，微信客户端会在你的连接末尾加入其它参数，若是不是动态获取当前连接，将致使分享后的页面签名失败。

四、注意分享外链和图标连接的拼写，若是拼写错误，微信分享虽然不报错，但却会致使分享失败