├── LICENSE
├── README.md
├── pic
├── home.png
├── run.png
├── slide.png
└── slideback.png
└── weChatRun
├── app.js
├── app.json
├── app.wxss
├── pages
├── animation
│ ├── animation.js
│ ├── animation.json
│ ├── animation.wxml
│ └── animation.wxss
├── index.js
├── index.wxml
├── index.wxss
├── logs
│ ├── logs.js
│ ├── logs.json
│ ├── logs.wxml
│ └── logs.wxss
└── run
│ ├── format-location.js
│ ├── run.js
│ ├── run.json
│ ├── run.wxml
│ └── run.wxss
├── resources
├── joyrun.png
└── redPoint.png
└── utils
└── util.js
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 王小树
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # weChatApp-Run
2 |
3 | ###介绍
4 | 这是一个微信小程序Demo,主要功能是跑步。
5 | 现在还不够完善依然有很多问题,欢迎大家提出建议和意见。
6 | 大家也可以star收藏起来,以后会进行优化更新,大家一起学习进步。
7 |
8 | ###截图
9 | 
10 |
11 | 
12 |
13 | 
14 |
15 | 
16 |
--------------------------------------------------------------------------------
/pic/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanwangmodify/weChatApp-Run/6762cfc3342eb399b608da44ec818254f47f92dc/pic/home.png
--------------------------------------------------------------------------------
/pic/run.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanwangmodify/weChatApp-Run/6762cfc3342eb399b608da44ec818254f47f92dc/pic/run.png
--------------------------------------------------------------------------------
/pic/slide.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanwangmodify/weChatApp-Run/6762cfc3342eb399b608da44ec818254f47f92dc/pic/slide.png
--------------------------------------------------------------------------------
/pic/slideback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanwangmodify/weChatApp-Run/6762cfc3342eb399b608da44ec818254f47f92dc/pic/slideback.png
--------------------------------------------------------------------------------
/weChatRun/app.js:
--------------------------------------------------------------------------------
1 | //app.js
2 | App({
3 | onLaunch: function () {
4 | //调用API从本地缓存中获取数据
5 | var logs = wx.getStorageSync('logs') || []
6 | logs.unshift(Date.now())
7 | wx.setStorageSync('logs', logs)
8 | },
9 | getUserInfo:function(cb){
10 | var that = this
11 | if(this.globalData.userInfo){
12 | typeof cb == "function" && cb(this.globalData.userInfo)
13 | }else{
14 | //调用登录接口
15 | wx.login({
16 | success: function () {
17 | wx.getUserInfo({
18 | success: function (res) {
19 | that.globalData.userInfo = res.userInfo
20 | typeof cb == "function" && cb(that.globalData.userInfo)
21 | }
22 | })
23 | }
24 | })
25 | }
26 | },
27 | globalData:{
28 | userInfo:null
29 |
30 | }
31 | })
--------------------------------------------------------------------------------
/weChatRun/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages":[
3 | "pages/index",
4 | "pages/logs/logs",
5 | "pages/run/run",
6 | "pages/animation/animation"
7 | ],
8 | "window":{
9 | "backgroundTextStyle":"light",
10 | "navigationBarBackgroundColor": "#fff",
11 | "navigationBarTitleText": "悦跑圈",
12 | "navigationBarTextStyle":"black"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/weChatRun/app.wxss:
--------------------------------------------------------------------------------
1 | /**app.wxss**/
2 | .container {
3 | height: 100%;
4 | display: flex;
5 | flex-direction: column;
6 | align-items: center;
7 | justify-content: space-between;
8 | padding: 200rpx 0;
9 | box-sizing: border-box;
10 | }
11 | .showView{
12 | height: 150rpx;
13 | width: 150rpx;
14 | background-color: orangered;
15 | }
16 | .head{
17 | margin-top: 40;
18 | padding: 50rpx;
19 | line-height: 1;
20 | }
21 | .body{
22 | padding-left: 30rpx;
23 | padding-right: 30rpx;
24 | overflow: hidden;
25 | }
26 | .bigTitle{
27 | font-size: 52rpx;
28 | padding-left: 30rpx;
29 | padding-right: 30rpx;
30 | position: center;
31 | }
32 | .title{
33 | font-size: 52rpx;
34 | }
35 | .desc{
36 | margin-top: 10rpx;
37 | color: #888888;
38 | font-size: 28rpx;
39 | padding-left: 30rpx;
40 | padding-right: 30rpx;
41 | }
42 | .icon{
43 | width: 80rpx;
44 | height: 80rpx;
45 | margin-top: 20;
46 | margin-bottom:10;
47 | }
48 |
49 |
--------------------------------------------------------------------------------
/weChatRun/pages/animation/animation.js:
--------------------------------------------------------------------------------
1 | Page({
2 | onReady: function () {
3 | this.animation = wx.createAnimation()
4 |
5 | },
6 | rotate: function () {
7 | this.animation.rotate(Math.random() * 720 - 360).step()
8 | this.setData({ animation: this.animation.export() })
9 | },
10 | scale: function () {
11 | this.animation.scale(Math.random() * 2).step()
12 | this.setData({ animation: this.animation.export() })
13 | },
14 | translate: function () {
15 | this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
16 | this.setData({ animation: this.animation.export() })
17 | },
18 | skew: function () {
19 | this.animation.skew(Math.random() * 90, Math.random() * 90).step()
20 | this.setData({ animation: this.animation.export() })
21 | },
22 | rotateAndScale: function () {
23 | this.animation.rotate(Math.random() * 720 - 360)
24 | .scale(Math.random() * 2)
25 | .step()
26 | this.setData({ animation: this.animation.export() })
27 | },
28 | rotateThenScale: function () {
29 | this.animation.rotate(Math.random() * 720 - 360).step()
30 | .scale(Math.random() * 2).step()
31 | this.setData({ animation: this.animation.export() })
32 | },
33 | all: function () {
34 | this.animation.rotate(Math.random() * 720 - 360)
35 | .scale(Math.random() * 2)
36 | .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
37 | .skew(Math.random() * 90, Math.random() * 90)
38 | .step()
39 | this.setData({ animation: this.animation.export() })
40 | },
41 | allInQueue: function () {
42 | this.animation.rotate(Math.random() * 720 - 360).step()
43 | .scale(Math.random() * 2).step()
44 | .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
45 | .skew(Math.random() * 90, Math.random() * 90).step()
46 | this.setData({ animation: this.animation.export() })
47 | },
48 | reset: function () {
49 | this.animation.rotate(0, 0)
50 | .scale(1)
51 | .translate(0, 0)
52 | .skew(0, 0)
53 | .step({ duration: 0 })
54 | this.setData({ animation: this.animation.export() })
55 | }
56 | })
57 |
--------------------------------------------------------------------------------
/weChatRun/pages/animation/animation.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "动画"
3 | }
4 |
--------------------------------------------------------------------------------
/weChatRun/pages/animation/animation.wxml:
--------------------------------------------------------------------------------
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 |
--------------------------------------------------------------------------------
/weChatRun/pages/animation/animation.wxss:
--------------------------------------------------------------------------------
1 | .page-body-wrapper {
2 | flex-grow: 1;
3 | }
4 | .animation-element-wrapper {
5 | display: block;
6 | margin-bottom: 100rpx;
7 | }
8 | .animation-element {
9 | width: 200rpx;
10 | height: 200rpx;
11 | background-color: #1AAD19;
12 | }
13 | .animation-buttons {
14 | padding: 50rpx 50rpx 10rpx;
15 | border-top: 1px solid #ccc;
16 | display: flex;
17 | flex-grow: 1;
18 | overflow-y: scroll;
19 | flex-direction: row;
20 | flex-wrap: wrap;
21 | width: 100%;
22 | height: 400rpx;
23 | box-sizing: border-box;
24 | }
25 | .animation-button {
26 | width: 290rpx;
27 | margin: 20rpx auto;
28 | }
29 | .animation-button-reset {
30 | width: 610rpx;
31 | margin: 20rpx auto;
32 | }
33 |
34 |
35 | page {
36 | background-color: #fbf9fe;
37 | height: 100%;
38 | }
39 | .container {
40 | display: flex;
41 | flex-direction: column;
42 | min-height: 100%;
43 | justify-content: space-between;
44 | }
45 | .page-header {
46 | display: flex;
47 | font-size: 32rpx;
48 | color: #aaa;
49 | margin-top: 50rpx;
50 | flex-direction: column;
51 | align-items: center;
52 | }
53 | .page-header-text {
54 | padding: 20rpx 40rpx;
55 | }
56 | .page-header-line {
57 | width: 150rpx;
58 | height: 1px;
59 | border-bottom: 1px solid #ccc;
60 | }
61 |
62 | .page-body {
63 | width: 100%;
64 | display: flex;
65 | flex-direction: column;
66 | align-items: center;
67 | flex-grow: 1;
68 | overflow-x: hidden;
69 | }
70 | .page-body-wrapper {
71 | margin-top: 100rpx;
72 | display: flex;
73 | flex-direction: column;
74 | align-items: center;
75 | width: 100%;
76 | }
77 | .page-body-wrapper form {
78 | width: 100%;
79 | }
80 | .page-body-wording {
81 | text-align: center;
82 | padding: 200rpx 100rpx;
83 | }
84 | .page-body-info {
85 | display: flex;
86 | flex-direction: column;
87 | align-items: center;
88 | background-color: #fff;
89 | margin-bottom: 50rpx;
90 | width: 100%;
91 | padding: 50rpx 0 150rpx 0;
92 | }
93 | .page-body-title {
94 | margin-bottom: 100rpx;
95 | font-size: 32rpx;
96 | }
97 | .page-body-text {
98 | font-size: 30rpx;
99 | line-height: 26px;
100 | color: #ccc;
101 | }
102 | .page-body-text-small {
103 | font-size: 24rpx;
104 | color: #000;
105 | margin-bottom: 100rpx;
106 | }
107 | .page-body-form {
108 | width: 100%;
109 | background-color: #fff;
110 | display: flex;
111 | flex-direction: column;
112 | width: 100%;
113 | border: 1px solid #eee;
114 | }
115 | .page-body-form-item {
116 | display: flex;
117 | align-items: center;
118 | margin-left: 30rpx;
119 | border-bottom: 1px solid #eee;
120 | height: 88rpx;
121 | font-size: 34rpx;
122 | }
123 | .page-body-form-key {
124 | width: 180rpx;
125 | color: #000;
126 | }
127 | .page-body-form-value {
128 | flex-grow: 1;
129 | }
130 | .page-body-form-value .input-placeholder {
131 | color: #b2b2b2;
132 | }
133 |
134 | .page-body-form-picker {
135 | display: flex;
136 | justify-content: space-between;
137 | height: 100rpx;
138 | align-items: center;
139 | font-size: 36rpx;
140 | margin-left: 20rpx;
141 | padding-right: 20rpx;
142 | border-bottom: 1px solid #eee;
143 | }
144 | .page-body-form-picker-value {
145 | color: #ccc;
146 | }
147 |
148 | .page-body-buttons {
149 | width: 100%;
150 | }
151 | .page-body-button {
152 | margin: 25rpx;
153 | }
154 | .page-body-button image {
155 | width: 150rpx;
156 | height: 150rpx;
157 | }
158 | .page-footer {
159 | text-align: center;
160 | color: #1aad19;
161 | font-size: 24rpx;
162 | margin: 20rpx 0;
163 | }
164 |
165 | .green{
166 | color: #09BB07;
167 | }
168 | .red{
169 | color: #F76260;
170 | }
171 | .blue{
172 | color: #10AEFF;
173 | }
174 | .yellow{
175 | color: #FFBE00;
176 | }
177 | .gray{
178 | color: #C9C9C9;
179 | }
180 |
181 | .strong{
182 | font-weight: bold;
183 | }
184 |
185 | .bc_green{
186 | background-color: #09BB07;
187 | }
188 | .bc_red{
189 | background-color: #F76260;
190 | }
191 | .bc_blue{
192 | background-color: #10AEFF;
193 | }
194 | .bc_yellow{
195 | background-color: #FFBE00;
196 | }
197 | .bc_gray{
198 | background-color: #C9C9C9;
199 | }
200 |
201 | .tc{
202 | text-align: center;
203 | }
204 |
205 | .page input{
206 | padding: 20rpx 30rpx;
207 | background-color: #fff;
208 | }
209 | checkbox, radio{
210 | margin-right: 10rpx;
211 | }
212 |
213 | .btn-area{
214 | padding: 0 30px;
215 | }
216 | .btn-area button{
217 | margin-top: 20rpx;
218 | margin-bottom: 20rpx;
219 | }
220 |
221 | .page {
222 | min-height: 100%;
223 | flex: 1;
224 | background-color: #FBF9FE;
225 | font-size: 32rpx;
226 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
227 | overflow: hidden;
228 | }
229 | .page__hd{
230 | padding: 50rpx 50rpx 100rpx 50rpx;
231 | text-align: center;
232 | }
233 | .page__title{
234 | display: inline-block;
235 | padding: 20rpx 40rpx;
236 | font-size: 32rpx;
237 | color: #AAAAAA;
238 | border-bottom: 1px solid #CCCCCC;
239 | }
240 | .page__desc{
241 | display: none;
242 | margin-top: 20rpx;
243 | font-size: 26rpx;
244 | color: #BBBBBB;
245 | }
246 |
247 | .section{
248 | margin-bottom: 80rpx;
249 | }
250 | .section_gap{
251 | padding: 0 30rpx;
252 | }
253 | .section__title{
254 | margin-bottom: 16rpx;
255 | padding-left: 30rpx;
256 | padding-right: 30rpx;
257 | }
258 | .section_gap .section__title{
259 | padding-left: 0;
260 | padding-right: 0;
261 | }
262 | .section__ctn{
263 |
264 | }
265 |
266 |
267 |
--------------------------------------------------------------------------------
/weChatRun/pages/index.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | pageNames: [
4 | {
5 | id: 'animation',
6 | name: '动画',
7 | }, {
8 | id: 'run',
9 | name: '跑步',
10 | }
11 | ]
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/weChatRun/pages/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | {{item.name}}
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/weChatRun/pages/index.wxss:
--------------------------------------------------------------------------------
1 | .index{
2 | background-color: #FBF9FE;
3 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
4 | flex: 1;
5 | min-height: 100%;
6 | font-size: 32rpx;
7 | }
8 | .header{
9 | margin-top: 20;
10 | line-height: 1;
11 | }
12 | .icon{
13 | width: 80rpx;
14 | height: 80rpx;
15 | padding: 30;
16 | margin-top: 20;
17 | margin-bottom:20;
18 | }
19 |
20 | .body{
21 | padding-left: 30rpx;
22 | padding-right: 30rpx;
23 | overflow: hidden;
24 | }
25 | .bigTitle{
26 | font-size: 52rpx;
27 | padding-left: 30rpx;
28 | padding-right: 30rpx;
29 | position: center;
30 | }
31 | .title{
32 | font-size: 52rpx;
33 | }
34 | .desc{
35 | margin-top: 10rpx;
36 | color: #888888;
37 | font-size: 28rpx;
38 | padding-left: 30rpx;
39 | padding-right: 30rpx;
40 | }
41 |
42 | .widgets__item{
43 | margin-top: 30rpx;
44 | margin-bottom: 20rpx;
45 | background-color: #FFFFFF;
46 | overflow: hidden;
47 | border-radius: 4rpx;
48 | cursor: pointer;
49 | padding-left: 10;
50 | }
51 | .widgets__info{
52 | display: flex;
53 | padding: 40rpx;
54 | align-items: center;
55 | flex-direction: row;
56 | }
57 | .widgets__info_show{
58 | }
59 | .widgets__info_show .widgets__info-img{
60 | transform: rotate(-90deg);
61 | }
62 | .widgets__info-name{
63 | flex: 1;
64 | }
65 | .widgets__info-img{
66 | width: 32rpx;
67 | height: 32rpx;
68 | transition: transform .4s;
69 | transform: rotate(90deg);
70 | }
71 |
72 | .widgets__list{
73 | display: none;
74 | }
75 | .widgets__list_show{
76 | display: block;
77 | }
78 | .widget{
79 | position: relative;
80 | padding-top: 26rpx;
81 | padding-bottom: 26rpx;
82 | padding-left: 40rpx;
83 | padding-right: 40rpx;
84 | }
85 | .widget__arrow{
86 | position: absolute;
87 | top: 28rpx;
88 | right: 44rpx;
89 | width: 32rpx;
90 | height: 32rpx;
91 | }
92 | .widget__line{
93 | content: " ";
94 | position: absolute;
95 | left: 40rpx;
96 | top: 0;
97 | right: 0;
98 | height: 2rpx;
99 | background-color: #F0F0F0;
100 | }
101 | .widget__line_first{
102 | left: 0;
103 | right: 0;
104 | background-color: #D8D8D8;
105 | }
106 |
--------------------------------------------------------------------------------
/weChatRun/pages/logs/logs.js:
--------------------------------------------------------------------------------
1 | //logs.js
2 | var util = require('../../utils/util.js')
3 | Page({
4 | data: {
5 | logs: []
6 | },
7 | onLoad: function () {
8 | this.setData({
9 | logs: (wx.getStorageSync('logs') || []).map(function (log) {
10 | return util.formatTime(new Date(log))
11 | })
12 | })
13 | }
14 | })
15 |
--------------------------------------------------------------------------------
/weChatRun/pages/logs/logs.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "查看启动日志"
3 | }
--------------------------------------------------------------------------------
/weChatRun/pages/logs/logs.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{index + 1}}. {{log}}
5 |
6 |
7 |
--------------------------------------------------------------------------------
/weChatRun/pages/logs/logs.wxss:
--------------------------------------------------------------------------------
1 | .log-list {
2 | display: flex;
3 | flex-direction: column;
4 | padding: 40rpx;
5 | }
6 | .log-item {
7 | margin: 10rpx;
8 | }
9 |
--------------------------------------------------------------------------------
/weChatRun/pages/run/format-location.js:
--------------------------------------------------------------------------------
1 | function formatLocation(longitude, latitude) {
2 | longitude = longitude.toFixed(2)
3 | latitude = latitude.toFixed(2)
4 |
5 | return {
6 | longitude: longitude.toString().split('.'),
7 | latitude: latitude.toString().split('.')
8 | }
9 | }
10 |
11 | module.exports = formatLocation
12 |
--------------------------------------------------------------------------------
/weChatRun/pages/run/run.js:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | var countTooGetLocation = 0;
5 | var total_micro_second = 0;
6 | var starRun = 0;
7 | var totalSecond = 0;
8 | var oriMeters = 0.0;
9 | /* 毫秒级倒计时 */
10 | function count_down(that) {
11 |
12 | if (starRun == 0) {
13 | return;
14 | }
15 |
16 | if (countTooGetLocation >= 100) {
17 | var time = date_format(total_micro_second);
18 | that.updateTime(time);
19 | }
20 |
21 | if (countTooGetLocation >= 5000) { //1000为1s
22 | that.getLocation();
23 | countTooGetLocation = 0;
24 | }
25 |
26 |
27 | setTimeout
28 | setTimeout(function(){
29 | countTooGetLocation += 10;
30 | total_micro_second += 10;
31 | count_down(that);
32 | }
33 | ,10
34 | )
35 | }
36 |
37 |
38 | // 时间格式化输出,如03:25:19 86。每10ms都会调用一次
39 | function date_format(micro_second) {
40 | // 秒数
41 | var second = Math.floor(micro_second / 1000);
42 | // 小时位
43 | var hr = Math.floor(second / 3600);
44 | // 分钟位
45 | var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
46 | // 秒位
47 | var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;
48 |
49 |
50 | return hr + ":" + min + ":" + sec + " ";
51 | }
52 |
53 |
54 | function getDistance(lat1, lng1, lat2, lng2) {
55 | var dis = 0;
56 | var radLat1 = toRadians(lat1);
57 | var radLat2 = toRadians(lat2);
58 | var deltaLat = radLat1 - radLat2;
59 | var deltaLng = toRadians(lng1) - toRadians(lng2);
60 | 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)));
61 | return dis * 6378137;
62 |
63 | function toRadians(d) { return d * Math.PI / 180;}
64 | }
65 |
66 | function fill_zero_prefix(num) {
67 | return num < 10 ? "0" + num : num
68 | }
69 |
70 | //****************************************************************************************
71 | //****************************************************************************************
72 |
73 | Page({
74 | data: {
75 | clock: '',
76 | isLocation:false,
77 | latitude: 0,
78 | longitude: 0,
79 | markers: [],
80 | covers: [],
81 | meters: 0.00,
82 | time: "0:00:00"
83 | },
84 |
85 | //****************************
86 | onLoad:function(options){
87 | // 页面初始化 options为页面跳转所带来的参数
88 | this.getLocation()
89 | console.log("onLoad")
90 | count_down(this);
91 | },
92 | //****************************
93 | openLocation:function (){
94 | wx.getLocation({
95 | type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
96 | success: function(res){
97 | wx.openLocation({
98 | latitude: res.latitude, // 纬度,范围为-90~90,负数表示南纬
99 | longitude: res.longitude, // 经度,范围为-180~180,负数表示西经
100 | scale: 28, // 缩放比例
101 | })
102 | },
103 | })
104 | },
105 |
106 |
107 | //****************************
108 | starRun :function () {
109 | if (starRun == 1) {
110 | return;
111 | }
112 | starRun = 1;
113 | count_down(this);
114 | this.getLocation();
115 | },
116 |
117 |
118 | //****************************
119 | stopRun:function () {
120 | starRun = 0;
121 | count_down(this);
122 | },
123 |
124 |
125 | //****************************
126 | updateTime:function (time) {
127 |
128 | var data = this.data;
129 | data.time = time;
130 | this.data = data;
131 | this.setData ({
132 | time : time,
133 | })
134 |
135 | },
136 |
137 |
138 | //****************************
139 | getLocation:function () {
140 | var that = this
141 | wx.getLocation({
142 |
143 | type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
144 | success: function(res){
145 | console.log("res----------")
146 | console.log(res)
147 |
148 | //make datas
149 | var newCover = {
150 | latitude: res.latitude,
151 | longitude: res.longitude,
152 | iconPath: '/resources/redPoint.png',
153 | };
154 | var oriCovers = that.data.covers;
155 |
156 | console.log("oriMeters----------")
157 | console.log(oriMeters);
158 | var len = oriCovers.length;
159 | var lastCover;
160 | if (len == 0) {
161 | oriCovers.push(newCover);
162 | }
163 | len = oriCovers.length;
164 | var lastCover = oriCovers[len-1];
165 |
166 | console.log("oriCovers----------")
167 | console.log(oriCovers,len);
168 |
169 | var newMeters = getDistance(lastCover.latitude,lastCover.longitude,res.latitude,res.longitude)/1000;
170 |
171 | if (newMeters < 0.0015){
172 | newMeters = 0.0;
173 | }
174 |
175 | oriMeters = oriMeters + newMeters;
176 | console.log("newMeters----------")
177 | console.log(newMeters);
178 |
179 |
180 | var meters = new Number(oriMeters);
181 | var showMeters = meters.toFixed(2);
182 |
183 | oriCovers.push(newCover);
184 |
185 | that.setData({
186 | latitude: res.latitude,
187 | longitude: res.longitude,
188 | markers: [],
189 | covers: oriCovers,
190 | meters:showMeters,
191 | });
192 | },
193 | })
194 | }
195 |
196 | })
197 |
198 |
199 |
200 |
--------------------------------------------------------------------------------
/weChatRun/pages/run/run.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "跑步"
3 | }
4 |
--------------------------------------------------------------------------------
/weChatRun/pages/run/run.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | \n里程数:{{meters}}km
9 | \n\n时间:{{time}}
10 |
11 |
12 |
13 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/weChatRun/pages/run/run.wxss:
--------------------------------------------------------------------------------
1 |
2 |
3 | .mapView{
4 | align-items: center;
5 | }
6 |
7 | .page {
8 | background-color: #fbf9fe;
9 | height: 100%;
10 | }
11 | .container {
12 | display: flex;
13 | flex-direction: column;
14 | min-height: 100%;
15 | justify-content: space-between;
16 | }
17 | .page-header {
18 | display: flex;
19 | font-size: 32rpx;
20 | color: #aaa;
21 | margin-top: 50rpx;
22 | flex-direction: column;
23 | align-items: center;
24 | }
25 | .page-header-text {
26 | padding: 20rpx 40rpx;
27 | }
28 | .page-header-line {
29 | width: 150rpx;
30 | height: 1px;
31 | border-bottom: 1px solid #ccc;
32 | }
33 |
34 | .page-body {
35 | width: 100%;
36 | display: flex;
37 | flex-direction: column;
38 | align-items: center;
39 | flex-grow: 1;
40 | overflow-x: hidden;
41 | }
42 | .page-body-wrapper {
43 | margin-top: 100rpx;
44 | display: flex;
45 | flex-direction: column;
46 | align-items: center;
47 | width: 100%;
48 | }
49 | .page-body-wrapper form {
50 | width: 100%;
51 | }
52 | .page-body-wording {
53 | text-align: center;
54 | padding: 200rpx 100rpx;
55 | }
56 | .page-body-info {
57 | display: flex;
58 | flex-direction: column;
59 | align-items: center;
60 | background-color: #fff;
61 | margin-bottom: 50rpx;
62 | width: 100%;
63 | padding: 50rpx 0 150rpx 0;
64 | }
65 | .page-body-title {
66 | margin-bottom: 100rpx;
67 | font-size: 32rpx;
68 | }
69 | .page-body-text {
70 | font-size: 30rpx;
71 | line-height: 26px;
72 | color: #ccc;
73 | }
74 | .page-body-text-small {
75 | font-size: 24rpx;
76 | color: #000;
77 | margin-bottom: 100rpx;
78 | }
79 | .page-body-form {
80 | width: 100%;
81 | background-color: #fff;
82 | display: flex;
83 | flex-direction: column;
84 | width: 100%;
85 | border: 1px solid #eee;
86 | }
87 | .page-body-form-item {
88 | display: flex;
89 | align-items: center;
90 | margin-left: 30rpx;
91 | border-bottom: 1px solid #eee;
92 | height: 88rpx;
93 | font-size: 34rpx;
94 | }
95 | .page-body-form-key {
96 | width: 180rpx;
97 | color: #000;
98 | }
99 | .page-body-form-value {
100 | flex-grow: 1;
101 | }
102 | .page-body-form-value .input-placeholder {
103 | color: #b2b2b2;
104 | }
105 |
106 | .page-body-form-picker {
107 | display: flex;
108 | justify-content: space-between;
109 | height: 100rpx;
110 | align-items: center;
111 | font-size: 36rpx;
112 | margin-left: 20rpx;
113 | padding-right: 20rpx;
114 | border-bottom: 1px solid #eee;
115 | }
116 | .page-body-form-picker-value {
117 | color: #ccc;
118 | }
119 |
120 | .page-body-buttons {
121 | width: 100%;
122 | }
123 | .page-body-button {
124 | margin: 25rpx;
125 | }
126 | .page-body-button image {
127 | width: 150rpx;
128 | height: 150rpx;
129 | }
130 | .page-footer {
131 | text-align: center;
132 | color: #1aad19;
133 | font-size: 24rpx;
134 | margin: 20rpx 0;
135 | }
136 |
137 | .green{
138 | color: #09BB07;
139 | }
140 | .red{
141 | color: #F76260;
142 | }
143 | .blue{
144 | color: #10AEFF;
145 | }
146 | .yellow{
147 | color: #FFBE00;
148 | }
149 | .gray{
150 | color: #C9C9C9;
151 | }
152 |
153 | .strong{
154 | font-weight: bold;
155 | }
156 |
157 | .bc_green{
158 | background-color: #09BB07;
159 | }
160 | .bc_red{
161 | background-color: #F76260;
162 | }
163 | .bc_blue{
164 | background-color: #10AEFF;
165 | }
166 | .bc_yellow{
167 | background-color: #FFBE00;
168 | }
169 | .bc_gray{
170 | background-color: #C9C9C9;
171 | }
172 |
173 | .tc{
174 | text-align: center;
175 | }
176 |
177 | .page input{
178 | padding: 20rpx 30rpx;
179 | background-color: #fff;
180 | }
181 | checkbox, radio{
182 | margin-right: 10rpx;
183 | }
184 |
185 | .btn-area{
186 | padding: 0 30px;
187 | }
188 | .btn-area button{
189 | margin-top: 20rpx;
190 | margin-bottom: 20rpx;
191 | }
192 |
193 | .page {
194 | min-height: 100%;
195 | flex: 1;
196 | background-color: #FBF9FE;
197 | font-size: 32rpx;
198 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
199 | overflow: hidden;
200 | }
201 | .page__hd{
202 | padding: 50rpx 50rpx 100rpx 50rpx;
203 | text-align: center;
204 | }
205 | .page__title{
206 | display: inline-block;
207 | padding: 20rpx 40rpx;
208 | font-size: 32rpx;
209 | color: #AAAAAA;
210 | border-bottom: 1px solid #CCCCCC;
211 | }
212 | .page__desc{
213 | display: none;
214 | margin-top: 20rpx;
215 | font-size: 26rpx;
216 | color: #BBBBBB;
217 | }
218 |
219 | .section{
220 | margin-bottom: 80rpx;
221 | }
222 | .section_gap{
223 | padding: 0 30rpx;
224 | }
225 | .section__title{
226 | margin-bottom: 16rpx;
227 | padding-left: 30rpx;
228 | padding-right: 30rpx;
229 | }
230 | .section_gap .section__title{
231 | padding-left: 0;
232 | padding-right: 0;
233 | }
234 | .section__ctn{
235 |
236 | }
237 |
--------------------------------------------------------------------------------
/weChatRun/resources/joyrun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanwangmodify/weChatApp-Run/6762cfc3342eb399b608da44ec818254f47f92dc/weChatRun/resources/joyrun.png
--------------------------------------------------------------------------------
/weChatRun/resources/redPoint.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanwangmodify/weChatApp-Run/6762cfc3342eb399b608da44ec818254f47f92dc/weChatRun/resources/redPoint.png
--------------------------------------------------------------------------------
/weChatRun/utils/util.js:
--------------------------------------------------------------------------------
1 | function formatTime(date) {
2 | var year = date.getFullYear()
3 | var month = date.getMonth() + 1
4 | var day = date.getDate()
5 |
6 | var hour = date.getHours()
7 | var minute = date.getMinutes()
8 | var second = date.getSeconds()
9 |
10 |
11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
12 | }
13 |
14 | function formatNumber(n) {
15 | n = n.toString()
16 | return n[1] ? n : '0' + n
17 | }
18 |
19 | module.exports = {
20 | formatTime: formatTime
21 | }
22 |
--------------------------------------------------------------------------------