微信公众号内嵌H5网页授权步骤

参考地址：
1、https://asyncoder.com/2018/09/21/%E5%9C%A8%E5%BE%AE%E4%BF%A1H5%E7%BD%91%E9%A1%B5%E4%B8%AD%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF/
2、https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

主要注意点就是回调地址：

我是用vue框架开发的，所以单独做了个页面去授权回调：

redirectToAuthPage(){
   const callbackURL = encodeURIComponent('https://ad.jfpays.com/wcpn-mk/index.html#/empower')
   const wechatId = 'wxed45c756a3d640e4'
   const redirectURI = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wechatId}&redirect_uri=${callbackURL}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`
   location.replace(redirectURI)
},
注释：https://ad.jfpays.com/wcpn-mk/index.html#/empower是服务器地址下授权成功后跳转的页面，我的路由重定向的是一个单独的页面去授权，所以从公众号进入H5网页，先进行默认授权成功后回调到vue项目下的empower页面，我是用的默认授权，如果要弹出授权框，则需要将scope=snsapi_base改为snsapi_userinfo，state可以参考微信公众号的开发文档，这个是选填参数

授权回调成功后会跳转到empower页面去解析回调的地址里面的code

getUrlParam (name) {
     var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
     let url = window.location.href
     let search = url.split('?')[1]
     //console.log(search)
     if (search){
         var r = search.substr(0).match(reg)
         if (r !== null) return unescape(r[2])
         return null
     } else {
         return null
     }
 },

拿到了code,基本上前端的工作就结束了，剩下的就是将code传递给后端去换取openid和access_token等用户信息

如有疑问，请加我微信，欢迎大家交流：zhao17733750596