文章来源:https://www.jianshu.com/p/85985b8cffe6

官网要求:pc+移动端,要求自适应,兼容市面上绝大多数浏览器和移动终端,要求用框架做,谢绝jq,可seo。

框架选型思路:

由于要用框架,还要可seo,官网开发用vue开发,Nuxt.js正是符合需求。

一、通过终端设备显示不同路由

由于同时要做pc和移动端,不想分两套代码,经过查询资料,发现Nuxt的中间件(middleware)正好符合我的需求。关于中间件可移步这里查看。

根据中间件执行流程顺序:

1、nuxt.config.js

2、匹配布局

3、匹配页面

所以可以在渲染页面之前通过中间件判断终端,根据终端跳转对应路由,在此附上我的中间件代码:

中间件middleware.js

中间件写在middleware文件夹下,然后在nuxt.config.js文件中全局添加中间件:

nuxt.config.js

如此,就实现了在同一个框架内根据终端匹配路由的效果,当然,这里要做好路由规划,才能跳转得当。

二、统一显示效果

适配我想采用rem,使得官网能在不同大小的屏幕上都能有一个统一的效果。这里我使用postcss-px2rem+flexible.js。

npm install postcss-px2rem –save

flexible.js可以点此下载

flexiblle.js放在/static/js文件夹下,然后在nux.config.js中配置:

nuxt.config.js中配置

由于rem是同时适配移动和pc的,但是由于pc浏览器不像移动端那样区分dpr,且也要有个最小宽度的问题,所以对下载后的flexible.js文件又做了一番修改,保证在pc和移动端都有一个合理的适配效果:

结合自身情况,修改后的flexible.js

nuxt.config.js

在上面代码中我增加了终端判定,分别对不同端的rem做不同的运算处理。由于我们设计稿pc宽度为1920,移动端宽度为750,所以在使得100px=1rem的基准下,分别使得当前width/19.2和width/7.5。

三、多语言

多语言请看这篇文章

对于文章最后提到的三个需求,这里根据需求,我实现了前两个:

1、切换语言,不刷新页面。【只需要在切换的时候,设置store中的locale值为对应的language值,不做其他操作】

2、刷新页面之后,还是当前语言。【这个需要将设置好的语言保存起来,放到本地缓存中,是个不错的选择】

代码如下:

mounted: function() {

      let language = localStorage.getItem('language') || this.$i18n.locale;

      this.convertLang(language);

    },

    methods: {

      convertLang(lang) {

        localStorage.setItem('language', lang);

        this.$i18n.locale = localStorage.getItem('language');

        switch(lang){

          case 'en':

            this.curLang = 'English';

            break;

          case 'zh':

            this.curLang = '中文';

            break;

        }

      }

}
 

Logo

前往低代码交流专区

更多推荐