微信分享

微信分享

准备工作

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

JS-SDK使用

1. 绑定域名：

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

2. 在页面引入JS文件：

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

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中的内容都会被执行！

5. 配置失败回调：

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

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

6. 通用参数：

   所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用函数参数：

   • success 接口调用成功时执行的回调函数。

   • fail 接口调用失败时执行的回调函数。

   • complete 接口调用完成时执行的回调函数，无论成功或失败都会执行。

   • cancel 用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。

   • trigger 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

   回调参数：

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

7. 微信分享接口

分享到朋友圈、好友、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 () {

    // 用户取消分享后执行的回调函数

    }

}

微信分享

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

分享设计规范

• 分享标题：14字以内，建议使用朋友般亲切的口吻

• 分享图标：尺寸120*120，大小不超过10K，不支持GIF格式。必须采用https协议。

• 分享描述：20字以内，对标题的简要解读。

• 分享链接：外链页面所在服务器至少能支持每秒1500次的访问压力，且每次访问的响应时间200ms以内。必须采用https协议。

• 分享行为：页面上无分享按钮，页面上无诱导分享行为，包含但不限于分享后才能看到特定的信息，分享后才能进行下一步流程，分享后可以获得奖励等

• 分享文案：分享时“文案”和“图片”可以正常显示，分享后链接可以访问。

• 分享标题和描述不能出现敏感词汇，否则会导致部分不可预知的问题。比如分享者可以看到分享图标，被分享者看不到图标等。

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

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

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

分享或广告文案禁止内容

• 特殊字符：不允许使用特殊字符与符号 ，例如：“：）” “-。-”等； 不允许使用 emoji 表情

• 诱导或引导操作： 不允许出现诱导或引导用户操作的描述。包含但不限于以下文案：“请点击查看详情”、 “赶快戳开看一看”、“点一下下面你就知道是什么”、“点击下方了解公众号”

• 微信产品功能词汇：未经微信官方授权，禁止使用以下产品功能词汇及其谐音词汇。包含但不限于以下内容：“朋友圈” 、“点赞” 、“评论” 、“公众号”、 “微信”、 “红包”

• URL：不允许直接放URL链接内容

• 电话号码：不允许出现电话号码

• 破折号：不允许出现破折号，破折号在移动端显示容易产生歧义

• 空行&空格：不允许使用空行或空格

• 不规范折行：不允许出现单个词语或文字折行

• 股票代码：不允许出现公司股票代码

• 非简体中文文字&方言&小语种：不允许使用非简体中文文字（单字、词语、成语）。暂不支持使用方言和小语种作为文案。

• 产品销量数据：不允许使用任何维度的产品销量数据。

分享开发调试时注意事项

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

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

from=groupmessage  分享到群

from=timeline  分享到朋友圈

from=singlemessage  分享到好友

isappinstalled=0    0或1，表示是否安装了app

由于微信的签名生成时，需要传一个url参数，而这个url则是通过：location.href.split('#')[0]获取的url，取的是url的#前边的部分来生成签名，第一次分享成功，生成签名的url不带query字段。通过一次分享出去的链接，带上了query后，生成的签名就无效了，导致二次分享失败。

解决办法：

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

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

3. 微信分享时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转换链接格式，因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

四川经济日报使用微信

• 分享请求后台时间搓参数时 不能使用get传值，必须使用post 因为get 连接后面拼接需要分享的URL时可能会带有&符号会被服务器理解成拼接参数

• 微信分享 后台请求时间搓 有效时间未7200秒，每天访问接口次数有限，否则后面无法成功。