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

主要注意点就是回调地址：
我是用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等用户信息