当前位置：首页 > uni-app

uniapp分数统计

2026-03-05 07:34:40uni-app

实现UniApp分数统计功能的方法

使用本地存储（uni.setStorage） 在UniApp中可以通过uni.setStorage和uni.getStorage实现简单的分数存储功能。这种方式适合临时保存用户分数，关闭应用后数据依然存在。

// 存储分数
uni.setStorage({
  key: 'userScore',
  data: 100,
  success: function() {
    console.log('分数保存成功');
  }
});

// 获取分数
uni.getStorage({
  key: 'userScore',
  success: function(res) {
    console.log('当前分数：' + res.data);
  }
});

使用Vuex状态管理 对于需要全局共享的分数数据，建议使用Vuex进行状态管理。首先需要在store目录下配置相关状态和方法。

// store/index.js
const store = new Vuex.Store({
  state: {
    score: 0
  },
  mutations: {
    setScore(state, payload) {
      state.score = payload;
    },
    addScore(state, payload) {
      state.score += payload;
    }
  }
});

// 页面中使用
this.$store.commit('setScore', 100);
this.$store.commit('addScore', 10);
console.log(this.$store.state.score);

云端数据库存储 如果需要长期保存用户分数，可以考虑使用uniCloud云开发服务。通过云函数和数据库实现分数的云端存储和读取。

// 保存分数到云端
const db = uniCloud.database();
db.collection('user_scores').add({
  user_id: '123',
  score: 100,
  update_time: Date.now()
});

// 查询分数
db.collection('user_scores')
  .where('user_id == "123"')
  .get()
  .then(res => {
    console.log(res.result.data);
  });

实时排行榜功能 要实现分数统计的排行榜功能，可以使用排序查询和分页加载。

// 获取排行榜
db.collection('user_scores')
  .orderBy('score', 'desc')
  .limit(10)
  .get()
  .then(res => {
    this.rankList = res.result.data;
  });

分数统计图表 对于需要可视化展示分数统计的场景，可以使用ucharts等图表组件。

<template>
  <qiun-data-charts 
    type="column"
    :chartData="chartData"
  />
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        categories: ['1月', '2月', '3月'],
        series: [{
          name: '分数',
          data: [80, 90, 100]
        }]
      }
    }
  }
}
</script>

注意事项