前言

本人已经把一切代码放在github上-weChatApp-Run,可以下载来看看或者先star收藏,我随后还会展开部分优化立异。现在只是一个读书Demo,我们关系学习,实际行使还需越多优化。

正文

一、准备工作

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收藏,我将来还会进行部分优化立异。现在只是一个上学Demo,我们关系学习,实际利用还需更加多优化。

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:19
86。每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,        });      },    })  }  })

五、后语

本文是一个快捷上手开发的牵线,细节介绍能够查看法定文档

我的相关全体代码放在github上-weChatApp-Run

作者:alanwangmodify

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

來源:简书

小说权归作者所有。商业转发请联系笔者拿到授权,非商业转发请注脚出处。

相关文章

网站地图xml地图