1、背景介绍：目前流行的前后端分离项目，一般都是在不同的域名下。在前后端开发过程中，分别部署在不同的服务器上，会出现跨域的情况，部署上线的时候基本没有这个需求，所以搭建了前端代理服务方便开发。作为后端，需要了解前端的服务结构和基本运行流程。本文主要从前端的角度使用React搭建一个简单的测试项目，在自己搭建的代理服务下实现一个简单的微信分享demo。二、项目基本结构前端测试项目`wechat-app`节点代理服务`proxy-server`后端接口服务`wechat-server`三、构建步骤：3.1．创建React项目创建步骤：（默认机器已经安装node环境和npm包管理工具）1.安装React项目创建工具：npminstall-gcreate-react-app2.创建项目：create-react-appwechat-share3.切换到项目：cdwechat-share4.删除src目录下的所有文件，新建index.js文件5.安装开发必要的工具包初始化：npminit安装react和react-dom：npminstall--savereactreact-dom安装axios(http请求工具)npminstall--saveaxios安装微信jssdknpminstall--saveweixin-js-sdk安装es6环境npminstall--save-devbabel-clinpminstallbabel-core--savenpminstall--savebabel-polyfill3.2inindex.js前端代码写在：分享基本流程：1.配置微信公众号2.写后端服务，以及前端从后端接口获取微信配置参数（后端逻辑参考文档实现）3.初始配置4.检查js分享接口权限5.从后端微信分享配置，初始化微信分享事件导入从“反应”反应；从'react-dom'导入ReactDOM；从'w导入wxeixin-js-sdk';从“axios”导入axios；让wxConfig={};让shareConfig={};functiongetData(response){if(response.status===200){varresData=response.data;返回资源数据；}else{console.log('responseiserror:',response);返回{};}}functiongetWxConfig(){returnaxios.post('share/mobile/getWXConfig',{'url':window.location.href}).then(function(response){varresData=getData(response);if(resData.status&&resData.status===1){returnresData.data;}elseif(resData.data&&resData.data.message){alert(resData.data.message);return{};}}).catch(函数(err){console.log(err);});}functiongetShareConfig(){returnaxios.post('/share/mobile/getShareInfo',{}).then(函数（响应）{varresData=getDat一个回应）;如果(resData.status&&resData.status===1){返回resData.data;}elseif(resData.data&&resData.data.message){警报(resData.data.message);返回{};}}).catch(function(err){console.log(err);});}asyncfunctioninit(){wxConfig=awaitgetWxConfig();shareConfig=awaitgetShareConfig();wx.config({debug:true,//开启debug模式，所有API调用的返回值都会显示在客户端alert上，如果想查看传入的参数，可以在PC端打开，参数信息会通过log，只会在PC端打印appId:wxConfig.appId,//必填，公众号的唯一标识timestamp:wxConfig.timestamp,//必填，生成签名的时间戳nonceStr:wxConfig.noncestr,//必填，签名生成的随机字符串：wxConfig.signature,//必填，签名，见附件一jsApiList:['onMenuShareAppMessage','onMenuShareQQ','onMenuShareTimeline']//必填，需要使用的JS接口列表，所有JS接口列表见附件2});wx.checkJsApi({jsApiList:['onMenuShareAppMessage','onMenuShareQQ','onMenuShareTimeline'],//需要检查的JS接口列表，所有JS接口列表见附录2,success:function(res){console.log('checkJsApiinitsuccess!')}});wx.ready(function(){wx.onMenuShareAppMessage({title:shareConfig.title,//分享标题link:shareConfig.link,//分享链接,链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl:shareConfig.imgUrl,//分享图标success:function(){console.log('分享成功!')},});})}init();classRequestClassextendsReact.Component{render(){return(
