继续接着上一次小程序高级电商前端第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
}
]
}注意：目前的数据暂时是死的，先为了实现页面效果，在后面都会变成可以配置的，还是上https://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【关于这块未来会专题来学习它，这里不过多说它】，直接上https://nodejs.org/en/官网下载安装既可，安装步骤就里就略过了，这里不是来学习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这个组件的安装就已经好了，接下来则可以愉快的使用它里面的组件啦~~
关注个人公众号，获得实时推送
