小程序高级电商前端第1周走进Web全栈工程师＜三＞----首页Banner、分类六宫格

继续接着上一次小程序高级电商前端第1周走进Web全栈工程师<二>的首页逻辑往下演示，上一次对于首页的主题已经处理完了：

接下来则来处理Banner：

接下来则来实现一下它。 

获取Banner数据：

这里先来mock一下数据，整个JSON的数据如下：

{
    "id": 1,
    "name": "b-1",
    "description": "首页顶部主banner",
    "img": null,
    "title": null,
    "items": [
        {
            "id": 12,
            "img": "http://i2.sleeve.7yue.pro/m1.png",
            "keyword": "t-2",
            "type": 3,
            "name": null,
            "banner_id": 1
        },
        {
            "id": 13,
            "img": "http://i1.sleeve.7yue.pro/assets/702f2ce9-5729-4aa4-aeb3-921513327747.png",
            "keyword": "23",
            "type": 1,
            "name": null,
            "banner_id": 1
        },
        {
            "id": 14,
            "img": "http://i1.sleeve.7yue.pro/assets/b8e510a1-8340-43c2-a4b0-0e56a40256f9.png",
            "keyword": "24",
            "type": 1,
            "name": null,
            "banner_id": 1
        }
    ]
}

注意：目前的数据暂时是死的，先为了实现页面效果，在后面都会变成可以配置的，还是上Create a Free Mock API with TestApi.io来新建一个mock的接口：

其中接口的命名还是不用业务名，采用一个序号：

具体原因在上一次已经说明了，就不多说了。接下来则新建一个业务的js：

import {Http} from "../utils/http";

class Banner {
    static async getHomeLocationB() {
        return await Http.request({
            url:'banner/name/b-1'
        })
    }
}

由于项目中不止这一个Banner数据，还有其它的，所以咱们将b-1这种类型的banner抽到一个变量里面，如下：

接下来很重要的一步千万别忘了，将其导出：

接下来在home.js中来调用一下，由于首页会有很多接口请求，所以咱们将所有请求抽到一个方法当中不至于在回调中方法过长：

注意这里有一个细节：

好，此时则可以来调用咱们的Banner请求了：

然后修改一下主题的xml，由于data的名称改变了嘛：

编译运行看一下，发现报错了。。

找到对应的代码瞅一下：

修改一下：

再来编译就好了， 此时看一下请求Banner数据是否正常?

Banner轮播图实现与插槽的基本概念：

有了数据之后，接下来则需要将其显示出来，在小程序中轮播的控件是啥呢？在小程序的官网上有介绍：

所以咱们来使用一下这个组件：

其中来看一下代码的细节：

看返回的数据结果就晓得了：

另外在循环中获得当前对象这里直接用它就可以，固定写法：

而图片则取的是这个字段：

这块比较简单，就不过多的说明了，下面编译运行看一下：

嗯，效果初步有了，只是样式还得继续调整，先来调整一下图片的样式：

此时运行看一下：

但是！！！这里会发现一个问题，很明显banner设置的高度要高于主题，但是从肉眼来看貌似两个长得差不多高呀，这是为啥呢？其实这是跟swiper的组件特性有关，除了对于item进行高度设置之外，还是对swiper本身也设置一下高度，如下：

再来运行：

嗯，变高了，不过这里的class名称需要改一下：

接下来则加下分页的小点点，增加个属性既可，很简单：

看下效果：

好，这里涉及到一个代码的优化点，就是其实这块可以简写的：

另外目前指示点的颜色为黑色，不太好看，想改一下，其实也很简单，如下：

接下来得让它自动轮播，这个也是加个属性既可:

另外，现在滚动到最后一页时不支持循环播放，所以还得设置一个属性：

另外关于swiper组件还有一个插槽(slot)的概念，啥叫插槽？其实很简单，这块就是：

npm的semver语法规则：

接下来则来进一步完善首页的其它功能，接着则就是分类九宫格的处理了：

关于这九宫格怎么来实现呢？这里会使用到Lin UI的开源组件库https://github.com/TaleLin/lin-ui来实现，那小程序怎么来用它呢？官方其实给了安装方法：

这个npm命令要支持则需要安装nodejs【关于这块未来会专题来学习它，这里不过多说它】，直接上Node.js官网下载安装既可，安装步骤就里就略过了，这里不是来学习nodejs滴，而是来使用三方小程序组件，所以重点来看怎么用，安装了之后则可以到终端验证一下node是否安装成功：

然后再来验证一下npm是否安装成功：

然后接下来则可以利用npm来安装Lin UI这个小程序组件了，怎么安装呢？先进入到小程序的目录中，然后执行npm的初始化：

此时回到小程序的目录就会多出一个配置文件来了：

此时它的内容如下：

{
  "name": "sleeve",
  "version": "0.1.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "cexo",
  "license": "ISC"
}

对于之前在npm初始化时没有填写的信息还可以到这个配置文件中来修改，比如咱们来填一下描述：

好，重点是如何来安装LIn UI这个组件到我们工程中来呢？其实跟gradle中的添加依赖差不多，因为可以加这么一个属性：

具体这样添加：

这里关于安装组件时指定的版本号其实是有知识点可以探究的，为啥它前面要加一个波浪号呢？

这里其实涉及到npm的semver规则，看一下semver是啥？

npm语义上的版本控制，反正就是用来进行版本管理的呗，这里简单挑重点学习一下，先来了解一下三位版本号的意义：

另外，对于在版本号之前加个“~”有啥意义呢？它其实用来决定修订版本号的，也就是加了“~”如果版本库发了个新的版本为0.6.1，最终我们安装时自动就会安装0.6.1了，而如果我们不加“~”则就不会随库版本的变而变，注意它只是保证修订版本号是最新的。那如果叫npm保证第二位跟库保证同步更新，比如发布了一个0.7.0，那想让npm自动将次版号用最新的，那如何搞呢？其实应该这样写：

这样就会保证次要版本号始终用最新的，关于它的规则还有很多，等用到了到时再进行学习，不能偏离的学习的轨道，学习小程序的开发！！！记得将版本还是还原成"~"，只要保证修订版本号是最新的既可。

Lin UI安装：

接下来则来安装一下Lin UI，此时需要执行一下这个命令：

其中"npm i"是"npm install"的缩写，安装成功之后此时回到小程序的目录则会多出一个这样的：

它里面则是所有npm安装的组件，由于我们目前只安装了lin-ui，所以只有一个，瞅一眼：

那具体安装的是哪个版本呢？可以打开lin-ui里面的package.json瞅一下：

这也就是符合前面所说明的npm版本的管理，由于我们是用的"~"来引用的版本，最终在安装时会自动给修订版本安装最新的。

接下来还得进行下面这个步骤我们才能使用这个组件，什么步骤呢？回到小程序的IDE，如下：

此时经过这个步骤之后，则会在小程序的目录又多出一个新的文件夹来了：

其实就是一个编译的过程，最终我们程序要使用则是这个目录里面的，对于之前npm安装的时生成的那个目录其实就已经没有用了：

这个目录可删也可以不删，因为小程序在打包的时候是会忽略它的，也就是这个目录存在此最终也不会影响小程序的包体大小，所以这里就不管了。如果之后组件又发布了新版本，我们想基于最新的组件版的话则将这俩目录删除掉：

然后再执行"npm i"重新安装一遍，最后再到小程序IDE中重新构建一下既可使用最新版本啦，至此Lin-ui这个组件的安装就已经好了，接下来则可以愉快的使用它里面的组件啦~~

关注个人公众号，获得实时推送