一个使用 Vue.js 开发跨平台应用的前端框架
官网地址:https://uniapp.dcloud.io/
common/config.js
common/request.js
common/api.js
![2e26d20a5042068e46f550c5c55db8c8.gif](https://i-blog.csdnimg.cn/blog_migrate/de9014a65294afbe728e7511821b4a9e.gif)
/**
* common/request.js
* @param { Object } params
*/
/**
* common/config.js
*/
/**
* common/api.js
*/
这里我们用一个简单的微信小程序登录来做一个示范
创建token.js文件
/**
* common/token.js
*/
import {request} from './request.js' //引入封装好的request
import api from './api.js' //引入api接口
//校验token
export function verifyToken() {
return new Promise((resolve, reject) => {
var token = uni.getStorageSync('token') //从本地缓存中获取token
if(token) {
//token存在,向服务器发起校验token是否有效
request({...api.verifyToken}).then(res => {
//若token有效,更改全局登陆状态
//若token无效,服务器返回的状态码不应该是200,这时,就进入我们的封装好的request的响应拦截中
resolve(res)
})
} else {
//token不存在,向服务器发起登陆请求,也就是获取token
getToken().then(res => {
resolve(res)
})
}
})
}
//从服务器中获取token,也可以理解为登陆
export function getToken() {
return new Promise((resolve, reject) => {
//调用uni.login()api接口,获取code码
uni.login({
provider: 'weixin',
success: function (res) {
//封装一下请求的参数
var params = {
data: {code: res.code},
...api.getToken
}
request(params).then(res => {
//成功,就保存token到本地缓存
//设置全局登录状态(这一步的代码我们是没有做的,只是一个逻辑)
uni.setStorageSync('token', res.data)
resolve(res)
})
}
})
})
}
在App.vue中使用刚才二次封装的登录接口
/**
* App.vue
*/
<script>import {verifyToken, getToken} from '@/common/token.js'export default {onLaunch: function() {console.log('App Launch')//应用打开,直接调用verifyToken()
verifyToken().then(res => {console.log(res)
})
},onShow: function() {console.log('App Show')
},onHide: function() {console.log('App Hide')
}
}script>
<style>/*每个页面公共css */style>