微信公众号H5页面开发怎么获取用户openid

微信公众号里会嵌套h5页面然后跳转，有时候我们就需要用到用户的openid，今天就为大家介绍一下公众号h5页面怎么获取openid
首先，需要用到公众号的appid，其次需要去公众号里配置好h5页面的域名，就不进行过多介绍了，我们直接上代码
我们需要两个参数，

1，appid
2，重定向地址

因为h5页面不在公众号内，想要获取openid就必须跳转到微信官方给的链接上，然后链接上会带有code跳转回来，我们将code从链接上截取下来传给后端，前端是不能直接获取openid的
授权有两种方式，一个是静默授权一个是需要用户手动授权，具体区别可以去微信公众平台查看
链接是这个：

https://open.weixin.qq.com/connect/oauth2/authorizeappid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

需要注意，appid是需要手动填写的，还有redirect是当前页面的地址，获取成功来的地址
下面是我实现的代码

 getCode() {let appid = "wxf5f771aXXXXXXX"; //个人开发者appidlet redirect = encodeURIComponent(window.location.href); //重定向回来的地址let wx_code = this.getUrlParam("code"); // 截取url中的code//判断有没有codeif (!wx_code) {//获取code的地址。获取成功重定向后地址栏中将会带有code，判断没有code的话，就跳转到微信官方链接上获取，获取成功后会再重定向回来，注意url是需要使用encodeURIComponent处理一下编码的window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorizeappid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;} else {// 获取到了codethis.getOpenId(wx_code); //把code传给后台获取用户信息}},//getUrlParam方法就是使用正则截取地址栏里的codegetUrlParam: function (name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null;},getOpenId(code) {//这里调用后端给的接口吧code传过去就好了}

这就是完整的过程

微信公众号H5页面开发怎么获取用户openid相关推荐

微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
前端实现微信公众号h5页面跳转小程序-成功案例
微信公众号h5页面跳转小程序-成功案例微信公众号h5页面跳转小程序-成功案例,标题已经明确说明,h5页面可以正常跳转微信小程序官网说可以,不是我说的文章目录微信公众号h5页面跳转小程序-成功案 ...
微信公众号h5页面跳转小程序
微信公众号h5页面跳转小程序文章目录微信公众号h5页面跳转小程序前言一.注意二.使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置前言问:h5 页面可以跳转至微信小程序吗? ...
php 公众号指定人发消息,微信公众号客服接口给指定用户openid发送消息
微信公众号客服接口给指定用户openid发送消息 2018-09-23 微信开发文档: 客服接口-发消息接口调用请求说明 http请求方式: POSThttps://api.weixin.qq.co ...
小白专用微信公众号网页授权通过code获取用户信息
新手小编本人已入坑2年也是通过在哈尔滨图灵云培训学习的Java,且年龄也比较大的码农目前在北京也是刚刚才接触微信公众号的网页开发所得经验进行跟大家分享因为代码写的少大多都是无用的重复代码,请大家 ...
微信公众号H5页面获取用户昵称头像等信息（Java）
H5页面获取微信用户信息操作流程 (一)获取微信权限,由微信用户确认 (二)获取相应的ACCESS_TOKEN和OPENID信息 (三)根据ACCESS_TOKEN和OPENID信息获取相应的用户信息 ...
微信公众号H5页面支付JSAPI
1:在微信环境下,我们需要获取到code,拿code去获取openid,在获取openid的时候有2种参数分别是:snsapi_base和snsapi_userinfo,snsapi_base只为获取 ...
利用python生成微信h5_Python + Appium 微信公众号 H5 页面自动化测试
本文内容在以下环境运行成功: Windows10 Python2.7 android-sdk_r24.4.1 Appium-windows-1.15.1 chromedriver_2.40 小米手机 ...
RTFM：腾讯微信公众号H5页面使用微信支付爬坑记
一. 微信公众号支付的流程公众号的页面会在微信环境下打开,所以默认已经有登录态.openID.AppID.AppSecret 都能拿到,申请开通商家支付之后会有 PayKey 和 mch_id (商 ...

微信公众号H5页面开发怎么获取用户openid

微信公众号H5页面开发怎么获取用户openid相关推荐

最新文章

热门文章