本文共 11012 字，大约阅读时间需要 36 分钟。
http://luckykun.com/work/2016-05-14/weixin-share.html
最近要慢慢开始做移动端的一些页面了，并且大多数都是活动页面，需要在微信里面分享、传播。
如果只是单单传播一下页面，扩散一些信息还好，那就跟pc差不多，一刀一刀切页面就完了。。。但是我们在传播的时候往往需要分享出去，并且自定义传播信息的标题、链接或者图片，有时候一些小游戏还需要获取用户的信息等等，那么，就需要调用微信分享的接口了…
我跟着开发了两次，其实如果搞清楚了流程，本身步骤也还算简单。但是我发现每次要写很多重复的代码，并且因为时间间隔，每次开发的时候又要重新看看文档，才能回忆起该怎么调用＝＝，所以我写这个微信分享的小插件，就是为了自己以后再做这样的需求时，分分钟搞定。顺便在这里做一个简单的记录，如果文中有错，欢迎大家指出^_^。
首先解释一下，这里的使用条件，不是说插件的使用条件，而是调用微信分享接口的使用条件。
不是每个人随便写个页面都能拿到微信里，互相传播，让用户授权，获取用户信息的。你需要拥有一个已经认证过的微信公众号，进入”公众号设置”的”功能设置”里填写”JS接口安全域名”，来绑定一个能访问的域名，另外还需要一个与公众号对应的唯一的appId，这个id能从公众号后台查看。
其实使用的过程在微信官方文档中已经说的非常清楚了，但是其中其实有很多的都是我们用不到的，所以我把分享页面的开发过程再简单的总结一遍:
所有需要使用JS-SDK的页面必须先注入配置信息，如下配置之后(signature,nonceStr,timestamp就是上一步获取到的信息)，方能调用分享接口。
wx.config({ debug: true, //开启调试模式，会实时的提示信息 appId: self.config.appId, // 必填，公众号的唯一标识 timestamp: d.timestamp, // 必填，生成签名的时间戳 nonceStr: d.conststr, // 必填，生成签名的随机串 signature: d.signature, // 必填，签名，见附录1 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage'] }); |
如果上一步的配置有错，则执行：
wx.error( function(){ alert( 'error'); }) |
如果配置成功，则执行
wx.ready( function(){ //... }) |
然后在配置成功的回调函数里，即可调用分享的函数了。
wx.ready( function(){ wx.onMenuShareTimeline({ //分享到朋友圈 title: ‘标题’, link: 'http://www.taobao.com', imgUrl: 'imgurl', success: function () { self.config.circleFunction(); // 分享成功的回调函数 }, cancel: function () { // 取消分享 } }); wx.onMenuShareAppMessage({ //分享给朋友 title: self.config.title, link: self.config.link, desc: '为什么这里没有起作用？？', imgUrl: self.config.imgUrl, success: function () { self.config.friendFunction(); // 分享成功的回调函数 }, cancel: function () { // 取消分享 } }); }) |
值得一提的是，这里用到的函数，都需要在配置项的'jsAplilist'中添加进去。 jsApiList: [‘onMenuShareTimeline’, ‘onMenuShareAppMessage’]
function WxShare(conf){ this.getURLParam = function(name) { return decodeURIComponent(( new RegExp( '[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[ 1].replace( /\+/g, '%20')) || null; }; this.config = { appId: conf && conf.appId || '', url: conf && conf.url || '', //接口地址 data: { //接口的参数 code: this.getURLParam( 'code'), state: this.getURLParam( 'state'), url: location.href.split( '#')[ 0], // zepto 自动编码对location.href进行encodeURIComponent编码 method: 0 }, imgUrl: conf && conf.imgUrl || '', title: conf && conf.title || '', link: conf && conf.link || '', desc: conf && conf.desc || '', circleFunction: conf && conf.circleFunction || function() {}, friendFunction: conf && conf.friendFunction || function() {}, callback: conf && conf.callback || function(d){} }; this.init(); } WxShare.prototype.init = function(){ //获取用户信息 var self = this; $.ajax({ url: self.config.url, data: self.config.data, dataType: 'jsonp', jsonp: 'callback', success: function (d) { // 成功获取到用户信息，然后配置sdk self.config.callback(d); //处理用户信息 wx.config({ debug: false, appId: self.config.appId, // 必填，公众号的唯一标识 timestamp: d.timestamp, // 必填，生成签名的时间戳 nonceStr: d.conststr, // 必填，生成签名的随机串 signature: d.signature, // 必填，签名，见附录1 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage'] }); wx.ready( function(){ wx.onMenuShareTimeline({ //分享到朋友圈 title: self.config.title, link: self.config.link, imgUrl: self.config.imgUrl, success: function () { self.config.circleFunction(); // 确认分享 }, cancel: function () { // 取消分享 } }); wx.onMenuShareAppMessage({ //分享给朋友 title: self.config.title, link: self.config.link, desc: self.config.desc, imgUrl: self.config.imgUrl, success: function () { self.config.friendFunction(); // 确认分享 }, cancel: function () { // 取消分享 } }); }); }, error: function (a, b, c) { // alert('error'); } }); } |
说明：
var linkUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx60d2d83ca82005ec&redirect_uri='+ location.href + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'; var wxShare = new WxShare({ appId: 'xxxxxxxxxxxxxxxxxx', url: url, imgUrl: 'http://pic24.nipic.com/20120831/10132780_100453579000_2.jpg', title: '这是分享出去的标题', desc: '这是发送给朋友的描述信息', link: linkUrl, circleFunction: function(){ }, callback: function(data){ //处理获得的用户信息 $( '.page1 .logo').html(data.nickname); } }); |
配置项：
因为平时用到的只有分享朋友圈和朋友这两个接口，所以这个插件也只是实现了这两个功能。并且标题，链接，图片地址都是公用的。以后如有需要，可以继续增加功能。
转载地址：http://mphni.baihongyu.com/