需求：微信扫描二维码跳转到设置的链接，然后分享到微信好友或朋友圈，配置分享界面样式首先生成跳转链接二维码https://segmentfault.com/a/11...（这里专门写了如何生成二维码）接下来我们来讨论一下微信分享的具体配置以及遇到的问题。1.配置微信分享界面。我们系统中使用的路由跳转已经被权限控制了。配置路由时，如果没有登录，会跳转到登录界面，或者请求界面时，后台做token校验，会影响分享界面，所以配置分享界面路由在与login同级（即外层）。在请求接口的时候，我们也配置了微信分享路由，没有验证token。我自己的配置就像router/index.js...{path:'/wechat-share',name:'wechat-share',component:WechatShare},{path:'/login',name:'login',component:Login}...main.jsrouter.beforeEach((to,from,next)=>{//如果没有session信息则不能跳转if(localStorage.getItem('userInfo_admin')){next()}else{//如果是登录界面或者微信分享界面，不需要session验证if(to.path==='/login'||to.path==='/wechat-share'){next()}else{next({path:'/login'})}}请求接口文件，封装http.js//请求拦截器axios.interceptors.request.use(config=>{//如果不是登录接口，或者微信分享接口需要验证tokenif(window.location.hash.indexOf('login')===-1&&window.location.hash.indexOf('wechat-share')===-1){consttoken=store.state.userInfo.Authorizationtoken&&(config.headers.Authorization=token)}returnconfig}2.获取微信配置信息t通过接口（与后台通信）。通常接口只需要传递转码后的url，返回我们需要的配置信息axios.get('接口地址',{params:{url:encodeURIComponent(window.location.href.split('#')[0])}}).then(res=>{}).catch(error=>{})注意：这里的url是通过window.location.href.split('#')获取到数字'#'之前的内容，然后进行编码，传递给后台获取这里的内容只是实力。实际项目中可以将获取的信息写在vuexactions中3.微信分享配置//installwxsdknpminstallweixin-js-sdk--save//引入importwxfrom'weixin-js-intothecomponentsdk'//configureinmounted//appId,timestamp,nonceStr,singature都可以在接口中获取到。wx.config({debug:true,//开启debug模式，所有API调用的返回值都会显示在客户端alert上，如果想查看传入的参数，可以在PC端打开，而参数信息会通过log打印出来，只会在PC端打印。appId:'',//必填，公众号的唯一标识timestamp:,//必填，生成签名的时间戳nonceStr:'',//必填，生成签名的随机字符串signature:'',//必填，签名见附件1jsApiList:['onMenuShareAppMessage','onMenuShareTimeline']//必填，需要使用的JS接口列表})wx.ready(function(){//通过ready接口处理验证成功//config信息校验成功后会执行ready方法wx.onMenuShareAppMessage({//分享给朋友，填写config中要用到的JS接口列表，然后就可以使用这个方法了title:'hereisthetitle',//分享标题desc:'Thisisatest!',//分享描述链接:'link',//分享链接imgUrl:'picture',//分享图标类型:'',//分享类型，音乐，视频或链接，不填则默认为链接dataUrl:'',//如果类型为音乐或视频，必须提供数据链接，并且默认为空success:function(){//用户确认分享后执行的回调函数},cancel:function(){//用户取消分享后执行的回调函数}})wx.onMenuShareTimeline({//Share朋友圈title:'Title',//分享标题link:'Link',imgUrl:'Image',//分享图标success:function(){//用户确认分享后执行的回调函数},cancel:function(){//用户取消分享后执行的回调函数Number}})})wx.error(function(res){//通过error接口处理校验失败//如果config信息校验失败，则执行error函数})我的配置代码和遇到的坑数据(){return{config:{url:encodeURIComponent(this.$store.getters.base_url),title:'项目名称',desc:'项目描述',img:'https://pic4.zhimg.com/80/v2-9e7354788266d6ceae5a0839e24d9c1a_hd.jpg'},projectInfo:''}}...//通过后台接口获取微信配置信息awaitthis.$store.dispatch('getWechatConfigAction',encodeURIComponent(window.location.href.split('#')[0]))//alert(this.projectInfo)//接口获取接口内容//alert(JSON.stringify(this.config,null,4))//alert(JSON.stringify(this.$store.state.wxConfig,null,4))wx.config({debug:true,appId:this.$store.state.wxConfig.appId，时间戳：this.$store.state.wxConfig.timestamp，nonceStr：this.$store.state.wxConfig.nonceStr，签名：this.$store.state.wxConfig.signature，jsApiList：['onMenuShareAppMessage','onMenuShareTimeline']})wx.ready(()=>{wx.onMenuShareAppMessage({title:this.config.title,//分享标题desc:this.config.content,//分享描述链接:window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1],//分享链接imgUrl:this.config.imgUrl,//Shareicontype:'link',//分享类型，音乐，视频或链接，不填默认为链接dataUrl:'',//如果类型为音乐或video，需要提供一个数据链接，默认为空,"分享成功"]);this.$message({type:'success',message:'分享成功'})//config.success()},cancel:function(){//用户取消分享后执行的回调函数//_hmt.push(['_trackEvent',config.title,"分享给好友","取消分享"]);this.$message({type:'success',message:'Cancelsharing'})//config.cancel()},fail:function(res){this.$message({type:'error',message:'分享失败'})//config.fail()}})wx.onMenuShareTimeline({title:this.config.title,//分享标题desc:this.config.content,//分享描述link:window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1],//分享链接imgUrl:this.config.imgUrl,//分享图标type:'link',//分享类型，音乐，视频或链接，不填默认为链接dataUrl:'',//如果类型为音乐或视频，必须提供数据链接，默认为emptysuccess:function(){//用户确认分享后执行的回调函数//_hmt.push(['_trackEvent',config.title,"分享给好友","分享成功"]);this.$message({type:'success',message:'分享成功'})//config.success()},cancel:function(){//用户取消分享后执行的回调函数//_hmt.push(['_trackEvent',config.title,"分享给好友","取消分享"]);this.$message({type:'success',message:'Cancelsharing'})//config.cancel()},fail:function(res){this.$message({type:'error',message:'分享失败'})//config.fail()}})})wx.error(()=>{console.log('请求分享数据失败')//config.fail()})问题一：//配置完成后，弹出如下信息{errorMsg:config:invalidsignature}//这是因为请求配置信息的接口参数url错误，你可以通过encodeURIComponent(window.location.href.split('#')[0])获取问题2：//配置完成后，弹出如下信息{errorMsg:config:invalidurldomain}//这是因为微信公众号设置如果没有设置，可以按照下图设置完整代码//分享界面代码
