微信分享填坑指南

准备工作

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

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

JS-SDK使用

1、绑定域名：

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

2、在页面引入JS文件：

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

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

3、配置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的页面会导致签名失败

4、配置成功回调：

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

由于config是一个异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

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

5、配置失败回调：

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

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

6、通用参数：

所有接口通过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 () {
    // 用户取消分享后执行的回调函数
    }
}

分享开发调试时注意事项

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

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

如打开页面：

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后，生成的签名就无效了，导致二次分享失败。

解决办法：

R1、替换路径，简单粗暴（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;
}

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

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

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

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

确认签名算法正确，可用http://mp.weixin.qq.com/debug... 页面工具进行校验。
确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
确保一定缓存access_token和jsapi_ticket。
确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

4、注意分享外链和图标链接的拼写，如果拼写错误，微信分享虽然不报错，但却会导致分享失败

微信分享填坑指南

准备工作

JS-SDK使用

微信分享

分享设计规范

分享接口

分享到朋友圈

分享到好友或群

分享到QQ和QQ空间

分享开发调试时注意事项

默凡

引用和评论

用 vscode调试nodejs 时，提示对应的 grpc 模块找不到

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了