微信如何通过 js-sdk 调用 微信 分享接口 微信自定义分享朋友

这段时间有个工作，是要在微信浏览器上实现自定义分享功能，找了一圈，最后决定使用微信JSSDK的‘分享接口’来开发，也是着实踩了下坑啊，分享一下

微信JSSDK介绍

官方文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
因为微信公众号的开通对于大部分开发人员来说还是一个稍高的门槛，所以，微信搞了一个微信测试号，开发人员使用微信扫一下就可以获取。测试号貌似是全接口调用的哦！不用担心没有权限调用。
申请入口：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

在配置时，需要注意几点

• 接口配置信息中，要配合系统后台获取jsapi_ticket*

• 配置JS接口安全域名时，注意是 域名 不需要填写http/https，如果填写的话，在代码执行wx.config()时，会报 config:fail,Error: invalid url domain 错误，正确示例：www.whongbin.cn*

微信JSSDK使用

1.在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
jssdk的签名权限,这个权限是由后台提供的,前端只需要把签名权限注入到wx.config中就可以了,这里也提供下

2.jssdk的下载地址http://demo.open.weixin.qq.com/jssdk/sample.zip，SDK中有demo。

注意事项

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

签名用的url必须是调用JS接口页面的完整URL。

出于安全考虑，开发者必须在服务器端实现签名的逻辑。

微信开放文档 | 概述

微信JS接口签名效验工具

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareQZone"] // 必填，需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口
});

这里需要注意的地方debug在上线后要改为false,jsApiList里要填你要使用的接口,不然没有作用

注意

签名算法

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

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

对string1进行sha1签名，得到signature：
0f9de62fce790f9a083d5c99e95740ceb90c27ed

invalid signature签名错误。建议按如下顺序检查：

确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
页面工具进行校验。

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

var link = location.href.split('#')[0]; // 地址

这里link一定要location.href.split(’#’)[0];取当前的动态地址包括’http(s)?/‘部分，以及’？‘后面的GET参数部分,但不包括’#'hash后面的部分。 否者第二次分享会导致地址发生变化而报错

var imgUrl = ''
//分享朋友圈
wx.onMenuShareTimeline({
    title: '这是一个自定义的标题！',
    link: link,
    imgUrl: imgUrl,// 自定义图标
    trigger: function (res) {
        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
        //alert('click shared');
    },
    success: function (res) {
        //alert('shared success');
        //some thing you should do
    },
    cancel: function (res) {
        //alert('shared cancle');
    },
    fail: function (res) {
        //alert(JSON.stringify(res));
    }
});
//分享给好友
wx.onMenuShareAppMessage({
    title: '这是一个自定义的标题！', // 分享标题
    desc: '这是一个自定义的描述！', // 分享描述
    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: imgUrl, // 自定义图标
    type: 'link', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});
wx.error(function (res) {
    alert(res.errMsg);
});

wx.error(function(res){
  console.log(res)
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

const url = location.href.split('#')[0];

注意

确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

服务器每次生成ticket需要给当前的url

axios({
   method: 'post',
    url: config + '/ticket',
    data: {
        url: url
    }
}).then(function (response) {
  console.log(response)
  let data = response.data.data.ticket;
})
.catch(function (error) {
    console.log(error);
});