黑马程序员-微信小程序-原生框架——购物平台-首页
目录
首页
一.搜索框
二.轮播图
三.导航
四.楼层
首页
效果
一.搜索框
微信小程序创建自定义组件
（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
效果：
黑马程序员-微信小程序-原生框架——购物平台-首页相关推荐
- PHP:【微信小程序】初识微信小程序，微信小程序配置
PHP:[微信小程序]初识微信小程序,微信小程序配置 一.介绍 小程序提供了一个简单.高效的应用开发框架和丰富的组件及 API,帮助开发者在微信中开发具有原生 APP 体验的服务 小程序是一种全新的连 ...
- 【小程序】微信小程序云开发笔记详细教程（建议收藏）
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
- 谷歌小程序和微信小程序，你更看好哪个？
微信"小程序"无疑是16年年末最火爆的新技术,美国时间1月24日,谷歌也推出自己了"小程序"--Android Instant Apps,谷歌.微信都在做的小程 ...
- 个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
- 微信小程序开发 | 微信小程序入门
微信小程序入门 1.1 初识微信小程序 1.1.1 什么是微信小程序 1.1.2 微信小程序的账号 1.1.3 微信小程序的特点 1.1.4 微信小程序的发展前景 1.2 开发环境搭建 1.2.1 注 ...
- map和foreach的区别和应用场景_支付宝小程序和微信小程序，两者有何区别？
原标题:支付宝小程序和微信小程序,两者有何区别? 自2017年1月微信推出小程序之后,小程序的发展势头便愈来愈猛.作为腾讯老对头的阿里,也开始投入小程序的研发.在一年多的开放公测后,支付宝小程序终于于 ...
- 程序员实用小程序_我从阅读《实用程序员》中学到了什么
程序员实用小程序 In short: old but gold. 简而言之:古老而又黄金. Published in 1999, The Pragmatic Programmer is a book ...
- 怎么添加一个程序集_门店小程序，微信小程序怎么添加店铺
现今随着互联网发展,越来越多选择网上购物代替实体店购物,微信作为最多人使用的社交软件,他的商机也被许多企业商家发展,进入微信分销小程序购物是现在最流行的购物方式,驱使很多实体店也纷纷加盟进驻门店分销小 ...
- 【小程序】微信小程序开发技巧实用手册（自己做笔记用）
[Css]Css和Html常用设计实例参考笔记(自己开发项目用)_敦厚的曹操的博客-CSDN博客_html和css的项目实例一.左右居中1.div等块元素左右居中margin: 0 auto;marg ...
- 如何制作一个微信小程序【微信小程序是怎么做的】
为什么现在这么多人使用微信小程序呢?因为微信小程序除了便捷易开发,公司企业可以用来做小程序展示官网,商家也可以做小程序商城,甚至个人也可以拥有自己的小程序.那么如何制作一个微信小程序?微信小程序是怎么 ...
最新文章
- java.lang.NoSuchMethodError: org.springframework.web.context.support.XmlWebApplicationContext.getEnv
- Day 6：在 Java 虚拟机上使用 Grails 进行快速 Web 开发
- 极大似然估计的渐进正态性
- Easyui Datagrid的Rownumber行号显示问题
- python 阿里云短信接口_阿里云短信接口怎么使用
- 【渝粤题库】陕西师范大学600000 仪器分析 作业（专升本）
- python编辑快速上手_Python编程如何快速上手，答案在这里
- 软件工程造价师和软件造价评估师有什么区别？
- Word正式文件的正规格式
- 数据库 casewhen 的用法
- 不同产品类型、不同应用、产能、产量、销量、需求量及销售收入-外置固态硬盘
- UDS/OBD DTC(诊断故障码)格式解析
- 华硕台式计算机光盘怎么启动不了,华硕怎么设置光盘启动_华硕怎么设置开机启动光驱...
- 用计算机算标准曲线,标准曲线计算软件
- 【Word】公式“大括号”中的内容对齐
- python找出连续的最长的字母串
- 杰奇运行在php7,帝国CMS7.5使用PHP7.x环境登录后台报错的解决方法！
- 02 离线安装管理ceph图形化界面calamari
- 进程间通信（IPC (Inter-process communication)）
- “撒旦”勒索病毒再曝4.2变种 腾讯电脑管家文档守护者可一招解密