Nuxt爬坑更新- 判斷設備進行跳轉手機端

時間 2019-11-06

標籤 nuxt 更新判斷設備進行手機简体版

原文原文鏈接

nuxt是沒有index.html頁面的, 我們應該在哪裏寫js代碼來判斷設備呢, 下面請看個人代碼吧html

1. 引入middleware中間件

在nuxt.config.js裏經過router來引入middleware中間件

nuxt.config.js代碼以下android

export default {
    router: {
        middleware: ["device"],
    },
}
複製代碼

2. 在根目錄新建`utils`文件而且新建文件`deviceType.js`

deviceType.js文件代碼以下ios

/**
 *
 * @param {*} UA ,就是userAgent
 * @returns  type: 設備類型
 *           env: 訪問環境(微信/微博/qq)
 *           masklayer: 就是給外部拿到判斷是否顯示遮罩層的,一些特殊環境要引導用戶到外部去打開訪問
 */
function isWechat(UA) {
    return /MicroMessenger/i.test(UA) ? true : false;
}

function isWeibo(UA) {
    return /Weibo/i.test(UA) ? true : false;
}

function isQQ(UA) {
    return /QQ/i.test(UA) ? true : false;
}

function isMoible(UA) {
    return /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(UA) ?
        true :
        false;
}

function isIOS(UA) {
    return /iPhone|iPad|iPod/i.test(UA) ? true : false;
}

function isAndroid(UA) {
    return /Android/i.test(UA) ? true : false;
}
export function deviceType(UA) {
    if (isMoible(UA)) {
        if (isIOS(UA)) {
            if (isWechat(UA)) {
                return {
                    type: "ios",
                    env: "wechat",
                    masklayer: true,
                };
            }
            if (isWeibo(UA)) {
                return {
                    type: "ios",
                    env: "weibo",
                    masklayer: true,
                };
            }
            if (isQQ(UA)) {
                return {
                    type: "ios",
                    env: "qq",
                    masklayer: true,
                };
            }
            return {
                type: "ios",
            };
        }
        if (isAndroid(UA)) {
            if (isWechat(UA)) {
                return {
                    type: "android",
                    env: "wechat",
                    masklayer: true,
                };
            }
            if (isWeibo(UA)) {
                return {
                    type: "android",
                    env: "weibo",
                    masklayer: true,
                };
            }
            if (isQQ(UA)) {
                return {
                    type: "android",
                    env: "qq",
                    masklayer: true,
                };
            }
            return {
                type: "android",
            };
        }
        return {
            type: "mobile",
        };
    } else {
        return {
            type: "pc",
        };
    }
}
複製代碼

3. 在`middleware`裏添加`device.js`文件

device.js代碼以下web

// @ts-nocheck
import { deviceType } from "~/utils/deviceType";
export default function(context) {
    // @ts-ignore
    context.userAgent = process.server ?
        context.req.headers["user-agent"] :
        navigator.userAgent;
    // 給全局上下文添加一個屬性來保存咱們返回的匹配信息
    context.deviceType = deviceType(context.userAgent);
    // 這裏注入到store,是由於我部分頁面須要判斷機型請求不一樣的數據,
    // 大家沒有用到的話能夠移除
    // context.store.commit("SetDeviceType", context.deviceType);
    // 如果判斷UA非移動端的,就在這裏作處理了..
    // context.redirect(status,url) 這個能夠重定向到外部網站
    // 如果內部訪問能夠直接用router對象push
    if (context.deviceType.type === "pc") {
        // context.redirect(302,'www.huanjingwuyou.com')    //301是永久重定向，若是你想隨着設備類型改變一直變，請改成302
    } else {
        context.redirect(302,'m.huanjingwuyou.com')    //301是永久重定向，若是你想隨着設備類型改變一直變，請改成302
    }
}
複製代碼