02. swiper、image、request

---

写在前面

• 本文写了很多官网的API的相关知识点，可略过直接到官网查看

---

记第一个小程序DEMO

• 名称：仿网易云音乐小程序
• 接口：网易云音乐NodeJS版 API
• 内容：主要实现轮播图、歌单推荐、排行榜、歌单显示、歌曲播放、歌词显示这几部分功能，其它暂未作考虑

---

• 本文主要内容：实现首页轮播图

---

因为涉及到轮播图的实现，所以我们先来看看swiper标签

---

01. Swiper轮播图标签

详见swiper

（1）关于指示点

• indicator-dots：是否显示面板指示点

• indicator-color：指示点颜色

• indicator-active-color：当前选中的指示点颜色

（2）关于切换

• current：当前所在滑块的 index

• autoplay：是否自动切换

  注意，如果要设置true或者false

  请务必将其放在插值表达式中

  <swiper autoplay="{{false}}"></swiper>
  

  否则，你设置的只是一段字符串，它将永远是true，始终会开启自动滚动

• interval：自动切换时间间隔

• duration：滑动动画过渡时长

• circular：是否采用衔接滑动，即循环轮播

• vertical：滑动方向是否为纵向

  设置true | false请使用插值表达式

• easing-function：指定 swiper 切换缓动动画类型

  可选值：

  • default：默认缓动动画
  • linear：线性动画
  • easeInCubic：缓入动画
  • easeOutCubic：缓出动画
  • easeInOUtCubic：缓入缓出动画

（3）关于滑块

• previous-margin：滑块的前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值

• next-margin：滑块的后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

• snap-to-edge：当滑块的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素

• display-multiple-items：同时显示的滑块数量

（4）关于事件

• bindchange：current 改变时会触发 change 事件，event.detail = {current, source}

• bindtransition：swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}

• bindanimationfinish：动画结束时会触发 animationfinish 事件，event.detail 同上

---

轮播容器有了，需要以图片形式展示，因此我们再来看看image图片标签

---

02. image图片标签

详见image

（1）基本属性

• src：图片地址
• lazy-load：图片懒加载
• webp：是否可解析webP格式
• show-menu-by-longpressv：是否开启长按识别小程序码菜单

（2）关于样式

• class：图片样式类，只能通过类来设置样式

  .img {
      width: 100rpx;
      height: 100prx;
  }
  

（3）关于模式

• mode：裁剪模式、缩放模式
  • 缩放模式
    • scaleToFill： 使图片宽高撑满image元素的宽高，（注意：image组件默认宽高为 320 X 240 px）
    • aspectFit：使较长边能显示出来，会缩放较短边，可以完整显示图片
    • aspectFill：使较短边显示出来，较长边会被截取
    • widthFix：宽度固定，高度自适应，宽高比不变
    • heightFix：高度固定，宽度自适应，宽高比不变
  • 裁剪模式
    • top：只显示顶部区域
    • bottom：只显示底部区域
    • center：只显示中间区域
    • left：只显示左边区域
    • right：只显示右边区域
    • top left：只显示左上边区域
    • top right：只显示右上边区域
    • bottom left：只显示左下边区域
    • bottom right：只显示右下边区域

（4）关于事件

• binderror：错误发生时触发事件
• bindload：载入完毕时触发事件

---

现在我们开始尝试布局

---

04. 轮播图区域实现

<!-- 轮播图区域 -->
<view class="bannerContainer">
    <swiper
            class="banner"
            indicator-dots="{{ true }}"
            indicator-color="rgba(255,255,255,.8)"
            indicator-active-color="rgba(222,0,0,.8)"
            autoplay="{{ true }}"
            current="0"
            interval="2000"
            duration="500"
            circular="true"
            vertical="{{ false }}"
            >
        <swiper-item>
            <image src="static/image/001.png" mode="scaleToFill" lazy-load="false"></image>
        </swiper-item>
        <swiper-item>
            <image src="static/image/002.png" mode="scaleToFill" lazy-load="false"></image>
        </swiper-item>
        <swiper-item>
            <image src="static/image/003.png" mode="scaleToFill" lazy-load="false"></image>
        </swiper-item>
    </swiper>
</view>

• 实现效果如下

---

那么，接下来就要开始请求数据，所以我们来看看小程序的请求API——wx.request()

---

05. request网络请求

详见request

（1）基本属性

• url：请求地址

• data：请求参数

• header：请求头

• method：请求方法，包括GET | POST | PUT | DELETE、OPTIONS | HEAD | TRACE | CONNECT

• dataType：返回的数据格式，设置为JSON，会进行JSON.parse，设置为其它则不会

• responseType：响应的数据类型，包括text | arraybuffer

• timeout：超时时间

• success：接口调用成功的回调函数

• fail：接口调用失败的回调函数

• complete：接口调用结束的回调函数（调用成功、失败都会执行）

（2）其它注意

• 小程序域名只支持https
  • 开发过程中，可以临时设置不校验合法域名
• 每个接口最多配置20个域名
• 并发限制上限10个

---

现在我们尝试封装request函数，简化请求流程

---

06. 封装request

// 可以在这里定义host，也可以在外部定义，然后从外部引入
const host = 'http://localhost:3000'

export default (url, data = {}, method = 'GET') => {
    return new Promise((resolve, reject) => {
        wx.request({
            url: host + url,
            data,
            method,
            // 在发送请求时，在请求头携带 cookie
            // 先判断是否有cookie
            header: {},
            success: res => {
                console.log('请求成功:', res)
                resolve(res.data) // resolve修改 promise的状态为成功状态 resolved
            },
            fail: err => {
                console.log('请求失败:', err)
                reject(err) // reject修改 promise的状态为失败状态 rejected
            },
        })
    })
}

---

接下来尝试从服务器请求数据并显示在页面

---

07. 请求数据

• 在index.js中定义一个方法，并在页面加载时调用这个方法，基本步骤同Vue类似

  注意，与Vue不同的是，小程序中的data的数据改变需要使用this.setData({...})

  其调用data中的数据时，需要使用this.data.属性

import request from '../../utils/request'

Page({
    data: {
        bannerData: [], // 轮播图数据
    },
    onLoad(){
		this.getBanners()
    },
    getBanners() {
        request('/banner', { type: 2 }).then(res => {
            if (res.code === 200) {
                this.setData({
                    bannerData: res.banners,
                })
            }
        })
    },
}) 

---

然后我们wx指令，将获取的数据循环渲染到页面

---

08. 渲染数据

请根据实际返回数据进行渲染

• 回顾一下wx:for指令

  详见列表渲染

  • 使用wx:for来进行循环，可以作用于数组、对象

    • 使用 wx:for-index 来指定索引下标的变量名，如没有指定，则默认index为索引项

    • 使用 wx:for-item 来指定元素项的变量名，如没有指定，则默认item为元素项

    • 使用ws:key来标识唯一，用以提高渲染性能，同Vue中的key

<!-- 轮播图区域 -->
<view class="bannerContainer">
    <swiper
            class="banner"
            indicator-dots="{{ true }}"
            indicator-color="rgba(255,255,255,.8)"
            indicator-active-color="rgba(222,0,0,.8)"
            autoplay="{{ true }}"
            current="0"
            interval="2000"
            duration="500"
            circular="true"
            vertical="{{ false }}"
            >
        <swiper-item wx:for="{{ bannerData }}" wx:key="bannerId">
            <image src="{{ item.pic }}" mode="scaleToFill" lazy-load="false"></image>
        </swiper-item>
    </swiper>
</view>