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

目录

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（验证函数）。