資訊專欄INFORMATION COLUMN
摘要：你就可以在目錄下用或者開發(fā)應(yīng)用代碼了設(shè)計(jì)原理結(jié)合了高德地圖多個(gè)功能，比如定位，地圖縮放，繪制折現(xiàn)，進(jìn)行點(diǎn)的標(biāo)記等常用功能。文件源代碼打包運(yùn)行開發(fā)完畢后，我們可以運(yùn)行命令，讓它安裝到我們的測(cè)試手機(jī)上。
Weex正如它的目標(biāo)，
一套構(gòu)建高性能、可擴(kuò)展的原生應(yīng)用的跨平臺(tái)開發(fā)方案
Weex 給大家?guī)淼臒o疑是客戶端開發(fā)效率的提升，我們可以通過一套代碼，實(shí)現(xiàn)web，android, iOS的三個(gè)平臺(tái)上運(yùn)行。自己最近嘗試了一次借助weex的插件機(jī)制，使用Weex-Amap地圖插件 可以開發(fā) LBS 相關(guān)的應(yīng)用。
首先我們先來看下運(yùn)行的效果吧:
iOS 版
Android 版
截圖數(shù)據(jù)僅供參考
它大概具備下面的一些功能;
統(tǒng)計(jì)用戶在運(yùn)動(dòng)過程中的距離累計(jì)，時(shí)間計(jì)算等。
存儲(chǔ)用戶的運(yùn)動(dòng)數(shù)據(jù)
使用地圖定位和距離計(jì)算的API，實(shí)現(xiàn)距離統(tǒng)計(jì)。
顯示地圖折線，通過對(duì)定位的數(shù)據(jù)地理位置進(jìn)行折線繪制
統(tǒng)計(jì)用戶運(yùn)動(dòng)的數(shù)據(jù)，計(jì)算總距離和時(shí)間
點(diǎn)擊用戶的歷史記錄，可以查看軌跡
感覺和大家所用到的app功能相差不多了，但實(shí)際上我們借助 Weex 和 Weex-Amap 插件可以非?？焖俚膶?shí)現(xiàn)這些功能，下面我們來看下具體怎么實(shí)現(xiàn)吧。
使用 weex-toolkit 創(chuàng)建項(xiàng)目首先我們按照官網(wǎng)的教程安裝weex-toolkit。如果已經(jīng)安裝過請(qǐng)忽略。
$ npm install -g weex-toolkit
安裝完成后，我們創(chuàng)建一個(gè)項(xiàng)目目錄，比如running-app。
weex create running-app
大家可能會(huì)看到下面的提示，輸入y安裝即可。
This command need to install weexpack. Install now? Yes
項(xiàng)目創(chuàng)建完成后，我們需要添加我們的運(yùn)行平臺(tái)比如android或者ios，這里我們添加 android 平臺(tái)。
weex platform add android
添加成功后，我們?cè)谕ㄟ^weex的插件機(jī)制，安裝weex-amap高德的地圖依賴。
weex plugin add weex-amap
安裝完成后，你可以到項(xiàng)目目錄 plugins 里面看下是否有新增的 weex-amap 的項(xiàng)目目錄，如果存在即表示插件安裝成功。你就可以在src目錄下用we或者vue開發(fā)應(yīng)用代碼了
設(shè)計(jì)原理[weex-amap]結(jié)合了高德地圖多個(gè)功能，比如定位，地圖縮放，繪制折現(xiàn)，進(jìn)行點(diǎn)的標(biāo)記等常用功能。實(shí)現(xiàn)一款跑步應(yīng)用，我們需要解決最核心的問題就是：
統(tǒng)計(jì)一個(gè)在運(yùn)動(dòng)過程的總距離 (s)
當(dāng)我們能夠獲取到總距離(s)的時(shí)候，和運(yùn)動(dòng)時(shí)間(t) 通過小學(xué)物理知識(shí)，我們知道:
速度(v) = 總路程(s) / 總時(shí)間(t)
在結(jié)合一些公式，我們還可以計(jì)算出我們的 卡路里(c);
其中 weex-amap 正好可以解決上面最為核心的問題，我們可以通過定位，然后在通過比較兩個(gè)連續(xù)點(diǎn)之間的距離，進(jìn)行累加(微分累計(jì))，從而獲取總距離。(當(dāng)然這只是最為簡(jiǎn)單的實(shí)現(xiàn)原理，做成完整的app還需要更加科學(xué)化的算法)
[weex-amap] 其中提供了這么兩個(gè)API
getUserLocation 用于獲取用戶的當(dāng)前位置地理位置,用戶會(huì)獲取經(jīng)緯度 [Long, Lat]
getLineDistance 用戶獲取傳入的兩個(gè)地理位置的直線距離
除了這兩個(gè)API，我們還需要用到地圖的一個(gè)組件, 就是折線繪制 weex-amap-polyline 。它可以通過path屬性接收到一組地理位置坐標(biāo)值，從而在地圖上繪制連續(xù)的折線。比如:
其中 your_path 指定類似這樣的數(shù)據(jù)： [[116.487, 40.00003],[113.487, 40.0002]...]
關(guān)于更多的如何使用weex-amap 插件，可以參考這篇 文章 以及 官方Demos
設(shè)計(jì)頁面功能和邏輯大家也都用過跑步的APP,常見的界面布局如下:
那么我們頁面的基本結(jié)構(gòu)就已經(jīng)出來了:
其中 我們使用了weex-amap組件，其中一些屬性:
zoom 表示設(shè)置的地圖的縮放級(jí)別
geolocation 添加地圖定位插件沒如果你需要定位功能，必須設(shè)置
sdk-key 設(shè)置地圖的密鑰，這是地圖開發(fā)必須申請(qǐng) (前往高德地圖申請(qǐng))
center 設(shè)置地圖的中心，需要設(shè)置一個(gè)數(shù)組，傳入地理位置坐標(biāo)[116.487, 40.00003]第一個(gè)數(shù)字表示經(jīng)度，第二個(gè)值表示緯度
其中的樣式參考如下,當(dāng)然你也可以自己實(shí)現(xiàn)一個(gè)布局：
.container{
position: relative;
flex: 1;
min-height: 600;
background-color: #eee;
}
.map{
flex: 1;
min-height: 600;
}
.map-controller{
z-index: 10000;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 500;
background-color: rgba(255,255,255,1);
border-top-width: 2;
border-top-color: rgba(0,0,0,.25);
}
.distance-wrap{
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
}
.dashboard{
flex: 1;
flex-direction: row;
}
.btn-wrap{
flex: 1;
flex-direction: row;
align-items: center;
justify-content: center;
}
定義數(shù)據(jù)模型
我們需要在界面里顯示四組數(shù)據(jù):
運(yùn)動(dòng)距離
運(yùn)動(dòng)時(shí)間
運(yùn)動(dòng)消耗
運(yùn)動(dòng)配速
自己設(shè)計(jì)的runningData里面包含了下面一些數(shù)據(jù):
runningData: {
distance: 0, // 表示運(yùn)動(dòng)的累計(jì)距離
miles: 0, // 表示運(yùn)動(dòng)的累計(jì)距離，單位是公里用于界面顯示
path: [], // 運(yùn)動(dòng)坐標(biāo)數(shù)據(jù)
time: "00:00:00", // 用于界面的運(yùn)動(dòng)時(shí)間顯示
seconds: 0, // 運(yùn)動(dòng)的時(shí)間，單位：秒
speed: 0, // 配速
calories: 0, // 運(yùn)動(dòng)的消耗，單位千卡
}
處于計(jì)算的方便其中我設(shè)計(jì)了幾個(gè)用于數(shù)據(jù)格式的轉(zhuǎn)換和計(jì)算，在我的 utils.js 里面。
這個(gè)時(shí)候我們需要在模板里面添加一些代碼用于顯示這些數(shù)據(jù);
添加地圖折線polyline{{runningData.miles}} 公里 運(yùn)動(dòng)時(shí)間 {{runningData.time}} 配速 {{runningData.speed}} 熱量 {{runningData.calories}}
添加流程控制
在我們進(jìn)行跑步的過成功無疑就是這么幾個(gè)狀態(tài)，我將它定義在了 status.js
module.exports = {
RUNNING_READY: 1, // 跑步開始前
RUNNING_DOING: 2, // 跑步進(jìn)行中
RUNNING_PAUSE: 3, // 跑步暫停中
RUNNING_END: 4 // 跑步結(jié)束,
RUNNING_PREVIEW: 5 // 數(shù)據(jù)預(yù)覽
};
我們通過這幾個(gè)狀態(tài)來實(shí)現(xiàn)對(duì)界面的操作，比如開始或者暫停。這個(gè)時(shí)候我們需要添加一一些用于界面控制的按鈕。
...實(shí)現(xiàn)流程
我們接下來，按照流程來實(shí)現(xiàn)我們的程序邏輯：
const status = require("./lib/status");
...
module.exports = {
// ...
methods() {
start() {
},
stop() {
},
continue() {
},
end() {
},
}
}
start
開始的業(yè)務(wù)邏輯很簡(jiǎn)單，就是更改頁面狀態(tài)到運(yùn)行中，然后執(zhí)行程序。
start() {
this.status = status.RUNNING_DOING;
this.runningAmapGeolocation();
}
stop
暫停的話，我們需要清除掉頁面的計(jì)時(shí)器。
stop() {
this.status = status.RUNNING_PAUSE;
clearInterval(this.timeRecorder); // 計(jì)算時(shí)間
clearInterval(this.amapRecorder); // 計(jì)算定位
}
end
點(diǎn)擊結(jié)束按鈕，我們需要清除計(jì)時(shí)器，然后顯示出累計(jì)的數(shù)據(jù)就行了，當(dāng)然做的復(fù)雜一點(diǎn)，還可以進(jìn)行數(shù)據(jù)的存儲(chǔ)等。
end() {
clearInterval(this.timeRecorder);
clearInterval(this.amapRecorder);
/* 使用存儲(chǔ)
* storage.getItem("runningData", (res) => {
* ...
* })
*/
}
實(shí)現(xiàn)地圖定位
在添加完 weex-amap 模塊后，我們就可以實(shí)現(xiàn)地圖的定位和距離計(jì)算。
// 引入 amap 模塊
const Amap = require("@weex-module/amap");
etUserLocation(callback) {
Amap.getUserLocation(this.$el("map2017").ref, callback);
}
其中callback回調(diào)中會(huì)返回一個(gè)對(duì)象:
{
result: "success" or "fail", // 接口調(diào)用是否成功
data: {
position: [Long, Lat] // 返回經(jīng)緯度
}
}
實(shí)現(xiàn)地圖距離計(jì)算
// 我們引入第三發(fā)utils文件，用于一些計(jì)算
const utils = require("./lib/utils");
calcDistanceAndSpeed() {
const len = this.runningData.path.length
if(len > 1) {
// 計(jì)算兩個(gè)點(diǎn)之前的距離
Amap.getLineDistance(this.runningData.path[len-1], this.runningData.path[len-2], (res) => {
if(res.result == "success") {
console.log(res.data.distance);
this.runningData.distance += res.data.distance;
}
// 將總長(zhǎng)度轉(zhuǎn)化為千米
this.runningData.miles = utils.mtoKm(this.runningData.distance);
// 初略的計(jì)算卡路里
this.runningData.calories = (this.runningData.distance / 1000).toFixed(2);
// 速度換算
this.runningData.speed = utils.calcSpeed(this.runningData.distance, this.runningData.seconds);
});
}
}
其中 utils.js 的實(shí)現(xiàn)可以參考 這里。
讓程序自動(dòng)采集數(shù)據(jù)大家寫JS一定都實(shí)現(xiàn)過一個(gè)倒計(jì)時(shí)的程序，常用的解決方案就是 setInterval (關(guān)于setInterval 時(shí)間的執(zhí)行的問題可以看這里) 。
當(dāng)點(diǎn)擊開始按鈕后，我們需要設(shè)置一個(gè)計(jì)時(shí)器，用戶進(jìn)行用戶時(shí)間的計(jì)算：
countDownTime() {
this.timeRecorder = setInterval(() => {
this.runningData.seconds ++;
// 進(jìn)行格式轉(zhuǎn)化 12s => 00:00:12
this.runningData.time = utils.setTimeFormat(this.runningData.seconds);
}, 1000);
},
// 設(shè)置定位的計(jì)時(shí)器
runningAmapGeolocation() {
this.setUserLocation((res) => {
if(res.result == "success") {
this.pos = res.data.position;
this.runningData.path.push(res.data.position);
}
});
this.amapRecorder= setInterval(() => {
this.setUserLocation((res) => {
if(res.result == "success") {
this.runningData.path.push(res.data.position);
this.polylinePath = Array.from(this.runningData.path);
this.pos = utils.setPosition(this.runningData.path);
this.calcDistanceAndSpeed();
}
});
}, 10000);
},
透過代碼我們可以看到程序會(huì)大約每隔十秒進(jìn)行一次定位，然后再進(jìn)行計(jì)算和距離累加。
文件源代碼
打包運(yùn)行開發(fā)完畢后，我們可以運(yùn)行命令，讓它安裝到我們的測(cè)試手機(jī)上。
weex run android
PS: 當(dāng)然如果你要做出一個(gè) 科學(xué) 的跑步程序，還需要你加入大量測(cè)試和數(shù)據(jù)的糾正，比如我們?cè)谑褂眠^程會(huì)遇到定位的偏差，斷網(wǎng)， 用戶沒有開啟定位權(quán)限等問題，這些都是我們需要考慮和應(yīng)對(duì)的
運(yùn)行 Github 上項(xiàng)目項(xiàng)目運(yùn)行截圖:
如果大家在實(shí)現(xiàn)過程中遇到問題可以參考 Github 上這個(gè)項(xiàng)目的一些代碼。相對(duì)剛剛這個(gè)簡(jiǎn)單的功能，它完善了存儲(chǔ)和數(shù)據(jù)預(yù)覽，以及倒計(jì)時(shí)等小細(xì)節(jié)。
1.首先克隆這個(gè)項(xiàng)目(后面會(huì)寫如何自己創(chuàng)建這樣的項(xiàng)目). 確保你自己環(huán)境安裝了weex-toolkit
git clone https://github.com/weex-plugins/amap-running-app
2.進(jìn)入克隆的項(xiàng)目目錄，然后執(zhí)行 npm install
3.測(cè)試你的需要運(yùn)行的平臺(tái)，比如android 或者 ios
weex plaform add android
4.添加插件 weex-amap
weex plugin add weex-amap
這個(gè)時(shí)候你就可以運(yùn)行命令看具體運(yùn)行的效果了：
weex run android
amap-running-app,也歡迎PR，拍磚。
擴(kuò)展閱讀weex-amap
跑步消耗卡路里的計(jì)算公式、指數(shù)K是怎么計(jì)算的
Weex-Amap 使用指南
=========
原文地址：http://www.jackpu.com/tong-gu...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/82309.html
摘要：自適應(yīng)的橢圓背景知識(shí)屬性的基本用法使用樣式畫各種圖形前端掘金下面是一些我在中經(jīng)常用到的圖案，還有一些是在看到的。像圖手把手教你使用前端掘金使用教程一是什么是目前世界上最先進(jìn)的分布式版本控制系統(tǒng)。 如何在 Vue.js 中使用第三方庫 - 前端 - 掘金在諸多 Vue.js 應(yīng)用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 庫....
摘要：自適應(yīng)的橢圓背景知識(shí)屬性的基本用法使用樣式畫各種圖形前端掘金下面是一些我在中經(jīng)常用到的圖案，還有一些是在看到的。像圖手把手教你使用前端掘金使用教程一是什么是目前世界上最先進(jìn)的分布式版本控制系統(tǒng)。 如何在 Vue.js 中使用第三方庫 - 前端 - 掘金在諸多 Vue.js 應(yīng)用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 庫....
閱讀 1223·2021-11-22 15:22
閱讀 3927·2021-10-19 13:13
閱讀 3701·2021-10-08 10:05
閱讀 3363·2021-09-26 10:20
閱讀 3080·2019-08-29 14:21
閱讀 2267·2019-08-27 10:55
閱讀 1924·2019-08-26 10:31
閱讀 2646·2019-08-23 16:47
