0x1、🐔你太美贝贝耶（前端基础语法速成）
上节就说过，原生小程序的玩法：
wxml里写页面，wxss里写样式，js里写逻辑，json里改配置
可能有些小白真的完全没碰过前端，作为一个《真丶从零开始学习微信小程序开发》 的教程：
就顺带提提吧，也就几分钟~
1、前端三剑客(HTML，CSS，JS)
① HTML(Hyper Text Markup Language)
超文本标记语言，没有编译过程，只是一个标记语言，而非编程语言，通过各种标签的堆砌成网页。
一个简单的HTML页面代码示例如下：
<!DOCTYPE html> <html> <head> <title>一个标题</title> </head> <body> <p>内容</p> </body> </html>
接着是「两个名词」：
「标签/元素」：尖括号包围的关键词，比如上面的<p>，语法如下：
- 标签一般 成对出现，如上面的<p>内容</p>，也有例外，如换行<br>
前面的标签称为「开始/开放」标签，后面的标签称为「结束/闭合」标签。
- 标签支持 嵌套，但 不能交叉，比如<div><p></p></div>正确，
但<div><p></div></p>却是错误的。
「属性」：给标签添加辅助信息，属性以 键值对 的形式出现，比如为a标签添加跳转链接：
<a href="http://coder-pig.github.io">疯狂暗示~</a>
语法如下：
- 可以为一个标签设置多个属性，使用 空格 隔开；
- 几个通用的属性：class(设置类名)，id(设置元素唯一ID)，style(设置元素样式)
想了解更多标签以及属性可移步至：www.w3school.com.cn/tags/index.…
② CSS（Cascading Style Sheets）
层叠样式表，样式就是标签的表现形式，比如：为文本标签设置蓝色字体的样式。
<font color="blue">文字</font>
而 层叠 指的是：利用CSS选择器对HTML元素堆叠很多样式！其实利用标签的 style属性
就能添加样式，但还引入CSS的原因：解决内容和表现分离的问题。修改CSS文档即可
改变HTML页面中所有元素的布局和外观，而不需要自己到HTML页面里一个个找元素进行修改。
引入CSS样式的四种方式：
<!-- ① 内联样式：直接通过style属性为某个元素指定CSS样式 --> <p style="color: #000000;">xxx</p> <!-- ② 内嵌样式：把CSS样式写到HTML文档中，使用<style>标签包含 --> <style type="text/css"> h1 {background-color:#000000;} </style> <!-- ③ <link>标签引入外部样式表，<head>标签中添加 --> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <!-- ④ @import 指令引入外部样式表 --> <style> @import url("style.css"); </style> <!-- 一个HTML可以同时使用这四种方式，优先级顺序：内联 > 内嵌 > import > link -->
CSS选择器
要为标签设置样式，总得先找到结点吧？CSS选择器就是用来 定位标签的一套规则。
三类选择器：
- 标签选择器：文档中 所有的特定标签 使用同一个CSS样式。
- id选择器：元素以 id属性 来设置id选择器，选择器以"#"来定义。
- 类选择器：元素以 class属性 来设置类选择器，可以在多个元素中使用，以"."号显示。
新建一个test.html，试试CSS选择器的使用：
<!DOCTYPE html> <html> <head> <title>CSS示例</title> <style type="text/css"> <!-- 标签选择器 > p {background-color:red;} <!-- id选择器 > #id-choose {background-color:green;} <!-- class选择器 > .class-choose {background-color:blue;} </style> </head> <body> <p>文字1</p> <p id="id-choose">文字2</p> <p class="class-choose">文字3</p> </body> </html>
浏览器打开看下效果：
除此之外，还有些组合玩法，比如派生选择器，关于CSS选择器和定位，后面会细讲，莫慌。
更多CSS样式以及CSS选择器的详细用法可移步至：
www.w3school.com.cn/css/index.a…
③ JS（JavaScript）
号称最流行的脚本语言(我大py表示不服)，除了前端写交互和动效，通过Node.js还能写服务端：
著名的Atwood定律：Any application that can be written in JavaScript, will eventually be written in JavaScript.
依旧是简单的过过JavaScript的基础语法~
「1、变量」：通过 var关键字 来声明，字母开头，区分大小写。
「2、注释」：分为单行注释(//注释内容) 和 多行注释(/*注释内容*/)。
「3、数据类型」分两类：
基本数据类型：
- undefined(未定义)：变量没初始化的默认值。
- null(空)：空值，可理解为占位符，可用于初始化变量或函数返回值。
- string(字符串)：所有字符为16位，Unicode编码，使用单/双引号表示。
- boolean(布尔)：用于逻辑判断，只有 true 和 false 两个值。
- number(数值)：内部表示为64位的浮点数，js中1和1.0的值是相同的。
引用数据类型：
- 数组：var num = [1,2,3]; 通过下标访问，下标从0开始，支持不同类型的元素！
- 对象：大括号包裹，对象属性通过 名称:对 的形式来定义，多个属性用逗号隔开。
var person = { id: 1, name:"抠腚男孩" };，可以通过.或者[]访问属性，比如：
person.id 和 person["id"]都是可以的。
- 函数：通过function关键字来定义，使用大括号包裹代码块。
「4、运算符」
- 算数运算符(7种)：`+`(加)`-`(减)`*`(乘)`/`(除)`%`(求余)`++`(自增)`--`(自减)
- 赋值运算符(6种)：算数运算符后加`=`(等号)：`=`、`+=`、`-=`、`*=`、`/=`、`%=`
- 逻辑运算符(3种)：`&&`(和)`||`(或)`!`(非)，返回一个布尔值。
- 比较运算符(8种)：`==`(等于)、`===`(绝对等于，值与类型都相等)、`!=`(不等于)、
`!==`(值或类型不等)、`>`(大于)、`<`(小于)、`>=`(大于等于)、`<=`(小于等于)。
- 条件运算符：简化的if语句，比如：var s = age > 18? (输出成年):(输出未成年)。
- 按位运算符(7种)：`&`(按位与)`|`(按位或)`^`(按位异或)`~`(按位取反)`<<`(左移)
`>>`(有符号右移)`>>>`(无符号右移)
- 类型运算符(2种)：typeof(返回变量类型)，instanceof(判断对象是否为某个类型)。
「5、条件结构」：JS中的条件结构分为if和switch结构，代码示例如下：
var socre = 70; <!-- 普通if-else --> if(score > 60){ console.log("合格"); }else { console.log("不合格"); }; <!-- if-else if --> if(score < 60){ console.log("不及格"); }else if(score <= 70){ console.log("及格"); }else if(score <= 80) { console.log("中"); }else if(score <= 90) { console.log("良"); }else { console.log("优"); }; <!-- switch --> switch(true){ case score < 60: console.log("不及格"); break; case score < 70: console.log("及格"); break; case score < 80: console.log("中"); break; case score < 90: console.log("良"); break; default: console.log("优"); break; };
「6、循环结构」
- for循环：多次循环执行某个代码块。
- for-in：遍历对象属性。
- while：当指定条件为true时，循环执行某个代码块，do-while是先执行一次再判断。
除此之外还有两个循环中断语句：break(跳出循环) 和 continue(跳过当前循环进入下次循环)。
关于JS的基本语法就讲到这里吧，内容太多一时半会也讲不完，想系统学的可以移步至：
www.w3school.com.cn/b.asp，反正我写了两周多的小程序也没怎么翻文档，
可能是我小程序还没玩溜吧，后面觉得有需要再另开一节撸JavaScript吧。
2、微信小程序中的WXML与WXSS
HTML/CSS和微信小程序的WXML/WXSS可谓是「极其相似」，官方有篇对比的文章：
《小程序代码构成》，这里简单提炼下要点。
① WXML VS HTML
- 不一样的标签：木有了
div,p,span，多了view,button,text等常用控件。
- 不能操作DOM树：不能像网页一样通过DOM API操纵DOM的属性和行为，比如
无法通过getElementById()来访问元素。小程序采用MVVM模式，数据双向绑定，
通过一种模板语法来描述状态和界面结构关系。
- 事件：组件的内部行为会通过事件的形式让开发者感知。
② CSS VS WXSS
- 新增尺寸单位：rpx，根据屏幕宽度进行自适应。
- 提供全局样式与局部样式：app.wxss全局生效，page名.wxss单页面生效。
- 仅支持部分CSS选择器。
PS：其实差别也不是很大，会HTML和CSS过渡到WXML和WXSS很容易，有问题多查
文档即可。
0x2 🐔你太美贝贝oh（微信小程序组件速览）
1、自带组件一览
略略看下微信小程序都提供了哪些组件，想用的时候知道去查哪个就好，本系列不会一个个讲解控件，官方文档对于各个组件都有详细讲解，还有每个组件Bug & Tip 可以看看，文档链接：
developers.weixin.qq.com/miniprogram…
