一直想做微信公众号web开发。公司忙，没时间开发，所以也没什么想法。前两天自己通过自己摸索和查找资料，终于成功通过nodejs在本地获取到微信的access_token和签名，以及调用微信的接口。因为作者花了很长时间，所以没有找到比较完整和详细的。项目参考有很多坑，下面详细说一下我做的过程，从最初微信注册公众号到微信接口调用成功，给没有的朋友参考开发经验，第一次写文章，文笔不好，请勿怪罪。1.注册微信公众号如何注册微信公众号，可以自行百度，注册教程网上有很多，不要在这里废话开发者模式”登录官网后微信公众平台，我们第一步是成为开发者，在首页点击“基础配置”，右侧会出现一个页面，上面有“成为开发者”的按钮，点击它，我来了我已经adeveloper，所以就没有了3.查看基本信息成为开发者后，可以看到如下页面，我们可以看到你的AppId和Appsecret（这个很重要，最好记住在哪，在手机/笔记本都可以）4.申请微信公众号测试号为什么要申请测试号，一是因为微信公众号的接口有调用次数限制，二是测试account比较方便，可以乱搞，哈哈哈，点击“开发”->开发者工具”，就在之前点击的“基本配置”下面（如果后面有点击“xxx”的，一般在页面左侧)，可以看到如下页面，选择“公众平台测试账号”，然后我们需要用手机微信扫码登录5.测试账号配置登录成功后，会看到如下页面。在我圈出的红框内，填写你的域名。比如我的vue本地项目启动成功后是localhost:9999，可以填写localhost:9999，如果是云服务器域名，可以填写自己申请的域名，比如www。xxx.com，上面的接口配置信息暂时配置不了，至此我们就完成了整个微信的公众号测试账号配置6.创建一个vue项目。这里的前提是你安装过node，了解vue。我们通过vue-cli创建一个项目。我不会发布项目创建过程的屏幕截图。移步这里查看，不懂的也可以百度一下。哈哈哈，网上有很多通过vue-cli创建vue项目的方法。我用vue-cli2.0创建这个项目，现在是vue-cli3.0。还在摸索中嘿嘿...下图是vue-cli创建的项目7.node配置注意上图中server文件夹需要自己创建，vue-cli创建的项目做的没有这个文件夹，里面有相关的nodejs代码，看看里面都有什么文件。下图中，我已经标注了主要的文件，另外两个链接的是Mysql数据库。这里就不说了，自己也不是很擅长，也算是给别人参考一下吧，哈哈哈，不秀丑了。我们先来看看api.js。有一个方法用来获取access_token和signature。这里使用的是axios，所以在vue项目中你要安装axios。接下来，让我们定义appId和appsecret。取值为之前申请测试账号时的appId和appsecret。请求地址在微信开发者文档中。移至微信开发者文档。获取到access_token后，我们通过access_token获取微信签名（微信签名算法在sign.js中，稍后贴出），然后将获取到的数据返回。这里定义的config对象也可以在微信开发者文档中查看，也可以在Front-end中定义-----我们通过module.exports暴露代码，以引用微信签名算法varcreateNonceStr=function(){returnMath.random().toString(36).substr(2,15);};varcreateTimestamp=function(){returnparseInt(newDate().getTime()/1000)+'';};varraw=function(args){varkeys=Object.keys(args);keys=keys.sort();varnewArgs={};keys.forEach(函数n(key){newArgs[key.toLowerCase()]=args[key];});var字符串='';for(varkinnewArgs){string+='&'+k+'='+newArgs[k];}string=string.substr(1);returnstring;};/***@synopsissignaturealgorithm**@paramjsapi_ticketjsapi_ticketforsignature*@paramurlsignatureurl，注意必须动态get，不能hardcode**@returns*/varsign=function(jsapi_ticket,url){varret={jsapi_ticket:jsapi_ticket,nonceStr:createNonceStr(),timestamp:createTimestamp(),url:url};varstring=raw(ret);jsSHA=require('jssha');shaObj=newjsSHA(string,'TEXT');ret.signature=shaObj.getHash('SHA-1','HEX');返回ret；}；模块。出口=标志；让我们再看看router.js。代码很少，就是你前端要请求的路由地址。这里我们会用到express，所以你也需要保证你的vue项目中的node_modules包中有express，没有的安装即可。如果不知道怎么安装，可以百度一下（已经测试过了）。无论如何，您可以安装缺少的任何模块。让我们离题。下面继续说下图中的代码。我们引入前面的api.js，然后调用express。Router（express.Router可以认为是一个只处理中间件和控制器的微型app，有get、post、all、use等类似app的方法），定义了前端请求接口地址'/getToken'，调用api.js中定义的方法，同样路由器需要暴露。最后，让我们看看index.js。这里介绍一下我们刚刚写的router.js，express，创建一个express应用app（也就是第4行代码），设置request。header和跨域以及返回的状态码，app.use()是后端api路由，'/api'是调用中间件函数的路径，我在前端使用代理，请求路径已经添加了'/api'，所以后端的所有请求路径也要添加，最后app.listen(8088)监听端口号（可以随便用，端口号不需要和我一样）。接下来，我们使用cmder（或者你使用window自带的cmd命令打开DOS窗口）进入server文件夹，输入nodeindex.js启动8088端口，看到启动成功...8.启动vue项目，通过cmder进入vue项目所在目录，npmrundevstart9.前端环境配置然后我在static文件夹下新建了一个js文件夹，里面放了一个环境配置文件。本地请求接口为localhost:8088。您还可以添加生产环境。我这里没有加，比如'production':{apiRoot:'http://www.xxx.cn:8088'}不要加下面的端口号8088就行了。我不知道这是否可能。还没试过。。。那就在index.html中的“src”文件夹中引用，在这个文件下创建一个api文件夹，在这个文件下创建一个index.js来封装我们的前端请求。这里的window._ENV.apiRoot是我在static文件夹下的环境配置文件。之前我们已经在index.html中设置好了引入了，所以这里可以使用。这里为什么要传url，因为在node.js中请求签名时签名算法需要10。修改config配置。打开vue项目下config文件夹下的index.js，设置代理，因为这里加了“/api”，所以后端一定要加。修改配置后需要重启vue项目。11、测试获取token和签名，调用微信接口。目录结构，我删除了vue-cli自动创建的部分，然后自己创建的部分。我们在pages文件夹中创建一个页面组件索引。下面是index.vue中的代码。这里我用的是iview，所以就是
