微信小程序--优购页面制作

优购–项目

这个项目学习源自：黑马程序员微信小程序开发前端教程_零基础玩转微信小程序-哔哩哔哩
想要更深入的了解此项目，就去黑马程序员学习该项目。该项目个人觉得对于初学者来说是有很大的帮助的。做好该项目可以举一反三，可以为后期自己做其他项目做铺垫。如果想要源码进行学习的同学可以去我的资源库下载哦！！！

一级目录

一、项目工作准备

1. 文件的创建

2. 底部导航的设置

    "pages": [
        "pages/index/index",
        "pages/category/index",
        "pages/goods_list/index",
        "pages/goods_detail/index",
        "pages/cart/index",
        "pages/collect/index",
        "pages/order/index",
        "pages/search/index",
        "pages/user/index",
        "pages/feedback/index",
        "pages/login/index",
        "pages/auth/index",
        "pages/pay/index"
    ],
    “window”：{...},
    "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"
            }
        ]
    },

3. 全局样式的设置

@import "./styles/iconfont.wxss";

/* 在微信小程序中 不支持 通配符 '*' */

page,view,text,swiper,swiper-item,image,navigator {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
page {
    /* 定义主题颜色 */
    --themeColor: #eb4450;
    font-size: 28rpx;
}
image {
    width: 100%;
}

4. 准备图片图标

这一步就是创建一个images文件放自己觉得好看的图标即可

二、 首页

1. 界面效果图：

2. 分析界面结构：

（1）搜索框

a.由于搜索框在首页和分类页都需要，所以我们就给一个组件（component）来制作搜索框
b.搜索框组件导入页面的方法：

第一步：是在导入该页面的json文件下写入组件：
“usingComponents”: {
“SearchInput”:"…/…/components/SearchInput/SearchInput"
},
第二步：在wxml中导入：
写下组件标签SearchInput，完成搜索框导入

（2）轮播图

a.轮播图制作：有标签（swiper、swiper-item、image）、有标签属性（autoplay 、indicator-dots 、circular）、有图即可完成制作；
b.图片的数组和对象循环：

第一种情况：导入本地图片：
原理：把图片存在数组里边，后在wxml直接进行循环，就可得到
data：{swiperlist：[{id：索引，images：图片}，{…},…]}

第二种情况：导入服务器图片：
原理：首先创建一个空数组，然后发送异步请求后去图片数据，把它存在该数组里边。
data：{swiperlist：[{id：索引，images：图片}，{…},…]}，
onLoad: function(options) {
wx.request({
ulr:“网址”
//能成功反问改网址后
success: (result) => {
this.setData({
//存到空数组里
swiperList: result.data.message
})
}
});

c.样式的设置难点：（怎么让图片很好且自适应的呈现出来？）
i. 先看一下原图的宽高 750 * 340
ii. 让图片的高度自适应 宽度 等于100%
iii. 让swiper标签的高度 变成和图片的高一样即可

（3）中部导航

a.获取图片数据均用该方法
b.样式的设置难点：（怎么让其向左均匀的排列呢？）
i.均设置为伸缩盒子：display: flex;
ii.使图片各占一份：flex:1;
iii.让图片宽度自适应：width：100%；

（4）楼层

a.获取图片数据均用该方法
b.样式的设置难点:（怎么让图片那样排布？）
i.首先分析，宽各占1/3,所以宽度/3=就是图片的宽度
ii.原图的宽高 =容器的宽高；这样子就可以算出容器的高

3. 首页重点分析：

a.获取服务端数据上面一种是比较麻烦的，因为你每一次都要去写那个完整的url，所以需要创建一个接口request.js定义公共的url：

    // 定义公共的url
    const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1";
    // 返回一个promise对象
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            header: header,
            // 拼接接口路径url
            url: baseUrl + params.url,
            // result：就等于请求成功之后的值
            success: (result) => {
                resolve(result.data.message);
            },
             fail: (err) => {
                reject(err);
            },
            //在页面的js中导入接口
            import { request } from "../../request/index.js";
            //获取轮播图数据
                getSwiperList() {
        request({ url: "/home/swiperdata" })
            .then(result => {
                this.setData({
                    swiperList: result
                })
            })
    },

b.接口中太添加显示加载效果（ wx.showLoading）：

//设置发送异步请求次数变量
let ajaxTimes = 0;
//数据缓冲中，这里是用了一个ajaxTimes++;的方法计算有几个需要缓冲
ajaxTimes++;
// 显示加载中 效果，就是点击编译的时候的加载效果
    wx.showLoading({
        title: "加载中",
        mask: true
    });
    //缓冲完成过后，就关闭这个加载效果
    complete: () => {
                // 设置的目的是使ajaxTimes等于0的时候触发wx.hideLoading
                ajaxTimes--;
                if (ajaxTimes === 0) {
                    //  关闭加载中正在等待的图标
                    wx.hideLoading();
                }
            }

三、分类

1. 界面效果图：

2. 分析界面结构：

（1）搜索框

上个分析已解答

（2）左侧菜单

a.左侧菜单制作：有标签（scroll-view:视图区域、view）、有属性（scroll-y：纵向滑动）
b.获取图片数据
c.样式的设置难点:（怎么使其均匀上下排列？）
i.左右侧菜单占比：左flex:2;右flex:5;
ii.字体高度、水平垂直、大小：

height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
iii.选中效果：
color: var(–themeColor);
border-left: 5rpx solid currentColor;

（3）右侧菜单（标题和商品）

i.图片占比：width: 33.33%;
ii.换行效果：flex-wrap: wrap;

3. 首页重难点分析：

（1）右侧选中激活效果：

a.原理：给样式来个三木算法，判断点击的索引是否等于当前的索引，等于则是激活状态，就会给样式；
i.获取左右侧数据
ii.获取被点击的标题身上的索引
iii.给data中的currentIndex(被点击的左侧的菜单)赋值就可以了
iiii.根据不同的索引来渲染右侧的商品内容