就是我们开发出的app,这次在这个手机上登录了,下次换了个手机登录,这时候要给用户个提示,我也不知道为什么非得要这个提示,感觉意义不太大,但是需求是这样的,所以这篇主要是简单说下uniapp获取当前手机设备的信息,其实也很简单的东西官网也都有https://uniapp.dcloud.net.cn/api/system/info.html#%E7%B3%BB%E7%BB%9F%E4%BF%A1%E6%81%AF%E7%9A%84%E6%A6%82%E5%BF%B5

但还是想着记录一下 

思路:

1. 首先我们在App.vue中的onLanch中通过uni.getSystemInfo获取到当前设备的信息,然后通过uni.setStorageSync在本地存储一下。

2. 接下来在app登录后,从后端(是需要后端配合的)获取到上一次登录的deviceId(设备id),然后和本机的deviceId对比,如果不一样,即换手机了,然后给用户做出个提示,然后再将本次登录的deviceId存储到后端即可。

接下来上核心代码:

App.vue 

<script>
export default {
  onLaunch: function () {
    uni.getSystemInfo({
      success: (e) => {
        // #ifdef APP-PLUS
        this.setSystemInfo(e);
        // #endif
      },
    });
  },
  methods: {
    // 当前设备信息
    setSystemInfo({ deviceId, deviceBrand, deviceModel }) {
      uni.setStorageSync("deviceId", deviceId);
      uni.setStorageSync("deviceBrand", deviceBrand);
      uni.setStorageSync("deviceModel", deviceModel);
    },
  },
};
</script>

index.vue

这个也就是登录第一次跳转的页面 

<script>
import { systemInfo } from "@/api/sys/system";
export default {
  onLoad() {
    // #ifdef APP-PLUS
    this.getSystemType();
    // #endif
  },
  methods: {
    getSystemType() {
      systemInfo().then((res) => {
        const curDeviceId = uni.getStorageSync("deviceId");  // 这是本机的deviceId
        const curDeviceBrand = uni.getStorageSync("deviceBrand"); // 这是本机的设备品牌
        const curDeviceModel = uni.getStorageSync("deviceModel"); // 这是本机的设备型号
        const { deviceId } = res.data.user;  // 这是从后端获取上一次登录的手机设备信息
        if (curDeviceId != deviceId) {
          uni.showToast({
            title: `当前登录的设备品牌:【${curDeviceBrand}】,设备型号:【${curDeviceModel}】`,
            duration: 3000,
            icon: "none",
            position: "top",
          });
          new UserService().saveDevice({  // 像后端存当前设备信息
            deviceBrand: curDeviceBrand,
            deviceId: curDeviceId,
            deviceModel: curDeviceModel,
            loginName: this.userInfo.loginName,
          }).then((res) => {}).catch((e) => {});
        }
      });
    },
  },
};
</script>

这篇就这么多~ 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐