1. Toy模板网首页
  2. > Toy博客

微信小程序实验报告-----学生家教小程序

10月前 作者：左岸2420 分类：Toy博客 阅读(45) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序实验报告-----学生家教小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实验报告

课程名称：     企业级前端应用开发实践                      

实验项目：           学生家教小程序                     

实验地点：                                   

专业班级：                         

学 号：       学生姓名：                 

指导教师：                                  

年   月    日

微信小程序项目实验报告,前端,前端,微信小程序微信小程序项目实验报告,前端,前端,微信小程序

微信小程序项目实验报告,前端,前端,微信小程序微信小程序项目实验报告,前端,前端,微信小程序

实验报告

实验名称

学生家教系统

实验地点

实验日期

必修  □选修

□演示与验证性       □综合与设计性      □研究与创新型
  • 实验目的

在微信小程序开发框架下使用微信开发者工具编写学生家教小程序，在传统家教小程序的基础上作出一定的改变，使得家教小程序的界面更加简洁和美观，使用户能更加快捷的操作。

二、实验主要仪器设备及耗材

1、设备：笔记本电脑

2、软件：微信开发者工具

三、实验方法与要求

1、实验方法：

使用微信开发者工具去编写微信小程序

2、实验要求：

（1）、去查阅相关资料；

（2）、了解市场对于该类程序的需求，做出更符合需求额程序；

（3）、程序前端界面实现主要依靠微信小程序框架技术；

（4）、模块结构清晰、用户界面友好，操作方便；

（5）、按时按计划独立完成各项工作任务。

  • 实验内容

1、通过合法有效的途径查阅相关资料，了解微信小程序系统的实现方式以及流程，认真做好需求分析；

2、进行合理的功能划分和处理，尽量去开发界面友好，方便使用、稳定可靠的微信小程序；

3、使用Sketch、Photoshop、Axure 等制作小程序的UI界面和交互效果，提高用户的体验；

五、实验过程

第一章 引  言

1.1 研究背景

随着互联网的快速发展，国内外也出现了很多家教网站，如：三好家教，学大教育网，轻轻家教，阳光家教网等，诸如此类的家教网站数不胜数。

但是有的家教网站不接受本科生，有的只接受线下并且网站只是一个辅助运营宣传的工具。选择这种方式有以下缺点：职员较少且固定成本高。办公室硬件成本、人力资源成本、宣传成本也会消耗。

所以此家教网站采用线上与线下结合、并且只招收高校在校生和毕业不到三年的学生这种方式，既节约了宣传成本又扩大了职员招收。

1.2 研究现状

1、国内

许多家长们望子成龙、望女成凤，再者现在的教育改革虽说为孩子减轻负担，但“中国式教育”的存在使学生的负担明增暗减，学生凭借自己的能力往往无法完成自己的学习任务，这些原因造成家教市场异常活跃。家长们往往为了孩子的学习更愿意去请一对一的家教，而在职老师却无法满足市场需求。在这种情况下高校的在校学生，就成了一个很不错的选择。

2、国外

中国近年来国力迅速发展，树立起了大国形象，中国的国际影响力逐渐变强，很多国家都建立起了孔子学院去学习中国文化。许多外国学生都对其感兴趣，但苦于国外专门教中文的老师很少。

1.3 研究内容

学生家教小程序的功能内容：

1、首页界面：

首页界面总共分为四部分，分别是轮播图展示、课程类型展示、辅导类型展示以及拍照搜题。

（1）、轮播图展示：

将家教小程序的logo和老师与学生的互动场景展现出来。

（2）、课程类型展示：

展示家教小程序总共交哪几种课程。

（3）、辅导类型展示：

展示老师地教授课程地类型，是一对一或还是一对多，点击辅导类型则会跳转至相应的老师界面。

2、课程分类界面：

课程分类界面主要分为四部分，分别是小学、初中、高中以及特色课程板块。板块中会有查看更多，点击查看更多则会跳转至每个板块的介绍界面

3、师资力量界面：

师资力量界面主要分为三个部分，分别是搜索老师、部分老师展示、家教数量展示。点击搜索框输入老师姓名，再点击搜索则能实现搜索功能。

  1. 关于我们界面：

关于我们界面主要分为三个部分，分别是宣传简介，地图定位以及联系方式。地图可以进行缩放和拖拽。

第二章 系统开发环境

2.1技术支持

1、微信开发者工具：微信提供了开发者工具，可以在本地模拟器中开发、调试和预览小程序代码。微信开发者工具是小程序开发的必备工具之一，您可以在其中实时查看小程序的效果，并且可以快速调试和修改代码。

2、微信小程序开发框架：微信提供了小程序开发框架，包括 WXML、WXSS 和 JavaScript。使用框架可以更快速地开发小程序，同时还可以提高开发效率和代码质量。

3、小程序 API：小程序 API 可以帮助开发者实现丰富的交互和功能，例如网络请求、数据存储、地理位置、摄像头等。掌握小程序 API 可以让您更好地开发小程序并实现更多的功能。

2.2工具支持

1、调试工具：例如 Chrome 开发者工具、Fiddler 等。调试工具可以帮助您快速定位和排除代码中的错误，提高代码的可靠性和稳定性。

2、代码管理工具：例如 Git、SVN 等。代码管理工具可以帮助您更好地管理和版本控制代码，同时也可以方便多人协作开发。

3、设计工具：例如 Sketch、Photoshop 等。设计工具可以帮助您更好地设计和制作小程序的 UI 界面和交互效果，提高小程序的用户体验。

第三章 需求分析

3.1 需求分析

现今家长望子成龙望女成凤的现象逐渐普遍，并且课堂学习已不满足中国式教育，家长们就愿意花费高昂的费用为自己的孩子请家教，家教市场需求量很大，但家教老师跟这个群体数量又十分短缺，而家教网站又不为大众所熟知，所以一个好的网站辅助宣传工具尤其重要。

而有的辅助宣传工具是传单，传单看过就扔，这样无法让用户更加记忆犹新，还得雇佣发传单的人员，严重增加运营成本。而小程序只需要网上运营，不需要很多人，减少成本，并且互联网发展很快，宣传效果也会比发传单效果好。

随着科技的发展电子宣传是一个很好的选择，在节省人力财力的同时也有很好的宣传效果。

3.2 项目设计内容

1、项目设计所需工作内容：

学生微信小程序的开发及实现所需要的工作内容：

（1）、确定好系统制作出来的主要目的是什么，并且要充分为受用群体着想，并且要通过充分的研究讨论来确定系统所实现的内容能够真正被学生和家教教师所用到。

（2）、要根据所预想出来的系统功能、受用群体等来选择合适的技术手段，制定合适的业务逻辑。

（3）、熟练掌握小程序的语法，开发出简洁化、高效化的界面，使用户操作更为快捷，提供更为优质的家教服务。

3.3 功能分析

1、首页界面：

首页界面总共分为四部分，分别是轮播图展示、课程类型展示、辅导类型展示以及拍照搜题。

（1）、轮播图展示：

将家教小程序的logo和老师与学生的互动场景展现出来。

（2）、课程类型展示：

展示家教小程序总共交哪几种课程。

（3）、辅导类型展示：

展示老师地教授课程地类型，是一对一或还是一对多，点击辅导类型则会跳转至相应的老师界面。

2、课程分类界面：

课程分类界面主要分为四部分，分别是小学、初中、高中以及特色课程板块。板块中会有查看更多，点击查看更多则会跳转至每个板块的介绍界面

3、师资力量界面：

师资力量界面主要分为三个部分，分别是搜索老师、部分老师展示、家教数量展示。点击搜索框输入老师姓名，再点击搜索则能实现搜索功能。

4、关于我们界面：

关于我们界面主要分为三个部分，分别是宣传简介，地图定位以及联系方式。地图可以进行缩放和拖拽。

            

第四章 系统实现

4.1首页界面

4.1.1 实现的效果

微信小程序项目实验报告,前端,前端,微信小程序

4.1.2主要代码

轮播图代码

<!--首页轮播图-->
<swiper class="exam" indicator-dots circular autoplay interval="2000">
<swiper-item class="item1"><image src="/image/星星点灯.jpg" ></image>
</swiper-item>
<swiper-item class="item2"><image src="/image/lunbo2.jpg" ></image>
</swiper-item>
<swiper-item class="item3"><image src="/image/lunbo1.jpg"></image></swiper-item>
</swiper>

辅导分类主要代码

<!--弹性盒子-->
<view class="box">
<view class="box1">
<navigator url="/pages/teacher/teacher" open-type="redirect">
<view class="zi1">一对一辅导</view>
<view class="zi2">初三、高三毕业班冲刺</view>
</navigator>
</view>
<view class="box2">
<navigator url="/pages/teacher/teacher" open-type="redirect">
<view class="zi1">一对三互动</view>
<view class="zi2">小初高、非毕业班提升</view>
</navigator>
</view>
</view>

4.2 课程分类界面

4.2.1实现效果

微信小程序项目实验报告,前端,前端,微信小程序

微信小程序项目实验报告,前端,前端,微信小程序

4.2.2主要代码

课程分类代码

<!--特色-->
<view class="tese">
<image src="/image/特色.jpg"></image>
<view class="tezi1">— 特色课程 —</view>
<navigator url="../../pages/tese/tese">
<view class="tezi2">查看更多</view>
</navigator>
</view>

查看更多代码

<!--pages/tese/tese.wxml-->
<view class="yinyue">
<image src="/image/音乐.jpg"></image>
<view class="zi">音乐</view>
</view>

<view class="wudao">
<image src="/image/舞蹈.jpg"></image>
<view class="zi">舞蹈</view>
</view>

<view class="jisuanji">
<image src="/image/计算机.jpg"></image>
<view class="zi">计算机</view>
</view>

4.3师资力量界面

4.3.1系统实现

微信小程序项目实验报告,前端,前端,微信小程序

4.3.2主要代码：

搜索模块代码

<!--搜索框-->
<view class="searchInput">
    <input placeholder="搜索老师"/>
    <button class="btn" bindtap="handleTap">搜索</button>
</view>

搜索模块样式代码

/* 搜索框样式设置 */
.searchInput{
    height: 90rpx;
    padding: 10rpx; /*注意，这里用的是 rpx*/
    background-color: #993333; 
    }
input{
    width: 70%;
    height: 100%; /*继承父组件的高度*/
    display: flex; /*定义成伸缩盒子*/
    justify-content: center; /* 内容居中 */
    align-items: center;  /*垂直居中*/
    background-color: #fff; /*背景色*/
    border-radius: 18rpx;  /*圆形边框*/
    color:#666 ;
    }
.searchInput .btn{
    width: 70px;
    height: 30px;
    position: absolute;
    left:240px;
    top: 20rpx;
    font-size: 10px; /* 设置文字大小为28物理像素 */
    font-weight: 100px; /* 设置文字加粗 */
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; /* 设置字体 */
}

部分老师展示代码

<!--老师展示-->
<view class="laozhan1">
<image src="/image/weierlite.jpg"></image>
<view class="zi1">薇尔莉特老师</view>
<view class="zi2">语文老师</view>
<view class="zi3">就读于师范学院思维活跃而不失严谨，大气广博而不失细腻，在她课上由欢笑有思考，有耐心更有折服。善于为学生建构知识体系。</view>
</view>

4.4关于我们界面

4.4.1系统实现

微信小程序项目实验报告,前端,前端,微信小程序

4.4.2主要代码

系统简介代码 
<!--简介-->
<view class="jian">
<view class="jian1">
<view class="jianjie">
星星点灯家教网打破以前家教网站的传统，只接收高校学生和毕业不超过三年的学生做家教，让大学生们有了一个属于他们自己的正规家教网站。教学方式采用线下与线上结合的方式，使时间能够更好地利用。并且大学生与学生客户年龄差距不大能够更好地融入他们，使学生客户更好更快地学习知识。本小程序主要是进行家教网站的辅助宣传工作。
</view>
</view>
</view>
系统简介样式代码 
.jian {
    display: flex;
    height: 230px;
    background-color: #fffff0;
}

.jian1{
    background-color:#993333;
    width: 300px;
    height: 210px;
    margin: 10px;  
    border-radius: 10px;
}
.jianjie{
    
    text-indent: 2em;
    line-height: 20px;
    letter-spacing: 1px;
}

.view {
    position: absolute;
    height: 120px;
    left:10px;
    top:530px;
}
地图代码 
<!--地图-->
<view class="view">
   <map id="map" 
   longitude="{{longitude}}"  
   latitude="{{latitude}}"    
   show-location="true" >  
   </map>
</view>
<view class="zi">- 联系我们 -</view>

第六章 结论

 1、系统不足与改进：

（1）、家教服务的用户应该分为教师和学生，而该小程序没有区分用户；

（2）、拍照搜题只是个图片没有真正实施。

（3）、首页的课程分类部分无法跳转。

2、系统总结：

该小程序简单的介绍了家教小程序的几个功能，这些功能是为了更好的进行网站的宣传，使更多的人熟知家教网站。

通过对该程序的编写我学到了一些小程序的基本操作，对我受益匪浅。在此十分感谢我的指导老师。最后随着知识面的增加，我希望今后我可以将这个系统编写的更加完善。文章来源地址https://www.toymoban.com/news/detail-719244.html

到了这里，关于微信小程序实验报告-----学生家教小程序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 计算机Java项目｜SSM微信小程序的学生选课系统

    计算机Java项目｜SSM微信小程序的学生选课系统

    作者主页：编程指南针 作者简介：Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容：Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年01月22日
    浏览(68)
  • 10.Java程序设计-基于SSM框架的微信小程序家教信息管理系统的设计与实现

    10.Java程序设计-基于SSM框架的微信小程序家教信息管理系统的设计与实现

    摘要是论文的开篇，用于简要概述研究的目的、方法、主要结果和结论。以下是一个简化的摘要示例，你可以根据实际情况进行修改和扩展： 摘要 随着社会的发展和教育需求的增长，家教服务作为一种个性化的学习方式受到了广泛关注。为了更好地满足家教市场的需求，本

    2024年02月03日
    浏览(58)
  • 学生管理系统实验报告-asp.net程序设计

    学生管理系统实验报告-asp.net程序设计

    课程名称 ASP.NET程序设计 实验名称 学生信息管理系统 下载链接：https://download.csdn.net/download/mariodf/85671926?spm=1001.2014.3001.5501 目录 一、实验目的 ... 3 二、实验环境 ... 3 1. 运行环境 .. 3 2. 开发工具 .. 3 三、实验设计 ... 3 1. 系统框架 .. 3 2. 系统总体设计 .. 4 3. 数据库表结构设计

    2024年02月04日
    浏览(48)
  • 基于微信小程序的课程点名签到系统设计与实现 报告+项目源码及数据库文件

    基于微信小程序的课程点名签到系统设计与实现 报告+项目源码及数据库文件

    题目：微信点名系统小程序 目录 第一节 系统分析与设计 1.1 需求分析 1.2 数据库设计 1.2.1 数据库模型图（初步设计） 1.3 系统功能设计 第二节 系统开发及实现 2.1 系统开发平台及工具 2.2 系统页面及使用说明 2.1.2 学生签到页面（首页） 2.1.3 学生查询页面（课程、我的） 2.

    2024年02月12日
    浏览(47)
  • 微信小程序完整项目实战(前端+后端)

    微信小程序完整项目实战(前端+后端)

    基于微信小程序的在线商城点单系统 前言：闲来无事，制作一个微信小程序商城。系统采用Java语言作为后端实现与小程序的交互，给用来学习或者想自己开个小店的朋友当个参考。 小程序 管理端 1.创建maven project，先创建一个名为SpringBootDemo的项目，选择【New Project】 然后在

    2024年02月03日
    浏览(64)
  • 前端uniapp+后端springboot 详细教程《实现微信小程序授权登录》（附完整前后端项目demo）

    前端uniapp+后端springboot 详细教程《实现微信小程序授权登录》（附完整前后端项目demo）

    微信小程序官方登录流程图： 参考微信小程序登录官网文档 1、前端技术栈 1.1、uniapp 使用uniapp构建一套代码多端使用的前端框架项目 1.2、前端封装工具 dateUtil.js： 功能： 1. 时间日期格式化 2. 传入日期是否和当前日期的比较 完整代码： requestUtil.js： 功能： 1. 定义公共的

    2024年02月14日
    浏览(59)
  • 微信小程序｜SSM微信小程序的学生选课系统

    微信小程序｜SSM微信小程序的学生选课系统

    作者简介：Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容：Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助 收藏点赞不

    2024年01月25日
    浏览(47)
  • 基于微信小程序的产品评分小程序（附开题报告）

    基于微信小程序的产品评分小程序（附开题报告）

    💗博主介绍：✌全网粉丝10W+,CSDN全栈领域优质创作者，博客之星、掘金/华为云/阿里云等平台优质作者。 👇🏻 精彩专栏 推荐订阅👇🏻 计算机毕业设计精品项目案例-200套 🌟 文末获取源码+数据库+文档 🌟 🌟 开题报告在下方 🌟 感兴趣的可以先收藏起来，还有大家在毕设

    2024年02月05日
    浏览(44)
  • JAVA微信小程序论坛系统毕业设计 开题报告

    JAVA微信小程序论坛系统毕业设计 开题报告

    本文给出的java微信小程序系统毕业设计开题报告，仅供参考！（具体模板和要求按照自己学校给的要求修改） 目的 ：本课题主要目标是设计并能够实现一个基于微信小程序论坛交流系统，前台用户使用小程序，后台管理使用Java+Mysql开发，后台使用了springboot框架；通过后台

    2024年02月06日
    浏览(55)
  • 基于微信小程序的学生宿舍管理系统

    基于微信小程序的学生宿舍管理系统

              在过去学校的宿舍管理普遍采用传统的手工管理方法，由于其高昂的人工成本、复杂的操作步骤，较弱的安全措施，产生了许多不必要的麻烦。此外，由于需要收集和分析大量的纸质资料和数据，也给日常的查阅、维护造成了不小的挑战。如今社会由于互联网的普

    2024年02月03日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包