H5获取OpenID的方法

一、H5获取OpenID

获取OpenID是在H5页面进行的开发中比较重要的一步，由于OpenID是标识用户身份的唯一标识符，所以有了OpenID之后，在之后的用户追踪、数据分析等方面都会极大方便。

以微信H5页面为例，获取OpenID的方式一般是通过授权登录的方式，具体实现方式如下：

// 公众号appid
const APPID = 'your_appid';

// 授权登录地址
const url = encodeURIComponent(window.location.href);

// 发送请求，获取access_token
axios.get(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${APPID}&secret=${SECRET}&code=${code}&grant_type=authorization_code`)
    .then(res => {
        const openid = res.data.openid;
        // ...此处可进行后续逻辑处理
    });

二、H5获取OpenID时必须跳转页面吗

其实，H5获取OpenID时，通常是需要在跳转页面后，通过code来获取access_token，再从access_token中获取OpenID。但是，如果是在微信内置浏览器中进行H5开发，可以通过JS-SDK中的接口来直接获取OpenID，无需跳转：

// 公众号appid
constAPPID = 'your_appid';

// 通过微信JS-SDK获取OpenID
wx.ready(function() {
    wx.getUserInfo({
        success: function(res) {
            const openid = res.data.openid;
            // ...此处可进行后续逻辑处理
        }
    });
});

三、H5获取OpenID appid

在获取OpenID之前，需要先获得公众号（或小程序）的appid，并在开发过程中进行使用。如果您还没有自己的公众号或小程序，请尽快前往微信公众平台进行申请，申请后可以在开发文档中获取相关的appid。

四、H5获取位置信息

通过Geolocation API，可以在H5页面中获取到用户当前所在的位置信息，具体代码如下：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        const latitude = position.coords.latitude; // 经度
        const longitude = position.coords.longitude; // 纬度
        // ...此处可进行后续逻辑处理
    });
} else {
    alert('您的浏览器不支持获取位置信息，请升级浏览器版本！');
}

五、H5获取当前地理位置

通过微信JS-SDK，可以在H5页面中获取到当前位置的地理信息（即所在城市等信息），具体代码如下：

// 获取地理位置
wx.ready(function() {
    wx.getLocation({
        type: 'wgs84',
        success: function (res) {
            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            // ...此处可进行后续逻辑处理
        }
    });
});

六、H5获取手机号码

为了更好地了解用户行为，H5页面有时需要获取用户手机号码。微信提供了一个便捷的接口来获取用户的手机号码，代码如下：

wx.ready(function() {
    wx.checkSession({
      success: function() {
        wx.request({
          url: 'https://api.weixin.qq.com/wxa/getphonenumber?access_token=ACCESS_TOKEN',
          data: {
            encryptedData: "",
            iv: ""
          },
          method: 'GET',
          success: function(res){
              const phoneNumber = res.data.phoneNumber;
              // ...此处可进行后续逻辑处理
            }
        });
      },
      fail: function() {
        wx.login({
          success: function(res) {
            if (res.code) {
              wx.request({
                url: 'https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=' + res.code + '&grant_type=authorization_code',
                success: function(res) {
                  // 保存session_key，后面解密手机号时使用
                  session_key = res.data.session_key;
                }
              });
            } else {
              console.log('登录失败！' + res.errMsg)
            }
          }
        })
      }
    });
});

七、H5获取设备信息

如果需要在H5页面中获取设备信息，可以通过window.navigator.userAgent来获取相关信息，代码如下：

const userAgent = window.navigator.userAgent;
const isMobile = /Mobile/i.test(userAgent); // 是否为移动设备
const isAndroid = /Android/i.test(userAgent); // 是否为Android系统
const isIOS = /iPhone|iPad|iPod/i.test(userAgent); // 是否为iOS系统
const isWechat = /MicroMessenger/i.test(userAgent); // 是否为微信浏览器
const isMQQBrowser = /MQQBrowser/i.test(userAgent); // 是否为QQ浏览器
const isQQ = /\bQQ\b/i.test(userAgent); // 是否为QQ客户端
// ...此处可进行后续逻辑处理

八、H5获取微信用户手机号

通过微信JS-SDK，还可以获取用户的微信号码，具体代码如下：

wx.ready(function() {
    wx.checkSession({
        success: function() {
            wx.request({
                url: 'https://api.weixin.qq.com/wxa/getphonenumber?access_token=ACCESS_TOKEN',
                data: {
                    encryptedData: "",
                    iv: ""
                },
                method: 'GET',
                success: function(res){
                    const phoneNumber = res.data.phoneNumber;
                    // ...此处可进行后续逻辑处理
                }
            });
        },
        fail: function() {
            wx.login({
                success: function(res) {
                    if (res.code) {
                        wx.request({
                            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=' + res.code + '&grant_type=authorization_code',
                            success: function(res) {
                                // 保存session_key，后面解密手机号时使用
                                session_key = res.data.session_key;
                            }
                        });
                    } else {
                        console.log('登录失败！' + res.errMsg)
                    }
                }
            })
        }
    });
});

九、H5获取微信头像和昵称

要获取微信用户的头像和昵称，可以调用微信JS-SDK中的接口，代码如下：

wx.ready(function() {
    wx.getUserInfo({
        success: function(res) {
            const nickname = res.nickname;
            const headimgurl = res.headimgurl;
            // ...此处可进行后续逻辑处理
        }
    });
});

十、H5获取手机设备唯一标识

在H5页面中，要获取手机设备的唯一标识符，可以通过设备号来进行获取，代码如下：

const deviceId = window.localStorage.getItem('deviceId');
if(!deviceId){
    const uuid = [];
    const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    for (let i = 0; i < 32; i++) {
        uuid[i] = str.substr(Math.floor(Math.random() * 62), 1);
    }
    uuid[12] = '4';
    uuid[16] = str.substr((uuid[16] & 3) | 8, 1);
    deviceId = uuid.join('');
    window.localStorage.setItem('deviceId', deviceId);
}
// ...此处可进行后续逻辑处理