引言 大家好，我是练习时长两年半的个人练习生菜虚鲲，我喜欢唱，跳，rap，篮球，Music！
嗯哼！还是别那么沙雕了，严肃点，我可是在写技术教程啊！
(私信催更让我写沙雕文的是?吗？)
人靠衣装马靠鞍，狗配铃铛跑的欢，先来学下小程序的界面开发，先整点????
的，后面在去撸交互流程，优化性能等等这类东西。本节内容比较简单，学习流程
如下，读者根据自己的层次按需学习：

• ?学一学：几分钟速成前端三剑客(HTML，CSS和JavaScript)的基本语法。
• ?比一比：从HTML、CSS无痕过渡到微信小程序的WXML、WXSS。
• ?瞄一瞄：微信小程序都提供了哪些组件。
• ?搞一搞：控制组件隐藏显示两种方法：block wx:if VS hidden属性。
• ?爽一爽：重复代码抽模板template/组件component，哪里用到哪里导。
• ?皮一皮：反编译别人的小程序，学(chao)习(xi)下组件怎么堆。

看上去内容很多，其实都很简单，估计十分钟不用你就看完本文了~
?Music！
0x1、?你太美贝贝耶（前端基础语法速成） 上节就说过，原生小程序的玩法：

wxml里写页面，wxss里写样式，js里写逻辑，json里改配置

可能有些小白真的完全没碰过前端，作为一个《真丶从零开始学习微信小程序开发》 的教程：
就顺带提提吧，也就几分钟~
1、前端三剑客(HTML，CSS，JS)
① HTML(Hyper Text Markup Language)

超文本标记语言，没有编译过程，只是一个标记语言，而非编程语言，通过各种标签的堆砌成网页。

一个简单的HTML页面代码示例如下：







内容



复制代码

接着是「两个名词」：
「标签/元素」：尖括号包围的关键词，比如上面的，语法如下：

• 标签一般 成对出现，如上面的内容
  ，也有例外，如换行
  
  前面的标签称为「开始/开放」标签，后面的标签称为「结束/闭合」标签。
• 标签支持 嵌套，但 不能交叉，比如
  正确，
  但
  却是错误的。

「属性」：给标签添加辅助信息，属性以 键值对 的形式出现，比如为a标签添加跳转链接：

疯狂暗示~
复制代码

语法如下：

• 可以为一个标签设置多个属性，使用 空格 隔开；
• 几个通用的属性：class(设置类名)，id(设置元素唯一ID)，style(设置元素样式)

想了解更多标签以及属性可移步至：www.w3school.com.cn/tags/index.…
② CSS（Cascading Style Sheets）

层叠样式表，样式就是标签的表现形式，比如：为文本标签设置蓝色字体的样式。

文字
复制代码

而 层叠 指的是：利用CSS选择器对HTML元素堆叠很多样式！其实利用标签的 style属性
就能添加样式，但还引入CSS的原因：解决内容和表现分离的问题。修改CSS文档即可
改变HTML页面中所有元素的布局和外观，而不需要自己到HTML页面里一个个找元素进行修改。
引入CSS样式的四种方式：


xxx














复制代码

CSS选择器

要为标签设置样式，总得先找到结点吧？CSS选择器就是用来 定位标签的一套规则。

三类选择器：

• 标签选择器：文档中 所有的特定标签 使用同一个CSS样式。
• id选择器：元素以 id属性 来设置id选择器，选择器以"#"来定义。
• 类选择器：元素以 class属性 来设置类选择器，可以在多个元素中使用，以"."号显示。

新建一个test.html，试试CSS选择器的使用：