本發(fā)明涉及一種基于reactnative實(shí)現(xiàn)lbs的方法，屬于移動app開發(fā)技術(shù)領(lǐng)域。

背景技術(shù)：

目前，很多社交、生活服務(wù)類的移動端app(應(yīng)用程序)都使用了lbs(location-basedservice，地理位置服務(wù))。通過借助第三方平臺，例如百度地圖、高德地圖、騰訊地圖等，開發(fā)者可以有效調(diào)用其豐富的api(應(yīng)用程序編程接口)，例如javascriptapi、uriapi等，實(shí)現(xiàn)個性化服務(wù)。

通常情況下，開發(fā)一款移動應(yīng)用要面向android和ios系統(tǒng)，也就是主流的安卓手機(jī)和蘋果手機(jī)。軟件公司需要配置專門的針對不同平臺的開發(fā)人員，因?yàn)閮烧叩拈_發(fā)環(huán)境、開發(fā)語言、開發(fā)工具等差異迥然。具體而言，android系統(tǒng)一般在windows操作系統(tǒng)下，使用androidstudio(或eclipse)開發(fā)工具，用java語言編程；ios系統(tǒng)一般在macos(x)操作系統(tǒng)，使用xcode開發(fā)工具，用objective-c(或swift)語言編程。所以，平臺的差異意味著開發(fā)人員需要具備不同的開發(fā)技能，軟件公司一般也要配置android和ios開發(fā)人員。每當(dāng)應(yīng)用中增加一個功能或解決一處公共的bug，那么就要同時開發(fā)或維護(hù)。

如果開發(fā)一款同時面向android和ios的位置服務(wù)應(yīng)用，開發(fā)人員還需要針對不同平臺分別下載sdk，在工程項(xiàng)目中配置環(huán)境，調(diào)用api實(shí)現(xiàn)位置服務(wù)功能。由于sdk的封裝及調(diào)用所使用的語言不同，所以開發(fā)周期也相對較長。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明為了解決跨手機(jī)平臺的位置服務(wù)的技術(shù)問題，提供了一種基于reactnative實(shí)現(xiàn)lbs的方法。

本發(fā)明技術(shù)方案如下：

一種基于reactnative實(shí)現(xiàn)lbs的方法，具體步驟包括：

步驟a、開發(fā)者在reactnative頁面中引入兼容android和ios的封裝后的網(wǎng)頁組件；

步驟b、在reactnative網(wǎng)頁組件中編寫腳本程序，腳本程序調(diào)用第三方平臺api，第三方平臺api訪問終端設(shè)備的gps，獲取終端設(shè)備所在地的經(jīng)緯度，實(shí)現(xiàn)終端設(shè)備定位，第三方平臺api渲染以定位點(diǎn)為中心的區(qū)域地圖；

步驟c、建立reactnative與網(wǎng)頁組件雙向通訊，實(shí)現(xiàn)lbs定位功能；

(1)reactnative調(diào)用后臺數(shù)據(jù)庫獲取信息數(shù)據(jù)，并將信息數(shù)據(jù)傳遞至網(wǎng)頁組件；

(2)網(wǎng)頁組件通過腳本程序調(diào)用第三方平臺api，腳本程序?qū)⒌玫降男畔?shù)據(jù)繪制成用戶所用的坐標(biāo)點(diǎn)圖標(biāo)以及信息窗口內(nèi)容；

(3)用戶點(diǎn)擊坐標(biāo)點(diǎn)圖標(biāo)后，網(wǎng)頁頁面會彈出信息窗口，選擇從網(wǎng)頁組件返回reactnative，實(shí)現(xiàn)lbs定位。

本發(fā)明的有益效果：該方法在reactnative框架兼容android和ios平臺的良好特性下，使用其提供的網(wǎng)頁組件<webview>實(shí)現(xiàn)lbs功能，體現(xiàn)出其在項(xiàng)目實(shí)踐中開發(fā)成本小、開發(fā)周期短、跨平臺、便于維護(hù)等優(yōu)點(diǎn)。

附圖說明

圖1為本發(fā)明一種基于reactnative實(shí)現(xiàn)lbs的方法的示意圖。

具體實(shí)施方式

下面結(jié)合附圖對本發(fā)明作進(jìn)一步闡述。

如圖1所示，一種基于reactnative實(shí)現(xiàn)lbs的方法，具體是一種通過facebook公司開源的移動端javascript框架reactnative實(shí)現(xiàn)跨手機(jī)平臺的位置服務(wù)的方法，reactnative可以快速部署和開發(fā)跨平臺app，與原生開發(fā)所用地圖sdk不同，reactnative在頁面中直接引用網(wǎng)頁組件<webview>，該網(wǎng)頁組件<webview>加載網(wǎng)頁，起到類似瀏覽器的作用，調(diào)用第三方平臺api(本文以百度地圖為例)，通過腳本程序渲染頁面內(nèi)容，完成地圖渲染、地理定位，以及交互行為，從而實(shí)現(xiàn)lbs功能，并且使lbs在reactnative框架下可以敏捷開發(fā)和擴(kuò)展。

具體步驟包括：

步驟a、開發(fā)者在reactnative頁面中引入了很多常用的兼容android和ios的封裝組件，例如視圖組件<view>、文本組件<text>、圖片組件<image>等，這些組件在每個平臺的顯示遵循對應(yīng)的原生風(fēng)格，并在很大程度上做到了代碼重用，即同一份代碼只需要稍作修改，就可以在不同平臺渲染相同的視圖。

其中，開發(fā)者在reactnative頁面中引入網(wǎng)頁組件<webview>。reactnative的網(wǎng)頁組件<webview>是兼容android和ios的封裝后的網(wǎng)頁組件，可以加載html、css、javascript，能夠像瀏覽器一樣加載網(wǎng)頁，開發(fā)者在網(wǎng)頁中渲染地圖，并嘗試開發(fā)更豐富的位置服務(wù)功能。

步驟b、網(wǎng)頁組件<webview>調(diào)用百度地圖javascriptapi渲染內(nèi)容。在reactnative網(wǎng)頁組件<webview>中編寫腳本程序javascript代碼，腳本程序調(diào)用第三方平臺百度地圖javascriptapi，第三方平臺百度地圖javascriptapi訪問終端設(shè)備的gps，獲取終端設(shè)備所在地的經(jīng)緯度，從而實(shí)現(xiàn)終端設(shè)備定位，第三方平臺百度地圖javascriptapi渲染以定位點(diǎn)為中心的區(qū)域地圖(也可以根據(jù)需求渲染目標(biāo)區(qū)域及縮放級別)。

javascriptapi目前的版本是2.0，開發(fā)者需要以個人開發(fā)者身份或者企業(yè)用戶身份申請密鑰，方可使用。兩者在服務(wù)、并發(fā)調(diào)用等服務(wù)條款有不同的標(biāo)準(zhǔn)，視開發(fā)需求而異。申請密鑰后，直接在網(wǎng)頁的頭部引用庫文件，并在連接地址中添加密鑰參數(shù)，即可使用。

步驟c、建立reactnative與網(wǎng)頁組件<webview>雙向通訊，實(shí)現(xiàn)lbs定位。

這一步是實(shí)現(xiàn)lbs功能的關(guān)鍵，因?yàn)殡m然有了地圖定位，但應(yīng)用卻沒有給用戶帶來實(shí)質(zhì)性的服務(wù)功能，因此在reactnative與網(wǎng)頁組件<webview>間需要建立通訊機(jī)制，通過交互行為，增強(qiáng)服務(wù)體驗(yàn)。通訊機(jī)制的建立分為以下三步：

(1)reactnative調(diào)用后臺數(shù)據(jù)庫獲取餐飲、銀行或定制化的顯示信息數(shù)據(jù)(例如坐標(biāo)點(diǎn)經(jīng)緯度、名稱、圖片或其它字段)，并以發(fā)送數(shù)據(jù)方法postmessage()將信息數(shù)據(jù)傳遞至網(wǎng)頁組件<webview>。

(2)網(wǎng)頁組件<webview>通過腳本程序調(diào)用第三方平臺百度地圖javascriptapi，腳本程序?qū)⒌玫降男畔?shù)據(jù)繪制成用戶所用的坐標(biāo)點(diǎn)圖標(biāo)以及信息窗口內(nèi)容。

(3)用戶點(diǎn)擊坐標(biāo)點(diǎn)圖標(biāo)后，網(wǎng)頁頁面會彈出信息窗口，選擇點(diǎn)擊“導(dǎo)航”或者“詳細(xì)”按鍵觸發(fā)事件，該操作指令從網(wǎng)頁組件<webview>返回給reactnative端。reactnative端調(diào)用獲取數(shù)據(jù)方法onmessage()接收操作指令，跳轉(zhuǎn)到導(dǎo)航頁面或詳情頁面，從而實(shí)現(xiàn)lbs定位。

需要注意的是，reactnative版本<0.37(截至撰文為止，reactnative的最新版本為0.42)，需要引用第三方開源組件react-native-webview-bridge，因?yàn)樵趓n早先版本，官方并沒有提供網(wǎng)頁組件<webview>的通訊方法。<webviewbridge>組件實(shí)際上是對網(wǎng)頁組件<webview>的再次封裝，增加了傳遞信息的方法。reactnative>＝0.37，即在0.37版本中facebook的reactnative團(tuán)隊(duì)對<webview>增加了通訊方法，即從rn傳遞到網(wǎng)頁組件<webview>信息的postmessage()方法，rn接收網(wǎng)頁組件<webview>信息的onmessage()方法，所以使用該范圍的rn版本創(chuàng)建項(xiàng)目時無需再引用react-native-webview-bridge組件了。