uni-app 生成唯一ID

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app 生成唯一ID

在项目汇总需要使用到唯一ID，插件市场搜索下好像没有UUID或者nanoid这类的生成ID的插件

Harmonyos Next教程
3 回复

找我定制


可以定制，联系QQ：1804945430

在uni-app中生成唯一ID通常是为了确保每个数据项或组件实例都有唯一的标识符。这种需求在开发过程中非常常见，尤其是在需要追踪、管理或操作多个实例时。下面我将展示几种生成唯一ID的方法，并提供相应的代码示例。

方法一：使用 Date.now() 和随机数

这种方法结合了当前时间戳和一个随机数，生成一个相对唯一的ID。

function generateUniqueId() {
    return Date.now() + '-' + Math.floor(Math.random() * 100000);
}

// 使用示例
let uniqueId = generateUniqueId();
console.log(uniqueId); // 输出形如 "1672531199123-45678" 的唯一ID

方法二：使用 UUID 库

在JavaScript中，有多个库可以用来生成UUID（Universally Unique Identifier），比如 uuid 库。在uni-app中，你可以通过npm安装并使用这个库。

  1. 首先，安装 uuid 库：
npm install uuid --save
  1. 然后，在你的代码中引入并使用它：
import { v4 as uuidv4 } from 'uuid';

// 使用示例
let uniqueId = uuidv4();
console.log(uniqueId); // 输出形如 "550e8400-e29b-41d4-a716-446655440000" 的UUID

方法三：结合页面生命周期和索引

在某些情况下，你可能需要在页面或组件的上下文中生成唯一ID。这可以通过结合页面或组件的生命周期方法（如 onLoad、mounted）和索引来实现。

let idCounter = 0;

export default {
    onLoad() {
        this.generateUniqueId();
    },
    methods: {
        generateUniqueId() {
            return `page-${this.$route.path}-${++idCounter}`;
        }
    }
}

// 使用示例
// 假设你在页面的某个方法中需要生成ID
someMethod() {
    let uniqueId = this.generateUniqueId();
    console.log(uniqueId); // 输出形如 "page-/pages/index/index-1" 的唯一ID
}

以上三种方法各有优缺点，选择哪种方法取决于你的具体需求和应用场景。例如，如果你需要高度唯一的标识符，UUID库是一个不错的选择。如果你只需要在页面或组件内部生成唯一ID，结合生命周期和索引的方法可能更简单有效。

回到顶部