完成，上面是证明服务器是我的，后面还需要证明前端项目是我的，这个就跳过了，因为太简单，直接下载那个文件，放到自己服务器中，前端项目的index.html同级即可
上面的操作，是只要想进行微信公页面开发，必须要有的步骤，一切的基础。
首先顺着功能使用流程，顺一下实现此功能的方法：
用户在微信打开页面后，立即或者通过方法触发ajax，把当前url和一些state（自定义的数据，因为弹窗请求用户授权，是需要跳转页面的，这个state就是会帮你带到下个页面链接中的数据）作为请求参数，请求自己的后台接口。
后台请求微信服务器，把以下作为参数，拼装到某个固定的微信指定的url后，返回给前端，参数为：
appId：自己的AppId
redirect_uri：前端给的url
scope：授权方式，是静默授权（只能获取用户openId）还是弹窗授权（能获取用户微信个人信息）
state：要带到新页面的参数
前端拿到后端拼好的这个url，直接window.location.href暴力跳转
如果静默授权，则直接用户无感，如果是弹窗授权，则新页面（微信方提供的页面）会弹窗询问用户，是否授权
用户同意授权后，微信再次跳转页面，即跳转到之前传的你的url地址中，还会把state参数给你带上，此外，还多了个code参数，即openId
新页面中，可以使用用户的openId，再加上自己的AppId和AppSecret，调用微信的接口，获取用户的access_token
最后再使用用户的openId和access_token，成功获取用户信息
下面是前端获取微信授权的...html页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 页面描述 --> <meta content=""/> <!-- 页面关键词 --> <meta content="" /> <!-- 搜索引擎抓取 --> <meta content="index,follow"/> <!-- 启用360浏览器的极速模式(webkit) --> <meta content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 不让百度转码 --> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta content="true"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="yes"> <meta content="yes"> <link type="image/x-icon" href="https://www.jb51.net/static/favicon.ico" > <title>微信</title> <style> html, body { background-color: skyblue; font-size: 16px; height: 50%; width: 100%; } #index { padding: 10px; } #index .box > div { cursor: pointer; background-color: #fff; display: inline-block; padding: 5px; margin: 10px; } #index .box .getUserInfo { display: none; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> </head> <body> <div> <div> <div type="snsapi_base">获取微信授权(静默)</div> <div type="snsapi_userinfo">获取微信授权(弹框)</div> <br> <div>扫一扫</div> <br> <div>获取用户信息</div> </div> <div></div> </div> </body> <script> let BASE_URL = 'http://wxtestapi.junlli.com' // 获取 url 参数 const getValue = () => { let flag = decodeURI(window.location.search.substr(1)); if (!flag) return undefined let arr = flag.split('&') if (arr.length <= 0) return undefined let obj = {} for (let i = 0; i < arr.length; i++) { let tempArr = arr[i].split('=') obj[tempArr[0]] = tempArr[1] } return obj } let urlParams = getValue() let code // 判断是否有code if (urlParams && urlParams.code) { code = urlParams.code $('.getUserInfo').css('display', 'inline-block') } $('.getUserInfo').on('click', function() { if (!code) return alert('请重新获取授权') $.ajax({ url: BASE_URL + '/getUserInfo', type: 'post', data: { code, }, success: function(data) { console.log(data) $('.userInfo').html(JSON.stringify(data)) }, error: function(error) { console.log(error) alert('请重新获取授权') } }) }) // 获取微信授权 $('.box .initOauth2').on('click', function() { wxInitOauth2($(this).attr('type')) }) // 初始化 微信授权 wxInitOauth2 = type => { let url = window.location.origin + window.location.pathname console.log('url', url) $.ajax({ url: BASE_URL + '/getOauth2', type: 'post', data: { url, type, state: 'abcde' }, success: function(data) { // 去跳转 window.location.href = data.url // console.log(data) }, error: function(error) { console.log(error) }, }) } </script> </html>
下面是node后台代码