微信小程序-从零开始制作一个跑步微信小程序

作者:金沙易记域名4166am

前言

笔者早就把全数代码放在github上-weChatApp-Run,能够下载来看看可能先star收藏,作者随后还或者会开展局地优化立异。今后只是二个读书德姆o,我们联系学习,实际应用还需越多优化。

正文

生龙活虎、筹划干活

1、注册二个小程序账号,得用二个没注册过大伙儿号的邮箱注册。

2、注册进度中必要多多注解,有广大评释,比较繁杂,如若有的时候只是开采测量试验,不开展提审、公布以来,只要达成营业许可证号填写就足以了,无需完毕微信认证。

3、注册完账号,登陆,在主页面左侧列表中式点心击设置,然后再设置页面中选开采设置就能够见见AppID,用于登入开拓工具。

主页面

安装页面

二、开荒工具

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

开拓工具

微信小程序-从零开始制作一个跑步微信小程序。开拓工具编辑页面

三、开首项目

微信小程序-从零开始制作一个跑步微信小程序。张开开拓者工具,采用小程序选项,达到增加项目页面

增添品种

其有时候在前方设置页面包车型大巴AppId就用到了。

风流洒脱旦项目目录中的文件是个空文件夹,会提示是否创制quick start 项目。

筛选“是”,开垦者工具会扶持大家在开采目录里生成七个粗略的 demo。

这一个Demo拥有叁个完整的小程序的差相当的少框架。

1、框架

先看下一目录:

文本目录.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的利用办法。

4、编写翻译运转

1、模拟器

能够在模拟器上看效能,上面讲到了运营底层不相同,效果跟在堂哥伦比亚大学上运行有个别出入

模拟器.png

2、真机

在左边手的选项栏中,选种,然后点预览会生产叁个二维码,用管理员微实信号扫一扫就可以在真机上看实效

Paste_Image.png

实践--跑步小程序。

真机械运输营截图(运维于魅族7,微信版本:6.3.30):

home.jpeg

run.jpeg

slideback.jpeg

slide.jpeg

功能:

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

思路:

注重使用了微信小程序的获得地方APIwx.getLocation()和地图组件map。

第一贯彻八个放大计时器进行计时,通过wx.getLocation()获取坐标,把收获到的坐标存在二个数组中,通过坐标每间隔黄金时代段时间获取里程,实行增加获得总里程,同有时间也经过坐标点进行连线

存在的主题素材:

1、因为脚下找不到在地形图上画连线的法子,所以选拔了在地形图上贴小红点图的办法呈现大致跑步路线,路线非常粗大糙。

2、尽管选择了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:一九八八。每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 = ori库弗斯.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,        });      },    })  }  })

五、后语

本文是一个神速上手开采的牵线,细节介绍可以查阅法定文书档案

自己的相干全体代码放在github上-weChatApp-Run

作者:alanwangmodify

链接:

來源:简书

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

本文由金沙易记域名4166am发布,转载请注明来源

关键词: