微信小程序121~130-EW帮帮网

1.小程序功能开发-首页功能

通过并发请求获取首页的数据。

// 导入封装的网络请求模块实例
import http from '../utils/http'
// 定义接口api函数
export const reqIndexData = () => {
  // 通过方式请求并获取首页数据，提升页面渲染速度
  // 通过Promise.all进行并发请求
  return Promise.all([
    http.get('/index/findBanner'),
    http.get('/index/findCategory1'),
    http.get('/index/advertisement'),
    http.get('/index/findListGoods'),
    http.get('/index/findRecommendGoods')
  ])
}

import { reqIndexData } from '../../api/index'
// 调用获取数据
Page({
  data: {
    bannerList: [],
    categoryList: [],
    activeList: [],
    hotList: [],
    guessList: []
  },
  // 获取首页数据
  async getIndexData() {
    // 调用接口API函数，获取数据
    const res = await reqIndexData()
    // 对数据赋值的时候要注意索引
    this.setData({
      bannerList: res[0].data,
      categoryList: res[1].data,
      activeList: res[2].data,
      guessList: res[3].data,
      hotList: res[4].data
    })
  },
  // 监听页面的加载
  onLoad() {
    // 页面加载后，调用获取首页数据的方法
    this.getIndexData()
  }
})

2. 分析轮播图区域并渲染

 <navigator class="navigator" url="/pages/goods/detail/detail?goodsId={{ item.id }}">
                    <image class="img" src="{{ item.imageUrl }}"></image>
</navigator>

3.实现轮播图和指示点的联动

切换轮播图时面板指示点高亮，想实现一一对应的关系，要借助索引

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 轮播图数据
    bannerList: {
      type: Array,
      value: ['../../../assets/banner/banner-1.jpg', '../../../assets/banner/banner-2.jpg', '../../../assets/banner/banner-3.jpg']
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    activeIndex: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 获取被激活的轮播图索引
    getSwiperIndex(event) {
      //   console.log(event)
      const { current } = event.detail
      this.setData({
        activeIndex: current
      })
    }
  }
})

4.分析商品导航区域并渲染

 <!-- 导航链接 -->
        <navigator class="navigator-nav" url="/pages/goods/list/list?category1Id={{ item.id }}">
            <image class="nav-img" src="../../../assets/images/cate-1.png" />
            <text class="nav-text">{{ item.name }}</text>
        </navigator>


<view class="adver">
            <view class="adver-left">
                <navigator url="/pages/goods/list/list?category2Id={{ activeList[0].category2Id }}">
                    <image src="{{ activeList[0].imageUrl }}" mode="widthFix" />
                </navigator>
            </view>
            <view class="adver-right">
                <view>
                    <navigator url="/pages/goods/list/list?category2Id={{ activeList[1].category2Id }}">
                        <image src="activeList[1].imageUrl" mode="widthFix" />
                    </navigator>
                </view>
                <view>
                    <navigator url="/pages/goods/list/list?category2Id={{ activeList[2].category2Id }}">
                        <image src="activeList[2].imageUrl" mode="widthFix" />
                    </navigator>
                </view>
            </view>
        </view>

5.首页骨架屏组件

骨架屏是页面的空白版本，开发者会使用css绘制一些灰色的区块，将页面内容大致勾勒出轮廓，通常会在页面完全渲染之前，将骨架屏代码进行展示，数据加载完之后，在替换成真实的内容。
目的：优化用户体验。
使用方法：
在 C:\Users\Desktop\模板文件\miniprogram\pages\index\index.wxml 引入模板

<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />

在 C:\Users\Desktop\模板文件\miniprogram\pages\index\index.wxss 中引入样式

@import "./index.skeleton.wxss";

6.获取商品分类数据

// 导入封装的接口api函数
import { reqCategoryData } from '../../api/category'

Page({
  // 初始化数据
  data: {
    categoryList: [] // 商品分类列表数据
  },
  // 商品分类的数据
  async getCategoryData() {
    const res = await reqCategoryData()
    if (res.code === 200) {
      this.setData({
        categoryList: res.data
      })
    }
  },
  // 监听页面加载
  onLoad() {
    // 调取获取商品分类的数据的方法
    this.getCategoryData()
  }
})

import http from '../utils/http'

export const reqCategoryData = () => {
  return http.get('/index/findCategoryTree')
}

7.渲染一级分类并实现切换功能

一级分类

<view class="left-view-item {{ activeIndex === index ? 'active' : '' }}" wx:for="{{ categoryList }}" wx:key="id" bind:tap="updateActive" data-index="{{ index }}"> {{ item.name }} </view>

切换功能

  // 实现一级分类的切换效果
  updateActive(event) {
    // console.log(event.currentTarget.dataset)
    const { index } = event.currentTarget.dataset
    this.setData({
      activeIndex: index
    })
  },

8.渲染二级分类数据

在一级分类下存在children字段，里面的数据是一级分类对应的二级分类的数据，在访问以及分类时，只要将一级分类对应的二级分类拿出来进行渲染即可。

<view>
                <view wx:for="{{ categoryList[activeIndex].children }}" wx:key="index" class="right-view-item">
                    <navigator class="navigator" url="/pages/goods/list/list?category2Id={{ item.id }}">
                        <image class="" src="../../assets/images/cate-1.png"></image>
                        <text class="goods_item_name">{{ item.name }}</text>
                    </navigator>
                </view>
            </view>

9.mobx-miniprogram

方便页面、组件之间的传递。
是一个轻量级状态管理库。
定义管理的状态是响应式的，一旦状态改变，所有关联组件都会自动更新相对应的数据，全局共享，自动更新视图组件，提升开发效率。

需要注意: 在使用 mobx-miniprogram 需要安装两个包: mobx-miniprogram 和 mobx-miniprogram-bindings

mobx-miniprogram 的作用: 创建 Store 对象, 用于存储应用的数据
mobx-miniprogram-bindings 的作用: 将状态和组件、页面进行绑定关联, 从而在组件和页面中操作数据

npm install mobx-miniprogram mobx-miniprogram-bindings

10.创建Store对象

如果需要创建 Store 对象需要使用 mobx-miniprogram ，因此需要先熟悉 mobx-miniprogram 三个核心概念：

observable ：用于创建一个被监测的对象，对象的属性就是应用的状态（state），这些状态会被转换成响应式数据。
action ：用于修改状态（state）的方法，需要使用 action 函数显式的声明创建。
computed ：根据已有状态（state）生成的新值。计算属性是一个方法，在方法前面必须加上 get 修饰符

import { observable, action } from 'mobx-miniprogram'

// store对象
export const numStore = observable({
  numA: 1,
  numB: 2,

  // action用来修改状态
  update: action(function () {
    this.numA += 1
    this.numB += 1
  }),
  // 计算属性基于已有状态产生新状态
  get sum() {
    // 必须有返回值
    return this.numA + this.numB
  }
})

微信小程序121~130