微信小程序深入学习二

一、小程序必须掌握的基础

微信开发工具中的代码格式化快捷键:shift+alt+f

1、wxml

标签	表示方法
block	用来存放模块化内容
wx:for	表示循环遍历
wx:key	表示传递键
wx:if	表示判断
bindtap	绑定方法属性
swiper	轮播图标签
swiper-item	轮播图项
mode=‘widthFix’	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
data-index=’{{index}}’	表示想逻辑方法传递索引
indicator-dots="{{true}}"	轮播图指示点
autoplay="{{autoplay}}"	轮播图自动轮播
interval="{{interval}}"	轮播总时间
duration="{{duration}}"	轮播间隔

2、wxss

样式标签	样式意思
display: flex;	盒子伸缩布局
flex-wrap: wrap;	自动换行
flex: 1;	/* 左边分配好，右边直接占满 */
flex-direction: column;	/* 灵活的项目将垂直显示，正如一个列一样。 */
z-index: 999;	属性设置元素的堆叠顺序，仅能在定位元素上有效（例如 position:absolute;）
align-items: center;	居中对齐
position: absolute;	绝对定位
justify-content: center;	/* 项目位于容器的中心。 */
box-sizing: border-box;	/* 盒子模型=内减模式=内容+padding+border */

3、js

逻辑层关键词	表示意思
data	页面的初始数据
onLoad: function (options) {}	生命周期函数–监听页面加载
onReady: function (){}	生命周期函数–监听页面初次渲染完成
onShow: function (){}	生命周期函数–监听页面显示
onHide: function (){}	生命周期函数–监听页面隐藏
onUnload: function (){}	生命周期函数–监听页面卸载
onPullDownRefresh: function (){}	页面相关事件处理函数–监听用户下拉动作
onReachBottom: function (){}	页面上拉触底事件的处理函数
onShareAppMessage: function (){}	用户点击右上角分享
{“pageOrientation”: “auto”}	启用屏幕旋转支持

二、轮播图的架构

1、wxml:

<view class='lunbo'>
  <swiper indicator-dots="{{true}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{swiperList}}" wx:key="{{index}}">
      <swiper-item>
        <image src="{{item.imgUrl}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>

2、wxss:

/* 轮播样式 */
.lunbo{
  width: 750rpx;
  height: 340rpx;
}
.lunbo image{
  width: 100%;
  height: 100%;
}

3、js:

data:{
   "swiperList":[
      {
        "id": 0,
        "imgUrl": "//p0.ssl.qhimg.com/t0193916ba2ced82e6c.png"
      },
      {
        "id": 1,
        "imgUrl": "//p1.ssl.qhimg.com/t0112454b2ad89460e8.png"
      },
      {
        "id": 2,
        "imgUrl": "//p1.ssl.qhmsg.com/t01dd057241efdad2ad.png"
      }
    ],
    "indicator-dots":true,指示点
    "autoplay":true,自动轮播
    "interval":3000,间隔时间
    "duration":1000,轮播时长
}