微信小程序前端知识点(1)

 

1../是当前  ../是上级==>在微信小程序文档结构。例：var util = require('../utils/util.js')

2.rpx和px的区别：200rpx =100px  rpx的实际像素比px的实际像素小一半 = 2/1    100px=200rpx  

3.设置透明色(wxss)：opacity: 0;

4.设置层叠：z-index:10;

5.根据指定的时间跳转页面 setTimeout(function(){
       
                                                  wx.redirectTo({
       
                                                          url: '../index2zhu/index2zhu',
       
                                                      }) 
     
                                                                            },5000  //设置的跳转时间数 大约为5秒
                                                                      )

6.flex布局（flex布局对排版重要）：

flex布局特点

   一  任意方向的伸缩 向左右上下

   二  在样式层可以调换和重排顺序

   三  主轴和侧轴方便配置

   四  子元素的空间拉伸和填充 

   五  沿着容器对齐 一行内显示和块状显示
          伸缩容器:设有display:flex或者display:block的元素就是一个flex container==>也就是伸缩容器,
          里面的子元素称为flex item===》伸缩项目  ，flex container也就是伸缩容器中都是使用flex排版
          display:block 指定为快内容器模式 一次沾满整行 成行显示  微信小小程序中放入视图容器中都是以display:block默认的
          display:flex   指定为行内容器模式 在一行内显示所有子元素 同时 可以使用 flex-warp属性指定其是否换行 nowrap 不换            行 warp 换行  warp-reverse 换行在第一行下面

二   主轴和侧轴 将其显示为块级元素 或者行级元素
          容器默认有两个轴:主轴main axis和侧轴 cross axis
          主轴开始位置为主轴起点main start  结束位置为主轴终点 main end  长度为主轴长度 main size
          同理 侧轴开始位置为侧轴起点 cross start 侧轴终点 sross end 侧轴长度 crross  size

          主轴的位置不一定是从左到右 侧轴 位置也不定是从上到下  主轴的方向控制使用flex-direction属性 有四个属性值 row 从            左到右为主轴 row-reverse从右到左为主轴    效果为一这样衡起  一行里面包含多个元素 和display:flex效果相同
          colum从上到下为主轴  colum-reverse从下到上为主轴 效果为1这样竖起和display:block效果相同
          如果如果水平方向为主轴，那个垂直方向就是侧轴，反之亦然。

四    对齐方式  为成会计元素或者行级元素的定位以及位置子元素有两种对齐方式：

     justify-conent 定义子元素在主轴上面的对齐方式
     align-items 定义子元素在侧轴上对齐的方式
     justify-content有5个可选的对齐方式:

    flex-start 主轴起点对齐(默认值)
    flex-end 主轴结束点对齐
    center 在主轴中居中对齐
    space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
    space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。
    justify-content的对齐方式和主轴的方向有关
   
    align-items表示侧轴上的对齐方式:

    stretch 填充整个容器(默认值)
    flex-start 侧轴的起点对齐
    flex-end 侧轴的终点对齐
    center 在侧轴中居中对齐
    baseline 以子元素的第一行文字对齐

align-tiems设置的对齐方式，和侧轴的方向有关

 

======》flex布局显然过多但是知识含量丰富(会保持持续更新)