小程序及H5如何获取公众号code?

Posted 2023-03-29 angelar12138

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

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

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

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

        https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxffc8496b065b1490&redirect_uri=https://xxxx.cn/officialTest&response_type=code&scope=snsapi_base&state=......#wechat_redirect

        这个地址 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

        

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

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

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

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