前题
- 本篇适用范围： 使用微信JS-SDK接口调用，分享朋友圈、朋友、QQ、QQ空间、腾讯微博等，包括分享链接中带有参数。
- 说明：在Android和iOS端，分享测试均已通过。
开发准备
- 已认证公众号。登录微信公众号确认有相关功能使用权限，参见下图
- 设置JS接口安全域名。确保分享链接域名和设置的安全域名一致
微信公众号中，在【设置---公众号设置---功能设置】，设置JS接口安全域名，如图
- 获取AppID和AppSecret。在微信公众号中获取该信息并保存，后面签名算法和config配置中会用到。
实现逻辑
-
后台通过AppID和AppSecret请求微信接口获取access-token参数，以此access-token参数再次请求微信接口获取jsapi-ticket，并将获取的jsapi-ticket进行加密、校验与其他的参数封装成json格式的数据传送到前台JS页面
-
前台获取json数据后，并提供给参数给微信分享接口调用，具体接口为wx.config，wx.ready; 获取微信分享页面的标题和描述，以及分享地址、缩略图地址
JS-SDK使用步骤--后台
参考官方文档
- 获取access-token
AccessToken需要用CorpID和Secret来换取，不同的Secret会返回不同的AccessToken。此处可使用前面获取的AppID和AppSecret，需使用Https协议、Json数据格式、UTF8编码
请求示例：
详细内容请参考
- 获取jsapi-ticket
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）。
请求示例：
- 获取签名（signature）
签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）,url（当前网页的URL，不包含#及其后面部分，即前端发起请求传过来的URL参数）。需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。源代码参考如下：
- 封装json参数，返回给前端
将获取的jsapi-ticket进行加密、校验与其他的参数封装成json格式的数据传送到前台JS页面，返回内容可参考wx.config配置中所需内容。
建议
验证签名是否一致，可以使用微信的；建议使用调试JS-SDK
JS-SDK使用步骤--前端
- 引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：
备注：支持使用 AMD/CMD 标准模块加载方法加载
- 通过config接口注入权限验证配置
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，企业号的唯一标识，此处填写企业号corpid timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名，见附录1 jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录3});复制代码 - 通过ready接口处理成功验证
wx.ready(function(){ // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。});复制代码 - 通过error接口处理失败验证
wx.error(function(res){ // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});复制代码 - 示例代码（基于vue）
- 在调用页面引入JS，例如index.html
Index ..... 复制代码
- index.js
import Vue from 'vue'import Router from 'vue-router'import restoreUrl from '../utils/restoreUrl';Vue.use(Router)let router = new Router(yourRouter)// 路由拦截router.beforeEach((to, from, next) => { // 微信分享时，微信会在地址栏添加额外参数 if (restoreUrl.isWeChatUrl()) { window.location.href = restoreUrl.getProjectUrl(); }})export default router复制代码 - restoreUrl.js
多次分享，去除微信添加参数，
export default { // 判断地址栏出现微信自己加的参数问题 isWeChatUrl () { // debugger; let url = window.location.href; let matchResult = url.match(/\?/g); // 如果地址栏中，出现了两个问号的话，那么是微信在分享添加了参数 // 如果地址栏中，出现了form=,那么就是微信分享添加的参数 return (matchResult ? matchResult.length >= 2 : false) || (/from=/.test(url)); }, // 把地址栏的中微信追加的参数去掉，返回我们自己项目的地址 getProjectUrl () { let location = window.location; return location.origin + location.pathname + location.hash; }};复制代码 - 进入分享页面时调用onShare()
// 分享 onShare() { // 传入后台签名URL，域名+当前分享页面路径 let _WXurl = window.location.origin + window.location.pathname; // 定义分享链接,使用encodeURIComponent对传入参数编码，防止在iOS中传入参数编码问题 // 此处示例传递单个参数 let _shareLink = window.location.origin+ '/#?'+encodeURIComponent('key')+"="+ encodeURIComponent('value'); let params = { url:_WXurl }; //向后台发起请求获得config配置参数 this.$post('/v1/system/shareUrl', params,{ // 请求header中，Content-Type需为以下类型，防止分享出去参数丢失 headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' } }) .then((res) => { if (res.data.errCode === 0) { // 请求接口成功后， // 配置config wx.config({ // 开启调试模式时,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 debug: false, // 后台返回之前获取的appId appId: res.data.body.appId, // 必填，生成签名的时间戳 timestamp: res.data.body.timestamp, // 必填，生成签名的随机串 nonceStr: res.data.body.nonceStr, // 必填，签名，见附录1 signature: res.data.body.signature, // 必填，需要使用的JS接口列表，所有JS接口列表见附录3 jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems' ] }); // 微信检查接口列表 wx.checkJsApi({ jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems'], // 需要检测的JS接口列表 success: function (res) { console.log(res); // alert('checkJsApi' + res); } }); // 隐藏微信右上角弹出菜单中部分功能按钮 wx.hideMenuItems({ menuList: ['menuItem:share:qq','menuItem:share:QZone','menuItem:share:weiboApp','menuItem:copyUrl'], // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录4 success: function (res) { // alert(res); } }); // 页面加载完成后用户就有可能调用微信的分享，所以当页面ready 完后就加载 wx.ready(function () { // alert(_shareLink); // 分享到朋友圈 wx.onMenuShareTimeline({ // 分享标题 title: '你的梦想', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 link: _shareLink, // 分享图标 imgUrl: 'https://www.baidu.com/images/1.png', // 用户确认分享后执行的回调函数 success: function () { console.log('分享回调函数'); console.log('shareLink= '+_shareLink); // alert('分享回成功调函数'); }, // 用户取消分享后执行的回调函数 cancel: function () { console.log('取消分享回调函数'); // alert('取消分享回调函数'); } }); // 分享好友 wx.onMenuShareAppMessage({ // 分享标题 title: '接你的梦想', // 分享描述 desc: '从来都不是梦', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 link: _shareLink, // 分享图标 imgUrl: 'https://www.baidu.com/images/1.png', // 用户确认分享后执行的回调函数 success: function () { console.log('分享好友回调函数'); console.log('shareLink= '+_shareLink); // alert('分享回好友调函数'); }, // 用户取消分享后执行的回调函数 cancel: function () { console.log('取消分享好友调函数'); // alert('取消分享回调函数'); // console.log('分享回好友调函数'); } }); // 分享多个地址时，可统一传入参数，如 wx.onMenuShareAppMessage(shareData) ... }); // 微信预加载失败回调 wx.error(function (res) { console.log(res); // alert('失败'); }); } }).catch(error => { // 请求接口失败回调函数 }) }复制代码 分享成功截图
本文实践采坑原创，转载请注明出处