“跳一跳”小游戏中，玩家通过长按与放开来控制小人前进。
那么，界面里我们所看到的每个元素是如何呈现出来的呢？
小人和盒子随着长按的时间长短，产生不同程度的弹性形变是如何实现的呢？
各种音效又是如何触发的呢？
从开篇的问题，我们不难发现，“跳一跳”的实现原理大致可以分为界面元素、元素的外观属性和动作交互，在小程序框架里它们分别被称为视图层、样式层和逻辑层，分别对应的开发语言是WXML、wxss和javascript。
如上图便是通过一段简单的WXML代码来呈现的小程序界面。
WXML提供了如<view><image><swiper>等一整套视图组件帮助我们完成前端界面的开发。作为小程序开发者，我们可以通过编写WXML，让我们的手机“知道”需要向我们的用户展现一个什么样的界面。
接下来，我们通过增加JS代码，同时与WXML绑定，来实现以上大家所看到的效果：当你不停地点击按钮，可以看到“Hello World”的位置在不停地改变。
作为初学者，我们可以这样形象地理解JS的作用：JS就是让机器知道用户在界面上做了一个什么样的动作，同时借助JS让机器对用户的动作作出反馈。（人和机器交流的桥梁）
在实际的开发中，我们会灵活地借助小程序所提供的API进行编程，这将使我们的开发效率大大提高；而JS与WXML的相关组件进行绑定，便成为一个带有交互功能的小程序。
事实上，小程序是基于微信中的webkit（一种开源的浏览器引擎）而存在的，因而其本质上相当于web应用，而小程序的开发语言是由原生的HTML、CSS、JS等封装而成的，所以学习并掌握这三门前端常用语言对小程序开发是很有必要的。
当然了，正因为小程序开发语言是经过封装的前端语言，故小程序开发的学习曲线相对更平滑，从入门到开发所需的时间更短。接下来，我们先简单认识一下HTML、CSS和JS。
01 HTML
HTML（HyperText Markup Language）——超文本标记语言，顾名思义是一种通过标记符号来表示网页整体结构、内容及各部分外观的语言。
HTML主要由头部<head>和正文<body>两部分组成，而其中的代码由我们希望网页呈现的内容、功能和各种成对的标签所组成（有部分标签是单个出现的，如过行标签<br/>）
<html>
<head>
<title>一人开发小应用</title>
<a name="top"></a>
</head>
<body>
<h1><big>小程序开发培训</h1>
<p><small>小程序开发，一个月从零基础入门到大神开发<br/>
</p>
点击这里浏览跳转学习：<a href="#studycenter">前去学习</a>
<div style='margin-top:5000px'></div>
<a name="studycenter">学习中心</a>
<a href="#top">返回顶部</a>
<div style='margin-top:300px'></div>
</body>
</html>
如上，便是一段非常简单的HTML，除常见的标题、段落和字号标签（如<h1>、<p>、<big>等）外，还包含了锚标签<a>，可以通过点击到达指定位置，如返回顶部。
大家如果有兴趣，可以在电脑创建一个文本文档，把上述的代码复制黏贴到文档中保存，并把文档的后缀名改为.html之后双击打开即可。
02 CSS
CSS，层叠样式表，它可以为标记语言提供一种样式描述，定义了网页中元素的显示方式（如标题居中、颜色黑色、字体加粗等），其具样式丰富、易于使用和修改、多页面应用及层叠等特点。
关于CSS的使用，通常分为外联、内联和内嵌三种方式，如下图所示。
<h1 style=’font-size:14px’>你好</h1>
▲
内嵌样式
（又称“行内样式”，直接写入HTML某一行中的style属性值）
<head >
<style>
h1{
font-size:14px;
}
<style>
</head>
<body>
<h1>你好</h1>
</body>
▲
内联样式
（直接写在HTML头部）
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>你好<h1>
</body>
</html>
.h1{font-size:14px}
▲
外联样式
（HTML和CSS分别写在两个文件，后缀名分别对应.html和.css）
在小程序的编程中，我们通常采用外联或内嵌的方式来描述视图层组件的样式。
Tips：学会HTML和CSS，还可以应用到公众号的推文来实现更多互动效果哦！
03 JS
JavaScript是一种面向对象的脚本语言，在web端应用中广泛用于用户交互、与服务器通信进行数据读写（ajax）、服务器编程（Node.js）、UI（Vue.js）等，通常通过在HTML中引入来实现功能。
目前国际中通用的JavaScript是由ECMA制订的标准化脚本程序设计语言——ECMAscript，又称ES；最新版本为ES6，而使用相对较多的仍是ES5，故我们在小程序开发工具中可以通过勾选“ES6转ES5”，使小程序获得更好的兼容效果。
Tips：JavaScript和Java是两门截然不同的语言，只是由于某些历史原因在命名上有些雷同，感兴趣者可自行了解。
逻辑层作为小程序的一个重要组成部分，学会使用JS是完成小程序开发的秘钥；值得注意的是，正如开篇所提到的，善于运用小程序所提供的API将大大地降低我们的入门难度，同时进一步提高我们的开发效率。
在小程序开发中，WXML的编程上与HTML大同小异，针对常用的组件和初学者容易快速掌握并实践的组件，我们将在近期的推送中给大家一一讲解。
关于我们
我们愿意利用每天的三分钟，致力于帮助更多新媒体人从零基础到深度掌握小程序；
我们谨希望在新媒体探索上，一路有你，一起成长；
这，是我们的梦想。
如果你认同我们，请帮我们转发，这将是对我们坚持梦想最大的鼓励！
查看原文更多详细资料，欢迎关注公众号【一人从零开发小应用】（或搜索微信号：xiaochengxu1038）：
