JSSDK微信自定义分享朋友圈

 

服务项目	新手技术咨询	企业技术咨询	定制开发
服务说明	QQ有问必答	QQ、微信、电话	微信开发、php开发，网站开发，系统定制，小程序开发
价格说明	200元/月	1000/月	商议
			联系 851 488 243， 备注：模板消息

背景：15年以前的微信分享只须要加入一段js就能够实现。后来微信官方所有禁止了。如今的微信分享所有得使用jssdk。

为了使用方便，对接jssdk接口以后，我也把分享功能封装成只要在任何页面引入一段js就能够使用分享功能。放在静态页面html或者php均可以。

1、分享功能：

在微信内（必须在微信里）打开网站页面，分享给朋友或者分享到朋友圈时，本身能够指定分享的标题、缩略图、描述文字。（还能够把这个分享功能进一步扩展，好比分享后发红包、加积分、统计分享次数，谁分享了之类的功能，这个看我的需求而定。）

2、使用条件:

一、认证公众号（就是交了300块给腾讯认证的），不管是认证订阅号仍是认证服务号均可以。

二、有一个备案域名

3、开发：使用微信JSSDKAPI

JSSDK使用步骤

步骤一：绑定域名

先登陆微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。若是你使用了支付类接口，请确保支付目录在该安全域名下，不然将没法完成支付。

备注：登陆后可在“开发者中心”查看对应的接口权限。

步骤二：引入JS文件

在须要调用JS接口的页面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意，若是你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，不然将没法在iOS9.0以上系统中成功使用JSSDK

 

步骤三：经过config接口注入权限验证配置

 

全部须要使用JS-SDK的页面必须先注入配置信息，不然将没法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，因此使用pushState来实现web app的页面会致使签名失败，此问题会在Android6.2中修复）。

 

 

 

wx.config({
    debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的惟一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，须要使用的JS接口列表，全部JS接口列表见附录2
});

 

步骤四：经过ready接口处理成功验证

 

wx.ready(function(){

    // config信息验证后会执行ready方法，全部接口调用都必须在config接口得到结果以后，config是一个客户端的异步操做，因此若是须要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则能够直接调用，不须要放在ready函数中。
});

 

步骤五：经过error接口处理失败验证

 

wx.error(function(res){

    // config信息验证失败会执行error函数，如签名过时致使验证失败，具体错误信息能够打开config的debug模式查看，也能够在返回的res参数中查看，对于SPA能够在这里更新签名。

});

分享接口

请注意不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限，详细规则请查看：朋友圈管理常见问题 。

获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

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 () { 
        // 用户取消分享后执行的回调函数
    }
});

获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享连接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
       // 用户取消分享后执行的回调函数
    }
});

4、效果演示：

为了方便使用，我已经把分享功能的代码封装，配置两个参数就能够使用。须要分享的页面只要加一段js就能够实现自定义分享

若有须要，请联系 851 488 243 ， 备注：微信分享