微信小程序,从零早先制作三个奔跑微信小程序

前言

本文笔者: 伯乐在线
王小树
。未经笔者许可,禁止转发!
迎接参加伯乐在线 专辑小编

自己早已把全路代码放在github上-weChatApp-Run,能够下载来看看只怕先star收藏,作者后来还会开始展览局地优化立异。今后只是三个上学Demo,大家沟通学习,实际利用还需更加多优化。

① 、准备干活

正文

壹 、注册一个小程序账号,得用三个没注册过公众号的信箱注册。
二 、注册进程中必要过多认证,有为数不少认证,相比麻烦,借使近日只是开发测试,不开始展览提审、发表以来,只要成功营业执照号填写就能够了,不须要形成微信认证。
三 、注册完账号,登录,在主页面左边列表中式点心击设置,然后再设置页面中选开发设置就能够看来AppID,用于登录开发工具。

一 、准备工作

图片 1

壹 、注册3个小程序账号,得用二个没挂号过公众号的邮箱注册。

主页面

二 、注册过程中供给过多注明,有很多声明,相比较繁琐,假如一时只是开发测试,不开始展览提审、发表以来,只要形成营业执照号填写就足以了,不必要形成微信认证。

图片 2

③ 、注册完账号,登录,在主页面右侧列表中式点心击设置,然后再安装页面中选开发设置就足以看来AppID,用于登录开发工具。

设置页面

主页面

② 、开发工具

能够到官网下载开发工具下载

图片 3

开发工具

图片 4

开发工具编辑页面

设置页面

③ 、开头项目

开辟开发者工具,选拔小程序选项,到达添加类型页面

图片 5

拉长品种

本条时候在后面设置页面包车型客车AppId就用到了。

只重要项目目目录中的文件是个空文件夹,会唤起是不是创制quick start 项目。
慎选“是”,开发者工具会支援我们在开发目录里生成1个大致的 demo。
这些德姆o拥有一个完整的小程序的差不离框架。

贰 、开发工具

1、框架

先看下一目录:

图片 6

文件目录.png

app.js: 小程序逻辑,生命周期,,全局变量
app.json: 小程序公共设置,导航栏颜色等,不得以注释
app.wxss :小程序公共样式,类CSS 。

能够到官网下载开发工具下载

小程序页面构成:

图片 7

页面构成

每一种小程序页面是由同路线下同名的多少个不等后缀文件的组合,如:index.js、index.wxml、index.wxss、index.json。

图片 8

葛文佳介绍

微信小程序中的每一个页面包车型客车【路径+页面名】都亟需写在 app.json 的 pages
中,且 pages 中的第②个页面是小程序的首页。

图片 9

路径

那七个公文遵照职能能够分成多个部分:

配置:json 文件
逻辑层:js文件
视图层:wxss.wxml文件

在 iOS 上,小程序的 javascript 代码是运作在 JavaScriptCore 中
在 Android 上,小程序的 javascript 代码是经过 X5 内核来分析
在 开发工具上, 小程序的 javascript 代码是运作在 nwjs(chrome内核)
中。所以开发工具上的作用跟实效有所出入。

开发工具

2、组件

微信提供了重重组件,首要分为多样:

视图容器、
基本功内容、
表单组件、
操作反馈、
导航、
传播媒介组件、
地图、
画布

含蓄view、scroll-view、button、form等通日常用的机件,也提供了地图map、画布canvas

组件首要属于视图层,通过wxml来拓展结构布局,类似于html。通过wxss修改样式,类似于css。
组件使用语法实例:

那是三个常备视图样式修改过的视图

1
2
 
这是一个普通视图样式修改过的视图

越来越多的机件以及相关应用形式能够到法定文档-组件查看

开发工具编辑页面

3、API

网络
媒体
数据
位置
设备
界面
支出接口

其中网络请求的使用必须先到群众平台登录小程序账号,在设置页面那里,设置允许访问的域名,互连网请求包括了通常的http请求、帮衬上传、下载、socket。基本上满意了小编们付出中所必要的互连网须求。

这几个API属于逻辑层,写在js文件中,
应用实例:

wx.getLocation({ type: ‘wgs84’, success: function(res) { var latitude =
res.latitude var longitude = res.longitude var speed = res.speed var
accuracy = res.accuracy }})

1
2
3
4
5
6
7
8
wx.getLocation({
   type: ‘wgs84’,
   success: function(res) {
       var latitude = res.latitude
       var longitude = res.longitude
       var speed = res.speed
       var accuracy = res.accuracy
}})

可以到官方文书档案-API查阅别的API的施用形式。

三 、开头项目

肆 、编写翻译运维

1、模拟器
能够在模拟器上看功效,上面降到了运转底层分裂,效果跟在手提式有线电话机上运维有些出入

图片 10

模拟器.png

2、真机
在左侧的选项栏中,选择项目,然后点预览会生产叁个二维码,用管理员微信号扫一扫就足以在真机上看实效

图片 11

Paste_Image.png

打开开发者工具,采纳小程序选项,到达添加项目页面

实践–跑步小程序。

累加项目

真机运行截图(运维于酷派7,微信版本:6.3.30):

图片 12

home.jpeg

图片 13

run.jpeg

图片 14

slideback.jpeg

图片 15

slide.jpeg

其一时半刻候在眼前设置页面包车型大巴AppId就用到了。

功能:

能够总结里程、时间、实时获取跑步路径(有个别粗糙)

万一项目目录中的文件是个空文件夹,会唤起是或不是创造quick start 项目。

思路:

首要行使了微信小程序的收获地方APIwx.getLocation()和地图组件map
首先达成一个计时器实行计时,通过wx.getLocation()收获坐标,把收获到的坐标存在贰个数组中,通过坐标每隔一段时间获取里程,举行添加获得总里程,同时也经过坐标点实行连线
留存的标题:
① 、因为日前找不到在地形图上画连线的法门,所以使用了在地图上贴小红点图的章程显示大致跑步路径,路径比较粗糙。
贰 、就算使用了API里面包车型客车月孛星坐标gcj02类型,然而获取的坐标跟国际坐标大概,还是存在着偏差。

选料“是”,开发者工具会协助大家在支付目录里生成2个粗略的 demo。

主干代码:

自作者把全部代码放在github上-weChatApp-Run,能够下载来看看大概先star收藏,小编随后还会展开部分优化立异。未来只是三个学学德姆o,大家关系学习,实际行使还需更加多优化。

wxml文件布局代码:

XHTML

<view class=”head” style=”flex-direction:row;”> <image
class=”icon” src=”/resources/joyrun.png” mode=”aspectFill”/>
<button bindtap=”openLocation”>打开地点</button> <button
bindtap=”starRun”>初始跑步</button> <button
bindtap=”stopRun”>暂停跑步</button>
<text>\n里程数:{{meters}}km</text>
<text>\n\n时间:{{time}}</text> </view> <view
class=”mainView”> <map class=”mapView” style=”width: 100%; height:
375px;” latitude=”{{latitude}}” longitude=”{{longitude}}”
markers=”{{markers}}” covers=”{{covers}}” > </map>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<view class="head" style="flex-direction:row;">
    <image class="icon" src="/resources/joyrun.png" mode="aspectFill"/>
    <button bindtap="openLocation">打开位置</button>
    <button bindtap="starRun">开始跑步</button>
    <button bindtap="stopRun">暂停跑步</button>
    <text>\n里程数:{{meters}}km</text>
    <text>\n\n时间:{{time}}</text>
</view>
 
<view class="mainView">
   <map
        class="mapView"
        style="width: 100%; height: 375px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
        markers="{{markers}}"
        covers="{{covers}}"
        >
    </map>
 
</view>

js文件逻辑代码:

JavaScript

var countTooGetLocation = 0; var total_micro_second = 0; var starRun =
0; var totalSecond = 0; var oriMeters = 0.0; /* 微秒级倒计时 */
function count_down(that) { if (starRun == 0) { return; } if
(countTooGetLocation >= 100) { var time =
date_format(total_micro_second); that.updateTime(time); } if
(countTooGetLocation >= 5000) { //1000为1s that.getLocation();
countTooGetLocation = 0; } setTimeout setTimeout(function(){
countTooGetLocation += 10; total_micro_second += 10;
count_down(that); } ,10 ) } // 时间格式化输出,如03:25:壹玖捌捌。每10ms都会调用三次 function date_format(micro_second) { // 秒数
var second = Math.floor(micro_second / 1000); // 小时位 var hr =
Math.floor(second / 3600); // 分钟位 var min =
fill_zero_prefix(Math.floor((second – hr * 3600) / 60)); // 秒位 var
sec = fill_zero_prefix((second – hr * 3600 – min * 60));// equal to
=> var sec = second % 60; return hr + “:” + min + “:” + sec + ” “; }
function getDistance(lat1, lng1, lat2, lng2) { var dis = 0; var radLat1
= toRadians(lat1); var radLat2 = toRadians(lat2); var deltaLat = radLat1

  • radLat2; var deltaLng = toRadians(lng1) – toRadians(lng2); var dis = 2
    * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) +
    Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng /
    2), 2))); return dis * 6378137; function toRadians(d) { return d *
    Math.PI / 180;} } function fill_zero_prefix(num) { return num < 10
    ? “0” + num : num }
    //****************************************************************************************
    //****************************************************************************************
    Page({ data: { clock: ”, isLocation:false, latitude: 0, longitude: 0,
    markers: [], covers: [], meters: 0.00, time: “0:00:00” },
    //****************************
    onLoad:function(options){ // 页面初阶化 options为页面跳转所拉动的参数
    this.getLocation() console.log(“onLoad”) count_down(this); },
    //****************************
    openLocation:function (){ wx.getLocation({ type: ‘gcj02’, // 暗中认可为
    wgs84 再次来到 gps 坐标,gcj02 重回可用于 wx.openLocation 的坐标 success:
    function(res){ wx.openLocation({ latitude: res.latitude, //
    纬度,范围为-90~90,负数表示南纬 longitude: res.longitude, //
    经度,范围为-180~180,负数表示西经 scale: 28, // 缩放比例 }) }, }) },
    //**************************** starRun
    :function () { if (starRun == 1) { return; } starRun = 1;
    count_down(this); this.getLocation(); },
    //****************************
    stopRun:function () { starRun = 0; count_down(this); },
    //****************************
    updateTime:function (time) { var data = this.data; data.time = time;
    this.data = data; this.setData ({ time : time, }) },
    //****************************
    getLocation:function () { var that = this wx.getLocation({ type:
    ‘gcj02’, // 暗许为 wgs84 再次来到 gps 坐标,gcj02 再次来到可用以 wx.openLocation
    的坐标 success: function(res){ console.log(“res———-“)
    console.log(res) //make datas var newCover = { latitude: res.latitude,
    longitude: res.longitude, iconPath: ‘/resources/redPoint.png’, }; var
    oriCovers = that.data.covers; console.log(“oriMeters———-“)
    console.log(oriMeters); var len = oriCovers.length; var lastCover; if
    (len == 0) { ori库弗斯.push(newCover); } len = oriCovers.length; var
    lastCover = oriCovers[len-1]; console.log(“oriCovers———-“)
    console.log(oriCovers,len); var newMeters =
    getDistance(lastCover.latitude,lastCover.longitude,res.latitude,res.longitude)/1000;
    if (newMeters < 0.0015){ newMeters = 0.0; } oriMeters = oriMeters +
    newMeters; console.log(“newMeters———-“) console.log(newMeters);
    var meters = new Number(oriMeters); var showMeters = meters.toFixed(2);
    oriCovers.push(newCover); that.setData({ latitude: res.latitude,
    longitude: res.longitude, markers: [], covers: oriCovers,
    meters:showMeters, }); }, }) } })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
var countTooGetLocation = 0;
var total_micro_second = 0;
var starRun = 0;
var totalSecond  = 0;
var oriMeters = 0.0;
/* 毫秒级倒计时 */
function count_down(that) {
 
    if (starRun == 0) {
      return;
    }
 
    if (countTooGetLocation >= 100) {
      var time = date_format(total_micro_second);
      that.updateTime(time);
    }
 
      if (countTooGetLocation >= 5000) { //1000为1s
        that.getLocation();
        countTooGetLocation = 0;
      }  
 
 
setTimeout
      setTimeout(function(){
        countTooGetLocation += 10;
    total_micro_second += 10;
        count_down(that);
    }
    ,10
    )
}
 
 
// 时间格式化输出,如03:25:19 86。每10ms都会调用一次
function date_format(micro_second) {
      // 秒数
      var second = Math.floor(micro_second / 1000);
      // 小时位
      var hr = Math.floor(second / 3600);
      // 分钟位
      var min = fill_zero_prefix(Math.floor((second – hr * 3600) / 60));
      // 秒位
    var sec = fill_zero_prefix((second – hr * 3600 – min * 60));// equal to => var sec = second % 60;
 
 
    return hr + ":" + min + ":" + sec + " ";
}
 
 
function getDistance(lat1, lng1, lat2, lng2) {
    var dis = 0;
    var radLat1 = toRadians(lat1);
    var radLat2 = toRadians(lat2);
    var deltaLat = radLat1 – radLat2;
    var deltaLng = toRadians(lng1) – toRadians(lng2);
    var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));
    return dis * 6378137;
 
    function toRadians(d) {  return d * Math.PI / 180;}
}
 
function fill_zero_prefix(num) {
    return num < 10 ? "0" + num : num
}
 
//****************************************************************************************
//****************************************************************************************
 
Page({
  data: {
    clock: ”,
    isLocation:false,
    latitude: 0,
    longitude: 0,
    markers: [],
    covers: [],
    meters: 0.00,
    time: "0:00:00"
  },
 
//****************************
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.getLocation()
    console.log("onLoad")
    count_down(this);
  },
  //****************************
  openLocation:function (){
    wx.getLocation({
      type: ‘gcj02’, // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
      success: function(res){
          wx.openLocation({
            latitude: res.latitude, // 纬度,范围为-90~90,负数表示南纬
            longitude: res.longitude, // 经度,范围为-180~180,负数表示西经
            scale: 28, // 缩放比例
          })
      },
    })
  },
 
 
//****************************
  starRun :function () {
    if (starRun == 1) {
      return;
    }
    starRun = 1;
    count_down(this);
    this.getLocation();
  },
 
 
//****************************
  stopRun:function () {
    starRun = 0;
    count_down(this);
  },
 
 
//****************************
  updateTime:function (time) {
 
    var data = this.data;
    data.time = time;
    this.data = data;
    this.setData ({
      time : time,
    })
 
  },
 
 
//****************************
  getLocation:function () {
    var that = this
    wx.getLocation({
 
      type: ‘gcj02’, // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
      success: function(res){
        console.log("res———-")
        console.log(res)
 
        //make datas
        var newCover = {
            latitude: res.latitude,
            longitude: res.longitude,
            iconPath: ‘/resources/redPoint.png’,
          };
        var oriCovers = that.data.covers;
 
        console.log("oriMeters———-")
        console.log(oriMeters);
        var len = oriCovers.length;
        var lastCover;
        if (len == 0) {
          oriCovers.push(newCover);
        }
        len = oriCovers.length;
        var lastCover = oriCovers[len-1];
 
        console.log("oriCovers———-")
        console.log(oriCovers,len);
 
        var newMeters = getDistance(lastCover.latitude,lastCover.longitude,res.latitude,res.longitude)/1000;
 
        if (newMeters < 0.0015){
            newMeters = 0.0;
        }
 
        oriMeters = oriMeters + newMeters;
        console.log("newMeters———-")
        console.log(newMeters);
 
 
        var meters = new Number(oriMeters);
        var showMeters = meters.toFixed(2);
 
        oriCovers.push(newCover);
 
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          markers: [],
          covers: oriCovers,
          meters:showMeters,
        });
      },
    })
  }
 
})

其一Demo拥有二个完全的小程序的大概框架。

五、后语

本文是二个高效上手开发的牵线,细节介绍能够查看法定文书档案
自己的连锁全体代码放在github上-weChatApp-Run

打赏匡助小编写出越来越多好小说,多谢!


打赏作者

1、框架

打赏辅助本人写出越来越多好文章,谢谢!

任选一种支付办法

图片 16
图片 17

2 赞 7 收藏 1
评论

先看下一目录:

有关作者:王小树

图片 18

王小树,alanwangmodify

个人主页
·
笔者的小说
·
5
·
    

文件目录.png

app.js: 小程序逻辑,生命周期,,全局变量

app.json: 小程序公共设置,导航栏颜色等,不得以注释

app.wxss :小程序公共样式,类CSS 。

小程序页面构成:

页面构成

每三个小程序页面是由同路线下同名的三个不等后缀文件的咬合,如:index.js、index.wxml、index.wxss、index.json。

葛文佳介绍

微信小程序中的每三个页面包车型地铁【路径+页面名】都亟待写在 app.json 的 pages
中,且 pages 中的第二个页面是小程序的首页。

路径

那多少个文件依照效益能够分为四个部分:

配置:json 文件

逻辑层:js文件

视图层:wxss.wxml文件

在 iOS 上,小程序的 javascript 代码是运作在 JavaScriptCore 中

在 Android 上,小程序的 javascript 代码是因而 X5 内核来分析

在 开发工具上, 小程序的 javascript 代码是运作在 nwjs(chrome内核)
中。所以开发工具上的职能跟实际效果有所出入。

2、组件

微信提供了诸多组件,首要分为各类:

视图容器、

基础内容、

表单组件、

操作反馈、

导航、

传播媒介组件、

地图、

画布

带有view、scroll-view、button、form等习以为平时用的组件,也提供了地图map、画布canvas。

组件首要属于视图层,通过wxml来进展组织布局,类似于html。通过wxss修改样式,类似于css。

零件使用语法实例:

那是三个常备视图样式修改过的视图

越多的零件以及有关应用方法能够到官方文书档案-组件查看

3、API

网络

媒体

数据

位置

设备

界面

支出接口

其间互联网请求的运用必须先到公众平台登录小程序账号,在设置页面那里,设置允许访问的域名,网络请求包涵了普通的http请求、补助上传、下载、socket。基本上满意了笔者们开发中所需求的互联网须求。

这一个API属于逻辑层,写在js文件中,

动用实例:

wx.getLocation({type:’wgs84′,  success:function(res) {      var latitude
= res.latitude        var longitude = res.longitude        var speed =
res.speed        var accuracy = res.accuracy }})

可以到合法文书档案-API查看其余API的利用情势。

肆 、编写翻译运营

1、模拟器

能够在模拟器上看效果,下边讲到了运营底层分化,效果跟在二哥大上运维有些差别

模拟器.png

2、真机

在左侧的选项栏中,选用类别,然后点预览会生产1个二维码,用管理员微信号扫一扫就足以在真机上看实效

Paste_Image.png

进行–跑步小程序。

真机械运输维截图(运转于HUAWEI7,微信版本:6.3.30):

home.jpeg

run.jpeg

slideback.jpeg

slide.jpeg

功能:

可见总计里程、时间、实时获取跑步路径(有些粗糙)

思路:

首要利用了微信小程序的获得地方APIwx.getLocation()和地图组件map。

率先落到实处1个计时器进行计时,通过wx.getLocation()获取坐标,把收获到的坐标存在1个数组中,通过坐标每隔一段时间获取里程,实行添加获得总里程,同时也经过坐标点举办连线

留存的难题:

一 、因为脚下找不到在地形图上画连线的不二法门,所以选取了在地形图上贴小红点图的格局彰显大致跑步路径,路径比较粗糙。

贰 、就算使用了API里面包车型地铁水星坐标gcj02类型,不过获取的坐标跟国际坐标差不离,依旧存在着偏差。

基本代码:

自个儿把全副代码放在github上-weChatApp-Run,能够下载来看看或许先star收藏,我事后还会开始展览局地优化立异。今后只是三个就学德姆o,我们调换学习,实际利用还需越多优化。

wxml文件布局代码:

开辟位置上马跑步暂停跑步\\n里程数:{{meters}}km\\n\\n时间:{{time}}

js文件逻辑代码:

varcountTooGetLocation =0;vartotal_micro_second =0;varstarRun
=0;vartotalSecond  =0;varoriMeters =0.0;/* 飞秒级倒计时
*/functioncount_down(that){if(starRun ==0) {return;   
}if(countTooGetLocation >=100) {vartime =
date_format(total_micro_second);      that.updateTime(time);   
}if(countTooGetLocation >=5000) {//1000为1sthat.getLocation();       
countTooGetLocation =0;    }        setTimeout   
setTimeout(function(){        countTooGetLocation +=10;   
total_micro_second +=10;        count_down(that);    }    ,10)}//
时间格式化输出,如03:25:1986。每10ms都会调用一遍functiondate_format(micro_second){//
秒数varsecond =Math.floor(micro_second /1000);// 小时位varhr
=Math.floor(second /3600);// 分钟位varmin =
fill_zero_prefix(Math.floor((second – hr *3600) /60));// 秒位varsec =
fill_zero_prefix((second – hr *3600- min *60));// equal to => var
sec = second % 60;returnhr +”:”+ min +”:”+ sec +”
“;}functiongetDistance(lat1, lng1, lat2, lng2){vardis =0;varradLat1 =
toRadians(lat1);varradLat2 = toRadians(lat2);vardeltaLat = radLat1 –
radLat2;vardeltaLng = toRadians(lng1) – toRadians(lng2);vardis
=2*Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat /2),2)
+Math.cos(radLat1) *Math.cos(radLat2) *Math.pow(Math.sin(deltaLng
/2),2)));returndis *6378137;functiontoRadians(d){returnd *Math.PI
/180;}}functionfill_zero_prefix(num){returnnum <10?”0″+ num :
num}//****************************************************************************************//****************************************************************************************Page({data:
{clock:”,isLocation:false,latitude:0,longitude:0,markers: [],covers:
[],meters:0.00,time:”0:00:00″},//****************************onLoad:function(options){//
页面开端化
options为页面跳转所带来的参数this.getLocation()console.log(“onLoad”)   
count_down(this); 
},//****************************openLocation:function(){ 
  wx.getLocation({type:’gcj02′,// 暗中同意为 wgs84 再次来到 gps 坐标,gcj02
重返可用来 wx.openLocation 的坐标success:function(res){         
wx.openLocation({latitude: res.latitude,//
纬度,范围为-90~90,负数表示南纬longitude: res.longitude,//
经度,范围为-180~180,负数表示西经scale:28,// 缩放比例})      },    }) 
},//****************************starRun
:function(){if(starRun ==1) {return;    }    starRun =1;   
count_down(this);this.getLocation(); 
},//****************************stopRun:function(){ 
  starRun =0;    count_down(this); 
},//****************************updateTime:function(time){vardata
=this.data;    data.time = time;this.data = data;this.setData ({time:
time,    }) 
},//****************************getLocation:function(){varthat
=thiswx.getLocation({type:’gcj02′,// 暗许为 wgs84 重返 gps 坐标,gcj02
再次回到可用来 wx.openLocation
的坐标success:function(res){console.log(“res———-“)console.log(res)//make
datas varnewCover = {latitude: res.latitude,longitude:
res.longitude,iconPath:’/resources/redPoint.png’,         
};varoriCovers =
that.data.covers;console.log(“oriMeters———-“)console.log(oriMeters);varlen
= oriCovers.length;varlastCover;if(len ==0) {         
oriCovers.push(newCover);        }        len =
oriCovers.length;varlastCover =

oriCovers[len-1];console.log(“oriCovers———-“)console.log(oriCovers,len);varnewMeters

getDistance(lastCover.latitude,lastCover.longitude,res.latitude,res.longitude)/1000;if(newMeters
<0.0015){            newMeters =0.0;        }        oriMeters =
oriMeters +
newMeters;console.log(“newMeters———-“)console.log(newMeters);varmeters
=newNumber(oriMeters);varshowMeters = meters.toFixed(2);       
oriCovers.push(newCover);                that.setData({latitude:
res.latitude,longitude: res.longitude,markers: [],covers:
oriCovers,meters:showMeters,        });      },    })  }  })

五、后语

正文是2个飞速上手开发的介绍,细节介绍能够查看合法文书档案

自作者的连带全体代码放在github上-weChatApp-Run

作者:alanwangmodify

链接:https://www.jianshu.com/p/6e826464d52c

來源:简书

小说权归小编全体。商业转发请联系小编获得授权,非商业转发请注解出处。