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

2020-04-29 14:03:14 +08:00
 BruceWolf

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

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

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

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

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

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

现代风格：

暗黑风格：

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

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

4391 次点击
所在节点    分享创造
23 条回复
BruceWolf
2020-04-29 14:05:22 +08:00
不知道怎么在文章里 @ 人，回复里操作吧，@qiuyk 帮我看看效果怎么样~
acthtml
2020-04-29 14:10:32 +08:00
你为何会说“小程序是阉割版的 html5，性能低下，ui 奇卡无比”，年轻人讲话要负责啊。

另外动手实践还是要支持下的。
murmur
2020-04-29 14:17:06 +08:00
@acthtml
html5 程序性能低是 flutter 和 react native 当时推广时用的话术，所以后两句没错
第一句是因为腾讯明明用了 webview，但是自创了一套乱七八糟的东西，屏蔽了原生 api，所以也没错
Cmdhelp
2020-04-29 16:32:45 +08:00
。。。高德地图 输入目的地，各种交通方式详情都出来了，但是我一般只能选公交这种方式，，，，，，，
BruceWolf
2020-04-29 17:35:39 +08:00
@Cmdhelp 每个人的偏好不一样，比如想到高德的时候并没想到百度，或者确实思考了但是最后没提百度。

所以当有人喜欢用专门查地铁的小工具时，不要惊讶为什么别人和“我”不一样，虽然确实是小众。不如换个角度，不着眼于自己怎么想，而是试着去想“这帮人到底在想什么，我怎么才能让他们爽？”
Cmdhelp
2020-04-29 17:42:00 +08:00
不过 你的只显示地铁 很清爽，用高德得话，看地铁线路没你这个方便 （个人习惯用高德了，哈哈
yafoo
2020-04-29 17:46:12 +08:00
为什么小程序的名字用英文？
BruceWolf
2020-04-29 17:55:20 +08:00
@Cmdhelp 这个世界很神奇，总有想不到的玩意，哈哈哈哈~

@yafoo 这是个错误，可能是因为这个名字很多年前就想好了吧，，真的很多年前，快十年了吧。
做这个小程序也算是圆当年一个梦，当时觉得市面上（只有 app 的时候）的技术方案都不好，随着地铁建设，地铁图逐渐变大会产生很大的性能问题。所以一直想实现一下自己的想法，没想到自己没做成 app 倒是做了个小程序。不过我这个小程序比 app 好使~
ZG333
2020-04-29 19:11:22 +08:00
为什么我进所有的帖子都会显示图片加载失败？
Exia
2020-04-29 21:43:49 +08:00
赞，希望楼主能分享一下这图怎么画出来的
BruceWolf
2020-04-29 22:55:18 +08:00
@ZG333 你用代理了吧，，

@Exia 暂时保密，望理解~
wangpao
2020-04-30 08:28:03 +08:00
@Exia 用设计软件很好画啊，试试 figma
ZG333
2020-04-30 09:29:18 +08:00
@BruceWolf 没有用代理 现在又好了
Exia
2020-04-30 09:33:33 +08:00
@BruceWolf 理解，期待以后分享~
@wangpao (⊙o⊙)… 其实我是想了解前端各个节点的事件在画布上如何画出来，figma 等设计工具倒都不怎么使用过，以后了解一下，谢谢分享。
2379920898
2020-04-30 10:55:02 +08:00
没理解干啥用的
BruceWolf
2020-04-30 12:44:18 +08:00
@Exia 绑定点击事件是通过区域判断的，即点击的坐标是否在某个矩形范围内，和绘图方法没关系，纯技术方案：）
richardsonchen
2020-04-30 13:59:48 +08:00
反馈：
功能上确实新用户没有体验到你说的那些功能，只体验到点击箭头定位离我最近的地铁站、搜索站点名；
左下角箭头按钮和右下角放大缩小按钮，显示不全，部分图案在屏幕外(设备：荣耀 9x)；
帖子动图这个怎么调出来... /(ㄒoㄒ)/~~
BruceWolf
2020-04-30 14:29:55 +08:00
@richardsonchen 地铁图展示你已经看到了，主界面就是地图，高清 + 无级缩放。站点查询，你也体验到了。线路查询展示、线路详情描你设置好起点终点就看到了。贴子那个切换地图风格，就是到设置（城市界面点底部卡片头右边的蓝色齿轮进入），第一行的按钮就是切换地图风格。

测试范围目前确实是个 bug，手上的 Android 设备有限，不能复现这个问题。能不能到小程序后台发微信号我，我加你给你，了解一下 bug 细节。
yuankui
2020-04-30 17:56:50 +08:00
牛逼啊，支持楼主
Exia
2020-05-03 17:27:26 +08:00
@BruceWolf 赞，前天将帖主的小程序分享了同伴，互相研究了一下，也是猜想了这个方案呢，谢谢回答。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/667269

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX