第一次使用微信开发者工具调试vue页面，特此记录一下。

1. 准备工作

内网穿透工具（本人使用的是花生壳）, 微信开发者工具，vue页面

2. 微信公众平台接口测试帐号申请

mp.weixin.qq.com/debug/cgi-b…

3.具体操作

登录之后会自动生成appId,以及appsecret

接下来设置接口配置信息

新建一个node服务，新建一个index.js

//引入express模块
const express = require('express');
//创建app应用对象
const app = express();
//验证服务器有效性
/**
 * 1.微信服务器知道开发者服务器是哪个
 *  -测试号管理页面上填写url开发者服务器地址
 *    -使用ngrok 内网穿透 将本地端口号开启的服务映射外网跨域访问一个地址
 *      -ngrok http 3000
 *  -填写token
 *   -参与微信签名加密的一个参数
 * 2.开发者服务器 - 验证消息是否来自于微信服务器
 * 
 */
const config = {
  token: '自定义',  //随便输入
  appID: '登录获取到的appID',
  appsecret: '登录获取到的appsecret'
}
//接受处理所有消息
app.use((req, res, next) => {
  //微信服务器提交的内容
  res.set('Content-Type','text/plain')
  res.send(req.query.echostr)
  console.log(req.query);

//监听端口号
app.listen(80, () => console.log('服务器启动成功了~'));

执行node index.js执行，控制台打印‘服务器启动成功了’表示启动成功

使用内网穿透

因为我们要和微信客户端进行交互，但我们的ip是本地，所以只能借助内网穿透工具，将本地ip映射到外网。 使用花生壳映射此处注意端口必须为80端口或为443端口。

填写外网地址以及自定义token(此处注意token必须和index.js中的token一致)，点击提交会有成功提示。

配置JS接口安全域名

同样先将启动好的vue页面，进行内网穿透**（此处注意端口不要为8080，防止冲突）**

输入JS接口安全域名，并提交。

扫描二维码并添加账号

授权

找到网页服务，网页账号，选择修改，将vue页面内网穿透出去的域名填入，此处注意不要填写端口！

打开微信开发者工具

访问使用内网穿透出去的vue页面在此页面中调用下面这个地址

'https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appId&redirect_uri=你的url&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect'

这个地址如何生成，以及具体参数参考文档。 developers.weixin.qq.com/doc/offiacc…

注意：参数redirect_uri 需要使用 urlEncode 对访问地址进行转码

通过在微信开发者工具中调用上面生成得url，就会生成一个地址，这个地址中会携带你所需要得code

getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  var r = window.location.search.substr(1).match(reg)
  if (r != null) return unescape(r[2])
  return null
},

调用函数getQueryString，即可获取到code

this.getQueryString('code')

使用微信开发者工具调试vue开发的公众号页面