0%

微信小程序开发记录

刚刚完成了一个微信小程序的开发,从开发到发布线上版本体验了一起全过程。在这里也记录一下在开发过程中的一些想法和心得。

项目介绍

这次开发的是一个公交的实时位置查询工具,当时的灵感来自我使用 APP 的时候。因为坐车这个事儿,其实每天也就是坐那几条线不会有太多变化,但是那 APP 每次都需要手动输入线路点击一下查询。而且 APP 的冷启动速度那也是相当的感人,从点击到出现首页广告都需要 4s 左右。然后就想自己来试试能不能解决这个问题,用抓包软件看了看这软件也是从 API 获取信息,而且调用 API 也没有经过鉴权传入的参数也都是固定的几个。

本来在这之前,一直都想体验一下 微信小程序 的开发。因为我平时在使用的时候,给我的体验还是挺不错的。启动速度也不赖,而且不用单独的下载其他 APP 。还可以轻松的做到跨平台,对于轻度的工具类应用来说,这个平台看起来是那么的美好。在加上和友人在聊天的时候,也说到了现在的 APP 对于普通人来说确实太「重」了,所以也就更加坚定了这次开发要使用微信小程序。

可行性分析

首先分析抓包的数据,它到底需要传给它什么信息,同时又会传回什么数据。简单的用 Postman 试了试,发现所有的 API 传入的数据都只有 3 个。

  • 线路唯一标识
  • 上下行状态
  • 城市代码

Pythonrequests 简单的尝试了一下,数据还是挺好抓取下来的。然后就开始咸鱼了十几天,等到7月15号的时候才开始认认真真的开始写代码。

网络请求

微信小程序的网络请求这方面,都是有提供 API 可以直接调用。我这里因为是第一次用 JavaScript 所以还是淌了不少浑水。

刚开始的时候最困惑我的就是,它不能二次调用经过传值了一次的 request Object。因为公交查询 API 这里,它的站点信息和车辆当前的运行状态是两个单独的,虽然车辆当前运行状态也有站台的标识,但是我做不到把他们关联起来。所以我在二次调用的时候,总是会提示错误。

1
2
Cannot read property 'xxx' of undefined;at api request success callback function
TypeError: Cannot read property 'xxx' of undefined

真的让人挺头疼的,到了后面我还是使用的全局变量解决这个问题了的。每次都把获取到的数据放进全局变量,然后其他 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 里面的一大堆重复文章中去找解决方法。

后面看看有没有时间再完善一下,增加个根据当前位置判断车还有多久到底最近站点的功能。

  • 本文作者: 蠢黑通行
  • 本文链接: https://blackyau.cc/21.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-SA 许可协议。转载请注明出处!