前言
下面由我为大家分享一下这段时间关于小程序的学习成果，如果有什么说的不对，说的不好，说的不完整的还请大家及时补充。
关于小程序的简介 我在这里就不多说了，大家每个人都应该对他有一些了解，作为一个开发人员，今天我们主要说说小程序的开发。如何快速的学习它我认为首先我们应该对比一下，他和我们传统H5页面的有什么不同。
开发工具的使用
项目目录结构
小程序有四类文件，分别是.wxml,.wxss,.js,.json,其中wxml,wxss和看上去似乎有点陌生但其实无非是html,css的改版，基本没有发生大的变化。而js和json是之前我们在其他地方就见过的东西，所有wxml的功能就是写页面相关的dom结构，wxss写页面相关的样式，js写页面的相关的逻辑，json是配置文件。最外层的app.json,app.js,app.wxss,用于小程序的全局控制，分别用于全局配置，书写全局逻辑，全局样式表。所有的页面文件都写在可pages目录下，每个页面相关的文件名称必须相同,因为小程序的开发样式表和js是不需要引入的，他们默认是通过文件名匹配的。
小程序与前端开发的不同
- WXML
我个人认为通常意义上html的标签只有两类，一类是块级元素，一类是行内元素，它们的代表分别是div和span，为了达到更好的语义化和更多功能的实现，萌生出了如img、a、input、button、p、i、h1-h6、nav、section、artical、aside 等众多的标签，其实这些标签又可以分为两类，那就是可被替代的标签和不可被替代的标签，比如：p、h1-h6标签我们完全可以写一个div来替换这些标签，虽然这样写不是很好但从理论上来讲是可以实现的。但是我们似乎做不到用一种很容易的方式去代替img或input 标签。所以不难猜测为了完成同样的工作wxml的核心也会包含这些无法被替代的标签，删除部分可以被div和span替换的元素，事实上似乎小程序就是这么做的 。
// 那些变化了的标签
div ---> view
span ---> text
img ---> image
a ---> navigater
// 那些没啥变化的标签
button、input、label、textarea、form、audio、video、canvas
- WXSS
暂时没有发现不同
.play,.pause,.time {
flex: 1;
height: 100%;
}
.aa:nth-of-type(2):before{
content: '~';
display: inline-block;
background-color: red;
}
.aa view:not(.bb) {
background-color: yellow;
}
input[type="text"]{
background-color: red;
}
view[class^="icon-"]{
background-color: green;
}
3.JS
对于我们通常所讲的js而言，其实上是由ECMAScript、 DOM、BOM三部分构成的，而在这里小程序只包含了ECMAScript的内容。下面我们真正的认识一下小程序里的js的结构；
app.js
配置详情
视图与渲染
wxml
view text
wxss
rpx
- 组件的基本使用
- 数据绑定
- 渲染标签
- 模板使用
与h5页面的区别
认识各种组件
事件
touchstart,touchmove,touchend,touchcancel,tap,longpress
bind,catch
生命周期
