微信公众号开发需要获取用户的openid，根据微信公众号的官方文档说明，需要做以下几个准备工作

1.开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”配置选项中，修改授权回调域名。请注意，这里填写的是域名。注意：不能是ip地址

  如果不进行域名授权配置，微信在授权回调的时候会返回redirect_uri错误。

2.配置域名是要求在web服务器中有微信提供的能访问到的文件，所以还需要一个web服务器，如下图

 

第一步：跳转到授权页，获取code

 let urlNow=encodeURIComponent(window.location.href);
// let scope='snsapi_userinfo';    //snsapi_userinfo 非静默授权用户有感知 snsapi_base 静默授权用户无感知  

let url= 'https://open.weixin.qq.com'+'/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+urlNow+'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
window.location.href = url

授权成功后会重定向的页面中，会带有code参数，通过以下代码获取code，code每5分钟会更新，请勿保存。

getUrlKey:function(name){//获取url 参数
    return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
},

第二步.通过code换取网页授权openid

this.$axios.get('https://api.weixin.qq.com'+'/sns/oauth2/access_token?appid='+appid+'&secret='+appsecret+'&code='+code+'&grant_type=authorization_code')
  .then(res=>{
    
      this.openid = res.data.openid;
   }).catch(error=>{
        
})

第三步.解决刚开始的两个问题

3.1由于本地测试没有域名，可以使用natapp用临时域名映射到本地。参考

3.2有了配置后需要配置web服务器，这里我使用Tomcat，下载Tomcat并安装。

打开Tomcat的目录进入webapps目录下，新建文件夹：myapp,并在该目录下创建WEB-INF文件夹，新建web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1"
  metadata-complete="true">

  <display-name>myword</display-name>
  <description>
     <error-code>404</error-code>
     <location>/index.html</location>
  </description>

</web-app>

将从微信公众号下载下来的text文件放入myapp文件夹下，同时在微信开发者工具配置域名。点击保存

第四步.vue打包

打包前在vue.config.js中配置（这里使用vue-cli）。

  publicPath: process.env.NODE_ENV === 'production'
    ? '/myapp/'
    : '/',

执行 npm run build

将打包好的放入tomcat的myapp文件夹下

此时的目录结构如上。

启动Tomcat，mac的启动命令： sudo sh ./startup.sh

 

5.跨域

由于微信限制，微信授权页面必须在微信开发中工具中打开。由于本地服务和微信接口的api存在跨域问题，本地调试时可以调用一下命令打开微信开发中工具：

open -a /Applications/wechatwebdevtools.app --args --disable-web-security --user-data-dir --allow-running-insecure-content

或者使用Nginx解决跨域问题。

在微信开发中工具中输入： http://xxx.xxx.cc/myapp