今天要與大家分享的干貨是我公司為客戶研發的一款微信公眾號的項目，通過在微信中搜索公眾號“瑜伽之旅”，并添加關注后，可體驗項目中的各項功能。

　　瑜伽之旅是一款為瑜伽館、瑜伽教練和瑜伽愛好者之間搭建一個社交關系平臺的微信公眾號，用戶在此平臺上可以搜索離自己最近的瑜伽館、學習瑜伽知識、預約瑜伽課程，也可通過微信支付進行相關付費。

　　千助在本項目的開發上歷時 2-3 個月的時間，前端采用了 HTML5 + CSS3 的響應式布局，項目中涉及了多個移動端的技術應用，下面我們一起來分享一下。

　　一、使用 HTML5 Geolocation 地理定位技術，找到用戶所在位置

　　通過點擊微信公眾號下方的菜單“瑜伽館”，可以進入到瑜伽之旅的界面，在此界面中，當我們點擊“查找場館”時，系統將通過程序調用GPS功能，定位用戶的移動設備所在的地區 ( 例如北京 ) ，并顯示該地區的瑜伽館列表，供用戶選擇。

　　調用GPS定位功能采用的是 HTML5 Geolocation ( 地理定位 ) 技術，對于擁有 GPS 的設備，比如 iPhone或其他的智能移動終端，地理定位會非常精確。鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。所以，當使用GPS功能時，微信會主動詢問我們是否允許將自己的當前位置開放給該平臺，以保證隱私安全。

　　二、通過經緯度計算地球表面兩點間的距離，為用戶找到最近的瑜伽館

　　無論是系統通過定位獲取的用戶地理位置，還是瑜伽館商家在地圖上標點的瑜伽館位置，都是通過經緯度來表示的。在項目研發中，我們通過一種計算公式，結合兩點的經度和緯度坐標，可以計算出地球表面兩點間的距離。將該公式應用到微信用戶與各個瑜伽館的距離計算中，可換算為公里數為用戶列出離自己最近的瑜伽館，方便用戶就近選擇。

　　我們再來看下商家在后臺是如何為自己的瑜伽館在地圖上標點的吧。

　　商家在后臺可以通過百度地圖搜索自己瑜伽館所在的大概位置，并通過地圖的縮放功能，顯示出精確的街道場景，并手動在地圖上進行準確標點，提交保存。

　　三、接入百度地圖接口，全城展示您身邊的瑜伽館

　　定位搜索功能，通過接入百度地圖 API 接口，并結合GPS定位，在地圖上展示出移動終端用戶周邊的瑜伽館，供用戶更加直觀地選擇。

　　在該功能中，系統甚至可以準確地判斷出小編所在的位置是“北京市海淀區上地東路1號院6號樓附近”，實際上，這正是我公司千助目前的辦公位置 —— 盈創動力大廈的地址。而此時，小編正在通過手機使用該功能，這也體現了移動定位的強大精準度。

　　四、接入微信開發者中心的網頁賬號接口，實現不注冊無密碼的會員登錄

　　點擊微信公眾號下方的菜單“我”，可以進入到我的中心界面，首次進入是未登錄狀態，用戶頭像顯示為系統默認的微信圖標。

　　項目開發中，我們通過接入微信開發者中心的網頁賬號接口，采用靜默授權模式，獲得微信用戶的 openid ( 微信用戶的唯一標識 ) ，進而通過 openid 獲得該用戶在微信中的基本信息以及登錄狀態，實現不注冊無密碼的會員登錄。

　　對于用戶而言，他們感知到的就是點擊上圖中的“用微信帳號登錄”后，就直接登錄進會員中心了 ( 系統將自動完成注冊、密碼設置及會員登錄等一系列操作，對用戶是完全透明的 ) 。

　　成功登錄后，系統會自動獲取用戶的微信頭像和昵稱，并顯示在我的中心界面中。以后用戶再通過微信公眾號進入平臺時，系統將根據用戶微信號自動登錄，無需用戶再次點擊登錄按鈕。

　　五、接入微信支付接口，實現微信公眾平臺內的快速支付

　　這里我們一概使用的是測試數據。在瑜伽館列表界面中，點擊進入任何一家瑜伽館都可以進行課卡的購買 ( 課程、課卡和價格都需要商家在后臺提前設置好 ) ，點擊“立即購買”按鈕，即可將課卡加入購物車。

　　在購物車頁面點擊確認支付，系統將調起微信的 JSAPI 公眾號支付接口，并顯示出微信支付的進度圖標，為用戶打開支付界面。

　　這里為了測試使用，我們暫時將商品價格改為1分錢。用戶確認支付并輸入支付密碼，成功后即返回微信的支付結果界面，整個的交易流程在半分鐘內即可完成。如果您的移動設備還支持指紋識別功能，您甚至可以通過指紋支付，而無須輸入支付密碼，獲得更佳的支付體驗。

　　至此，主要的移動端技術我們已分享完畢，除此之外，平臺中還有課程管理、課卡管理、約課流程管理、訂單管理、商家管理、招募伙伴管理等多項大型功能，由于在PC端中也經常遇到，此處不再詳述。

　　寫在最后

　　在整個的項目過程中，我們協助客戶完成了微信公眾平臺的注冊、服務號的認證、微信支付的資質審核和賬戶驗證，并以最優方式配置了微信開發者中心的參數，為客戶能夠正常上線運營提供了全面的技術保障和咨詢服務。