一、背景

        由于本人平常开发的都是一些PC端后台管理系统、移动端等等，微信小程序、公众号接触较少，接触也是协同开发，今天头一次要将本地开发的H5发版成公众号并且测试。可把我难为坏了(各种环境、各种申请、各种跨域问题)，不停的百度他人的经验，也不停的翻阅微信官方文档，但由于是第一次，写起来还是比较头疼，也遇到了很多坑。现在终于搞定，于是决定将这些问题记录下来，以后忘了可以来看看，也给其他第一次做公众号的提供一些经验~

二、步骤

        当前我开发的页面是用vue写的h5页面，经过这次发版，我总结了几个步骤如下：

1、微信环境绑定

2、代码三段（前端：判断环境、截取、申请获取用户信息） 

3、本地跑起服务，将微信提供的白名单文件放入项目根目录

1.微信环境绑定

首先，需要公司在公司申请的微信测试号上，将你加入公司微信开发权限。然后，下载微信官方提供的软件：微信开发者工具，点开以后我们选择公众号，如下图：

这时我们需要一个域名，这个域名是你本地资源的域名，一般开发时有需要，公司都会帮你申请的(当然如果你要部署到正式环境也是可以的，只是这样在开发时，有一点改动就要麻烦运维人员重新给你部署，只要人家不打你，可以这么做)，申请好域名后，需要让公司管理人员在微信管理平台上，将你申请的域名添加到白名单中，这样你在微信开发工具打开时，就属于微信环境，可以调微信的API啦！(但是在添加时，需要在你项目根目录放一个官方提供的txt文件，这个我后面第三步会说到)

打开以后在头部会有一个URL栏，你输入你要进入的URL链接就ok！

2、代码三段

这个是前端代码中最重要的部分，分为三部分：

第一部分

// 判断是否为公众号模拟器环境

const isWechat = () => {

  return (

    String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) ===

    "micromessenger"

  );

};

这部分只会返回true或false 走true就证明是当前是微信环境

第二部分

// 判断公众号截取code

const getUrlParam = name => {

  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

  let r = window.location.search.substr(1).match(reg);

  // console.log(1);

  if (r != null) {

    return unescape(r[2]);

  }

  return null;

};

这部分代码用于在用户允许微信授权后，截取微信返回给你的用户code(后续可以用这个code去获取其他用户信息，例如：openid等)。

第三部分

if(!isWechat()){

        console.log('当前不处于微信环境,请用微信环境打开');

      }

      if (isWechat()) {

        let appid = "xxxxxxxx"; //为测试号id

        let secret = "xxxxxxxxxx"  // 测试号的appsecret,一般后端用，为了记录我在此处写上了，如果需要，则要找微信公众平台管理员要这个appsecret

        let code = getUrlParam("code"); //是否存在code

        let local = window.location.href; // 第一步中获取的域名

        if (code == null || code === "") {

          //不存在就打开上面的地址进行授权

          // encodeURIComponent(local)

          window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(

            local

          )}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;

        } else {

          console.log("*****************截取用户的code：",code);

          // 此处已经拿到了用户 code 接下来用这个code去调后端的接口，拿到其他信息及token

        }

      }

    },

如图，到这里，基本上就已经能拿到想要的数据了。但是我上面也说了，我是通过将我自己的主机作为服务器，单独起了一个web服务来进行调试的，所以有了第三步。也记录一下如何操作。

 3.本地跑起服务，将微信提供的白名单文件放入项目根目录

由于我是将自己的主机作为服务器，所以想跑服务，要先安装第三方依赖http-server

安装node-js ---> npm install http-server -g --->  使用 http-server 启动本地服务，命令为：  hs -o -p 80（端口号） --- > ctrl + C 停止服务

此时要先将你的H5页面 npm run build 打一个包，在打包的根目录中，放入微信要求的txt文件

然后在根目录运行 hs -o -p 80 

 

这样就是运行成功了。 这时打开图中的http地址就可以访问到你的项目路径。

接下来就去微信开发者工具获取用户信息就可以啦！