2017年1月9日0点，万众瞩目的微信第一批小程序正式上线，小程序出来已经有一段时间了，对于前端开发者来说，学小程序开发并不是件很难得事情，多数开发者都是不知道从哪里开始着手学习，本篇文章就带你来了解微信小程序和HTML的区别在哪。
HTML调用的是HTML定义的API，而小程序则是调用微信开发团队另行开发的一套API，实际上本质相同，用法相似，只是运行环境不同，传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境是微信内置的浏览器，并非完整的浏览器，小程序的开发过程中会用到HTML相关的技术(并非全部)。
小程序目录结构分析
在我们新建一个新的小程序项目，默认的目录结构如下
| – page (可以用于存放小程序的所有页面文件) | – log (新建的log页面) | – index (新建的index页面) --index.wxml (结构文件，index.wxml相当于index.html，只是后缀名不一样) --index.wxss (样式文件，index.wxss相当于index.css，只是后缀名不一样) --index.js (index页面的js文件) --index.json (index页面的配置文件，配置当前页面的顶部导航文本内容，颜色等等)| – utils (工具类文件夹，项目中同一个js在多个页面用到了可以把它抽离出来，方便复用，所以是工具类) | – util.js| – app.js (app.js文件，用来定义小程序的全局数据和函数，控制、监听小程序的全生命周期。)| – app.json (app.json是配置文件，可以配置小程序顶部导航名称，配置页面路径，相当于vue-router，新建一个小程序页面需要在这里配置，配置网络超时，配置debug模式 )| – app.wxss (全局样式文件，所有页面用到的公用样式可以放在app.wxss里边)| – project.config.json (这是一个项目配置文件，比如项目的名字，appid等等)| – sitemap.json (sitemap.json 文件用来配置小程序及其页面是否允许被微信索引)小程序一个页面分为4个文件
wxml：相当于html文件，只是后缀名不同。
wxss：相当于css文件，只是后缀名不同。
js：当前页面的js文件。
json：当前页面的配置文件，配置当前页面的顶部导航文本内容，颜色等等。
wxml和html所用的标签不同
wxml模板：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF
从这张图我们可以很清楚的看出，小程序使用的是微信自己封装的标签，用法和传统的HTML5很相似，只是语义不同，，文本标签都统一改成了，这两者标签区别在于是块级元素，是行内元素。
wxss和css的样式用法相同，没有特殊用法
wxss样式官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXSS-%E6%A0%B7%E5%BC%8F
.js文件
js逻辑交互官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JS-%E9%80%BB%E8%BE%91%E4%BA%A4%E4%BA%92
在这里可以见到的有onLoad(监听小程序初始化)，onReady(监听页面渲染完成)，onshow(监听小程序显示),onhide(监听小程序隐藏)，onUnload(监听页面卸载)等。data里面还可以定义一些变量。用法和vue及其相似。
.json文件
可以配置小程序顶部导航名称，文字、背景颜色，json文件更多用法请查看官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE
