【小程序实战学习（一）】购物小程序-首页

一、搭建目录结构

目录名	作用
styles	公共样式
components	组件
lib	第三方库
utils	自己的帮助库
request	自己的接口帮助

二、引入字体和图标

阿里巴巴字体图标网
添加至项目、下载到本地
样式文件（CSS修改为WXSS）
小程序导入

三、搭建tabbar结构
在app.json中添加

"tabBar": {"color": "#999","selectedColor": "#ff2d4a",//选中时的颜色"backgroundColor": "#fafafa","position": "bottom",//导航栏位置"borderStyle": "black",//边框颜色"list": [{"pagePath": "pages/index/index",//跳转页面"text": "首页","iconPath": "icons/home.png","selectedIconPath": "icons/home-o.png"},{"pagePath": "pages/category/index","text": "分类","iconPath": "icons/category.png","selectedIconPath": "icons/category-o.png"},{"pagePath": "pages/cart/index","text": "购物车","iconPath": "icons/cart.png","selectedIconPath": "icons/cart-o.png"},{"pagePath": "pages/user/index","text": "我的","iconPath": "icons/my.png","selectedIconPath": "icons/my-o.png"}]},

自定义组件
在components中，新建文件夹后，右键新建components
tabs
四、首页（index）

搜索框（自定义组件）
轮播图
导航
楼层
先布局好，再写内部逻辑！
整一个页面为一个view
wx:for="{{数组名}}" 数组在Js中定义
wx:key=“url中其中一个返回参数” 作用：提高数组渲染性能
wx:key="*this"指item数组本身

index.wxml

<view class="pyg_index"><!-- 搜索框 开始 --><!--搜索框在组件中另外设置--><SearchInput></SearchInput><!-- 搜索框 结束 --><!-- 轮播图 开始 --><view class="index_swiper"><!-- 1.swiper标签存在默认的宽高100%*150px2.image标签存在默认的宽高320px*240px3.设计图片和轮播图先看原图宽高 750*340图片高度自适应 宽度-100%swiper标签的高度 变成和图片一样高4.图片标签mode属性 渲染模式widthFix 让图片标签宽高和图片标签内容宽高等比例发生变化--><swiperautoplay="{{true}}"indicator-dots="{{true}}"circular="{{true}}"><swiper-item wx:for="{{swiperList}}" wx:key="goods_id"><navigator url="/pages/goods_detail/index?goods_id={{item.goods_id}}"><image mode="widthFix" src="{{item.image_src}}"></image></navigator></swiper-item></swiper></view><!-- 轮播图 结束 --><!-- 导航 开始 --><view class="index_cate"><navigatorwx:for="{{catesList}}"wx:key="name"url="/pages/category/index"open-type="switchTab"><image mode="widthFix" src="{{item.image_src}}"></image></navigator></view><!-- 导航 结束 --><!-- 楼层 开始 --><view class="index_floor"><viewclass="floor_group"wx:for="{{floorList}}"wx:for-item="item1"wx:for-index="index1"wx:key="floor_title"><!-- 标题 --><view class="floor_title"><image src="{{item1.floor_title.image_src}}" mode="widthFix"></image></view><!-- 内容 --><view class="floor_list"><navigatorwx:for="{{item1.product_list}}"wx:for-item="item2"wx:for-index="index2"wx:key="name"url="{{item2.navigator_url}}"><image src="{{item2.image_src}}" mode="{{index2===0?'widthFix':'scaleToFill'}}"></image></navigator></view></view></view><!-- 楼层 结束 --></view>
index.less```html
.index_swiper {swiper {width: 750rpx;height: 340rpx;image {width: 100%;}}
}.index_cate {display: flex;navigator {padding: 20rpx;flex: 1;image {width: 100%;}}
}.index_floor {.floor_group {.floor_title {image {width: 100%;}}.floor_list {// 清除浮动overflow: hidden;navigator {padding: 10rpx 0;float: left;width: 33.33%;// 后4个超链接&:nth-last-child(-n+4) {// 原图宽高232*386,求第一张图片的高度// 232/386=33.33vw/height// height: 33.33vw*386/232;height: 33.33vw*386/232/2;border-left: 10rpx solid #fff;}// 2 3两个超链接&:nth-child(2),&:nth-child(3) {border-bottom: 10rpx solid #fff;}image {width: 100%;height: 100%;}}}}
}

index.js

// 引入 用来发送请求 的方法 一定要把路径补全
import {request
} from "../../request/index.js";
//Page Object
Page({data: {// 轮播图数组swiperList: [],// 导航数组catesList: [],// 楼层数据floorList: []},//页面开始加载 就会触发onLoad: function (options) {// // 发送异步请求 获取轮播图数据// // 优化手段可以通过es6 promise来解决问题// var reqTask = wx.request({//   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",//   success: (result) => {//     this.setData({//       swiperList: result.data.message,//     })//   }// });request({url: "/home/swiperdata"}).then(result => {this.setData({swiperList: result,})});this.getCateList();this.getCateList();this.getFloorList();},// 获取轮播图数据getSwiperList() {request({url: "/home/swiperdata"}).then(result => {this.setData({swiperList: result,})});},// 获取分类导航数据getCateList() {request({url: "/home/catitems"}).then(result => {this.setData({catesList: result,})});},getFloorList() {request({url: "/home/floordata"}).then(result => {this.setData({floorList: result,})});},
})

index.less

.index_swiper {swiper {width: 750rpx;height: 340rpx;//轮播图中，宽度自适应，但是高度需要改为和图片一致image {width: 100%;}}
}.index_cate {display: flex;navigator {padding: 20rpx;flex: 1;image {width: 100%;}}
}.index_floor {.floor_group {.floor_title {image {width: 100%;}}.floor_list {// 清除浮动overflow: hidden;navigator {padding: 10rpx 0;float: left;width: 33.33%;// 后4个超链接&:nth-last-child(-n+4) {// 原图宽高232*386,求第一张图片的高度// 232/386=33.33vw/height// height: 33.33vw*386/232;height: 33.33vw*386/232/2;border-left: 10rpx solid #fff;}// 2 3两个超链接&:nth-child(2),&:nth-child(3) {border-bottom: 10rpx solid #fff;}image {width: 100%;height: 100%;}}}}
}

五、技术

request API
在index.js中引入了import{request}from"…/…/request/index.js";
作用：url接口使用时，可以直接写不同的地方，前缀相同的可以省略。

// 同时发送一部代码次数
let ajaxTimes = 0;export const request = (params) => {ajaxTimes++;// 显示加载中wx.showLoading({title: "加载中",mask: true,});// 定义公共的urlconst baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1";return new Promise((resolve, reject) => {wx.request({...params,url: baseUrl + params.url,success: (result) => {resolve(result.data.message);},fail: (err) => {reject(err);},complete: () => {ajaxTimes--;if (ajaxTimes === 0) {//关闭图标wx.hideLoading();}}});})
}

es6的promise
作用：发送异步请求，获取轮播图、分类导航的数据
js中的
轮播图的swiper
自定义组件搜索框

【小程序实战学习（一）】购物小程序-首页相关推荐

微信小程序开发学习1（小程序的入门知识）
微信小程序开发学习1(小程序的入门知识) 1.制定学习目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面的几个组成部分能够知道小程序中常见的组件如何使用能够知 ...
小柏实战学习Liunx(图文教程二十一)
前言:一定要知道每一个命令是啥意思,并且要学会看报错信息,学会使用搜索引擎. 前情回顾:小柏实战学习Liunx(图文教程二十)_Shaun-sheng的博客-CSDN博客本节课主题:Linux安装A ...
微信小程序之目前为止史上最全的微信小程序项目实例，微信小程序实战学习
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
小程序入门学习16--上传小程序至github
1 配置hosts,使电脑可以访问github 修改hosts(进入hosts方法) 2 注册进入github,点右上角sign up,填写注册信息 3 创建仓库点击New,新建仓库复制HTTP ...
小程序入门学习21--前端小程序开发及数据渲染
完结撒花再发一遍学习视频地址 1 项目运行图 2 项目github地址 3 一个class内放多个样式,不断累加 <view class='news-title title-words'> ...
【微信小程序 | 实战开发】常用小程序框架介绍
个人名片:
python购物程序_Python学习：购物程序
一.脚本要求启动程序后,让用户输入工资,然后打印商品列表: 允许用户根据商品的编号购买商品: 用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒: 结算购物车,打印已购买商品和余额: 可随时退出 ...
小程序swiper怎么让内容撑开高度_[视频]微信小程序实战优购商城，涵盖你所学的技能点...
很多友友都在找视频教程学习,IT技术教程分享网[http://www.mano100.cn]已经为你收集了各种各样的视频教程,不用再到处找视频教程学习了.无论是免费的,还是收费的,都在这里了.只要你注 ...
java注销对话框_【java小程序实战】小程序注销功能实现
小程序实战中,如何实现程序的注销功能呢?后端代码只要删除用户的redi缓存即可.小程序端在成功返回消息后,进行登陆页面的跳转. 文章目录小程序的mine.wxml代码 mine.wxss代码注销事 ...

【小程序实战学习（一）】购物小程序-首页

【小程序实战学习（一）】购物小程序-首页相关推荐

最新文章

热门文章