移动站点的重要性不言而喻,那么使用nodejs的后端框架koa如何实现移动端和PC端的视图切换呢?
一、通过如下命令安装koa中间件koa-views和一个解析浏览器UA的工具ua-parser-js
koa-views: yarn add koa-views
ua-parser-js: yarn add ua-parser-js
二、新建两个文件夹,分别用来存放移动端和PC端的视图文件
三、通过ua-parser-js判断不同的设备访问,然后进行视图的切换,核心代码如下
const pc_views = views(path.resolve(__dirname, './views/pc'), { map: { html: 'ejs' }, extension: 'ejs', cache: true }); const mb_views = views(path.resolve(__dirname, './views/mobile'), { map: { html: 'ejs' }, extension: 'ejs', cache: true }); app.use(async (ctx, next) => { let uaStr = ctx.get('user-agent'); let uaObj = uaParser(uaStr); if(uaObj.device.type == "mobile" || uaObj.device.type == "tablet") { await mb_views(ctx, next); } else { await pc_views(ctx, next); } })
通过这三个步骤,就可以轻松实现pc站点和移动站点的切换了。