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

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

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

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

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

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

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

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

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

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

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

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

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

　　四、接入微信開發(fā)者中心的網(wǎng)頁賬號接口，實現(xiàn)不注冊無密碼的會員登錄

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

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

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

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

　　五、接入微信支付接口，實現(xiàn)微信公眾平臺內(nèi)的快速支付

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

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

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

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

　　寫在最后

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