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

2019独角兽企业重金招聘Python工程师标准>>>

准备工作：

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接口安全域名”。说明：设置此安全域名目的是为了当发现此公众平台发现诱导分享行为时，可以根据此域名追溯到所有分享出去的链接，以及通过这些链接增加的粉丝。

2、- 引入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

3、- 通过config接口注入权限验证配置 在微信公众平台JSSDK说明文档是这样解释的

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

4、通过ready接口处理成功验证

wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

5、通过error接口处理失败验证

wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

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

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

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

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.配置一套服务器操作软件，在服务器上面直接修改代码，是即刻生效的， 有人说我是前端工程师，不会服务器那套东东，这就需要平时和后端工程师处好关系了！

转载于:https://my.oschina.net/u/3150996/blog/1863674