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.detailthis.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.datasetthis.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

1. mobx-miniprogram 的作用: 創建 Store 對象, 用于存儲應用的數據
2. mobx-miniprogram-bindings 的作用: 將狀態和組件、頁面進行綁定關聯, 從而在組件和頁面中操作數據

npm install mobx-miniprogram mobx-miniprogram-bindings

10.創建Store對象

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

1. observable ：用于創建一個被監測的對象，對象的屬性就是應用的狀態（state），這些狀態會被轉換成響應式數據。
2. action ：用于修改狀態（state）的方法，需要使用 action 函數顯式的聲明創建。
3. computed ：根據已有狀態（state）生成的新值。計算屬性是一個方法，在方法前面必須加上 get 修飾符

import { observable, action } from 'mobx-miniprogram'// store對象
export const numStore = observable({numA: 1,numB: 2,// action用來修改狀態update: action(function () {this.numA += 1this.numB += 1}),// 計算屬性基于已有狀態產生新狀態get sum() {// 必須有返回值return this.numA + this.numB}
})