黑马程序员-微信小程序-原生框架——购物平台-首页

目录

首页

一.搜索框

 二.轮播图

 三.导航

 四.楼层

---

首页

效果

一.搜索框

微信小程序创建自定义组件

（1）在components中创建一个SearchInput组件

（2）在需要的页面.json中声明

（3)搜索框组件样式

vscode里面写less

 (4)在首页中使用SearchInput组件

 效果：

 点击搜索跳转页面

 二.轮播图

轮播图接口文档

（1）在首页.js的data中定义轮播图数组

 （2）发送异步请求获取轮播图数据

 问题：

 解决办法：

 效果：

 将请求到的数据赋值给swiperList 

 

 请求成功：

 

 没权限请求接口

解决方法1：最简单的

解决方法2：后期项目需要上线，要求请求是合法的，域名必须是HTTPS的

还需要添加到小程序后台的白名单里面

 微信公众平台

扫二维码然后把域名添加进去就可以啦

 （3）渲染轮播图

（4）更改图片和swiper的默认样式

 

效果：

 优化异步请求

(1).将原生的请求改为promise的方式

(2).首页.js中引入用来发送请求的方法

（3） 使用request函数

 效果：

（4)将获取轮播图数据封装为一个函数

（5）调用getSwiperList函数

 三.导航

（1）定义一个空数组catesList，用来存放分类导航数据

（2）发送分类导航数据请求并将请求到的数据赋值给catesList数组

（3）调用函数

（4）渲染导航

 （5）美化导航

 效果：

 四.楼层

 （1）定义空数组floorList，用来存放楼层数据

 （2）发送请求获取楼层数据，并将获取的数据赋值给floorList数组

 （3）调用函数 

 （4）渲染楼层

 效果：

  

（5）添加样式

 在vscode中编写less

效果：