用 Deepseek 写的uniapp血型遗传查询工具

 

引言

在现代社会中，了解血型遗传规律对于优生优育、医疗健康等方面都有重要意义。本文将介绍如何使用Uniapp开发一个跨平台的血型遗传查询工具，帮助用户预测孩子可能的血型。

一、血型遗传基础知识

人类的ABO血型系统由三个等位基因决定：IA、IB和i。其中IA和IB对i是显性关系：

• A型血基因型：IAIA或IAi

• B型血基因型：IBIB或IBi

• AB型血基因型：IAIB

• O型血基因型：ii

根据孟德尔遗传定律，孩子的血型由父母双方各提供一个等位基因组合而成。

二、Uniapp开发优势

选择Uniapp开发这款工具主要基于以下优势：

1. 跨平台能力：一次开发，可发布到iOS、Android、H5及各种小程序平台

2. 开发效率高：基于Vue.js框架，学习成本低，开发速度快

3. 性能优良：接近原生应用的体验

4. 生态丰富：拥有完善的插件市场和社区支持

三、核心代码解析

1. 血型遗传算法实现

getPossibleGenotypes(parent1, parent2) {// 血型对应的可能基因型const typeToGenotypes = {'A': ['AA', 'AO'],'B': ['BB', 'BO'],'AB': ['AB'],'O': ['OO']}const parent1Genotypes = typeToGenotypes[parent1]const parent2Genotypes = typeToGenotypes[parent2]const possibleGenotypes = []// 生成所有可能的基因组合for (const g1 of parent1Genotypes) {for (const g2 of parent2Genotypes) {// 每个父母贡献一个等位基因for (let i = 0; i < 2; i++) {for (let j = 0; j < 2; j++) {const childGenotype = g1[i] + g2[j]possibleGenotypes.push(childGenotype)}}}}return possibleGenotypes
}

这段代码实现了血型遗传的核心算法，通过遍历父母可能的基因型组合，计算出孩子所有可能的基因型。

2. 概率计算

calculateProbabilities(genotypes) {const bloodTypeCounts = {'A': 0,'B': 0,'AB': 0,'O': 0}// 基因型到血型的映射const genotypeToType = {'AA': 'A','AO': 'A','BB': 'B','BO': 'B','AB': 'AB','OO': 'O'}// 统计每种血型的出现次数for (const genotype of genotypes) {const type = genotypeToType[genotype]bloodTypeCounts[type]++}const total = genotypes.lengthconst probabilities = {}// 计算概率for (const type in bloodTypeCounts) {const count = bloodTypeCounts[type]if (count > 0) {probabilities[type] = (count / total * 100).toFixed(1)}}return probabilities
}

这部分代码统计各种血型出现的频率，并计算出每种血型出现的概率百分比。

3. 界面交互实现

<view class="form-item"><text class="label">父亲血型:</text><picker @change="bindParent1Change" :value="parent1Index" :range="bloodTypes" range-key="name"><view class="picker">{{bloodTypes[parent1Index].name}}</view></picker>
</view><button class="calculate-btn" @click="calculateBloodType">计算孩子可能的血型</button>

使用Uniapp的picker组件实现血型选择，通过按钮触发计算逻辑，界面简洁友好。

四、项目亮点

1. 科学准确性：严格遵循遗传学原理，计算结果准确可靠

2. 用户体验优化：

   • 结果自动滚动到可视区域

   • 概率可视化展示

   • 遗传知识科普

3. 代码结构清晰：

   • 业务逻辑与UI分离

   • 复用性高的工具函数

   • 良好的代码注释

完整代码

<template><view class="container"><view class="header"><text class="title">血型遗传查询工具</text></view><view class="card"><text class="subtitle">选择父母血型</text><view class="form-item"><text class="label">父亲血型:</text><picker @change="bindParent1Change" :value="parent1Index" :range="bloodTypes" range-key="name"><view class="picker">{{bloodTypes[parent1Index].name}}</view></picker></view><view class="form-item"><text class="label">母亲血型:</text><picker @change="bindParent2Change" :value="parent2Index" :range="bloodTypes" range-key="name"><view class="picker">{{bloodTypes[parent2Index].name}}</view></picker></view><button class="calculate-btn" @click="calculateBloodType">计算孩子可能的血型</button></view><view class="card result-card" v-if="showResult"><text class="subtitle">结果</text><text class="result-text">父母血型: {{parent1Name}} + {{parent2Name}}</text><text class="result-text">孩子可能的血型:<text class="blood-type">{{resultText}}</text></text><text class="probability" v-if="probabilityText">{{probabilityText}}</text></view><view class="card note-card"><text class="note-title">血型遗传规律说明:</text><text class="note-text">• 血型由ABO基因决定，A和B是显性基因，O是隐性基因。</text><text class="note-text">• A型血基因型可能是AA或AO，B型血基因型可能是BB或BO。</text><text class="note-text">• AB型血基因型是AB，O型血基因型是OO。</text></view></view>
</template><script>export default {data() {return {bloodTypes: [{name: 'A型',value: 'A'},{name: 'B型',value: 'B'},{name: 'AB型',value: 'AB'},{name: 'O型',value: 'O'}],parent1Index: 0,parent2Index: 0,parent1Name: 'A型',parent2Name: 'A型',parent1Value: 'A',parent2Value: 'A',showResult: false,resultText: '',probabilityText: ''}},methods: {bindParent1Change(e) {this.parent1Index = e.detail.valuethis.parent1Name = this.bloodTypes[this.parent1Index].namethis.parent1Value = this.bloodTypes[this.parent1Index].value},bindParent2Change(e) {this.parent2Index = e.detail.valuethis.parent2Name = this.bloodTypes[this.parent2Index].namethis.parent2Value = this.bloodTypes[this.parent2Index].value},calculateBloodType() {// 计算可能的基因组合const possibleGenotypes = this.getPossibleGenotypes(this.parent1Value, this.parent2Value)// 计算可能的血型及其概率const bloodTypeProbabilities = this.calculateProbabilities(possibleGenotypes)// 生成结果文本let resultText = ''let probabilityText = '概率: 'let first = truefor (const type in bloodTypeProbabilities) {if (!first) {resultText += '、'probabilityText += '，'}resultText += this.getBloodTypeName(type)probabilityText += `${this.getBloodTypeName(type)} ${bloodTypeProbabilities[type]}%`first = false}this.resultText = resultTextthis.probabilityText = probabilityTextthis.showResult = true// 滚动到结果位置uni.pageScrollTo({scrollTop: 300,duration: 300})},getBloodTypeName(type) {const names = {'A': 'A型','B': 'B型','AB': 'AB型','O': 'O型'}return names[type]},getPossibleGenotypes(parent1, parent2) {// 血型对应的可能基因型const typeToGenotypes = {'A': ['AA', 'AO'],'B': ['BB', 'BO'],'AB': ['AB'],'O': ['OO']}const parent1Genotypes = typeToGenotypes[parent1]const parent2Genotypes = typeToGenotypes[parent2]const possibleGenotypes = []// 生成所有可能的基因组合for (const g1 of parent1Genotypes) {for (const g2 of parent2Genotypes) {// 每个父母贡献一个等位基因for (let i = 0; i < 2; i++) {for (let j = 0; j < 2; j++) {const childGenotype = g1[i] + g2[j]possibleGenotypes.push(childGenotype)}}}}return possibleGenotypes},calculateProbabilities(genotypes) {const bloodTypeCounts = {'A': 0,'B': 0,'AB': 0,'O': 0}// 基因型到血型的映射const genotypeToType = {'AA': 'A','AO': 'A','BB': 'B','BO': 'B','AB': 'AB','OO': 'O'}// 统计每种血型的出现次数for (const genotype of genotypes) {const type = genotypeToType[genotype]bloodTypeCounts[type]++}const total = genotypes.lengthconst probabilities = {}// 计算概率for (const type in bloodTypeCounts) {const count = bloodTypeCounts[type]if (count > 0) {probabilities[type] = (count / total * 100).toFixed(1)}}return probabilities}}}
</script><style>.container {padding: 20rpx;}.header {margin: 30rpx 0;text-align: center;}.title {font-size: 40rpx;font-weight: bold;color: #333;}.card {background-color: #fff;border-radius: 16rpx;padding: 30rpx;margin-bottom: 30rpx;box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);}.subtitle {font-size: 32rpx;font-weight: bold;margin-bottom: 30rpx;display: block;color: #333;}.form-item {margin-bottom: 30rpx;}.label {font-size: 28rpx;color: #666;margin-bottom: 10rpx;display: block;}.picker {height: 80rpx;line-height: 80rpx;padding: 0 20rpx;border: 1rpx solid #eee;border-radius: 8rpx;font-size: 28rpx;}.calculate-btn {background-color: #4CAF50;color: white;margin-top: 40rpx;border-radius: 8rpx;font-size: 30rpx;height: 90rpx;line-height: 90rpx;}.result-card {background-color: #e9f7ef;}.result-text {font-size: 28rpx;margin-bottom: 20rpx;display: block;}.blood-type {color: #e74c3c;font-weight: bold;}.probability {font-size: 26rpx;color: #666;display: block;margin-top: 10rpx;}.note-title {font-weight: bold;font-size: 28rpx;margin-bottom: 15rpx;display: block;color: #333;}.note-text {font-size: 26rpx;color: #666;display: block;margin-bottom: 10rpx;line-height: 1.6;}
</style>