实训Day9 程序设计结果

日期	2019年6月 17日			第 9 天  共 10天
实习地点		科技楼423
教学大纲中规定的实习教学内容	校内综合实训是系统讲授微信小程序开发技术，通过小程序开发项目实例来训练学生的实践能力，检验学生对微信小程序开发技术所学知识的综合运用能力的重要环节。每位学生需完成老师布置的实验内容，并完成综合性实训项目的开发。从而达到对所学知识的深刻理解，进而为今后更深入的学习和应用打下坚实的基础。
实习 目的及 要求	1、掌握微信小程序项目环境搭建; 2、掌握微信小程序项目界面设计编写;; 3、掌握微信小程序项目业务逻辑处理; 4、掌握MVVM设计模式框架开发; 5、通过本课程的学习，培养学生观察、分析、解决问题的能力； 6、培养学生严肃认真、实事求是的良好作风。
任务 完成 情况、 主要 收获 与 体会	实训的第九天，我们上课的主要内容是微信小程序电商项目业务的功能实现，主要是实现在美团外卖首页上拉之后的综合排序一栏，为综合排序创建可以点击的下拉框。 在上课过程中，综合排序一栏的固定相对来说比较简单，因为前一天就实现了搜索栏的固定，我们只需要在其基础上在算出综合排序一栏距离顶部的距离，就可以实现固定。“综合排序”一栏的下拉功能也可以实现，现在就还剩下点击下拉之后显示的项目然后转到其他页面功能。    实训即将告一段落，我们的任务就是将两个小程序给完善。实训过程中学到了很多东西，对小程序的开发有了基本的了解，老师的授课方法也浅显易懂。
教师 指导 （辅导） 内容	注：若当日教师无指导，本栏请填“无”，打印前请将下方“指导教师签名”删掉。 指导学生了解微信小程序电商项目业务功能实现，指导学生微信小程序电商项目业务功能实现实践
	指导方式		面授		指导时长（分钟）	300
其它 需说 明的 情况

1. 通过js获取输入框中的vlaue值

部分代码：

<script type="text/javascript">

       window.onload = function(){

           var bt=document.getElementById("bt2");

           var btt=document.getElementById("bt1");

           bt.οnclick=function(){

           alert(bt1.value);}}</script>

结果截图：

 

1. 乘法口诀

部分代码：

console.log("九九乘法表");

                     for (var x=1;x<=9;x++)

                     {str="";

                     for (var y=1; y<=x; y++) {

                            str+=x + "*" + y + "=" + (x * y)+"  "; }

                            console.log(str);}

结果截图：

1. 骰子布局

部分代码：

<div class="six3-face">

<div class="row">

<span class="pip"></span><span class="pip"></span><span class="pip"></span>

</div>

  <div class="row"><span class="pip"></span></div>

  <div class="row"><span class="pip"></span><span class="pip"></span></div>

</div>

 

.six3-face  {display: flex; flex-wrap: wrap;}

.six3-face .row  { flex-basis: 100%; display:flex; }

.six3-face .row:nth-child(2)  { justify-content: center; }

.six3-face .row:nth-child(3)  { justify-content: space-between; }

 

1. 地图

部分代码：

 

1. 个人首页

部分代码：

 

天气小程序

 

美团小程序