一、App开发是什么?
简单说一下App开发,App开发,是指专注于手机应用软件开发与服务。 App是application的缩写,通常专指手机上的应用软件,或称手机客户端。另外有很多在线app开发平台。
移动互联网时代是全民的移动互联网时代,是每个人的时代,也是每个企业的时代。APP便捷了每个人的生活,APP开发让每个企业都开始了移动信息化进程。
二、App布局
App开发与pc开发最大的不同应该是布局单位的改变,如果使用px会导致不同手机大小显示的内容不同,所以要进行单位的改变
app布局rem
function rem(){
//根据设备的宽设置html的字体大小
document.documentElement.style.fontSize = document.documentElement.clientWidth/4 + "px";
}
rem();
//当窗口改变时,
window.onresize = rem;
//1rem = 100px
三,打包APP
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
四、App登录
除了布局之外,登录功能也是项目的一大难点,主要说一下token
1.token
在计算机身份认证中是令牌(临时)的意思,在词法分析中是标记的意思。一般作为邀请、登录系统使用。主要作用是确认用户的身份,帮助用户保护个人信息。
使用起来十分简单,只需要在发送登录请求时将后台返回的token令牌保存到本地就可以了
window.sessionStorage.setItem("token", data.data.remember_token);
一般使用的sessionStorage,相对于 localStorage来说更加的安全
2.token验证
获取token后需要验证在请求拦截中进行本地token的验证,如果存在将其存入到请求头中
axios.interceptors.request.use((config) => {
// token验证请求
if (window.sessionStorage.getItem('token')) {
config.headers.Authorization = ${window.sessionStorage.getItem('token')}
}
return config
})
如果在用户在同一页面存在时间过久没有操作就说明用户离开了,为了防止其他人获取用户信息需要在响应拦截进行验证
axios.interceptors.response.use(config => {
// token验证响应
if (config.data.code == 400) {
window.sessionStorage.removeItem("token")
}
return config
})
当用户没有进行登录时需要强制跳转到登录页面进行登录使用路由钩子进行跳转
if ( !window.sessionStorage.getItem("token")) {
next("/Login")
}