微信小程序学习成果分享

前言

下面由我为大家分享一下这段时间关于小程序的学习成果，如果有什么说的不对，说的不好，说的不完整的还请大家及时补充。
关于小程序的简介 我在这里就不多说了，大家每个人都应该对他有一些了解，作为一个开发人员，今天我们主要说说小程序的开发。如何快速的学习它我认为首先我们应该对比一下，他和我们传统H5页面的有什么不同。

开发工具的使用

微信小程序API

项目目录结构

小程序有四类文件，分别是.wxml,.wxss,.js,.json,其中wxml,wxss和看上去似乎有点陌生但其实无非是html,css的改版，基本没有发生大的变化。而js和json是之前我们在其他地方就见过的东西，所有wxml的功能就是写页面相关的dom结构，wxss写页面相关的样式，js写页面的相关的逻辑，json是配置文件。最外层的app.json,app.js,app.wxss,用于小程序的全局控制，分别用于全局配置，书写全局逻辑，全局样式表。所有的页面文件都写在可pages目录下，每个页面相关的文件名称必须相同,因为小程序的开发样式表和js是不需要引入的，他们默认是通过文件名匹配的。

小程序与前端开发的不同

1. 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

2. 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
  生命周期