web对接微信获取OpenId

最新推荐文章于 2024-06-23 23:51:42 发布

Helson@lin

最新推荐文章于 2024-06-23 23:51:42 发布

阅读量298

点赞数

分类专栏： uni-app 文章标签： openid

helsonlin@163.com

本文链接：https://blog.youkuaiyun.com/qq_37651169/article/details/113868879

版权

uni-app 专栏收录该内容

6 篇文章

订阅专栏

/*
 * @Author: hjl
 * @Date: 2020-08-15 18:10:33
 * @LastEditTime: 2020-08-20 20:24:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \webchat_project_copy\src\utils\wechatOpenId.js
 */

import {getUserOpenIdd} from "@/api/apiz" // getUserOpenIdd为后端提供的获取openid接口
function getUrlKey(name){ //获取url参数
  return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
}
function getCodeApi(state,urll){//获取code
  let urls = urll == undefined || '' ? 'https://web.bethuguard.com/#/wxihome' : urll
  let urlNow= encodeURIComponent(urls);
  let scope='snsapi_userinfo';    //snsapi_userinfo   //静默授权 用户无感知 https://xxxxxxxxxxxx'
  let appid='wx93371565ee646f7d'; // 测试appid 根据实际情况替换
  let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
  window.location.replace(url);
}
function getOpenIdApi(code) {
  getUserOpenIdd(code).then(result => {
    let { data: res } = result
    if(res.code == 0){
      sessionStorage.setItem('oId',res.data.openid)
    }else{
      console.log(res.msg,'获取OpenId错误')
    }
  })
}
export const getOpenId = function (next,url) {
  let code = getUrlKey("code");
  let oId = sessionStorage.getItem('oId')
  if(oId) {
    next()
  }else {
    if (code) {
      console.log('用户授权过直接换openId')
      getOpenIdApi(code)
      next()
    } else {
      console.log('跳转授权页面')
      getCodeApi("123",url);
    }
  }
}

在需要获取OpenId的页面导入方法即可：

import { getOpenId } from "@/utils/wechatOpenId" // 引入方法

beforeRouteEnter (to, from, next) {
  getOpenId(next,'http://192.168.124.6:8080/#/userLogin') // url表示重定向地址
}

/*
 * @Author: hjl
 * @Date: 2020-08-15 18:10:33
 * @LastEditTime: 2020-08-20 20:24:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \webchat_project_copy\src\utils\wechatOpenId.js
 */

import {getUserOpenIdd} from "@/api/apiz" // getUserOpenIdd为后端提供的获取openid接口
function getUrlKey(name){ //获取url参数
  return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
}
function getCodeApi(state,urll){//获取code
  let urls = urll == undefined || '' ? 'https://web.bethuguard.com/#/wxihome' : urll
  let urlNow= encodeURIComponent(urls);
  let scope='snsapi_userinfo';    //snsapi_userinfo   //静默授权 用户无感知 https://xxxxxxxxxxxx'
  let appid='wx93371565ee646f7d'; // 测试appid 根据实际情况替换
  let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
  window.location.replace(url);
}
function getOpenIdApi(code) {
  getUserOpenIdd(code).then(result => {
    let { data: res } = result
    if(res.code == 0){
      sessionStorage.setItem('oId',res.data.openid)
    }else{
      console.log(res.msg,'获取OpenId错误')
    }
  })
}
export const getOpenId = function (next,url) {
  let code = getUrlKey("code");
  let oId = sessionStorage.getItem('oId')
  if(oId) {
    next()
  }else {
    if (code) {
      console.log('用户授权过直接换openId')
      getOpenIdApi(code)
      next()
    } else {
      console.log('跳转授权页面')
      getCodeApi("123",url);
    }
  }
}

在需要获取OpenId的页面导入方法即可：

import { getOpenId } from "@/utils/wechatOpenId" // 引入方法

beforeRouteEnter (to, from, next) {
  getOpenId(next,'http://192.168.124.6:8080/#/userLogin') // url表示重定向地址
}