突破思维的极限，超越 APP 的体验！我是小程序，今天，我要打十个！

[BruceWolf]

性能上，传统印象里小程序就是个阉割版的 HTML5，性能低下、UI 奇卡无比。但是我的这款小程序地图极度清晰、操作丝般顺滑，交互的过场动画也给足！ 😎x1

功能上，能做到所有把以下地铁图展示、站点查询、线路查询展示、线路详情描述等等功能都集中在一个固定界面的地铁 app 都风毛菱角 （不确定有，但是不敢把话说死，但是我的这款小程序做到了！ 😎x2

设计上，轻喷 （满满的求生欲，我暂时还是一个努力让大家不觉得辣眼睛程序员，，万一觉得 UI 还过得去，记得给女朋友看看啊 （我要 @ 某人了，，捂脸 🙈

---

上面说的就不重复说了，体验几秒钟就知道说的啥意思。稍微介绍一下新用户可能体验不到的细节，一键切换现代风格 /暗黑风格的地图：

注意看细节，这是飞行模式！当然，“快”是另外一个细节~

以上动画是有损压缩过的，来两张实际效果截图：

现代风格：

暗黑风格：

有技术的硬推广就是这么强势，不服来试试？使用以下小程序码或者在微信小程序里直接搜 CityOnRail 即刻体验😁

---

牛也吹了，X 也装了，，一个人折腾的全流程 （包括画地图，坑比细节多，大家觉得有什么不爽 /不对的地方还请不吝指出，感谢！感谢！感谢！（重要的事情说三遍🙇🙇️🙇️

在几个群里分享了一下，发现很多人都不知道选择站点是直接点击地图？

在地图上点击线路上的点或者站点名称的，弹出站点信息的卡片就可以设置起点和终点了，另外搜索站点后选择具体站点也能弹出站点信息卡片。

[BruceWolf]

不知道怎么在文章里 @ 人，回复里操作吧，@qiuyk 帮我看看效果怎么样~

[acthtml]

你为何会说“小程序是阉割版的 html5，性能低下，ui 奇卡无比”，年轻人讲话要负责啊。

另外动手实践还是要支持下的。

[murmur]

@acthtml
html5 程序性能低是 flutter 和 react native 当时推广时用的话术，所以后两句没错
第一句是因为腾讯明明用了 webview，但是自创了一套乱七八糟的东西，屏蔽了原生 api，所以也没错

[Cmdhelp]

。。。高德地图 输入目的地，各种交通方式详情都出来了，但是我一般只能选公交这种方式，，，，，，，

[BruceWolf]

@Cmdhelp 每个人的偏好不一样，比如想到高德的时候并没想到百度，或者确实思考了但是最后没提百度。

所以当有人喜欢用专门查地铁的小工具时，不要惊讶为什么别人和“我”不一样，虽然确实是小众。不如换个角度，不着眼于自己怎么想，而是试着去想“这帮人到底在想什么，我怎么才能让他们爽？”

[Cmdhelp]

不过 你的只显示地铁 很清爽，用高德得话，看地铁线路没你这个方便 （个人习惯用高德了，哈哈

[yafoo]

为什么小程序的名字用英文？

[BruceWolf]

@Cmdhelp 这个世界很神奇，总有想不到的玩意，哈哈哈哈~

@yafoo 这是个错误，可能是因为这个名字很多年前就想好了吧，，真的很多年前，快十年了吧。
做这个小程序也算是圆当年一个梦，当时觉得市面上（只有 app 的时候）的技术方案都不好，随着地铁建设，地铁图逐渐变大会产生很大的性能问题。所以一直想实现一下自己的想法，没想到自己没做成 app 倒是做了个小程序。不过我这个小程序比 app 好使~

[ZG333]

为什么我进所有的帖子都会显示图片加载失败？

[Exia]

赞，希望楼主能分享一下这图怎么画出来的

[BruceWolf]

@ZG333 你用代理了吧，，

@Exia 暂时保密，望理解~

[wangpao]

@Exia 用设计软件很好画啊，试试 figma

[ZG333]

@BruceWolf 没有用代理 现在又好了

[Exia]

@BruceWolf 理解，期待以后分享~
@wangpao (⊙o⊙)… 其实我是想了解前端各个节点的事件在画布上如何画出来，figma 等设计工具倒都不怎么使用过，以后了解一下，谢谢分享。

[2379920898]

没理解干啥用的

[BruceWolf]

@Exia 绑定点击事件是通过区域判断的，即点击的坐标是否在某个矩形范围内，和绘图方法没关系，纯技术方案：）

[richardsonchen]

反馈：
功能上确实新用户没有体验到你说的那些功能，只体验到点击箭头定位离我最近的地铁站、搜索站点名；
左下角箭头按钮和右下角放大缩小按钮，显示不全，部分图案在屏幕外(设备：荣耀 9x)；
帖子动图这个怎么调出来... /(ㄒoㄒ)/~~

[BruceWolf]

@richardsonchen 地铁图展示你已经看到了，主界面就是地图，高清 + 无级缩放。站点查询，你也体验到了。线路查询展示、线路详情描你设置好起点终点就看到了。贴子那个切换地图风格，就是到设置（城市界面点底部卡片头右边的蓝色齿轮进入），第一行的按钮就是切换地图风格。

测试范围目前确实是个 bug，手上的 Android 设备有限，不能复现这个问题。能不能到小程序后台发微信号我，我加你给你，了解一下 bug 细节。

[yuankui]

牛逼啊，支持楼主

[Exia]

@BruceWolf 赞，前天将帖主的小程序分享了同伴，互相研究了一下，也是猜想了这个方案呢，谢谢回答。

[yuyueMJ]

挺好的，已添加，希望楼主坚持做下去，别等过段时间打开就是无法使用了。
看到济南就只有 H 得了两个竖线，我都要哭出来了

[sheny]

性能不谈，其他高德地图 API 都有接口实现。

[BruceWolf]

@yuyueMJ 谢谢支持~

@sheny 那个接口不够用，所以我是自己单独维护的整套数据。再有就是光有数据没有意义，让数据可用才有意义。