reactJs/js微信分享教程简单实用版

准备工做：

1. 前两天作了一个微信分享朋友圈和分享好友功能，遇到了挺多坑，总结一下，但愿能帮到第一次开发微信端的小伙伴，废话很少说，开始正题 准备条件：

• 具有本身的公众号，一个身份证能够申请一个（必须是认证过的！）
• 设置ip白名单，后台服务的ip，（获取数据的服务器IP）
• 设置js安全域名接口，这个域名必须是备案过的
• 须要在对应的ip的根目录下上传一个MP_verify_ajl2qnil5aOtrFuu.txt文件来受权

2. 在线接口调试工具 帮助开发者检测调用微信公众平台开发者API时发送的请求参数是否正确，提交信息后可得到服务器验证结果。 https://mp.weixin.qq.com/debug
   （用appid和secret生成token,appid和secret能够在基本信息里面查到）

3. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

开发步骤：

1. • 绑定域名 先登陆微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。说明：设置此安全域名目的是为了当发现此公众平台发现诱导分享行为时，能够根据此域名追溯到全部分享出去的连接，以及经过这些连接增长的粉丝。

二、- 引入js文件 在须要调用JS接口的页面引入以下JS文件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接口注入权限验证配置 在微信公众平台JSSDK说明文档是这样解释的

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

注意：

1. 必定要在公众号进行安全域名的配置，这样，微信就能够紧紧控制你的微信平台了，一旦发现违规，让分享连接失败，删除掉诱导行为增长的粉丝，是瞬间就能够完成的。所以，微信平台的开发者，必定要合理来使用分享功能，不要因小失大。等到你的微信平台被封，估计库都来不及了。

2.由于微信的权限限制是不能直接在本地调试的，这开发起来就至关不方便了，解决方案有两种：

• 1.下载花生壳，用内网穿透，会生成一个域名，链接本地服务，可是这个也是有条件的， 由于微信加安全域名的时候不能加入对应的端口号，只能使用默认端口8080，若是办公室的ip没有备案过，是不能使用8080端口的（能够找运维的小伙伴协助）

• 2.配置一套服务器操做软件，在服务器上面直接修改代码，是即刻生效的， 有人说我是前端工程师，不会服务器那套东东，这就须要平时和后端工程师处好关系了！