医学生笔记平台的设计与开发

Design and development of note-taking platform for medical students

摘要

目的 基于微信小程序设计并开发医学生笔记平台。 方法 通过小红书、知乎、微博查询和筛选整理有完整笔记并有分享意愿的作者，获取笔记的使用及分享权限，并进行所属专业的分类；通过微信开发者工具中的云发控制台，将笔记上传至云储存，并在云数据库保留访问链接，将名词解释与简答论述上传至云数据库；进一步利用JS进行小程序逻辑处理，通过WXSS和WXML对小程序前端界面进行页面渲染。 结果 最终收集并整理四个专业20个科目的笔记，其中临床专业14本，中医专业3本，护理专业2本，口腔专业1本，名词解释6 020条，简答论述1 437个。 结论 该研究初步设计并完成了医学笔记平台的开发，以期为医学生利用碎片时间学习提供帮助。

Abstract

Objective To design and develop a note-taking platform for medical students based on WeChat mini program. Methods Authors who have complete notes and are willing to share their notes through social platform were searched and sorted out through Xiaohongshu,Zhihu and Weibo.Permission of using and sharing their notes was obtained and the notes were classified by specialties.Notes were uploaded to cloud storage,access links were kept in the cloud database and explanation of terms and brief answers and exposition were uploaded in the cloud database through the cloud sending console in WeChat developer tool.Then,JS was applied to conduct logic process of the mini program,and the front-end interface of the mini program was rendered through WXSS and WXML. Results Finally,notes of 20 subjects in four specialties were collected,including 14 notes of Clinical specialty,3 in the specialty of TCM,2 of Nursing specialty and 1 of Stomatology specialty.There were 6 020 terms explanation and 1 437 brief answers and exposition. Conclusion This study preliminarily designed and completed the development of medical note taking platform,in order to help medical students to learn in fragmented time.

Graphical abstract

关键词

小程序 / 医学生 / 笔记平台

Key words

mini program / medical students / note-taking platform

医学生不仅需要养成良好的心理素质，学好专业知识并掌握多种操作技能，还面临着繁重的学业压力和严峻的就业形势^[1-4]。对于医学生而言，需要花费大量时间查询、记忆、理解和掌握专业知识。目前,在线学习的应用程序已有不少，但与医学生相关的并不多^[5]。因此，设计并开发一款与医学生相关的在线学习工具，对医学生利用碎片时间进行学习有一定意义。

小程序是不需要通过下载或安装即可以使用的一种软件，与传统APP相比，具有用完即走、访问快捷、功能丰富、体验流畅等特点^[6-8]。近年来，微信小程序凭借丰富的功能在健康教育行业迅速发展，其独特的生态与不受时间和地点限制的优点，受到了越来越多医学相关群体的欢迎和使用^[9-12]。

该研究以微信开发者工具为基础，通过JS、WXML、WXSS语言，实现医学生笔记平台的设计与开发，以期为医学生的学习提供更加便捷的工具。

1 设计

1.1 基础框架

XYMU微信小程序包括手写笔记模块、名词解释模块、简答论述模块。其中，手写笔记模块以图像的形式展现笔记的封面及具体内容。名词解释与简答论述模块以卡片的形式呈现具体内容，在便于收藏查看的同时也支持医学生进行内容的查询（如图1所示）。

1.2 资料整理

以“医学笔记”和“医学科目名词解释”为检索词，分别通过小红书、知乎、微博等社交平台进行查询和筛选，以保留有完整PDF格式的手写笔记为条件，筛选出相应的博主并进行沟通，以获得笔记的使用及分享权限，并进行所属专业的分类。

1.3 界面设计

手写笔记模块提供不同专业、不同科目的笔记。当用户处于手写笔记界面时，会首先展示临床专业的部分笔记封面以及作者的详细信息。医学生可以在笔记页面进行不同专业的笔记浏览，以及在具体笔记的页面内阅读不同的章节内容（如图2所示）。

名词解释模块与简答论述模块以卡片的形式展示有关医学专业大多数科目的名词解释和简答论述，并以不同颜色进行选中区分（如图3所示）。

1.4 功能设计

小程序主要功能为医学笔记、名词解释与简答论述的查看、查询、收藏与分享，在此基础上通过云数据库和云储存实现内容的动态更新。其中，名词解释与简答论述模块需要实现专业及科目的分类，方便不同专业的医学生快速查找所需要的笔记。手写笔记模块不仅需要实现专业及科目的分类，还需要展现出不同科目中的章节信息、作者的名称，以及浏览、收藏的量，便于后续数据的进一步分析。三大模块均应支持收藏功能，并将收藏的内容与用户ID绑定，实现内容的收藏与查看，同时记录使用的相关信息，方便医学生定义自己的知识库。使用正则匹配进行查询，若查询结果内有与输入字段相同的内容则输出全部结果，没有则给出相应提示。内容分享应该支持当下常用社交软件，分享应包括具体页面及内容的展示，同时可设置分享的主标题，实现自定义内容的分享。

2 平台的开发

2.1 工具准备

微信开发者工具集中了开发、调试、预览、上传等功能，不仅能够协助开发人员快速、便捷地开发及运行小程序，还能够实现代码查看与编辑、小程序预览与发布^[13-14]。通过微信官方文档（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）获取微信开发者工具下载地址与更新日志，以稳定版StableBuild（1.06.2306020）作为此次开发版本。下载安装后，查看页面内容（如表1所示），并使用移动设备进行真机测试，查看小程序在移动设备上的应用效果。在微信小程序数据的交互过程中，通过WXSS和WXML对小程序的前端界面进行页面渲染，JS进行逻辑上的处理，从而确保笔记程序能够正常运行。

2.2 内容整理

研发人员最终收集四个专业20个科目的笔记，其中临床专业14本，中医专业3本，护理专业2本，口腔专业1本，名词解释6 020条，简答论述1 437个（如表2所示）。通过云发控制台v1.5.59将手写笔记转为图像后上传至云储存，并在云数据库保留访问链接，将名词解释与简答论述上传至云数据库。

2.3 界面设计

所有模块均从云数据库获取具体内容并进行前端渲染。每个页面的标题栏可以进行操作过程导航，并采用swiper和scroll方法实现页面的左右滑动与上下滚动，采用flex布局确保页面内容的整齐排列，采用onShareAppMessage与onShareTimeline方法监听分享行为并自定义分享内容。

手写笔记模块包括笔记分类、目录查看、内容浏览等功能（如图4所示）。

名词解释模块与简答论述模块，包括内容的查看、查询、收藏、分享等功能（如图5所示）。

2.4 功能实现

用户进入相应模块并进行选择后，通过执行对应的逻辑从云数据库和云存储中获取相关的图像和文字并渲染到前端，从而完成专业与科目的分类、目录查看、内容浏览、查询、收藏、分享等功能。其中，专业与科目的分类功能核心代码如下：

<view class='navBox'>

<view class='titleBox' bindtap='titleClick' data-idx='0'>

<text class="{{0 == currentIndex? 'fontColorBox1' : '}}">临床</text>

</view>

<view class='titleBox' bindtap='titleClick' data-idx='1'>

<text class="{{1 == currentIndex? 'fontColorBox' : '}}">中医</text>

</view>

</view>

<swiper class='swiper'° bindchange='pagechange' current='{{currentIndex}}' >

<swiper-item>

<scroll-view scroll-y="true" class="scroll" enable-passive="true">

<view class="biaoti" hidden="{{loading}}">

<view class="tu" wx:for="{{videos0}}" wx:key="key" catchtap="clickme" data-item="{{item}}">

<view class="image-parent">

<image class="tu1"src="{{item.src}}" mode="aspectFill"></image>

<image class="t1" src="/images/31.png" ></image>

<view class="text1">{{item.read}}</view>

<image class="t2" src="/images/30.png" ></image>

<view class="text2" >{{item.buy}}</view>

<image class="t3" src="/images/32.png" ></image>

<view class="text3" >{{item.price}}</view>

</view>

<view class="te" >{{item.major}}</view>

<view class="t">UP：{{item.up}}</view>

</view>

</view>

</scroll-view>

</swiper-item>

</swiper>

目录查看功能核心代码如下：

contents（）{

const $ = db.command.aggregate

let major = this.data.major

let author=this.data.up

db.collection（'Abj'）.aggregate（）.match（{

major:major,

num: $.sum（1）

},

minScore: $.min（'$page'）,

}）.sort（{

minScore:1

}）

console.log（'type',res）

let list=[]

for （let i = 0; i< res.list.length;i++） {

list[i] = res.list[i]._id

}

console.log（list）

this.setData（{

list,

}）

}）

},

内容浏览功能核心代码如下：

onLoad（res） {

wx.showLoading（{

title: 'loading',

}）

let item=wx.getStorageSync（'bj'）

console.log（item）

let major=item.major

let up=item.up

let price=item.price

let _id=item._id

console.log（major）

console.log（up）

db.collection（'Abj'）.where（{

major:major,

}）.count（）

.then（res => {

console.log（"total", res.total）

totalData = res.total

db.collection（'Abj'）.where（{

major:major,

}）.limit（10）.orderBy（'page', 'asc'）.get（）

.then（res => {

console.log（res.data.length）

if（res.data.length==0）{

wx.showToast（{

icon: 'none',

title: 'no',

}）

return

}

console.log（'res',res.data）

this.setData（{

major,

up,

price,

_id,

images:res.data,

total:totalData,

}）

}）

}）

setTimeout（（）=>

{

wx.hideLoading（）

this.mulu（）

this.setData（{

loading:false

}）

}, 1000）

},

fangda（res） {

let fileid = res.currentTarget.dataset.fileid

console.log（fileid）

let fileids =this.data.images

console.log（fileids）

let list=[]

for （var index in fileids） {

console.log（fileids[index].FileID）

list.push（fileids[index].FileID）

}

console.log（list）

wx.previewImage（{

showmenu:false,

current:fileid,

urls:list

}）

},

查询功能核心代码如下：

majorinput（e） {

console.log（e.detail.value）

this.setData（{

major1: e.detail.value

}）

},

confirmTap: function（） {

let that = this;

console.log（'enter'）

that.sousuo（）

},

sousuo（）{

db.collection（'Amc'）.where（{

aa:this.data.major1,

}）.get（）

.then（res => {console.log（res.data.length）

if（res.data.length==0）{

wx.showToast（{

icon: 'none',

title: 'no',

}）

return

}

console.log（'true', res）

this.setData（{aa1:res.data}）

}）

},

收藏功能核心代码如下：

collect（res） {

let collectmc = res.currentTarget.dataset.item

delete collectmc._id

db.collection（'USER'）.where（{

_openid: app.globalData.openid,

"collectmc.aa": collectmc.aa,

"collectmc.bb": collectmc.bb,

}）.field（{

"collectmc.$": true,

}）.get（）.then（res => {

console.log（res.data.length）

if（res.data.length==0）{

const _ = db.command

db.collection（'USER'）.doc（app.globalData.openid）.update（{

data:{

collectmc: _.push（[collectmc]）

}

}）

}else{

wx.showToast（{

icon:'none',

title: 'already repeated',

}）

}}）

}

分享功能核心代码如下：

onShareAppMessage: function （） {

wx.showShareMenu（{

withShareTicket:true,

title:'',

menu:['shareAppMessage','shareTimeline']

}）

},

onShareTimeline: function （） {

return {

title: '',

imageUrl: ''

}

}

3 总结

文章从框架构思、内容收集、界面设计、功能实现四个方面，详细介绍了基于微信小程序的医学生笔记平台的设计与开发过程，为医学生的线上学习提供了又一种工具。通过开发工具数据看板（https://mp.weixin.qq.com/）发现，小程序已累计用户91 662人，总添加用户10 792人，流失用户（截止到当日，在累计用户中，过去90天内，没有访问过小程序的用户数量）76 512人，仅有24.33%的用户愿意长期使用该小程序进行学习。究其原因，可能与该小程序目前只支持开发者和经过开发者授权的用户进行内容录入，存在内容更新缓慢、录入不够全面的问题，导致一些医学边缘学科的专业知识无法通过此平台进行查询和学习有关。为确保所提供的信息更加及时、准确、全面，一方面需要不断学习新的知识，优化现有代码；另一方面，则可与专业的数据库进行合作，直接使用更加全面的数据库，从而避免低效率的手动录入。今后还将增加思维导图版块与医学题库版块，进一步完善此小程序，并通过线下学习与线上练习相结合的模式，为医学生的学习提供更加全面的帮助。

参考文献

[1] 张燕,李小玲,彭佳丽,等.医学心理健康教育的研究与探讨[J].中国继续医学教育,2023,15(12):29-32.

[2] 鲁娟,黄琼,刘军.我国医学生学习目的和制约因素调查[J].当代医学,2020,26(25):1-5.

[3] 郜晋瑜,袁芮.医学生就业形势及高校辅导员的就业指导策略探讨[J].佳木斯职业学院学报,2023,39(3):134-136.

[4] 鲁娟,任凤云,朱玉平.我国医学生学习情况调查[J].当代医学,2021,27(4):187-192.

[5] 曾钰莹,邓欢,杜建军,等.基于微信小程序的医学专业名词中、英文释义记背系统的设计与开发[J].电脑知识与技术,2021,17(26):50-52.

[6] 徐晓.基于微信小程序的练习题库的设计与实现:以数字媒体交互设计资源包为例[J].电脑与信息技术,2023,31(4):58-61.

[7] 韩舶.微信小程序发展现状及其前景探析[J].数字传媒研究,2020,37(8):5-9.

[8] 刘红卫.微信小程序应用探析[J].无线互联科技,2016(23):11-12.

[9] 丁翀,许哲,宋彬,等.基于微信小程序的放射培训考试系统设计与实现[J].河南科技,2022,41(5):10-15.

[10] 王晓彤.基于微信小程序构建心电诊断学线上教学平台的探索[J].牡丹江医学院学报,2023,44(1):170-172.

[11] 吴美丹,王珑,梁小琴,等.微信教学小程序在肠造口病人健康宣教中的应用[J].全科护理,2023,21(17):2366-2368.

[12] 高岩,王诗尧,姜李,等.微信小程序作业法在脑卒中吞咽障碍患者居家延续护理中的应用[J].护理学杂志,2023,38(10):1-4.

[13] 贺一轩,秦立静.基于微信小程序的图书馆座位预定系统的设计[J].现代信息科技,2023,7(1):23-25.