vue axios封装 获取微信公众号用户的openid

  • Post author:
  • Post category:vue



目录


axios封装


openid


vue


vue+ts


axios封装

一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios,

创建axios实例:

axios.create([config])  //可以使用自定义配置新建一个axios实例
//  配置
const service = axios.create({ 
baseURL: process.env.VUE_APP_BASE_API, //   api 的 base_url
requests timeout: 1000*12 // 请求超时时间
})
//  添加请求拦截器
service.interceptors.request.use(
//  在发送请求之前
    config => {
        // do something before request is sent
        return config
    },
//  在请求错误之后
    error => {
        // do something with request error
        return Promise.reject(error)
    }
)
//  添加响应拦截器
service.interceptors.response.use(
//  对响应数据返回以一个字符串表示的Number对象值,查看返回的状态码是否为2开头,为true可以正常拿到数据。
    response => {
        // response status == 2xx, success
        if (response.status.toString().startsWith('2')) {
            const res = response.data
            return res
        }
    },
//  返回响应的错误信息
    error => {
        return Promise.reject(error)
    }
)

openid

如何获取微信公众号用户的openid:

openid:用户唯一标识,请注意,在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的openID。

关于网页授权的两种scope的区别:

  1. 以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的,用户感知的就是直接进入了回调页(往往是业务页面);
  2. 以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的,但这种授权需要用户手动同意,并且由于用户同意过,所以无需关注,就可以在授权后获取该用户的基本信息;
  3. 用户管理类接口中的“获取用户基本信息接口”,是在用户和公众号产生消息交互或关注后事件推送后,才能根据用户openID来获取用户基本信息,这个接口,包括其他微信接口,都是需要该用户(即openID)关注了公众号后,才能调用成功的;
  • 第一步:用户同意授权,获取code;
  • 第二步:通过code换取网页授权access_token,公众号可通过下述接口来获取网页授权access_token,如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openID,snsapi_base式的网页授权流程到此为止;
  • 第三步:刷新access_token(如果需要),由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权。
  • 第四步:拉取用户信息(需scope为snsapi_userinfo),如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openID拉取用户信息了;
  • 第五步:检验授权凭证(access_token)是否有效。
  • 1. 通过微信接口,获取网页授权code
  • 2. 通过授权code获取用户信息(用户信息包含两种:1、)只取openid,2、)取用户相关头像,昵称,openid等)

vue

vue框架使用注意事项和经验:

  1. 父子组件:父组件通过prop向子组件传递数据,子组件绑定自定义事件,通过this.$emit(event,params)来调用自定义事件,使用vue提供的$parent /$children & $refs 方法来通信;
  2. vuex几种属性和作用,以及使用vuex的基本模式:
  • vuex是一个专为vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化;
  • state的改变完全由mutations控制,我们没有必要任何项目都使用vuex,对于中大型复杂项目而言,需要共享的状态很多时,使用vuex才是最佳选择;
  • state单一状态树,用一个对象就包含了全部的应用层级状态,并且作为一个唯一数据源而存在getters就像计算属性一样,getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算;
  • Action提交的是mutation,而不是直接变更状态,可以包含任意异步操作;
  • module将store分割成模块(module),每个模块拥有自己的state,mutation,action,getter,甚至是嵌套子模块;
  • store目录是用来组织vuex代码用的,将action,mutation,state分文件管理,这个项目大了之后也很容易管理和查询。

vue+ts

vue+ts项目中Prop的用法:

@Prop 装饰器接收一个参数,PropOptions,包含以下选项,type(类型),required(必填),default(默认值),validator(验证函数)。



版权声明:本文为weixin_49739911原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。