以简单的前端页面对接公众号为例，从公众号配置到拉起授权获取用户信息等，目的是整理开发流程及方式，所以会用原生的html
准备工作
1、默认你已经申请了公众号，这里不做介绍
2、一个前端简单的页面
3、一个本地服务，这里使用 http-server 一个超轻量级web服务器
4、微信开发者工具，可直接前往官网下载 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
5、公众号配置
首先准备一个前端的页面，放在你要开发的目录里面，这里可以是一个非常简单的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
</head>
<body>
<button>一个按钮</button>
</body>
<script type="text/javascript">
</script>
</html>
页面建好了之后我们再安装本地服务器，安装 http-server 需要安装 node，安装方法可参考这里
安装node之后，运行如下命令安装 http-server
sudo npm install http-server -g
安装成功后，cd到你的项目目录，然后执行
http-server -p80
-p80的意思是指定端口号，看到如下信息，表示启动成功了
然后通过浏览器访问就可以了，例如： http://10.129.186.134:80/index1.html 当然这里我们是开发公众号网页，所以打开上面下载的微信开发者工具，把地址粘贴进去即可
接下来就是公众号的配置，打开微信公众平台，找到左侧 设置与开发 > 开发者工具 > 公众平台测试账号 ，根据提示注册测试账号
找到测试号二维码 关注并绑定你的微信
找到 网页授权获取用户基本信息 点击修改，然后把你本地起的服务器域名填写进去，注意不要加http
然后我们回到我的的html页面，给按钮添加点击事件，用来调起微信授权，我们使用非静默的方式调起授权，有两种方式，具体的介绍以及参数可以查看微信的官方文档 这里我直接把代码贴出来，注意这里面的appId是你的测试号的appId，在公众平台测试账号的顶部显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
</head>
<body>
<button id="btn" onclick="fun()">一个按钮</button>
</body>
<script type="text/javascript">
function fun(){
let appId = "你的appId"//用你的appId
let redirect_uri = "http://10.129.186.134/index1.html"//跳转的回调地址
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + encodeURIComponent(redirect_uri)+ "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect"
}
</script>
</html>
点击按钮我们就会看到
点击同意就会跳转到我们上面代码里设置的回调地址redirect_uri，并在地址栏给我们拼接好code信息等，接下来就可以拿这个code信息去做后面的事情了
以上就是纯前端在开发阶段的一些配置流程
