网站设计建设公司教程广州网站手机建设公司

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}
})