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

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

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

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

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

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

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

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

　　我們?cè)賮砜聪律碳以诤笈_(tái)是如何為自己的瑜伽館在地圖上標(biāo)點(diǎn)的吧。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　寫在最后

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