资讯专栏INFORMATION COLUMN

通过Weex 300行代码开发一款简易的跑步App

isaced / 1424人阅读

摘要:你就可以在目录下用或者开发应用代码了设计原理结合了高德地图多个功能,比如定位,地图缩放,绘制折现,进行点的标记等常用功能。文件源代码打包运行开发完毕后,我们可以运行命令,让它安装到我们的测试手机上。

Weex正如它的目标,

一套构建高性能、可扩展的原生应用的跨平台开发方案

Weex 给大家带来的无疑是客户端开发效率的提升,我们可以通过一套代码,实现web,android, iOS的三个平台上运行。自己最近尝试了一次借助weex的插件机制,使用Weex-Amap地图插件 可以开发 LBS 相关的应用。

首先我们先来看下运行的效果吧:

iOS 版

Android 版

截图数据仅供参考

它大概具备下面的一些功能;

统计用户在运动过程中的距离累计,时间计算等。

存储用户的运动数据

使用地图定位和距离计算的API,实现距离统计。

显示地图折线,通过对定位的数据地理位置进行折线绘制

统计用户运动的数据,计算总距离和时间

点击用户的历史记录,可以查看轨迹

感觉和大家所用到的app功能相差不多了,但实际上我们借助 Weex 和 Weex-Amap 插件可以非常快速的实现这些功能,下面我们来看下具体怎么实现吧。

使用 weex-toolkit 创建项目

首先我们按照官网的教程安装weex-toolkit。如果已经安装过请忽略。

$ npm install -g weex-toolkit

安装完成后,我们创建一个项目目录,比如running-app

weex create running-app

大家可能会看到下面的提示,输入y安装即可。

This command need to install weexpack. Install now? Yes

项目创建完成后,我们需要添加我们的运行平台比如android或者ios,这里我们添加 android 平台。

weex platform add android

添加成功后,我们在通过weex的插件机制,安装weex-amap高德的地图依赖。

weex plugin add weex-amap

安装完成后,你可以到项目目录 plugins 里面看下是否有新增的 weex-amap 的项目目录,如果存在即表示插件安装成功。你就可以在src目录下用we或者vue开发应用代码了

设计原理

[weex-amap]结合了高德地图多个功能,比如定位,地图缩放,绘制折现,进行点的标记等常用功能。实现一款跑步应用,我们需要解决最核心的问题就是:

统计一个在运动过程的总距离 (s)

当我们能够获取到总距离(s)的时候,和运动时间(t) 通过小学物理知识,我们知道:

速度(v) = 总路程(s) / 总时间(t)

在结合一些公式,我们还可以计算出我们的 卡路里(c);

其中 weex-amap 正好可以解决上面最为核心的问题,我们可以通过定位,然后在通过比较两个连续点之间的距离,进行累加(微分累计),从而获取总距离。(当然这只是最为简单的实现原理,做成完整的app还需要更加科学化的算法)

[weex-amap] 其中提供了这么两个API

getUserLocation 用于获取用户的当前位置地理位置,用户会获取经纬度 [Long, Lat]

getLineDistance 用户获取传入的两个地理位置的直线距离

除了这两个API,我们还需要用到地图的一个组件, 就是折线绘制 weex-amap-polyline 。它可以通过path属性接收到一组地理位置坐标值,从而在地图上绘制连续的折线。比如:

其中 your_path 指定类似这样的数据: [[116.487, 40.00003],[113.487, 40.0002]...]

关于更多的如何使用weex-amap 插件,可以参考这篇 文章 以及 官方Demos

设计页面功能和逻辑

大家也都用过跑步的APP,常见的界面布局如下:

那么我们页面的基本结构就已经出来了:




其中 我们使用了weex-amap组件,其中一些属性:

zoom 表示设置的地图的缩放级别

geolocation 添加地图定位插件没如果你需要定位功能,必须设置

sdk-key 设置地图的密钥,这是地图开发必须申请 (前往高德地图申请)

center 设置地图的中心,需要设置一个数组,传入地理位置坐标[116.487, 40.00003]第一个数字表示经度,第二个值表示纬度

其中的样式参考如下,当然你也可以自己实现一个布局:

.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;
}
定义数据模型

我们需要在界面里显示四组数据:

运动距离

运动时间

运动消耗

运动配速

自己设计的runningData里面包含了下面一些数据:

runningData: {
  distance: 0,  // 表示运动的累计距离
  miles: 0,    // 表示运动的累计距离,单位是公里用于界面显示
  path: [],    // 运动坐标数据
  time: "00:00:00",  // 用于界面的运动时间显示
  seconds: 0,   // 运动的时间,单位:秒
  speed: 0,    // 配速 
  calories: 0,  // 运动的消耗,单位千卡
}

处于计算的方便其中我设计了几个用于数据格式的转换和计算,在我的 utils.js 里面。

这个时候我们需要在模板里面添加一些代码用于显示这些数据;

添加地图折线polyline

  
添加流程控制

在我们进行跑步的过成功无疑就是这么几个状态,我将它定义在了 status.js

module.exports = {
  RUNNING_READY: 1, // 跑步开始前
  RUNNING_DOING: 2, // 跑步进行中
  RUNNING_PAUSE: 3, // 跑步暂停中
  RUNNING_END: 4  // 跑步结束,
  RUNNING_PREVIEW: 5 // 数据预览
};

我们通过这几个状态来实现对界面的操作,比如开始或者暂停。这个时候我们需要添加一一些用于界面控制的按钮。