微信JS-SDK分享实践
微信JS-SDK分享实践
前题
- 本篇适用范围： 使用微信JS-SDK接口调用，分享朋友圈、朋友、QQ、QQ空间、腾讯微博等，包括分享连接中带有参数。
- 说明：在Android和iOS端，分享测试均已经过。
开发准备
1.已认证公众号。登陆微信公众号确认有相关功能使用权限，参见下图php
2.设置JS接口安全域名。确保分享连接域名和设置的安全域名一致html
微信公众号中，在【设置---公众号设置---功能设置】，设置JS接口安全域名，如图
前端
3.获取AppID和AppSecret。在微信公众号中获取该信息并保存，后面签名算法和config配置中会用到。vue
实现逻辑
- 后台经过AppID和AppSecret请求微信接口获取access-token参数，以此access-token参数再次请求微信接口获取jsapi-ticket，并将获取的jsapi-ticket进行加密、校验与其余的参数封装成json格式的数据传送到前台JS页面
- 前台获取json数据后，并提供给参数给微信分享接口调用，具体接口为wx.config，wx.ready; 获取微信分享页面的标题和描述，以及分享地址、缩略图地址
JS-SDK使用步骤--后台
参考官方文档 附录1--JS-SDK使用权限签名算法web
1.获取access-token算法
AccessToken须要用CorpID和Secret来换取，不一样的Secret会返回不一样的AccessToken。此处可以使用前面获取的AppID和AppSecret，需使用Https协议、Json数据格式、UTF8编码vue-router
请求示例：https://qyapi.weixin.qq.com/c...json
详细内容请参考官方文档-获取access-tokenapi
2.获取jsapi-ticket缓存
用第一步拿到的access_token 采用http GET方式请求得到jsapi_ticket（有效期7200秒，开发者必须在本身的服务全局缓存jsapi_ticket）。
请求示例：https://qyapi.weixin.qq.com/c...
3.获取签名（signature）
签名生成规则以下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）,url（当前网页的URL，不包含#及其后面部分，即前端发起请求传过来的URL参数）。须要注意的是全部参数名均为小写字符。对string1做sha1加密，字段名和字段值都采用原始值，不进行URL 转义。源代码参考以下：后台签名源代码下载
4.封装json参数，返回给前端
将获取的jsapi-ticket进行加密、校验与其余的参数封装成json格式的数据传送到前台JS页面，返回内容可参考wx.config配置中所需内容。
建议
验证签名是否一致，能够使用微信的验证签名工具；建议使用微信web开发者工具调试JS-SDK。
JS-SDK使用步骤--前端
1.引入JS文件
在须要调用JS接口的页面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/...
备注：支持使用 AMD/CMD 标准模块加载方法加载
2.经过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
appId: '', // 必填，企业号的惟一标识，此处填写企业号corpid
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，须要使用的JS接口列表，全部JS接口列表见附录3
});
3.经过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，全部接口调用都必须在config接口得到结果以后，config是一个客户端的异步操做，因此若是须要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则能够直接调用，不须要放在ready函数中。
});
4.经过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过时致使验证失败，具体错误信息能够打开config的debug模式查看，也能够在返回的res参数中查看，对于SPA能够在这里更新签名。
});
5.示例代码（基于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 => {
// 请求接口失败回调函数
})
}
分享成功截图
本文实践采坑原创，转载请注明出处
参考
相关文章
- 1. asp实现微信jssdk分享,静态页html实现jssdk微信分享
- 2. 微信JSSDK分享接口
- 3. Jssdk之微信分享
- 4. 微信JSSdk实现分享功能
- 5. 调用微信JSSDK实现微信受权分享和支付
- 6. 微信JSSDK分享功能详解
- 7. 微信jssdk分享功能开发
- 8. 微信JSSDK分享注意事项
- 9. vue微信分享微信支付jssdk全局配置
- 10. 微信JSSDK分享朋友圈微信自定义分享接口
- 更多相关文章...
- • Thymeleaf项目实践 - Thymeleaf 教程
- • SVN分支 - SVN 教程
- • Spring Cloud 微服务实战(三) - 服务注册与发现
- • TiDB 在摩拜单车在线数据业务的应用和实践
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章