最近做的一个项目需要同时适配PC端和iPad及mobile移动端,由于PC端的设备屏幕宽度比iPad和mobile端大太多,因此页面布局需要进行区分。而前笔者在端项目中使用了vue
和vue-router
进行开发,也就是说需要根据当前客户使用的设备属于哪种客户端让路由决定进入哪种设备适配的页面组件。因此需要在邻项目路由的入口处判断客户使用的设备是PC、iPad还是mobile。
另外Vue项目在PC端进行开发时,我们可以通过按住F12键进入开发者模式对代码进行调试;然而iPad和Mobile等移动端设备上运行的项目却无法通过移动设备自带的快捷键而进入调试模式查看打印日志和网络请求,而是需要我们安装额外的调试插件之后才能在移动设备上对源码进行调试,并查看打印日志和网络请求。
本文主要使用javascript代码判断当前设备属于何种客户端,并通过安装插件的方式让我们在移动端设备上也能查看前端项目打印的日志及网络请求,希望对读者朋友们有帮助。
这是原生js的语句,可以直接拿来使用
// 返回由客户机发送服务器的user-agent 头部的值
const device = navigator.userAgent
//做判断 通过返回的数据来筛选查找关键信息
if (device.indexOf('iPad') > -1) {
// ipad
} else if (device.indexOf('Android') > -1 || device.indexOf('ios') > -1) {
// 手机
} else {
// 电脑
}
navigator属于浏览器内置的windows属性对象,上面的是笔者自己做的测试,但是发现安装Android系统的平板电脑直接走到了属于Mobile手机的判断分支,不是很准确。下面我们借用一个js库来更加准确的判断当前设备属于哪种客户端。
在我们的vue项目的根目录下通过鼠标右键->git bash 来打开一个命令控制台并执行如下安装current-device的命令
// cnpm
cnpm install current-device --save-dev
//yarn
yarn add current-device --save-dev
首先在我们的vue项目的路由入口文件rouoter.js
中引入current-device库,然后直接调用current-device库的APPI方法判断当前设备属于何种客户端
import device from 'current-device'
import { createRouter, createWebHashHistory } from 'vue-router'
// 引入current-device库
import device from 'current-device'
// 引入移动端路由组件数组
import { routerM } from '@/router/routerM'
// 引入PC端路由组件数组
import { routerPc } from '@/router/routerPc'
// 引入iPad端路由组件数组
import {routerIPad} from '@/router/routerIPad'
// 引入公共方法
import { isLogin, isSafetyCode } from '@/utils/helper'
let deviceRoute = null
if(device.ipad()){
// 平板电脑端
deviceRoutes = routerIPad
} else if(device.mobile()){
// 移动手机端
deviceRoutes = routerM
} else {
// PC端
deviceRoutes = routerPc
}
window.device = device
// 创建路由实例对象
const router = createRouter({
history: createWebHashHistory(),
routes: deviceRoutes,
scrollBehavior() {
return { left: 0, top: 0 }
}
})
// 路由守卫
router.beforeEach(async (to, from, next) => {
if(to.path=='/demo' || to.path=='/notice' || to.path=='/annoncement'){
next()
}
if (!isSafetyCode() && to.path !== '/search') {
next('/search')
return
}
if (isSafetyCode() && !isLogin() && to.path !== '/login') {
next('/login')
return
}
next()
return
})
// 暴露vue-router路由实例
export default router
设备 | js方法 | 描述 |
---|---|---|
Mobile | device.mobile() | 判断是否属于手机移动设备方法 |
Tablet | device.tablet() | |
Desktop | device.desktop() | 判断是否属于PC客户端 |
iOS | device.ios() | 判断是否属于iOS客户端 |
iPad | device.ipad() | 判断是否属于平板电脑 |
iPhone | device.iphone() | 判断是否数据iPhone手机 |
iPod | device.ipod() | 判断是否属于iPod设备 |
Android | device.android() | 判断是否属于Android系统设备 |
Android Phone | device.androidPhone() | 判断是否属于安卓手机 |
Android Tablet | device.androidTablet() | |
BlackBerry | device.blackberry() | |
BlackBerry Phone | device.blackberryPhone() | |
BlackBerry Tablet | device.blackberryTablet() | |
Windows | device.windows() | 判断是否属于windows系统PC客户端 |
Windows Phone | device.windowsPhone() | 判断是否属于windows系统平板电脑客户端 |
Windows Tablet | device.windowsTablet() | |
Firefox OS | device.fxos() | 判断是否属于火狐系统PC客户端 |
Firefox OS Tablet | device.fxosTablet() | |
MeeGo | device.meego() | |
Television | device.television() |
一般对于Web项目开发,我们常用的current-device库API方法也就device.mobile()、device.ipad()、device.desktop()和device.windows()四个方法,有时为了区分设备属于何种系统会要用到device.iPhone()和device.android()用以区分移动设备属于iOS还是iPhone系统,不久后,current-device库很可能还会新增支持判断华为鸿蒙系统设备的API方法。
安装vconsole插件
// cnpm
cnpm install vconsole --save-dev
// yarn
yarn add vconsole --save-dev
vue项目入口文件main.js中引入vconsole并使用
import VConsole from 'vconsole'
// 构建VConsol实例e实例
const vConsole = new VConsole();
// 使用可选项属性初始化, log.maxLogNumber参数表示控制台中最大显示的日志行数
const vConsole = new VConsole({'log.maxLogNumber': 2000});
// 打印日志
console.log('Hello world');
// 完成调试后移除vconsoloe
vConsole.destroy();
项目运行起来的时候设备屏幕上会显示如下vConsole的图标
Eruda的功能相对来说要比vconsole更加友好
如果想要更加详细的配置,可以链接跳转至gitHub页面进行查看
// cnpm
cnpm install eruda --save-dev
// yarn
yarn add eruda --save-dev
在main.js文件中引入并初始化化Eruda
import eruda from 'eruda'
//初始化
eruda.init()
```
同样,项目运行起来的时候也会在设备的屏幕上显示eruda的图标
在 vue.config.js 中配置主机名和端口号
module.exports = {
devServer: {
host: '0.0.0.0',
port: '3000'
}
}
然后将我们的vue项目构建打包后部署到服务器上的nginx服务中就可以测试效果了
笔者的vue项目中使用的VConsole插件
3.1 平板电脑端效果
点击右下角绿色的vConsole图标按钮就可以进入调试模式
选中Log Tab就可以查看系统控制台打印的日志,在command一栏里还可以输入js变量,输入完后点击该栏右侧的OK按钮就会打印变量到Log 控制台中;选中右边的Network 可以查看网络请求;选中Elementk 可以查看网页元素。
3.2 手机移动端效
点击右下角的绿色vConsole图标按钮进入调试模式
写文不易,欢迎读者小伙伴们动动你的手指点个赞和右下角的【在看】,谢谢!
--END--
4 参考阅读
【1】js分别判断手机、电脑、iPad(https://juejin.cn/post/7033793636760453133)