微信JS-SDK分享实践
2018-08-22 本文已影响175人
登上云端看日落
前题
- 本篇适用范围： 使用微信JS-SDK接口调用，分享朋友圈、朋友、QQ、QQ空间、腾讯微博等，包括分享链接中带有参数。
- 说明：在Android和iOS端，分享测试均已通过。
开发准备
- 已认证公众号。登录微信公众号确认有相关功能使用权限，参见下图
image
- 设置JS接口安全域名。确保分享链接域名和设置的安全域名一致
微信公众号中，在【设置---公众号设置---功能设置】，设置JS接口安全域名，如图
image
- 获取AppID和AppSecret。在微信公众号中获取该信息并保存，后面签名算法和config配置中会用到。
实现逻辑
-
后台通过AppID和AppSecret请求微信接口获取access-token参数，以此access-token参数再次请求微信接口获取jsapi-ticket，并将获取的jsapi-ticket进行加密、校验与其他的参数封装成json格式的数据传送到前台JS页面
-
前台获取json数据后，并提供给参数给微信分享接口调用，具体接口为wx.config，wx.ready; 获取微信分享页面的标题和描述，以及分享地址、缩略图地址
JS-SDK使用步骤--后台
参考官方文档 附录1--JS-SDK使用权限签名算法
- 获取access-token
AccessToken需要用CorpID和Secret来换取，不同的Secret会返回不同的AccessToken。此处可使用前面获取的AppID和AppSecret，需使用Https协议、Json数据格式、UTF8编码
请求示例：https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=appId&corpsecret=appSecret
详细内容请参考官方文档-获取access-token
- 获取jsapi-ticket
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）。
请求示例：https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKEN
- 获取签名（signature）
签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）,url（当前网页的URL，不包含#及其后面部分，即前端发起请求传过来的URL参数）。需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。源代码参考如下：后台签名源代码下载
- 封装json参数，返回给前端
将获取的jsapi-ticket进行加密、校验与其他的参数封装成json格式的数据传送到前台JS页面，返回内容可参考wx.config配置中所需内容。
建议
验证签名是否一致，可以使用微信的验证签名工具；建议使用微信web开发者工具调试JS-SDK
JS-SDK使用步骤--前端
- 引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
备注：支持使用 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width,initial-scale=1.0">-->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<title>Index</title>
<!-- 必须引入的文件-->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
.....
</body>
</html>
- 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 => {
// 请求接口失败回调函数
})
}
分享成功截图
image
image
本文实践采坑原创，转载请注明出处
