干货：从零开始，手把手教你开发跑步微信小程序_科技传媒网
干货：从零开始，手把手教你开发跑步微信小程序
这个小程序现在只是一个学习Demo，大家沟通学习，实际应用还需更多优化。
1、注册一个小程序账号，得用一个没注册过公众号的邮箱注册。2、注册过程中需要很多认证，有很多认证，比较繁琐，如果暂时只是开发测试，不进行提审、发布的话，只要完成营业执照号填写就可以了，不需要完成认证。3、注册完账号，登录，在主页面左边列表中点击设置，然后再设置页面中选开发设置就可以看到AppID，用于登录开发工具。主页面设置页面二、开发工具可以到官网下载开发工具下载开发工具编辑页面三、开始项目打开开发者工具，选择小程序选项，到达添加项目页面这个时候在前面设置页面的AppId就用到了。如果项目目录中的文件是个空文件夹，会提示是否创建quick start项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的demo。这个Demo拥有一个完整的小程序的大概框架。1、框架先看下一目录：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文件中，使用实例:可以到官方文档-API查看其它API的使用方法。4、编译运行1、模拟器可以在模拟器上看效果，上面降到了运行底层不同，效果跟在手机上运行有些差异2、真机在左边的选项栏中，选择项目，然后点预览会生产一个二维码，用管理员微信号扫一扫就可以在真机上看实际效果实践--跑步小程序。真机运行截图（运行于iPhone7，微信版本：6.3.30）：home.jpegrun.jpeg功能：能够计算里程、时间、实时获取跑步路径（有些粗糙）思路：主要使用了微信小程序的获取位置APIwx.getLocation()和地图组件map。首先实现一个计时器进行计时，通过wx.getLocation()获取坐标，把获取到的坐标存在一个数组中，通过坐标每隔一段时间获取里程，进行累加得到总里程，同时也通过坐标点进行连线存在的问题：1、因为目前找不到在地图上画连线的方法，所以采用了在地图上贴小红点图的方法显示大概跑步路径，路径比较粗糙。2、虽然采用了API里面的火星坐标gcj02类型，但是获取的坐标跟国际坐标差不多，依然存在着偏差。
原文链接：科技传媒网―致力于推动创新科技发展,专注科技新闻传播的新媒体平台。更多精彩内容请关注微信公众号：gdkjcm
(责任编辑：夏喧)
1.科技传媒网遵循行业规范，任何转载的稿件都会明确标注作者和来源；
2.科技传媒网的原创文章，请转载时务必注明文章作者和"来源："，不尊重原创的行为，科技传媒网都将保留追究责任权益；
3.作者投稿可能会经科技传媒网编辑修改或补充。
新华社重庆1月12日电(记者韩振)记者从重庆市交通执法直属支队了解到，自去年12月22日重庆颁布实施《网络预约出租汽车经营服务管理暂行办法》以来，已经有30台非
我们药品的供应保障体系主要有三个要求：第一是我们要保障药品的安全有效；第二就是价格要合理；第三就是供应要充分。我们如何确保“互联网+药品”的安全有效、
二手车电商行业进入2017年的第一个动作来自于人人车。1月11日，在人人车的2017年战略沟通会上，李健第一次提到了接下来会把金融作为重点业务之一，也公布了一些实质性的进展，一方面宣布与民生银行信用卡中心的战略合作，为二手车消费者提供消费贷，另一方面
（），由广东省创新科技传媒服务中心主办，以社会需求为导向,搜集关于科技最新最全的时事动态。主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
傻丫头和高科技产物小心翼翼的初恋
如今的编程是一场程序员和上帝的竞赛，程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止，上帝是赢的。个人网站：。个人QQ群：、
个人大数据技术博客：
CSDN &《程序员》编辑/记者，投稿&纠错等事宜请致邮
最近微信小程序一下子火了起来，我也学习了一下，写了几个简单的demo，分享一下自己的使用心得，希望对大家有帮助。& 写个微信小程序项目练练手
写个微信小程序项目练练手
　　学会一项开发技能最快的步骤就是：准备，开火，瞄准。最慢的就是：准备，瞄准，瞄准，瞄准&&　　因为微信小程序比较简单，直接开撸就行，千万别瞄准。　　地址：　　功能介绍　　功能比较简单，调用了即时查询空气质量。　　我计划多加一些功能，争取把微信小程序提供的功能全用一遍。　　也许你可以学到的东西　　1）的优先级 代码见: /pages/air_quality/result.wxss　　2）页面跳转,数据的传递 /pages/air_quality/air_quality.js ../result.js common/utils.js　　3）网络请求 /pages/air_quality/air_quality.js　　4）样式统一 程序的配置 参考 app.wxss app.json　　5）modal显示和隐藏 /pages/air_quality/air_quality.wxml ../air_quality.js　　6）状态机 事件绑定等等　　css优先级　　微信样式文件，其实就是css样式做了个加减法，就变成了wxss文件。　　其中增加了一个单位 rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。不是绝对像素，类似Android中的dp单位。参考　　除去上面的，剩下的wxss和css大部分还是一样的，包括样式选择的优先级。　　原则一： 继承不如指定　　原则二： #id & .class & 标签选择符　　原则三：越具体越强大　　原则四：标签#id &# 标签.class & .class　　CSS优先级权重计算法　　CSS优先级包含四个级别（标签内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数!　　根据这四个级别出现的次数计算得到CSS的优先级。　　CSS优先级的计算规则如下：　　* 元素标签中定义的样式（Style属性）,加1,0,0,0　　* 每个ID选择符(如 #id),加0,1,0,0　　* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0　　* 每个元素选择符（如p）或伪元素选择符(如 :firstchild)等，加0,0,0,1　　然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，　　然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。　　啰嗦了这么多 ,不如直接看例子，项目中result.wxml文件中布局:
&class=&page&&&
&&&&&class=&container&&style=&align-items:&center&&&
&&&&&&&&&&&
&&&&&&&&&class=&text_area&&&
&&&&&&&&&&&
&&&&&&&&&&&&查询城市:&{{city}}&&
&&&&&&&&&&
&&&&&&&&&&&&&
&&&&&&&&&&
&&　　其中class=&page&中的page定义样式有:
.page&{&&&&
&&&&...&&&&
&&&&font-size:&32&&&&
}　　Text标签也指定了font-size样式
text&{&&&&
&&&&font-size:&34&&&&&
}　　当前位置由于 class page中指定了font-size,Text标签也制定了该属性， 虽然标签优先级不如class高, 但是原则一:继承不如指定，所以34rpx生效。　　页面的跳转　　再小的程序，一个界面也不太够用，跳转界面还是必须的。　　微信提供了，当用户按下该组件时跳转，这属于静态跳转，类似网页中的a标签;　　也可以在触发某些事件时，通过 跳转界面，这种做法比较灵活。
wx.navigateTo(&{&&&&
&&&&&&url:util.createURL(&&./result&,&res.data.retData),&&
});&&　　路径后面可以通过? 拼装要传递的数据, 类似网络中get请求拼装url一样。　　上面createURL就是我写的一个工具方法 ，在项目的common/utils.js文件中。
function&createURL(&url,&obj&)&{&&
&&let&props&=&&&;&&
&&let&resultURL=&&;&&&&
&&for(let&p&in&obj){&&&&
&&&&if(obj[p])&&
&&&&props+=&&&&+p&+&&=&&+&obj[p];&&&&
&&resultURL=url+&?&+props.substr(1);&&
&&console.log(resultURL);&&
&&return&resultURL;&&&&
module.exports&=&{&&
&&createURL:&createURL&&
}&&　　网络请求　　具体写法可以参考　　下面是我的代码:
wx.request(&{&&
&&url:&Constant.AIR_QUALITY_URL,&&
&&header:&{&&
&&&&&Content-Type&:&&application/json&,&&
&&&&&apikey&:&Constant.API_KEY&&
&&data:&{&&
&&&&&city&:&this.data.inputValue&&
&&success:&function(&res&)&{&&
&&&&console.log(&res.data&);&&
&&&&if(&res.data.errNum&===&0&)&{&&&
&&&&&&wx.navigateTo(&{&&&&
&&&&&&&&url:util.createURL(&&./result&,&res.data.retData),&&
&&&&&&});&&
&&&&}else{&&
&&&&&&that.setData(&{&&&
&&&&&&&&modalHidden:&false,&&
&&&&&&&&modalErrorText:res.data.retMsg&&
&&&&&&});&&
&&fail:&function()&{&&
&&&&that.setData(&{&&&
&&&&&&modalHidden:&false,&&
&&&&&&&modalErrorText:&请求失败,请检测网络&&&
&&complete:&function()&{&&
&&&&that.setData(&{&&
&&&&&&loading:&false&&
});&&　　页面统一样式　　微信小程序的api不是很多，比较容易上手， 但是写出来一个好的程序还是需要仔细研究的，建议大家看一下微信提供的　　好看的程序不一定好用，但是好用的程序一定好看。哪怕是个充气的，你也肯定选好看的那个。　　为了每个界面样式统一，大家可以把相关样式抽取到app.wxss文件中，这个文件的样式其它所以界面都可以直接使用。　　下面是项目里的app.wxss,因为涉及的页面较少，用到的样式不多，目前就下面几个：
&&background-color:&#fbf9fe;&&&
&&height:&100%;&&
.container&{&&
&&min-height:&100%;&&
&&display:&&&
&&flex-direction:&&&
&&justify-content:&space-&&
&&padding:&200rpx&0&&
&&&&min-height:&100%;&&
&&&&flex:&1;&&
&&&&background-color:&#FBF9FE;&&
&&&&font-size:&32&&
&&&&font-family:&-apple-system-font,Helvetica&Neue,Helvetica,sans-serif;&&
&&&&overflow:&hidden;&&
.page&input{&&
&&&&padding:&20rpx&30&&
&&&&background-color:&#fff;&&
.section{&&
&&&&margin-bottom:&80&&
.section__title{&&
&&&&margin-bottom:&16&&
&&&&padding-left:&30&&
&&&&padding-right:&30&&
.btn-area{&&
&&&&padding:&0&30&&
.btn-area&button{&&
&&&&margin-top:&20&&
&&&&margin-bottom:&20&&
}&&　　状态机　　微信框架刷新界面的方式类似React Native的状态机。　　微信每个页面都可以设置data数据。如我的项目中的：
&&data:&{&&&&
&&&&inputValue:&&&,&&&
&&&&loading:&false,&&&
&&&&disabled:&true,&&&
&&&&modalHidden:&true,&&&
&&&&modalErrorText:&请求失败,请检测网络&&&
}&&　　data里的数据一般用来控制界面的变化。　　data里的数据不要随便乱写, 只设置和界面相关的。因为里面的数据一旦发生变化就会刷新界面，无关的数据只会加重渲染的压力。　　data里面的数据，可以在wxml文件中通过 {{js数据}}格式绑定。　　最后强调, 只能使用setData函数改变状态机变量　　最后吐槽　　世界上只有两种程序，一种是天天挨骂的，另一种是没人用的。　　微信小程序的开发环境非常难用，简直在侮辱开发环境这个词。连个自动闭合标签都没有，好多提示都没有（没提示谁会写代码啊），用中文输入法就会发现好的问题，想写中文注释需要时刻保持shift键切换，千万别忘了。　　如果不想用它，也没问题， 用webStorm也可以写， 但是目前调试还是在微信开发环境中好用点。　　webStorm需要配置 *.wxss和 *.wxml 的文件类型。 wxss对应css , wxml对应xml或者转自CSDN于连林520wcf的专栏
除非特别注明，文章均为原创
转载请标明本文地址：
作者:鸡啄米
&&( 10:27:2)&&( 11:0:6)&&( 9:34:16)&&( 9:24:41)&&( 10:37:50)&&( 9:52:46)&&( 10:54:19)&&( 16:40:44)&&( 21:46:29)
完全随机文章内容字号：
段落设置：
字体设置：
精准搜索请尝试：
干货：从零开始，手把手教你开发跑步微信小程序
来源：作者：alanwangmodify责编：元柏
一、准备工作1、注册一个小程序账号，得用一个没注册过公众号的邮箱注册。2、注册过程中需要很多认证，有很多认证，比较繁琐，如果暂时只是开发测试，不进行提审、发布的话，只要完成营业执照号填写就可以了，不需要完成微信认证。3、注册完账号，登录，在主页面左边列表中点击设置，然后再设置页面中选开发设置就可以看到AppID，用于登录开发工具。主页面设置页面二、开发工具可以到官网下载开发工具下载开发工具编辑页面三、开始项目打开开发者工具，选择小程序选项，到达添加项目页面这个时候在前面设置页面的AppId就用到了。如果项目目录中的文件是个空文件夹，会提示是否创建quick start项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的demo。这个Demo拥有一个完整的小程序的大概框架。1、框架先看下一目录：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文件中，使用实例:可以到官方文档-API查看其它API的使用方法。4、编译运行1、模拟器可以在模拟器上看效果，上面降到了运行底层不同，效果跟在手机上运行有些差异2、真机在左边的选项栏中，选择项目，然后点预览会生产一个二维码，用管理员微信号扫一扫就可以在真机上看实际效果实践--跑步小程序。真机运行截图（运行于iPhone7，微信版本：6.3.30）：home.jpegrun.jpeg功能：能够计算里程、时间、实时获取跑步路径（有些粗糙）思路：主要使用了微信小程序的获取位置APIwx.getLocation()和地图组件map。首先实现一个计时器进行计时，通过wx.getLocation()获取坐标，把获取到的坐标存在一个数组中，通过坐标每隔一段时间获取里程，进行累加得到总里程，同时也通过坐标点进行连线存在的问题：1、因为目前找不到在地图上画连线的方法，所以采用了在地图上贴小红点图的方法显示大概跑步路径，路径比较粗糙。2、虽然采用了API里面的火星坐标gcj02类型，但是获取的坐标跟国际坐标差不多，依然存在着偏差。核心代码：我把全部代码放在github上-weChatApp-Run，可以下载来看看或者先star收藏，我以后还会进行一些优化更新。现在只是一个学习Demo，大家沟通学习，实际应用还需更多优化。wxml文件布局代码&js文件逻辑代码：
软媒旗下软件：
IT之家，软媒旗下科技门户网站 - 爱科技，爱这里。
Copyright (C) , All Rights Reserved.
版权所有 鲁ICP备号