微信公众号h5开发指南(获取用户信息流程)

jumping
3,078 阅读2分钟

微信公众号h5开发指南(获取用户信息流程)

最近公司要做一个公众号的H5页面，之前做的也基本忘的差不多，只好从头弄起，同时记录下整个的过程供大家以后在做项目的时候参考（避坑）

客户需要准备的东西

因为我们需要通过网页授权获取到用户的个人信息，而微信只让服务号有这个权限，所以需要客户有一个服务号； 然后是一个我们开发完成后需要发布的服务器以及备案过的域名，这个需要在微信公众号管理后台去配置，见下图

image.png 这里设置了网页授权域名，我们才能跑通微信授权的回调 总结：

  1. 需要服务号
  2. 需要备案域名

我们需要准备的东西

开发初期我们申请一个测试号即可，涉及微信的业务我们可以通过测试号进行开发 因为我们只需要拿到用户信息，所以我们只需要两步操作 1、关注测试号

image.png 2、在网页服务-网页账号这里加上本地开发的IP地址（带端口号）

image.png

image.png

获取用户信息步骤

第一步，我们需要通过微信回调来拿到code，这里只需要appID即可，

goToAuth () {
      const redirectUrl = encodeURIComponent(location.href)
      location.href =
        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4499748db18c3913&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
    },

第二步，拿到回调的code之后传给后端，拿用户信息的操作都可以放到后端去进行

 getUserInfo (code) {
      const params = {
        code: code
      }
      HomeAPI.APIgetWebAuthorizationInfo(params).then(res => {
        if (res.code === 200) {
          this.userInfo = res.data
          this.peopleImg = this.userInfo.headimgurl
          this.openId = this.userInfo.openid
        }
      })
    },

总结：前端在这里面做的主要是通过微信的auth2.0认证拿到回调的code，传给后台即可，其他各种钉钉 小程序之类的大多也都是前端提供code就行（因为前端通过code调微信的API会出现跨域的问题）

上线之前的配置

上线之前我们需要把在客户的服务号上把我们发布的前台页面的域名写到设置里面，如下图

image.png

再把前台页面地址给加到自定义菜单里面

设置好之后 微信关注公众号即可访问了

参考文档

avatar
文章
阅读
粉丝