从硅谷到上海，这个技术大神做了个小程序，带你发现城中好去处 | 晓组织 #18

知晓程序注：

「晓组织」是知晓程序推出的全新栏目。

每周，我们都会邀请优秀的小程序开发者，从产品/开发/运营等角度，分享他的小程序实战经验。如果你想成为「晓组织」的一员，请发送邮件至 [email protected] 给我们投稿，献上你的投名状。

这里是「晓组织」的第 18 期。

我是徐寅，在「好处 MeetBest」担任 CTO。

我毕业于美国威斯康星州立大学计算机系，曾任硅谷著名旅游社交公司 Trip.com 高级架构师，带领团队开发的 Trip.com App 多次被 Apple, Google 评选为最优秀软件，并获得 Google 最佳开发者奖和编辑推荐奖。

当然，我也是个独立开发者，没事喜欢自己倒腾开发些好玩的 App。譬如 Heart Heath Mobile，在 2012 年美国政府 HHS 部门举办的健康移动软件比赛获得了全美第一名。之前开发过好几个 App，在全球 50 多个国家热销。

不懂产品的码农不是好的 CTO — 在硅谷的时候，我创立了目前硅谷最大的华人移动软件交流组织，也多次被邀请创业及做技术演讲。

关注「知晓程序」微信公众号，在后台回复「0109」，一张图教你玩转小程序。

从硅谷到上海，成为一名「城市黑客」

回国之后，我便加入了「好处 MeetBest」团队。

好处是一个「城市黑客」组织，而我的伙伴们则是一群精通空间魔法的建筑师。

他们在城市繁华地带，寻找出一个个潜在的好去处，并将这些寻常、老旧的场所，精心改造成各种意想不到的，独具特色的空间。

从外滩的老上海洋房，到法租界的精致小楼，我们在上海的中心地带，已经开辟出了十几个充满惊喜的空间。无论是私人派对、主题聚会、还是拍摄直播、团建培训、婚礼节庆，人们都能在好处的空间里，找到属于他们的一份自在。

虽然已经有数百家企业客户，以及逾万名个人用户预定过好处的空间，但在我加入团队之前，好处的线下沟通和预定流程非常繁琐复杂，并且找不到现成的平台解决方案。

用小程序，解决「多人线上决策」的问题

我一直信奉用互联网手段提高工作效率这件事，所以，我们一直在策划开发好处的客户端，帮人们发现城市中的优质场地和美好聚处，方便地去预定这些空间来做聚会、团建、会议、拍摄等各种各样好玩的事情。

落地到功能层面，这个客户端还需要让人们很方便地进行场地的内容查看及分享、细节咨询、分时段预定等各种操作。

「好处 MeetBest」是我开发的第一个微信小程序，从启动开发到基本功能完成，仅用了不到一个月的时间。

为什么是微信小程序呢？作为一个从 2010 年起就一直在开发 iOS 和 Android App 的工程师，在构架好处客户端时，第一个想到的，毫无疑问是开发 Native App。但仔细思考了很久，加上和运营团队包括客户沟通了几次以后，发现原生 App 可能不是一个最好的选择。

根据我们前期运营的经验，策划一个聚会或者活动，是一个「多人线上共同决策」的过程。

比如，我们大部分客户在策划一个线下聚会或者活动时，一定会在自己的微信小群组里咨询一下大家的意见，如果找到合适的聚会空间，他们通常会把照片、地址、空间信息复制黏贴或者截图在微信群里分享，然后在群组里征求一下小伙伴的意见。如果不合适，他们需要再重复一次相同的工作，直到找到大家都满意的空间后，再下单预定。

综合大部分客户的决策过程，我们获得了非常大的启发。因为这个过程是微信小程序完美适用的场景。

在「好处 MeetBest」的小程序中，活动策划人打开后，可以在空间列表立即看到所有空间的简介和图片，空间的细节信息和图片都展示在详情页面。

空间的可预约日期时间，也都很直观地标识在时间轴上。所有额外的注意事项，也都很明确地告知到了用户。价格信息也很透明，每一项价格，我们都在最后的确认页面上，清楚地标识了出来。

这样，整个决策流程变得极其顺畅且便捷，预定流程也变得简单明了。没有繁琐的注册登录，活动策划人不再需要繁琐地截图分享，就可以把空间信息分享给参与的朋友；参与者们不再需要下载任何多余的 App 就可以立刻参与到决策当中。

当策划人找到觉得满意的空间，可以将详情页面直接转发到自己的微信群，参与者们首先可以从分享的小程序卡片上看到：主图、空间名称、小时价格、地址区域等最重要的信息。

点击卡片，可以直接打开这个空间的详情页面，看到空间信息和图片。如果他们觉得这个不是最适合的空间，他们可以自行回到小程序的空间列表页面，看看有没有其他更好、更适合的聚会空间。

3 周时间，从零做出一款小程序

最早我们决定开发小程序后第一个问题就是：作为一个 iOS 和 Android 的工程师，需要多久时间才能熟悉小程序开发，并且从 0 到 1 的完成整个产品？

再加上「好处 MeetBest」是一个以建筑空间设计感和创意驱动的公司。我们也希望小程序能有一定设计感和良好的体验。所以开发和设计上的双重挑战在一开始也给了我不少压力。

作为一个没有什么设计能力，连 Photoshop 和 Sketch 都不太熟练的的码农来说，我翻遍了几乎 Dribbble 和 Pinterest 上所有酒店、机票、活动，以及有任何展示预定的产品设计图和样品，再结合我们自己的一些要求和想法，在纸上画出了我们第一个版本的大概方案。在此趁机感谢各位有贡献精神的设计师们。

之后，我开始着手小程序的研究开发。

首先必须感谢微信，因为小程序的文档给我非常好的印象，组织合理、内容明确，提供了很多案例。

坦白说国内很多的框架，或 SDK 提供方的文档都是一直以来非常让人头疼的问题，原本简单的开发，因为混乱的文档和不明确的使用方法变得异常恼人。而微信在这方面初期就打消了我很大的顾虑。（没有任何拍微信马屁的意思，如果亲自看过小程序的文档应该就能理解）

加上小程序是一个类似 Vue.Js 和 React.Js 的 MVVM 框架，微信把它叫做 MINA 框架，这使得原本接触过 Vue 或 React 框架的工程师在学习过程中几乎没有什么门槛。而且大部分的 Javascript 的库都可以直接被拿来使用，比如 promise, moment 等。

虽然目前小程序开放的 API 还不算太多，但至少大部分的基础功能都可以实现，所以在基本上没有给我们的开发造成太大的困扰。我们一共花了 3 周的时间，完成好处小程序第一版的所有功能。

那些年，我们在小程序上踩过的坑

目前，我们对小程序仍有一些怨言和苦恼。

1. 核心组件的层级限制

第一是他们部分核心组件在层级上的限制，比如地图和多行输入框。

这两个都是我们非常需要的组件。一个用于显示我们空间的位置，另一个用于预约时用户填写额外的需求。

但这两个都被要求在最高层级，这导致它们在滚动时，会浮在我们 fix 在底部的确认按键上。

我们尝试了很多不同的方法，但都无法摆脱这个问题。这一度导致我打算修改设计，使用图片的形式来展示地图，但实在不愿意放弃一个可以放大缩小自由操作的真实地图，所以暂时只能接受这个有点 buggy 的形式。

希望微信能够在后面修改这个限制。

2. 客服会话功能

还有一个很关键的功能是客服会话功能。

虽然微信在小程序中提供了咨询客服这个功能，但是他们提供的官方客服工具却只有网页版本。如果我们的运营人员不在电脑旁，就无法立刻收到和回复消息。

再加上，微信提供的这个网页客服工具，上面的「公众号的客服」和「微信小程序的客服」入口是分开的，一旦登陆了一边，另一边则会被强制登出。我们的运营人员必须开两个不共享 cookie 的浏览器，来实现同时登陆。

但无论如何，他们仍然没办法在手机上迅速地回复用户。这也让我撞了好几天桌子。

我们运营人员的需求是，不需要登陆网页就能收到客服消息，也能在手机上随时回复。

我们在寻找了很久。也没发现特别可靠且有效的第三方工具来快速解决这个问题。而我们自己也实在没有时间去开发一个完整的客服系统。

但好在微信提供了一个客服消息的后台接口。每条客服消息会被转发到我们的后台服务器上。然后我们利用了这个功能，做了两个曲线救国的功能：

第一，每次我们的后台收到新的客服消息，就会发送一封邮件到我们运营同事的邮箱，他们手机可以收到提醒。
第二，我们做了一个简易的微信机器人，每次我们收到一条新的客服消息，就用机器人利用聊天的方式，给我们的运营同事发送一条消息。然后，他们可以利用我们设置好的方法和我们的机器人对话，机器人在后台通过相关的信息将内容转发给用户。

所以是这样一个流程：用户->微信小程序->联系客服->发送消息到我们的服务器->机器人->好处运营人员。这样，我们就简单地实现了一个简易的手机客服系统。