前言

我已经把全部代码放在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 中的第一个页面是小程序的首页。

路径

这四个文件按照功能可以分成三个部分：

在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中
在 Android 上，小程序的 javascript 代码是通过 X5 内核来解析
在 开发工具上， 小程序的 javascript 代码是运行在 nwjs（chrome内核） 中。所以开发工具上的效果跟实际效果有所出入。

2、组件

微信提供了许多组件，主要分为八种:

包含view、scroll-view、button、form等普通常用的组件，也提供了地图map、画布canvas。

组件主要属于视图层，通过wxml来进行结构布局，类似于html。通过wxss修改样式，类似于css。
组件使用语法实例：

<!--普通视图-->
<view>这是一个普通视图</view>

<!--wxss样式修改-->
<view clas="mainView">样式修改过的视图</view>

最后

以上就是贪玩抽屉为你收集整理的微信开发之制作一个跑步微信小程序的全部内容，希望文章能够帮你解决微信开发之制作一个跑步微信小程序所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。