微信小程序

写完代码记得保存了再去调试，否则一直是调试保存前的内容~

界面设计： html + css

编写代码： JavaScript

---

微信小程序本质上来说就是一个HTML 5（移动网页）应用，但与那些经常在朋友圈刷屏的 H5 小游戏或者应用不同的是，微信小程序获得更多的系统权限。首先是数据缓存能力，这可以让用户在打开一个小程序的时候将程序的主要框架缓存到微信上，下一次就可以快速打开了。

---

校车时刻表1.0小程序作为试水快速原型，经历了整个开发周期，成功发布。

感觉最大的优点就是不必考虑平台，微信用户均可使用。

新版本不会自动覆盖旧版本，需要强制刷新一下？

拟计划在未来增加的功能：

1. 读取系统时间，把已经错过的车次和当日不发车的车次变为灰色（或画上删除线）；
2. 读取车辆GPS信息，实时观察校车位置。
3. 增加地图定位，显示自己最近的校车站点。
4. 点击电话，调用系统电话薄拨打电话。
5. 提供用户提反馈意见窗口。
6. 临时有变化发提醒功能。

---

 index.wxml

<!--index.wxml-->
<view >
 <view class="flex-row" style="display:flex;flex-direction: row;" >
  <view class="flex-column" style="display: flex;flex-direction: column;">    
  <view class="flex-view-item0">校本部→新校区</view>
  <view class="flex-view-item1">提前车---07:15*</view>
  <view class="flex-view-item">第01班---07:40</view>
  <view class="flex-view-item">第03班---08:20</view>
  <view class="flex-view-item">第05班---09:00</view>
  <view class="flex-view-item">第07班---09:50</view>
  <view class="flex-view-item">第09班---10:10</view>
  <view class="flex-view-item">第11班---10:40</view>
  <view class="flex-view-item">第13班---11:30</view>
  <view class="flex-view-item1">提前车---13:50*</view>
  <view class="flex-view-item">第15班---14:10</view>
  <view class="flex-view-item">第17班---14:50</view>
  <view class="flex-view-item">第19班---15:30</view>
  <view class="flex-view-item">第21班---16:00</view>
  <view class="flex-view-item">第23班---16:40</view>
  <view class="flex-view-item">第25班---17:30</view>
  <view class="flex-view-item">第27班---18:30*</view>
  <view class="flex-view-item">第29班---21:05*</view>
  </view>
  
  <view class="flex-column" style="display: flex;flex-direction: column;">
  <view class="flex-view-item0">新校区→校本部</view>
  <view class="flex-view-item1">增开车---07:40</view>
  <view class="flex-view-item">第02班---08:00</view>
  <view class="flex-view-item">第04班---08:40</view>
  <view class="flex-view-item">第06班---09:30</view>
  <view class="flex-view-item">第08班---09:50</view>
  <view class="flex-view-item">第10班---10:10</view>
  <view class="flex-view-item">第12班---11:10</view>
  <view class="flex-view-item">第14班---12:00</view>
  <view class="flex-view-item1">提前车---14:10</view>
  <view class="flex-view-item">第16班---14:30#</view>
  <view class="flex-view-item">第18班---15:10</view>
  <view class="flex-view-item">第20班---15:40</view>
  <view class="flex-view-item">第22班---16:20</view>
  <view class="flex-view-item">第24班---17:15</view>
  <view class="flex-view-item">第26班---18:10</view>
  <view class="flex-view-item">第28班---20:50*</view>
  <view class="flex-view-item">第30班---21:40*</view>
   </view>
  </view>
<view class="flex-row1" style="display:flex;flex-direction: row;" >
注：
</view>
<view class="flex-row1" style="display:flex;flex-direction: row;" >
【1】新校区发车正点时刻为东门站（A2教学楼东侧），校区内其它各站发车时间略有提前，详见各站点站牌背面时刻表。
</view>
<view class="flex-row1" style="display:flex;flex-direction: row;" >
【2】“*”标识车次：周一至周五发车。
</view>
<view class="flex-row1" style="display:flex;flex-direction: row;" >
【3】第16班仅周六、日发车。
</view>
<view class="flex-row1" style="display:flex;flex-direction: row;" >
【4】节假日班车时间：
</view>
<view class="flex-row2" style="display:flex;flex-direction: row;" >
校本部→新校区：08:00,14:30
</view>
<view class="flex-row2" style="display:flex;flex-direction: row;" >
新校区→校本部：11:30,17:30
</view>
<view class="flex-row1" style="display:flex;flex-direction: row;" >
【5】投诉电话：5073298
</view>
<view class="flex-row1" style="display:flex;flex-direction: row;" >
【6】咨询电话：5073287，18131231258
</view>    
</view>

index.wxss

.container{
    margin-bottom: 20;
    display: block;
}

.flex-row{
    background: snow;    
    justify-content:center;
}

.flex-row1{
    background: lightgray;  
    font-size: 30rpx;  
    font-weight: 500;
}
.flex-row2{
    background: lightgray;  
    font-size: 30rpx;  
    font-weight: 500;
    padding-left: 70rpx;
}

.flex-column{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    background: snow;
}

.flex-view-item{
    color: black;
    background: snow;
    padding: 8rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
    margin-top: 5rpx;
    justify-content:center;
}
.flex-view-item0{
    color: blue;
    background: snow;
    padding: 8rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
    margin-top: 5rpx;
    justify-content:center;
    font-weight: 900;
}
.flex-view-item1{
    color: green;
    background: snow;
    padding: 8rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
    margin-top: 5rpx;
    justify-content:center;
    
}
.text{
    color: black;
    background: salmon;
    padding: 8rpx;
}

---

Ref：

https://www.w3cschool.cn/weixinapp/

http://www.pmcaff.com/article/index/575100570040448?from=selection

https://github.com/junhey/wxapp

https://juejin.im/entry/5822ccb9a22b9d0067f129f8

http://blog.csdn.net/modingxiao/article/details/54694730?utm_source=itdadao&utm_medium=referral

https://www.zhihu.com/question/50907897?sort=created

http://blog.csdn.net/u012118993/article/details/53140506

http://www.jianshu.com/p/7a94a6b6be96%20