“跳一跳”小游戲中，玩家通過長按與放開來控制小人前進。
那么，界面里我們所看到的每個元素是如何呈現出來的呢？
小人和盒子隨著長按的時間長短，產生不同程度的彈性形變是如何實現的呢？
各種音效又是如何觸發的呢？
從開篇的問題，我們不難發現，“跳一跳”的實現原理大致可以分為界面元素、元素的外觀屬性和動作交互，在小程序框架里它們分別被稱為視圖層、樣式層和邏輯層，分別對應的開發語言是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）：
