微信小程序开发之实现一个跑步小程序

目录
  • 地图组件
  • 当前位置
  • 开始跑步按钮
  • GPS定位
  • 设置前后台允许获取定位
  • 开启前后台定位
  • 绘制路线

自己动手实现一个跑步小程序 用到的方法:wx.onLocationChange,监听实时地理位置变化事件,需结合 wx.startLocationUpdateBackgroundwx.startLocationUpdate使用。

地图组件

定义一个全屏的地图,地图配置项经纬度(longitudelatitude),缩放(scale),标记点(markers),路线(polyline)等

<view class="map">
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}"
        polyline="{{polyline}}" style="width: 100%; height: 100%"></map>
</view>

地图配置项字段

data: {
    latitude: '',
    longitude: '',
    scale: 16,
    markers: [],
    polyline: [{
        points: [],
        color: '#FB8337',
        width: 5
    }]
},

当前位置

wx.getLocation获取当前位置,

// 获取当前位置
getNowLocation() {
    wx.getLocation({
        type: 'gcj02',
        isHighAccuracy: true,
        success: (res) => {
            this.setData({
                latitude: res.latitude,
                longitude: res.longitude,
            })
        }
    })
},

效果如图:

需在app.json中配置

  "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
    },
      "requiredBackgroundModes": [
        "location"
    ],
    "requiredPrivateInfos": [
        "getLocation",
        "onLocationChange",
        "startLocationUpdate",
        "startLocationUpdateBackground"
    ]

效果如下:

点击允许,就可以看到当前位置了

开始跑步按钮

添加一个开始跑步按钮

<button bindtap="startRun" class="btn" type="primary">开始跑步</button>
.map {
    width: 100%;
    height: 100vh;
}

.btn {
    position: absolute;
    bottom: 100rpx;
    left: 0;
    right: 0;
    z-index: 1000;
}

GPS定位

点击开始跑步的时候,我们需要获取手机的GPS定位是否开启,开启后才能获取地图返回我们的坐标

// 判断手机定位是否开启
checkGPS() {
    wx.getSystemInfo({
        success: (res) => {
            if (!res.locationEnabled) {
                wx.showModal({
                    title: '提示',
                    content: '请先开启手机GPS定位',
                    showCancel: false
                })
                return;
            }
        }
    })
},

开发者工具获取不到,只能用手机测试

设置前后台允许获取定位

wx.startLocationUpdate({
    success: () => {
        wx.onLocationChange((res) => {
            this.setData({
                latitude: res.latitude,
                longitude: res.longitude
            })
            wx.getSetting({
                success: (res) => {
                    wx.hideLoading()
                    if (!res.authSetting['scope.userLocationBackground']) {
                        wx.showModal({
                            title: '提示',
                            content: '为确保后台定位精确,请先设置 "使用小程序时和离开后允许" 再进行跑步',
                            showCancel: false,
                            success: function (res) {
                                if (res.confirm) {
                                    wx.openSetting()
                                }
                            }
                        })
                    } else {
                        this.running();
                    }
                }
            })
            wx.offLocationChange();
            wx.stopLocationUpdate();
        })
    },
})

开启前后台定位

// 开始前后台定位
wx.startLocationUpdateBackground({
    success: () => {
        draw();
        time();
    },
    fail: () => {
        wx.showToast({
            title: '后台定位开启失败',
            icon: 'none'
        })
    }
})

绘制路线

 let arr = this.data.polyline[0].points;
    wx.onLocationChange((res) => {
        if (dis > 0) {
            arr.push({
                latitude: res.latitude,
                longitude: res.longitude
            })
            totalDistance = Number(((totalDistance + dis) * 100).toFixed(2)) / 100;
        }
    }
    this.setData({
        'polyline[0].points': arr
    })
})

以上就是微信小程序开发之实现一个跑步小程序的详细内容,更多关于微信跑步小程序的资料请关注我们其它相关文章!

(0)

相关推荐

  • 微信小程序云开发实现搜索功能

    微信小程序云开发实现搜索功能,供大家参考,具体内容如下 微信小程序使用云开发实现搜索功能有两种情况,一种是简单的搜索用关键字来查询数据,另一种是模糊查询关于关键字的全部数据查询.废话不用多说直接上代码部分. 简单搜索功能实现 WXML代码段 <view class="sousuokuang">     <view class="sousuo">         <view class="shurukuang">

  • uni-app 开发微信小程序定位功能

    目录 一.注册账号 二.创建应用和Key 1.进入控制台 2.创建应用 3.创建Key 三.登录微信公众平台后台 四.下载微信小程序JavaScriptSDK 五.代码实现 六.一般获取经纬度地址 七.相对精确的获取经纬度地址 1.获取位置监听的权限 2.开启位置监听 3.监听实时地理位置变化 使用onLocationChange方法持续监听地址,根据定位精度字段判断是否使用此次定位的经纬度. 已经会定位的直接跳七.相对精确的获取经纬度地址 一.注册账号 把信息都输入就好了 腾讯位置服务 - 立

  • 微信小程序开发之获取用户信息的两种方法

    今天介绍两种微信小程序获取用户信息的方法 第一中直接授权获取(在同一页面之中): 首先在微信程序一个页面的WXML文件写入获取用户信息的按钮 <!-- bindTap用于绑定事件 --> <button type="default" bindtap="getUserInfor"> 登录</button> <!-- 展示获取到的用户信息 --> <image src="{{userinfor.avatar

  • js跑步算法的实现代码

    先复制一下,看看运行的效果吧,其中用到的精髓是setInterval()方法: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>JavaScript</title><style>html{backgroun

  • js游戏人物上下左右跑步效果代码分享

    本文实例讲述了js游戏人物上下左右跑步效果.分享给大家供大家参考.具体如下: js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效.你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <!DOCTYPE html>

  • 微信小程序开发之实现一个跑步小程序

    目录 地图组件 当前位置 开始跑步按钮 GPS定位 设置前后台允许获取定位 开启前后台定位 绘制路线 自己动手实现一个跑步小程序 用到的方法:wx.onLocationChange,监听实时地理位置变化事件,需结合 wx.startLocationUpdateBackground,wx.startLocationUpdate使用. 地图组件 定义一个全屏的地图,地图配置项经纬度(longitude,latitude),缩放(scale),标记点(markers),路线(polyline)等 <v

  • mpvue微信小程序开发之实现一个弹幕评论

    先上图 就是一个简单的弹幕发送功能 弹幕区的页面: <div class="content" v-show="doommData.length"> <div class="textLeft"></div> <div class="textItem"> <p class="text aon" v-if="item.display" v-

  • 微信小程序开发打开另一个小程序的实现方法

    微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] } 否则会弹出以下错误提示: 超链接实现跳转到小程序: demo.wxml <navigator target="miniProgram&quo

  • 使用springboot开发的第一个web入门程序的实现

    1.新建一个springboot初始化项目 2.输入自己的包名,项目名及jdk版本,再点击Next 3.勾选Spring Web,再点击Next 4.再点击Next,再Finish 默认的项目结构如下图 (1)修改pom.xml文件 完整的pom.xml为: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0&qu

  • android串口开发入门之搭建ndk开发环境及第一个jni调用程序

    前言 这几天专门研究了下JNI编程,在网上找了好多资料,不过好多都是以前的,没有更新,而且有的还是错误的,让人不得不吐槽一把.所以觉得自己来一篇,本文将详细介绍关于android搭建ndk开发环境及第一个jni调用程序的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一:ndk环境搭建 1:开发环境 我使用的是android studio 2.3.3版本,搭建ndk开发环境比较简单,打开File----Settings----Appearance&Behavior--

  • 微信小程序(微信应用号)开发工具0.9版安装详细教程

    微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号) 声明 •微信小程序开发工具类似于一个轻量级的IDE集成开发环境,目前仅开放给了少部分受微信官方邀请的人士(据说仅200个名额)进行内测,因此目前未受到邀请的人士只能使用破解版: •本破解版资源来自于网上,与本人无关,仅供技术开发人员研究之用: •由于尚属内测阶段,因此迭代更新非常快,后续很可能由于升级而导致暂时无法使用. 特别注意 •由于目前发布的0.9版本必须验证才能登录(估计是为了验证是否为内测人士),因此必须先

  • IOS程序开发之跳转短信发送界面实现发送短信功能

    项目需求:在程序开发中,我们需要在某个程序里面发送一些短信验证(不是接收短信验证,关于短信验证,传送门:http://www.cnblogs.com/wolfhous/p/5096774.html 项目实现: 新建demo,直接看我源码标志. 源码截图 真机截图 就是如此简单,如您有任何问题/建议或者更好的实现方法,联系本人. 可以看我折叠的源码 /** 点击发送短信按钮*/ - (IBAction)sendMessageBut:(id)sender { /** 如果可以发送文本消息(不在模拟器

  • 基于Oracle的高性能动态SQL程序开发

    正在看的ORACLE教程是:基于Oracle的高性能动态SQL程序开发. 摘要:对动态SQL的程序开发进行了总结,并结合笔者实际开发经验给出若干开发技巧. 关键词:动态SQL,PL/SQL,高性能 1. 静态SQLSQL与动态SQL Oracle编译PL/SQL程序块分为两个种:其一为前期联编(early binding),即SQL语句在程序编译期间就已经确定,大多数的编译情况属于这种类型:另外一种是后期联编(late binding),即SQL语句只有在运行阶段才能建立,例如当查询条件为用户输

  • 微信小程序云开发 搭建一个管理小程序

    概述 : 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库 存储:在小程序前端直接上传/下载

  • 微信 小程序开发环境搭建详细介绍

    微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图 开发工具下载是看到GitHub上的分享.那么你可以直接

随机推荐