微信网页开发--分享接口
2017-03-06 12:03
295 查看
流程
关于流程,在上一篇中已经有图介绍:微信文档
微信JS-SDK说明文档JSSDK使用步骤
首先确保已经获取了相关权限步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注:登录后可在“开发者中心”查看对应的接口权限。
这里的安全域名没设置,会报签名权限的问题。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js备注:支持使用 AMD/CMD 标准模块加载方法加载。
步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用,同一个url仅需调用一次。步骤四:通过ready接口处理成功验证
wx.ready(function(){// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
步骤五:通过error接口处理失败验证
wx.error(function(res){// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:1.success:接口调用成功时执行的回调函数。
2.fail:接口调用失败时执行的回调函数。
3.complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
4.cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
5.trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。
备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。
后台开发流程
下载微信提供的示例代码: http://demo.open.weixin.qq.com/jssdk/sample.zip打开sample/node/package.json 找到dependencies字段,里面引入的是 “jssha”: “^1.5.0” 模块
在我们自己的node后台项目里面的package.json的dependencies字段 添加 “jssha”: “^1.5.0” 然后执行npm install 引入此模块
复制sample/node目录下面的sign.js文件到自己的node后台项目里面
后台代码:
/* * 客户端获取签名 * 参数: 当前网页的URL,不包含#及其后面部分 */ router.get('/mp/signature', function(req, res, next) { var param = req.query || req.params; var urlstr = param.urlstr; var url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + wxConfig.AppID + '&secret=' + wxConfig.Secret; request(url, function (error, response, token_body) { if (!error && response.statusCode == 200) { var token_data = JSON.parse(token_body); var ticketurl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + token_data.access_token + '&type=jsapi'; request(ticketurl, function (error, response, ticket_body) { if (!error && response.statusCode == 200) { var ticket_data = JSON.parse(ticket_body); var ret = sign(ticket_data.ticket,ticketurl); ret.appID = wxConfig.AppID; // 把AppID也一起返回给前台 res.end(JSON.stringify(ret)); } }) } }) });
这里前台在调用
signature这个接口后,在
ajax的成功回调里面配置微信JS-SDK就好了。
前台代码
function getSignature(locUrl){ $.ajax({ url: 'https://www.hgdqdev.cn/mp/signature', data:{ urlstr: locUrl.split('#')[0] }, dataType: 'json', //服务器返回json格式数据 type: 'get', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒; success: function(res) { wxConfig(res); }, error: function(xhr, type, errorThrown) { alert('网络连接失败,请检查网络。'); } }); } // 微信配置 function wxConfig(res){ wx.config({ debug: false, appId: res.appID, timestamp: res.timestamp, nonceStr: res.nonceStr, signature: res.signature, jsApiList: ['onMenuShareTimeline', // 分享朋友圈 'onMenuShareAppMessage'] // 分享好友 }); wx.ready(function(){ // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 // 分享到朋友圈 wx.onMenuShareTimeline({ title: '', // 分享标题 link: '', // 分享链接 imgUrl: '', // 分享图标 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); // 分享给朋友 wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接 imgUrl: '', // 分享图标 type: '', // 分享类型,music、video或link,不填默认为link dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); }); wx.error(function(res){ // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 }); }
如果我们需要修改动态的修改微信分享的内容时:请注意接口调用说明–备注里面的说明。
我的解决办法是什么时候需要修改分享内容就再调用一次
getSignature()一次方法,在调用这个方法之前就设置好分享内容。
但是这样就有一个问题,如果用户分享了,但是网络请求还没请求成功就尴尬了。O(∩_∩)O~。
所以我觉的我们可以保存方法
getSignature()获取的签名数据,在需要修改分享内容时,再次调用
wxConfig(),传入保存的数据即可。
最后
微信网页开发–分享接口,的介绍就完了,其实开发起来不算难。关于最后动态设置分享内容的部分,也是踩坑之后才知道的,这个问题也解决了。微信JS-SDK有很多内容,但是基本的操作流程是大致一样的。相关文章推荐
- 用c#开发微信 (10) JS-SDK 基本用法- 分享接口“发送到朋友”
- 夺命雷公狗---微信开发14----用网页调试工具调试自定义菜单接口
- 微信开发--微信分享等接口配置
- [置顶] 微信JSSDK开发(分享接口和上传图片接口)
- 微信开发之——JSSDK,基础接口——分享接口
- 微信开发笔记-调用自定义分享接口
- 微信开发 Weixin JS接口 隐藏微信中网页右上角按钮
- 手机web开发,网页在微信里打开后的分享功能的实现
- 微信接口开发之高级篇系列【网页授权接口】
- 微信分享接口开发
- 浅谈Android中微信的文本,音频,视频,链接,表情,图片分享接口开发详解
- 关于微信分享接口开发
- 微信开发备忘——分享网页和图片无反应的原因和粗略解决办法
- 调用微信分享接口,自定义分享内容(1)--配置域名(java开发)
- 微信开发 Weixin JS接口 隐藏微信中网页底部导航栏
- 用c#开发微信(10) JSSDK 基本用法 分享接口“发送到朋友”
- 夺命雷公狗---微信开发52----网页授权(oauth2.0)获取用户基本信息接口(2)
- 夺命雷公狗---微信开发53----网页授权(oauth2.0)获取用户基本信息接口(3)实现世界留言版
- C#微信公众号接口开发,灵活利用网页授权、带参数二维码、模板消息,提升用户体验之完成用户绑定个人微信及验证码获取
- 调用微信分享接口,自定义分享内容(2)-调用分享接口(java开发)