起始地址一、准备工作1.注册小程序账号，必须使用之前未注册过的邮箱地址公众号注册。2.注册过程需要很多认证。认证很多，比较繁琐。如果暂时只是开发测试，不审核发布，只需要填写营业执照号码，不需要完成微信认证。3、注册好账号后登录，在主页面左侧列表中点击设置，然后在设置页面选择开发设置，可以看到AppID，用于登录开发工具。2.开发工具可在官网下载。3.启动项目打开开发者工具，选择小程序选项，进入添加项目页面。这时候就会用到之前设置页面的AppId。如果项目目录下的文件为空文件夹，会提示是否创建快速启动项目。选择“是”，开发者工具会帮我们在开发目录下生成一个简单的demo。这个演示有一个完整小程序的大纲。1、框架先看下目录：app.js：小程序逻辑、生命周期、全局变量app.json：小程序公共设置、导航栏颜色等，不能注释app.wxss：小程序公共样式、classCSS.小程序页面组成：每个小程序页面由同一路径下四个同名后缀的文件组成，如：index.js、index.wxml、index.wxss、index.json。app.json的pages中需要写微信小程序中每个页面的[路径+页面名称]，pages中的第一个页面就是小程序的首页。这四个文件按照功能可以分为三部分：配置：json文件逻辑层：js文件视图层：wxss.代码通过X5内核在开发工具上解析，小程序的javascript代码运行在nwjs（chrome内核）中。因此，在开发工具上的效果与实际效果是有区别的。2.组件微信提供了很多组件，主要分为八种类型：视图容器、基础内容、表单组件、操作反馈、导航、媒体组件、地图、画布，包括view、scroll-view、button、form等常用的用过的组件，还提供贴图贴图，canvas画布。组件主要属于视图层，通过wxml进行结构布局，类似于html。通过wxss修改样式，类似于css。组件使用语法示例：这是一个普通视图样式修改视图更多组件及相关使用方法可前往官方文档-组件视图3.API网络媒体数据定位设备接口开发接口。使用网络请求，首先要在公众平台上登录小程序账号。在设置页面，设置允许访问的域名，网络请求包括普通http请求，支持上传、下载、socket。基本满足了我们开发中需要的网络需求。这些API属于逻辑层，写在js文件中。使用示例：wx.getLocation({type:'wgs84',success:function(res){varlatitude=res.latitudevarlongitude=res.longitudevarspeed=res.speedvaraccuracy=res.accuracy}})你可以去官方文档-API查看其他API的使用方法。四、编译运行1、模拟器可以在模拟器上看到效果。上层和底层运行不同，效果和手机端有些区别。2.真机在左侧选项栏，选择项目，然后点击预览，生成一个二维码，用管理员微信扫一扫，就可以看到真机上的实际效果——运行的小程序.真机运行截图（iPhone7运行，微信版本：6.3.30）：功能：可以计算里程，时间，实时获取运行路径（有些粗糙）思路：主要是使用API??wx.getLocation()和地图组件地图。先实现一个定时器进行计时，通过wx.getLocation()获取坐标，将获取到的坐标存储到数组中，每隔一段时间通过坐标获取里程，累加总里程，同时连接坐标点time存在的问题：1、由于目前无法在地图上绘制连接线，所以采用在地图上粘贴小红点的方式显示大概的跑步路径，比较粗糙。2、虽然使用了API中的火星坐标gcj02类型，但是得到的坐标和国际坐标差不多，还是有偏差的。核心代码：所有代码我都放在了github-weChatApp-Run，大家可以下载看看或者先star一下，后续会做一些优化更新。现在只是一个学习demo，大家交流学习，实际应用还需要更多的优化。wxml文件布局代码：打开位置开始跑步暂停跑步\n里程：{{米}}km\n\n时间：{{time}}js文件逻辑代码：varcountTooGetLocation=0;vartotal_micro_second=0;变量starRun=0;vartotalSecond=0;varoriMeters=0.0;/*毫秒倒计时*/functioncount_down(that){if(starRun==0){return;}if(countTooGetLocation>=100){vartime=date_format(total_micro_second);那.updateTime(时间);}if(countTooGetLocation>=5000){//1000是1sthat.getLocation();countTooGetLocation=0;}setTimeoutsetTimeout(function(){countTooGetLocation+=10;total_micro_second+=10;count_down(that);},10)}//时间格式输出，比如03:25:1986默认10毫秒默认默认函数date_format(micro_second){//默认varsecond=Math.floor(micro_second/1000);//地板varhr=Math.floor(second/3600);//内部变量min=fill_zero_prefix(Math.floor((second-hr*3600)/60));//基于varsec=fill_zero_prefix((second-hr*3600-min*60));//等于=>varsec=second%60;返回小时+“：”+分钟+“：”+秒+“”；}functiongetDistance(lat1,lng1,lat2,lng2){varthis=0;varradLat1=toRadians(lat1);varradLat2=toRadians(lat2);vardeltaLat=radixLat1-radixLat2;vardeltaLng=toRadians(lng1)-toRadians(lng2);varthis=2*Math.sin(Math.sqrt(Math.pow(Math.sin(deltaLat/2),2)+Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin).(deltaLng/2),2)));返回这个*6378137;函数toRadians(d){返回d*Math.PI/180;}}functionfill_zero_prefix(num){返回num<10?"0"+num:num}//************************************************************************************************//************************************************************************************************Page({数据：{时钟：''，isLocation：false，纬度：0，经度：0，标记：[]，封面：[]，米：0.00，time:"0:00:00"},//****************************onLoad:function(options){//页面初始化选项是页面跳转this.getLocation()console.log("onLoad")count_down(this);},//******************带的参数*********openLocation:function(){wx.getLocation({type:'gcj02',//默认为wgs84返回gps坐标，gcj02返回坐标可用于wx.openLocationsuccess:function(res){wx.openLocation({latitude:res.latitude,//纬度，范围-90~90，负数表示南纬longitude:res.longitude,//经度，范围-180~180，负数数字表示西经比例:28,//缩放比例})},})},//************************************starRun:function(){if(starRun==1){返回；}焦油=1;倒计时（这个）；this.getLocation();},//******************************stopRun:function(){starRun=0;倒计时（这个）；},//******************************updateTime:function(time){vardata=this.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)//制作数据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;如果（newMeters<0.0015）{newMeters=0.0;}oriMeters=oriMeters+newMeters;安慰。log("newMeters----------")console.log(newMeters);varmeters=newNumber(oriMeters);varshowMeters=meters.toFixed(2);oriCovers.push(newCover);.setData({latitude:res.latitude,longitude:res.longitude,markers:[],covers:oriCovers,meters:showMeters,});},})}})五、后记本文为快速入门开发介绍，详情可查看官方文档。我所有的相关代码都放在github-weChatApp-Run
