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

        之前碰到一个需求,公众号的菜单跳进小程序,前端需要获取到公众号的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可以拿到我们需要的参数。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序公众号H5分享卡片是指在微信公众号平台上,通过小程序H5页面来创建可分享的卡片。这种分享卡片可以包含各种信息,如标题、描述、图片、链接等,用于吸引用户点击并进入小程序H5页面。 在微信小程序中,我们可以通过设置小程序的分享参数来生成分享卡片。开发者可以在小程序的代码中,通过调用相关API来设置分享标题、描述和图片等信息,当用户点击分享按钮时,系统会自动根据设置生成分享卡片供用户分享到朋友圈、好友等渠道。 而在微信公众号H5页面中,我们可以使用微信提供的JSSDK来实现分享功能。开发者可以在H5页面中引入微信提供的JSSDK的使用,在页面加载完成后,通过调用相关API来设置分享标题、描述和图片等信息。当用户点击分享按钮时,系统会调用微信的接口生成分享卡片供用户分享。 通过微信小程序公众号H5分享卡片,用户可以将自己喜欢的小程序H5页面分享给朋友,让朋友也能够体验到这些应用的功能。而对于开发者来说,分享功能可以增加应用的曝光度和用户量,提高用户参与度和用户粘性。 总之,微信小程序公众号H5分享卡片是一种方便快捷地实现小程序H5页面分享功能的方式,能够帮助用户分享他们感兴趣的内容,也能够帮助开发者提升应用的影响力和用户数量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值