從矽谷到上海，這個技術大神做了個小程序，帶你發現城中好去處

知曉程序註：

「曉組織」是知曉程序推出的全新欄目。

這裡是「曉組織」的第 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 的瀏覽器，來實現同時登陸。

但無論如何，他們仍然沒辦法在手機上迅速地回復用戶。這也讓我撞了好幾天桌子。

GIF/996K

我們運營人員的需求是，不需要登陸網頁就能收到客服消息，也能在手機上隨時回復。

我們在尋找了很久。也沒發現特別可靠且有效的第三方工具來快速解決這個問題。而我們自己也實在沒有時間去開發一個完整的客服系統。

但好在微信提供了一個客服消息的後台介面。每條客服消息會被轉發到我們的後台伺服器上。然後我們利用了這個功能，做了兩個曲線救國的功能：

第一，每次我們的後台收到新的客服消息，就會發送一封郵件到我們運營同事的郵箱，他們手機可以收到提醒。

第二，我們做了一個簡易的微信機器人，每次我們收到一條新的客服消息，就用機器人利用聊天的方式，給我們的運營同事發送一條消息。然後，他們可以利用我們設置好的方法和我們的機器人對話，機器人在後台通過相關的信息將內容轉發給用戶。

所以是這樣一個流程：用戶->微信小程序->聯繫客服->發送消息到我們的伺服器->機器人->好處運營人員。這樣，我們就簡單地實現了一個簡易的手機客服系統。

當然還有不少功能，我們希望微信未來能陸續開發，比如更多推送相關的功能，甚至本地提醒，以及更多、能更自由地使用的介面和控制項。同時，也希望微信能提供更多配套工具和更多完整的功能。

就目前來說，我們對小程序還有很大的信心，我們相信騰訊和微信看到小程序的潛力，一定會放更多的資源和心思在小程序上。

現在，平均每 1 – 2 個星期都會有一些新的功能推出。這些都能讓開發者發揮更多想像力，以及提供更大助力。

當然，我們也希望微信能夠給小程序提供除了搜索以外的更多曝光機會，讓更多的用戶能更容易地找到優質的小程序。

小程序目前是「好處 MeetBest」除了網站以外的唯一客戶端，可能在後面很長一段時間都不會有什麼改變。我們也會將越來越多的功能加入小程序，比如按照時間、活動類型和地點篩選，更多空間相關的智能硬體的操控入口，更好的的聚會邀請等功能。

我們正在招兵買馬！

我們項目雖然不屬於高精尖的科技項目，但它對工程師們的要求卻一點都不低，無論用戶體驗、業務邏輯，還是內部管理、軟硬體結合，都是對工程師的綜合素質和學習能力的全面挑戰。

若你有一顆代碼藝術家的心，也對我們做的事感興趣，想要與一群城市黑客們一起並肩作戰，好處的大門永遠向你敞開！（順便一說我們真的在找 Nodejs —— 認真臉）

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！