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

目录

首页

一.搜索框

 二.轮播图

 三.导航

 四.楼层


首页

效果

黑马程序员-微信小程序-原生框架——购物平台-首页_第1张图片

一.搜索框

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

(1)在components中创建一个SearchInput组件

黑马程序员-微信小程序-原生框架——购物平台-首页_第2张图片

(2)在需要的页面.json中声明

黑马程序员-微信小程序-原生框架——购物平台-首页_第3张图片

(3)搜索框组件样式

黑马程序员-微信小程序-原生框架——购物平台-首页_第4张图片

vscode里面写less

黑马程序员-微信小程序-原生框架——购物平台-首页_第5张图片

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

黑马程序员-微信小程序-原生框架——购物平台-首页_第6张图片

 效果:

黑马程序员-微信小程序-原生框架——购物平台-首页_第7张图片

 点击搜索跳转页面

黑马程序员-微信小程序-原生框架——购物平台-首页_第8张图片

 二.轮播图

轮播图接口文档

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

黑马程序员-微信小程序-原生框架——购物平台-首页_第9张图片

 (2)发送异步请求获取轮播图数据

黑马程序员-微信小程序-原生框架——购物平台-首页_第10张图片

 问题:

黑马程序员-微信小程序-原生框架——购物平台-首页_第11张图片

 解决办法:

黑马程序员-微信小程序-原生框架——购物平台-首页_第12张图片

 效果:

黑马程序员-微信小程序-原生框架——购物平台-首页_第13张图片

 将请求到的数据赋值给swiperList 

 黑马程序员-微信小程序-原生框架——购物平台-首页_第14张图片

 请求成功:

黑马程序员-微信小程序-原生框架——购物平台-首页_第15张图片
 

 没权限请求接口

解决方法1:最简单的

黑马程序员-微信小程序-原生框架——购物平台-首页_第16张图片

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

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

 微信公众平台

黑马程序员-微信小程序-原生框架——购物平台-首页_第17张图片

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

黑马程序员-微信小程序-原生框架——购物平台-首页_第18张图片

 (3)渲染轮播图

黑马程序员-微信小程序-原生框架——购物平台-首页_第19张图片

(4)更改图片和swiper的默认样式

黑马程序员-微信小程序-原生框架——购物平台-首页_第20张图片

 黑马程序员-微信小程序-原生框架——购物平台-首页_第21张图片

效果:

黑马程序员-微信小程序-原生框架——购物平台-首页_第22张图片

 优化异步请求

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

黑马程序员-微信小程序-原生框架——购物平台-首页_第23张图片

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

黑马程序员-微信小程序-原生框架——购物平台-首页_第24张图片

(3) 使用request函数

黑马程序员-微信小程序-原生框架——购物平台-首页_第25张图片

 效果:

黑马程序员-微信小程序-原生框架——购物平台-首页_第26张图片

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

黑马程序员-微信小程序-原生框架——购物平台-首页_第27张图片

(5)调用getSwiperList函数

黑马程序员-微信小程序-原生框架——购物平台-首页_第28张图片

 三.导航

(1)定义一个空数组catesList,用来存放分类导航数据

黑马程序员-微信小程序-原生框架——购物平台-首页_第29张图片

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

黑马程序员-微信小程序-原生框架——购物平台-首页_第30张图片

(3)调用函数

黑马程序员-微信小程序-原生框架——购物平台-首页_第31张图片

(4)渲染导航

黑马程序员-微信小程序-原生框架——购物平台-首页_第32张图片

 (5)美化导航

黑马程序员-微信小程序-原生框架——购物平台-首页_第33张图片

 效果:

黑马程序员-微信小程序-原生框架——购物平台-首页_第34张图片

 四.楼层

黑马程序员-微信小程序-原生框架——购物平台-首页_第35张图片

 (1)定义空数组floorList,用来存放楼层数据

黑马程序员-微信小程序-原生框架——购物平台-首页_第36张图片

 (2)发送请求获取楼层数据,并将获取的数据赋值给floorList数组

黑马程序员-微信小程序-原生框架——购物平台-首页_第37张图片

 (3)调用函数 

黑马程序员-微信小程序-原生框架——购物平台-首页_第38张图片

 (4)渲染楼层

黑马程序员-微信小程序-原生框架——购物平台-首页_第39张图片

 效果:

黑马程序员-微信小程序-原生框架——购物平台-首页_第40张图片

  

(5)添加样式

 在vscode中编写less

黑马程序员-微信小程序-原生框架——购物平台-首页_第41张图片

效果:

 黑马程序员-微信小程序-原生框架——购物平台-首页_第42张图片

你可能感兴趣的:(微信小程序,小程序)