微信小程序实例练习——《排班查询》

前言

我在之前写了一个HTML版的《排班查询》程序，这次我准备将其改造为微信小程序。因微信小程序本质上也是网页，所以大体的程序逻辑并不会变。如若想要先了解前置的HTML版程序请见HTML5实例练习——《排班查询》

而且通过这个实例练习可以上手了解一下微信小程序的架构。如果完全没接触过微信小程序可先参考我写的这个简单介绍怎样写微信小程序，小程序源码的文件架构是怎样的

一、问题&要求

问题：小明在制造业工作需要上夜班，他的排班计划是两个白班一个夜班循环，而小明的记忆力不好经常忘记自己要上什么班。假如小明在2021年1月1日上第一个白班，那么应该如何实现其快捷查询班次的需求？

要求：1、程序能告诉他当天上什么班。2、程序能查询一年内任意一天他上什么班。3、需要一个微信小程序版本的程序。

二、程序示意

三、准备工作

准备工作从打开微信开发者工具讲起，之前的账号申请和IDE安装就不赘述了。

准备工作也很简单，分为4步：
1、新建一个小程序项目命名为“排班查询”，再新建一个代码片段；
2、从详情中打开二者的本地目录；
3、删除小程序目录下的所有文件，再将代码片段目录下的所有文件复制到小程序目录下；
4、保存并重新打开“排班查询”小程序项目。

OK，为什么这样做呢？**因为新建的代码片段就是完整的小程序，并也是只有一个页面的最简单的小程序，很适合做初学者的模板。**相较而言小程序项目的模板就太过庞杂了，而我们应从最简单的模板入手（当然你也可以将小程序文件删除后不用代码片段而是从头一个一个文件建起，也是可行的）。

四、文件架构

如图：

五、编写主页（核心）

1、编写index.wxml文件

<view class="txt">{
  {str1}}
</view><!--本句的作用是打印字符串str1，其中{
   {str}}作用是直接读取对应js文件中已设置的变量-->
<text>\n
</text>
<input bindinput="data_1" type="number" class="input" placeholder="月：" placeholder-style="text-align:left">
</input>
<input bindinput="data_2" type="number" class="input" placeholder="日：" placeholder-style='text-align:left'>
</input>
<button type="primary" style="width:350rpx" bindtap='query'>
查询
</button>
<view class="txt">{
  {str2}}
</view><!--str2不存在时不打印，点击查询按钮后str2存在则重又打印-->

2、编写index.js文件

const app = getApp()
Page({
   
  data: {
   
  },
  data_1: function(e) {
   
    this.setData({
   
      month:e.detail.value
    })
  },
  data_2: function(e) {
   
    this.setData({
   
      day:e.detail.value
    })
  },
  onLoad:function(){
   
    var x=(new Date()).getMonth() + 1;
    var y=(new Date()).getDate();
    var a=new Array(13);
    for(var i=0;i<13;i++)
    {
   
      a[i]=new Array(32);
      for(var j=0;j<32;j++)
      {
   
        a[i][j]=0;
      }
    }
    for(var i=1;i<=12;i++)
      for(var j=1;j<=31;j++)
        a[i][j]=1;
    a[2][29]=0,a[2][30]=0,a[2][31