uni-app 近视防控记录软件

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

uni-app 近视防控记录软件

3 回复

我的QQ:137487497 WX:zhentouxing


开发定制:V:mingbocloud

针对您提到的uni-app近视防控记录软件开发需求,以下是一个简化的代码案例,展示了如何使用uni-app框架构建一个基本的近视防控记录应用。此示例包含用户信息录入、视力记录以及简单的数据展示功能。

1. 项目结构

首先,确保您的uni-app项目结构如下:

/pages
  /index
    index.vue
  /record
    record.vue
/static
  (存放静态资源)
App.vue
main.js
manifest.json
pages.json

2. index.vue - 用户信息录入页面

<template>
  <view>
    <input v-model="userInfo.name" placeholder="姓名" />
    <input v-model="userInfo.age" type="number" placeholder="年龄" />
    <button @click="goToRecord">下一步:记录视力</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '',
        age: null,
      },
    };
  },
  methods: {
    goToRecord() {
      uni.setStorageSync('userInfo', this.userInfo);
      uni.navigateTo({ url: '/pages/record/record' });
    },
  },
};
</script>

3. record.vue - 视力记录页面

<template>
  <view>
    <text>用户信息</text>
    <text>姓名: {{ userInfo.name }}</text>
    <text>年龄: {{ userInfo.age }}</text>
    <input v-model="vision.left" type="number" placeholder="左眼视力" />
    <input v-model="vision.right" type="number" placeholder="右眼视力" />
    <button @click="saveVision">保存记录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: uni.getStorageSync('userInfo') || {},
      vision: {
        left: null,
        right: null,
      },
    };
  },
  methods: {
    saveVision() {
      const records = uni.getStorageSync('visionRecords') || [];
      records.push({ ...this.vision, date: new Date().toLocaleString() });
      uni.setStorageSync('visionRecords', records);
      uni.showToast({ title: '记录保存成功' });
    },
  },
  onLoad() {
    // 确保每次加载页面时获取最新的用户信息
    this.userInfo = uni.getStorageSync('userInfo') || {};
  },
};
</script>

4. 配置文件

pages.json中配置页面路径:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "用户信息"
      }
    },
    {
      "path": "pages/record/record",
      "style": {
        "navigationBarTitleText": "记录视力"
      }
    }
  ]
}

此代码案例提供了一个基本的近视防控记录应用的框架,包括用户信息的录入和视力记录的保存功能。您可以根据实际需求进一步扩展功能,如添加图表展示视力变化趋势、用户登录认证等。

回到顶部