WXML的语法

<!--WXML语法-->

微信小程序编译器快捷键

Shift+Alt+F：微信小程序开发工具的代码格式化功能很强大，包含对空行、缩进等的处理。

Shift+Alt+Up，Shift+Alt+Down：直接对当前光标所在的行进行向上向下复制一行

注释行

ctrl+/:注释

页面结构和内容

<text class=" " id=" " style=" " hidden=" " bindtap=" " data-user-name="user" ></text>

<!-- 1.class属性；2.id属性；3.style属性；4.hidden来使属性隐藏与否；

5.bindtap：通过bindtap这样的方式来给这个组件元素特定的事件绑定一个事件处理函数；

6.通过data-这样形式的属性来进行设置，通过data-定义的自定义数据将会在事件触发的时候，封装在事件对象中，传递给对应的事件处理函数进行处理

data-user-name是用户自定义的数据-->

后边的讲解中，组件和元素这两个词等同。

<image src='相对路径；绝对路径；或者是http的方式'></image>

相对路径：相对路径，顾名思义就是自己相对与目标位置。

src = "../......

绝对路径：先说在本地计算机上，文件的绝对路径当然是指：文件在硬盘上真正存在的路径。

src = "/......"

但是需要http请求，去从web上的一个服务器去加载

<view></view> 多个元素放置在容器元素中，以便对多个元素组成的整体做总的调整。

页面布局

  height:100vh; //100vh说明占屏幕的所有高

  display: flex; //flex弹性布局

  flex-direction: column; //改变主轴方向

  justify-content: space-around;

  align-items:  center;

  弹性盒子布局，快速高效实现布局。

元素大小适配不同的宽度屏幕

  微信小程序中统一规定这个设备上的屏幕宽度为750rpx;

用iPhone6做视觉设计稿的好处是 px:rpx搞好是1:2的比例

Navigator组件

1.Navigator组件是一种页面跳转的组件，常用于带返回的页面跳转。

2.navigator元素默认为一个块级元素，需要通过添加style ='display:inline;'属性将它变成一个inline元素。

3.在微小中需要封装在<view></view>标签内，在<text></text>中无法直接显示在微小的页面中。

4.navigator两个常见的取值navigate和redirect的用法，通过添加navigator元素（缺省值是navigate）的open-type属性并将它置为redirect来实现页面的重定向。

5.给navigator样式添加一个点击态的样式，用到hover-class属性，赋值一个样式类并在页面对应的样式表中定义它。

点击态的样式颜色的注意点。通过点击态样式的级联算法，后定义的样式规则后定义的规则会覆盖之前的规则。需要注意默认的规则。

tabBar配置底部标签栏，本质是对若干一级页面的入口链接。