首页 > 编程学习 > 小程序 | 【黑马】本地生活 小程序

小程序 | 【黑马】本地生活 小程序

发布时间:2022/10/1 0:56:14

文章目录

  • 新建项目并梳理项目结构
  • 配置导航栏效果
  • 配置 tabBar 效果
  • 实现轮播图效果
    • 获取轮播图数据
    • 渲染轮播图页面效果
    • 对轮播图进行美化
  • 实现九宫格效果
    • 获取九宫格数据
    • 渲染九宫格布局
    • 美化九宫格布局
  • 实现图片布局
  • 上拉触底案例
    • 定义获取随机颜色的方法
    • 渲染 UI 结构并美化页面效果
    • 上拉触底时获取随机颜色
    • 添加 loading 提示效果
    • 对上拉触底进行节流处理
  • 开始前 - 常见Q&A

在这里插入图片描述

新建项目并梳理项目结构

  1. 创建一个文件夹用来存放该项目
  2. 打开【微信开发者工具】—>【新建项目】

    注意选择不使用云服务

  3. 我们有三个tab页面,所以前往 app.json 进行修改 pages
    在这里插入图片描述

配置导航栏效果

在这里插入图片描述
根据👇这个进行配置
在这里插入图片描述

// app.json
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "本地生活",
    "navigationBarTextStyle":"white"
  },

配置 tabBar 效果

在这里插入图片描述

  1. 将需要到的图片素材放进项目文件夹images中
  • 根据以下 来进行配置
    在这里插入图片描述
    在这里插入图片描述

tabBar 和 window 平齐

    "tabBar": {
        "list": [
            {
                "pagePath": "pages/home/home",
                "text": "联系我们",
                "iconPath": "/images/home.png",
                "selectedIconPath": "/images/home-active.png"
            },
            {
                "pagePath": "pages/message/message",
                "text": "消息",
                "iconPath": "/images/message.png",
                "selectedIconPath": "/images/message-active.png"
            },
            {
                "pagePath": "pages/contact/contact",
                "text": "消息",
                "iconPath": "/images/contact.png",
                "selectedIconPath": "/images/contact-active.png"
            }
        ]
    },

实现轮播图效果

获取轮播图数据

获取轮播图数据列表的接口
【GET】https://www.escook.cn/slides

  1. 获取轮播图的数据(通过wx.request()来获取)

    在这里插入图片描述

  2. 将获取到的轮播图数据存放到 home.js 里面的 data 中(通过this.setData来修改data中的数据)

// pages/home/home.js
Page({

    data: {
        // 存放轮播图数据的列表
        swiperList: [], // 一开始就是个数组形式
    },

	// 生命周期函数--监听页面加载
    onLoad(options) {
        // 页面一加载就开始调用 获取轮播图数据的方法
        this.getSwiperList();
    },
    
    // 获取轮播图数据的方法
    getSwiperList() {
        wx.request({
            url: 'https://www.escook.cn/slides',
            method: "GET",
            success: (res) => {
                // 修改 data 中的数据,将轮播图的数据进行修改
                this.setData({
                    swiperList: res.data,
                })
            }
        })
    },
}

渲染轮播图页面效果

每一个轮播图是对 swiperList 进行for循环拿到的,item 包括id和image,我们的轮播图里面就是 item.image

<!--pages/home/home.wxml-->
<!-- 轮播图区域 -->
<swiper indicator-dots circular interval="3000" autoplay>
    <swiper-item wx:for="{{swiperList}}" wx:key="id">
        <image src="{{item.image}}"></image>
    </swiper-item>
</swiper>

在这里插入图片描述
在这里插入图片描述

对轮播图进行美化

/* pages/home/home.wxss */
swiper{
    height: 350rpx;
}
swiper image{
    width: 100%;
    height: 100%;
}

实现九宫格效果

获取九宫格数据

获取九宫格数据列表的接口
【GET】https://www.escook.cn/categories
在这里插入图片描述

// pages/home/home.js
Page({

    data: {
        // 存放轮播图数据的列表
        swiperList: [], // 一开始就是个数组形式
        // 获取九宫格数据的列表
        gridList:[], 
    },

    onLoad(options) {
        // 页面一加载就开始调用 获取轮播图数据的方法
        this.getSwiperList();
        this.getGridList();
    },
...
    // 获取九宫格数据的方法
    getGridList(){
        wx.request({
          url: 'https://www.escook.cn/categories',
          method:'GET',
          success:(res)=>{
            // 对九宫格数据进行赋值
            this.setData({
                gridList:res.data
            })
          }
        })
    },

渲染九宫格布局

在这里插入图片描述

<!-- 九宫格区域 -->
<view class="grid-list">
    <view class="gird-item" wx:for="{{gridList}}" wx:key="id">
        <image src="{{item.icon}}"></image>
        <text>{{item.name}}</text>
    </view>
</view>

美化九宫格布局

主要是运用 flex 布局!!!!!!!!!!!

/* pages/home/home.wxss */
view{
    box-sizing: border-box;
}
...
/* 九宫格的样式 */
.grid-list{
    display: flex;
    flex-wrap: wrap;
    /* 给外面包裹的添加上左边框 */
    border-top: 1rpx solid #efefef;
    border-left: 1rpx solid #efefef;
}
.gird-item{
    width: 33.33%;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    /* 进行居中布局 */
    justify-content: center;
    align-items: center;
    /* 给每一个item项加上右下边框 */
    border-right: 1rpx solid #efefef;
    border-bottom: 1rpx solid #efefef;
}
.gird-item image{
    width: 60rpx;
    height: 60rpx;
}
.gird-item text{
    font-size: 24rpx;
    margin-top: 16rpx;
}

实现图片布局

在这里插入图片描述

mode="widthFix" 宽度不变,高度自适应

<!-- 图片区域 -->
<view class="img-box">
    <image src="/images/link-01.png" mode="widthFix"></image>
    <image src="/images/link-02.png" mode="widthFix"></image>
</view>
/* 图片区域布局 */
.img-box{
    display: flex;
    padding: 20rpx 10rpx;
    justify-content: space-around;
}
.img-box image{
    width: 47%;
}

上拉触底案例

在这里插入图片描述

  1. 定义获取随机颜色的方法
  2. 在页面加载时获取初始数据
  3. 渲染 UI 结构并美化页面效果
  4. 在上拉触底时调用获取随机颜色的方法
  5. 添加 loading 提示效果
  6. 对上拉触底进行节流处理

定义获取随机颜色的方法

  1. 发请求获取到随机颜色
    在这里插入图片描述
  2. 将随机颜色的数据存储到 data 中
    在这里插入图片描述

扩展运算符...可以合并数组!!!

  1. 在页面加载时获取初始数据
        onLoad(options) {
            this.getColors();
        },
    

渲染 UI 结构并美化页面效果

<view wx:for="{{colorList}}" wx:key="index" style="background-color: rgba({{item}});" class="color-item">
    {{item}}
</view>

background-color: rgba(0,0,0)

/* pages/contact/contact.wxss */
.color-item{
    border: 1rpx solid #efefef;
    line-height: 200rpx;
    text-align: center;
    margin: 15rpx;
    border-radius: 14rpx;
    text-shadow: 0 0 5rpx #fff;
    box-shadow: 1rpx 1rpx 6prx #6a6a6a;
}

上拉触底时获取随机颜色

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        this.getColors();
    },

添加 loading 提示效果

wx.showLoading({});显示loading提示框
wx.hideLoading()关闭提示框
在这里插入图片描述
在这里插入图片描述

对上拉触底进行节流处理

  1. data 中定义 isloading 节流阀
    • false 表示当前没有进行任何数据请求
    • true 表示当前正在进行数据请求
  2. getColors() 方法中修改 isloading 节流阀的值
    • 在刚调用 getColors 时将节流阀设置 true
    • 在网络请求的 complete 回调函数中,将节流阀重置为 false
  3. onReachBottom(上拉触底) 中判断节流阀的值,从而对数据请求进行节流控制
    • 如果节流阀的值为 true,则阻止当前请求
    • 如果节流阀的值为 false,则发起数据请求
    data: {
        // 存储颜色的数组
        colorList: [],
        isloading:false,
    },
    
    // 随机获取颜色
    getColors() {
        // true 表示当前正在进行数据请求
        this.setData({
            isloading:true
        }),
        // 需要展示 loading 效果
        wx.showLoading({
            title: '数据加载中...',
        })
        wx.request({
            url: 'https://www.escook.cn/api/color',
            method: 'GET',
            success: (res) => {
                this.setData({
                    colorList: [...this.data.colorList, ...res.data.data]
                })
            },
            // 数据请求完成后 (不能在成功后,因为可能失败)
            complete: () => {
                // 关闭提示框
                wx.hideLoading();
                this.setData({
                    isloading:false
                })
            }
        })
    },

    onReachBottom() {
        // true 表示当前正在进行数据请求 我们不发请求,return出去
        if(this.data.isloading){
            return;
        }
        this.getColors();
    },

开始前 - 常见Q&A

  • Q:如何关闭[自动热重载] 已开启代码文件保存后自动热重载(不支持 json)
    在这里插入图片描述
  • A:打开【详情】—>【本地设置】—>【关闭 “启动代码自动热加载”】
    在这里插入图片描述

  • Q:如何开启【不校验合法域xxx,https证书】

  • A:【详情】—>【本地设置】—>【不校验合法域xxx,https证书】

    在这里插入图片描述

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号