微信小程序开发记录
刚刚完成了一个微信小程序的开发，从开发到发布线上版本体验了一起全过程。在这里也记录一下在开发过程中的一些想法和心得。
项目介绍
这次开发的是一个公交的实时位置查询工具，当时的灵感来自我使用 APP 的时候。因为坐车这个事儿，其实每天也就是坐那几条线不会有太多变化，但是那 APP 每次都需要手动输入线路点击一下查询。而且 APP 的冷启动速度那也是相当的感人，从点击到出现首页广告都需要 4s 左右。然后就想自己来试试能不能解决这个问题，用抓包软件看了看这软件也是从 API 获取信息，而且调用 API 也没有经过鉴权传入的参数也都是固定的几个。
本来在这之前，一直都想体验一下 微信小程序 的开发。因为我平时在使用的时候，给我的体验还是挺不错的。启动速度也不赖，而且不用单独的下载其他 APP 。还可以轻松的做到跨平台，对于轻度的工具类应用来说，这个平台看起来是那么的美好。在加上和友人在聊天的时候，也说到了现在的 APP 对于普通人来说确实太「重」了，所以也就更加坚定了这次开发要使用微信小程序。
可行性分析
首先分析抓包的数据，它到底需要传给它什么信息，同时又会传回什么数据。简单的用 Postman 试了试，发现所有的 API 传入的数据都只有 3 个。
- 线路唯一标识
- 上下行状态
- 城市代码
用 Python 的 requests 简单的尝试了一下，数据还是挺好抓取下来的。然后就开始咸鱼了十几天，等到7月15号的时候才开始认认真真的开始写代码。
网络请求
微信小程序的网络请求这方面，都是有提供 API 可以直接调用。我这里因为是第一次用 JavaScript 所以还是淌了不少浑水。
刚开始的时候最困惑我的就是，它不能二次调用经过传值了一次的 request Object。因为公交查询 API 这里，它的站点信息和车辆当前的运行状态是两个单独的，虽然车辆当前运行状态也有站台的标识，但是我做不到把他们关联起来。所以我在二次调用的时候，总是会提示错误。
1 | Cannot read property 'xxx' of undefined;at api request success callback function |
真的让人挺头疼的，到了后面我还是使用的全局变量解决这个问题了的。每次都把获取到的数据放进全局变量，然后其他 function 在调用的时候也直接从全局变量里面取值。每次从全局变量里面取值都还挺讲究，每次都要写 this.data.xxx 。不知道这是 JavaScript 在作妖，还是微信小程序在作妖。用不同的名字区分不好吗，非要弄个 this 怪怪的。
逻辑层
做逻辑层的前端数据展示花了挺多时间，对于静态数据的处理还是可以轻松的应对。但是一方面自己又懒，不想为每个线路都写一个不同的页面去做展示（后面想想好恐怖，这样搞的话不知道冗余的代码量得有多少），后面还是使用微信提供的 API 来解决这个问题。也就是给点击这个方法传参，然后将参数拼接成带有完整数据的 url 在交给线路查询页进行显示。
还有点击切换按钮切换线路上下行的时候，我也是发现 API 有一些怪怪的问题。有个别环线它的起点和终点是一摸一样的，所以切换线路的时候不只是上下行这个值有变化，同时线路的唯一标识也在变化，当然线路的名字也有变化，名字一般都是 A和B 来回切换。而且我发现，官方 APP 这个地方他也没作对，它对于环线是不能切换的，估计也是切换的时候单纯的切换了一下上下行状态。这大概就是前端和后端不打好招呼的后果？
界面层
界面的数据写法和我以前接触的 Jinja2 特别相似，不过我接触 Jinja2 的时候也只是和 ECharts 配合做了一些简单的数据展示。做这个公交线路的显示的前端，代码量倒是非常的小，但真的是每一行都是比较费脑子的感觉。大概也是我对某些地方有着莫名的偏执，所以带来了这些麻烦。
也就比如在线路查询页的地方，我就必须想让公交车的图标要和站点名字处在同一行上，而且站点名字必须要在页面接近居中的文字左对齐。当时我在写这个页面的时候，一开始是使用的 条件渲染 也看这个站点有没有车，如果有就显示没有就不显示。使用这个方法就会导致，有公交车的和没公交车的站点名字他们的缩进是不一样的。然后我就很魔性的想到了使用控制透明度来解决这个问题，每个位置上默认都是要显示图标的，但是会根据这个位置有没有车然后改变透明度。刚刚想到这个方法的时候，都在想为什么我这么聪明233。
后面还有个问题，就是有的站点他会有停很多车，一般都是在收车的时候，始发站就会停很多车。车多了的话，界面显示会抽风。一开始是想直接吧车辆直接 for 开始，然后一个一个的判断 >5、<=5 、=0 这种情况，但是写半天都不会。因为这个也没法设断点，看 Debug 信息它到底现在循环到了多少之类的。所以就直接在 js 里面吧数据处理了，吧站点当前停留的车辆 >5 的全部都只显示 5 。
还有问题个问题就是，微信小程序官方的 开发者工具 在显示图标的时候对大小写不敏感。但是在真实设备上，对大小写是敏感的。我一开始调试的时候，车辆图标用的 Bus.png 开发工具上模拟一直没问题，就是到了真机死活显示不出来。最后检查出来是这个问题，挺福气的。而且 Git 也很奇怪，我改了个大小写他都显示我没有任何变动。最后是我强行改了个别的名字，打了个 commit 再改回小写。
后端
后端的开发这次倒是没什么技术，就只是单纯的吧数据转发过去然后把拿回来的数据返回过去。因为微信小程序官方不允许使用 http 协议，所以我就只能使用服务器去代理转发流量。官方什么时候要是把我服务器的 IP ban 了那就麻烦了。
总结
最深的感觉还是在开发的时候，因为官方文档都是中文所以查文档还是方便不少。但是搜索一些怪怪的问题的时候，反而用 Google 搜不出来太好的结果，还得要用百度在 CSDN 里面的一大堆重复文章中去找解决方法。
后面看看有没有时间再完善一下，增加个根据当前位置判断车还有多久到底最近站点的功能。