koa之移动端和PC端视图切换的实现

移动站点的重要性不言而喻,那么使用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站点和移动站点的切换了。

发表评论