微信二次分享效果演示如何运行项目//将代码克隆到本地gitclonehttps://github.com/Jameswain/WeiXinSDK.git//安装依赖npmi//运行项目npmrundev通过charles配置代理，配置如下：charles配置如下，可以直接import到你的charles的mapremote中，记得把IP地址换成你的IP地址。配置好代理后，在微信中打开网址m.ximalaya.com/49265909/album/11501536/，看到如下效果，说明代理配置成功，接下来就可以测试二次分享了。下面通过详细步骤介绍如何接入微信二次分享操作。官方接入文档：https://mp.weixin.qq.com/wiki...一、配置JS接口安全域名1、二次分享需要先申请一个微信服务号。2、登录微信公众平台进入“公众号设置”的“功能设置”，填写“JS接口安全域名”注意：这里的JS接口安全域名是你需要的域名分享页面两次。注意：配置JS接口安全域名时，首先需要将MP_verify_576FDJKHHJK29XXTpb.txt文件放在域名根目录下；然后就可以成功保存了。如果配置的域名下没有MP_verify_576FDJKHHJK29XXTpb.txt文件，则无法保存成功。2、导入js文件在需要调用JS接口的页面导入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/...进一步完善服务稳定性，当以上资源无法访问时，可以改为访问：http://res2.wx.qq.com/open/js...（支持https）。以上是官方原文提供的js文件地址。我们一般下载jweixin-1.4.0.js文件，放在我们域名的静态文件中导入。https://h5.jameswain.com/static/lib/jweixin-1.4.0.js//在线地址的index.html页面添加如下代码：3.访问服务器接口获取配置信息这里你需要获取服务端提供的配置信息接口，获取权限验证的相关配置。比如我获取配置信息的接口是：http://m.ximalaya.com/x-third...返回结果如下：{"appId":"wx3a4b4454f28a932b","timestamp":1541226502,"nonceStr":"705a85bb-1e66-4a54-85a8-ebef769faee6","signature":"3b4e00872606b69438c168c13fad772327b1d1b3"}编写配置微信共享公共代码//wsxdkcommon.jsimportaxiosfrom'axios'/***获取微信分享配置接口地址*更改项目时直接复制文件，修改此接口地址直接使用微信分享*/constGET_SHARE_CONFIG_URL='/x-thirdparty-web/weixinJssdk/config?signatureUrl=http%3A%2F%2Fm.ximalaya.com%2F49265909%2Falbum%2F11501536%2F&thirdpartyId=17&_=1541230577945';letwxconfig=null;/***初始化微信分享配置*/asyncfunctionConfiginitWeiXin){尝试{const{data}=awaitaxios.get(GET_SHARE_CONFIG_URL);wxconfig=数据；wx.config({debug:true,//开启debug模式，所有API调用的返回值都会在客户端提示，如果想查看传入的参数，可以在PC端打开，参数信息会通过日志打出来，只会打印在PC端appId:wxconfig.appId,//必填，公众号的唯一标识timestamp:wxconfig.timestamp,//必填，生成签名的时间戳nonceStr:wxconfig.nonceStr,//必填，签名生成的随机字符串：wxconfig.signature,//必填,签名jsApiList:[//必填,需要使用的JS接口列表'checkJsApi',//判断当前客户端是否支持指定的JS接口'onMenuShareTimeline',//获取“分享到”朋友圈"按钮点击状态和自定义分享内容接口'onMenuShareAppMessage',//获取“分享给好友”按钮点击状态和自定义分享内容接口'onMenuShareQQ',//获取“分享到QQ”按钮点击状态和自定义分享内容接口'onMenuShareWeibo',//获取“分享到腾讯微博”按钮的点击状态并自定义分享内容接口'onMenuShareQZone',//获取“分享到QQ空间”按钮的点击状态并自定义分享内容内容界面'hideMenuItems',//批量隐藏功能按钮界面'showMenuItems',//批量显示功能按钮界面'hideAllNonBaseMenuItem',//隐藏所有非基本按钮界面'showAllNonBaseMenuItem',//显示所有功能按钮界面'translateVoice',//识别音频并返回识别结果接口'startRecord',//开始录音接口'stopRecord',//停止录音接口'onVoiceRecordEnd','playVoice',//播放语音接口'onVoicePlayEnd','pauseVoice',//暂停播放接口'stopVoice',//停止播放接口'uploadVoice',//上传语音接口'downloadVoice',//下载语音接口'chooseImage',//手机拍照或选图接口'previewImage'albums,//预览图片接口'uploadImage',//上传图片接口'downloadImage',//下载图片接口'getNetworkType',//获取网络状态接口'openLocation',//使用微信内置地图查看位置interface'getLocation',//获取地理位置interface'hideOptionMenu',//隐藏右上角菜单interface'showOptionMenu',//显示右上角菜单interface'closeWindow',//关闭当前网页窗口接口'扫描二维码'，//调用微信扫描接口'chooseWXPay',//发起微信支付请求'openProductSpecificView',//跳转到微信商品页面接口'addCard',//批量添加优惠券接口'chooseCard',//调用店铺适用的卡券列表，获取用户选择列表'openCard''//查看微信卡包中的优惠券接口]});}catch(e){console.error(e);}};exportdefault{/***设置微信分享*@paramopts*/share(opts){if(wx){if(!wxconfig){initWeiXinConfig();}//默认配置constdefaultOpts={title:'互联网之子',desc:'在成长的过程中，我慢慢发现，身边的一切，别人告诉我的一切，那些所谓的东西本来就是，不一定是，事情是可以改变的，更重要的是，既然有些事情是错的，就应该改变。',link:window.location.href,imgUrl:'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',trigger:function(res){//不要尝试本次使用trigger使用ajax异步请求修改分享内容，因为客户端的分享操作是同步操作，此时使用ajax的返回包不会返回console.log('用户点击分享到朋友圈',res);},成功:function(res){console.log('shared');},取消:function(res){console.log('cancelled');},失败:函数(res){console.log(JSON.stringify(res));}}wx.ready(function(){//分享到朋友圈wx.onMenuShareTimeline({...defaultOpts,...opts,...{title:opts.desc,desc:opts.title}});//分享给好友wx.onMenuShareAppMessage({...defaultOpts,...opts});//分享到QQwx.onMenuShareQQ({...defaultOpts,...opts});//分享到腾讯微博wx.onMenuShareWeibo({...defaultOpts,...opts})//分享到QQ空间wx.onMenuShareQZone({...defaultOpts,...opts});});wx.error(function(res){console.log('error=>',res);});}else{console.log('当前不是微信环境');}}}4.在入口文件中配置分享在vue的入口文件中配置微信的二次分享。分享文案可根据您的业务进行调整。注意：二次分享必须部署到你配置的JS接口安全域名才能看到。影响。//src/main.jsimportwxsdkfrom'./common/wxsdk'//配置微信分享wxsdk.share({title:'网络之子',desc:'在成长的过程中，慢慢发现我周围的所有事情，人们告诉我的所有事情，那些应该是的事情，它们注定是，它们不一定是，事情可以改变。更重要的是，因为有些事情是错误的，他们应该做改变。',imgUrl:'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C25%2C550%2C363%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=afce76f80055b31988b6d8357e99ae14/267f9e2f070828381f3de6edb299a9014c08f112.jpg',trigger:function(res){//不要尝试在trigger中使用ajax异步请求修改分享内容，因为客户端分享操作是同步操作，使用ajax的返回包不会返回console.log('User点击分享到朋友圈',res);},成功:function(res){console.log('shared');},取消:function(res){console.log('cancelled');},失败:函数(res){console.log(JSON.stringify(res));}});至此，微信的第二次分享就完成了。
