之前碰到一个需求,公众号的菜单跳进小程序,前端需要获取到公众号的code传给后端来确认用户的openId,但是咱们前端如何通过小程序或者H5,来获取公众号的code呢?

        通过查阅资料,我来总结一下此次遇到的问题及解决方案:

        1.公众号菜单跳转H5页面

        这个比较简单,直接配一下地址就可以 。

 

        这个地址 https://open.weixin.qq.com/connect/oauth2/authorize 是跳转微信网页获取code的地址,后面拼接的参数appid是公众号的appid;

        redirect_uri是回调地址,这个回调地址需要在公众号上配置一下域名,即网页授权域名,否则会报回地址错误;

        response_type=code,重定向后在回调地址后面会拼接上我们需要的code参数;

        scope=snsapi_base,这是微信静默授权的标识,有两个参数,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid)snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息;

        state是重定向之后带的参数,也是带在回调嫡长子后面的。

菜单直接填写上面的地址,会将code拼接到到https://xsyapp.csuat.cmburl.cn/officialTest的后面,即重定向为https://xsyapp.csuat.cmburl.cn/officialTest?code=....&state=....这种形式;

        2.公众号菜单跳转微信小程序页面

        微信小程序使用组件webview,嵌入H5页面,和上面一样的道理,url是微信地址拼接回调地址,在回调地址里面获取code

        

java 获取前端参数乱码 前端获取code_java 获取前端参数乱码

         生产环境和测试环境的公众号appid是不一样的,在测试环境也是可以测试跳转的;注意回调地址一定要在公众号上配过域名哦~

java 获取前端参数乱码 前端获取code_公众号_02

         在H5页面将获取到的code,传回微信小程序,页面跳转基本可以 做到无感;

java 获取前端参数乱码 前端获取code_java 获取前端参数乱码_03

         如果是以/结尾的地址,直接用this.$route.query就可以获取,如果是用#结尾的地址,可以用下面的方式来获取code,我尝试过返回的地址是  "https://xxx.cn/?code=....&state=.....#/officialTest"

java 获取前端参数乱码 前端获取code_前端_04

         在微信小程序里面onload生命周期中,通过options可以拿到我们需要的参数。

java 获取前端参数乱码 前端获取code_小程序_05