微信小程序首页设置

1.配置并使用网络请求

支持的请求方法

复制代码

// 发起 GET 请求，data 是可选的参数对象
$http.get(url. data?)

// 发起 POST 请求，data 是可选的参数对象
$http.post(url. data?)

// 发起 PUT 请求，data 是可选的参数对象
$http.put(url. data?)

// 发起 DELETE 请求，data 是可选的参数对象
$http.deldte(url. data?)

配置小程序分包

点击跳转

1.改造前的UI结构

XML 复制代码

<swiper-item v-for="(item. i) in swiperList":key="i">
  <view class="swiper-item">
    <!-- 动态绑定图片的 src 属性 -->
    <image :src="item.image_src"></image>
  </view>
</swiper-item>

2.改造后的UI结构

XML 复制代码

<swiper-item v-for="(item. i) in swiperList":key="i">
  <navigator class="swiper-item" :url=" '/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
    <!-- 动态绑定图片的 src 属性 -->
    <image :src="item.image_src"></image>
  </navigator>
</swiper-item>

楼层图片跳转

1.楼层数据请求（如上分包），新建 goods_list页面

2.楼层数据请求成功后，通过双层forEach循环，处理 URL地址;

javascript 复制代码

async getFloorList(){
  const { data:res }=anait uni.Shttp.get('/apt/publie/v1/home/floordata')
  if (res.meta.status:!=288)return uni.Sshowksg()

//通过双层forEach循环，处理URL地址
res.message.forEach(floor =>{
    floor.product list.forEach(prod => {
      prod.url=/subpkg/goods_Dst/goods_11st7+prod.navigator_url.split('?')[1]
    })
  })
    this.floorList s res.message
}

3.把图片外层的性组件，改造为navigator组件，并动态场定ur1属性的值：

Delphi 复制代码

<view class="floor-img-box">
    <!--左侧大图片的盒子-->
    <navigator c1ass="left-g-bux":Ur1a1teg.product list[e],ur1">
       <image :src='1tem,product_11st[0].imane.mrc°：styles"width:1te,product list[0].image.width+'rpx'}"mode="w1dthfix"></image>
</navigator>
<!--右侧4个小图片的盒子-->
<view class="right-img-box">
       <navigator c1ass="r3ght-mg-1a" v-for("it2,12)in item.product.list":key="i2"v-if="i2 !== 0" :url="item2.url">
<image :src"ite2.image_sremode"widthFix":style(width:iten2.image_width.'rpx)">/image>
</navigator>
</view>
</view>

2.分类页面

创建cate分支

运行如下的命令，基于master分支在本地创建cate子分支，用来开发分类页面相关的功能：

复制代码

git checkout -b cate

渲染分类页面的基本结构

javascript 复制代码

<template>
  <view>
    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y :style="{height: wh+'px'}">
        <view class="left-scroll-view-item active">xxx</view>
        <view class="left-scroll-view-item ">xxx</view>
        <view class="left-scroll-view-item ">xxx</view>
        <view class="left-scroll-view-item ">xxx</view>
      </scroll-view>
      <!--右侧的滚动视图区域-->
      <scroll-view class="right-scroll-view" scroll-y :style="{height: wh+'px'}">
        <view class="left-scroll-view-item active">zzz</view>
        <view class="left-scroll-view-item ">zzz</view>
        <view class="left-scroll-view-item ">zzz</view>
        <view class="left-scroll-view-item ">zzz</view>
      </scroll-view>
    </view>
  </view>
</template>

获取分类数据

1.在data中定义分类数据节点：

javascript 复制代码

data() {
   return {
     //分类数据列表
     cateList: []
   }
}

2.调用获取分类列表数据的方法：

javascript 复制代码

onLoad() {
    //调用获取分类列表数据的方法
    this.getCateList()
}

3.定义获取分类列表数据的方法：

javascript 复制代码

methods: {
  async getCateList() {
    //发起请求
    const {data；res}=await uni.Shttp.get('/api/public/v1/categories')
    //判断是否获取失败
    if (res.meta.status !==200)return uni.$showMsg()
    //转存数据
    this.cateList=res.message
  }
}

渲染二级分类

1.修改activeChanged 方法，在一级分类选中项改变之后，为二级分类列表数据重新赋值：

javascript 复制代码

activeChanged(i) {
  this.active=i
  //为二级分类列表重新赋值
  this.cateLevel2=this.cateList[i].children
}

2.循环渲染右侧二级分类列表的UI结构

javascript 复制代码

<!--右侧的滚动视图区域-->
<scroll-view class="right-scroll-view"scroll-y :style="{height: wh+ 'px'}">
  <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2">
    <view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
  </view>
</scroll-view>

3.优化二级分类的标题样式：

css 复制代码

.cate-lv2-title {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
}

动态渲染三级分类

javascript 复制代码

<!--右侧的滚动视图区域-->
<scroll-view class="right-scroll-view"scroll-y :style="{height: wh+ 'px'}">
  <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2">
    <view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
    <view class="cate-lv3-list">
      <!--三级分类item项-->
      <view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3">
      <!-- 图片 -->
      <image :src="item3.cat_icon"></image>
      <!-- 文本 -->
      <text>{{item3.cat_name}}</text>
      </view>
    </view>
  </view>
</scroll-view>

切换一级分类时，动态设置 scrollTop 的值:

javascript 复制代码

activeChanged(i) {
  this.active=i
  this.cateLevel2 = this.cateList[i].children

  this.scrollTop = this.scrollTop === 0 ? 1 : 0

  //可以简化为如下的代码
  //this.scrolling = this.scrollTop ? 0 : 1
}

点击三级分类跳转到列表页面

1.为三级分类的 item 项绑定定点事件处理函数：

javascript 复制代码

<view class="cate-lv3-item" v-for="(item),i3) in item2.children" :key="i3"
@click="gotoGoodsList(item3)">
    <image :src="item3,cat_icon"></image>
    <text>{{item3.cat_name}}</text>
</view>

2.定义事件处理函数

javascript 复制代码

//点击三级分类项跳转到商品列表页面
gotoGoodsList(item3) {
  uni.navigateTo({
    url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id
   })
}

3.搜索

创建 search 分支

运行如下的命令，基于master分支在本地创建search子分支，用来开发搜索相关的功能:

XML 复制代码

git checkout -b seach

定义 my-search 组件的UI结构如下：

javascript 复制代码

<template>
  <view clsaa="my-search-container">
    <!-- 使用 view 组件模拟 input 输入框的样式 -->
    <view class="my-search-box">
      <uni-icons type="search"size="17"></uni-icons>
      <text class="placeholder">搜索</text>
    </view>
  </view>
</template>

通过自定义属性增强组件的通用性

1.通过 props 定义 bgcolor 和 radius 两个属性，并指定值类型和属性默认值：

javascript 复制代码

props: {
   //背景颜色
   bgcolor: {
     type: String,
     default: '#C00000'
   },
   //圆角尺寸
   radius: {
     type: Number,
       //单位是 px
       default: 18
     }
 }

2.通过属性绑定的形式，为 .my-search-container 盒子和 .my-search-box 盒子动态绑定 style 属性

javascript 复制代码

<view class="my-search-container" :style="{'background-color': bgcolor}">
  <view class="my-search-box" :style="{'border-radius': radius + 'px'}">
    <uni-icons type="seach" size="17"></uni-icons>
    <text class="placeholder">搜索</text>
  </view>
</view>

实现首页搜索组件的吸顶效果

1.在home首页定义UI结构：

javascript 复制代码

<!-- 使用自定义的搜索组件 -->
<view class="search-box">
    <my-search @click="gotoSearch"></my-search>
</view>

2.在home首页定义如下事件处理函数：

javascript 复制代码

gotoSearch() {
  uni.navigateTo({
    url: '/subpkg/search/search'
  })
}

3.实现吸顶效果：

javascript 复制代码

.search-box {
   //设置定位效果为吸顶
   position: sticky;
   top: 0;
   //提高层级，防止被轮播图覆盖
   z-index: 999;
}

渲染搜索页面的基本结构

1.定义如下的UI结构：

javascript 复制代码

<view class="search-box">
   <!-- 使用 uni-ui 提供的搜索组件 -->
   <uni-search-bar @input="input" :radius="100" cancelButton="none">
   </uni-search-bar>
</view>

2.修改 components -> uni-search-bar -> uni-search-bar.vue 组件，将默认的白色搜索背景改为红色：

css 复制代码

.uni-searchbar {
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 16rpx;
    background-color:#c00000;
}

3.定义如下的input事件处理函数：

javascript 复制代码

methods: {
  input(e) {
    // e.value是最新的搜索内容
    console.log(e.value)
  }
}

属性说明

实现搜索框自动获取焦点

javascript 复制代码

data() {
  return {
    show: turn,
    showSync: turn,
    searchVal: ""
  }
}

实现搜索框的防抖处理

1.在data中定义防抖的延时器timerld:

javascript 复制代码

data() {
  return {
    //延时器的 timerId
    timer: null,
    //搜索关键词
    kw: ''
  }
}

2.修改 input 事件处理函数如下：

javascript 复制代码

input(e) {
  //清除 timer 对应的延时器
  clearTimeout(this.timer)
  //重新启动一个延时器，并把 timerId 赋值this.timer
  this.timer=setTimeout(() => {
    //如果500毫秒内没有触发输入事件，则为搜索关键词赋值
    this.kw=e.value
    console.log(this.kw)
   },500)
}

根据关键词查询搜索建议列表

在data中定义如下的数据节点，用来存放搜索建议的列表数据：

javascript 复制代码

data() {
  return {
    //搜索结果列表
    searchResults: []
  }
}

在防抖的 setTimout 中，调用 getSearchList 方法获取建议列表：

javascript 复制代码

this.thimer = setTimeout(() => {
   this.kw = e.value
   // 根据关键词，查询搜索建议列表
this.getSearchList()
},500)

在 methods 中定义 getSearchList 方法：

javascript 复制代码

//根据搜索关键词，搜索商品建议列表
async getSearchList() {
    //判断关键词是否为空
    if(this.kw ==='') {
      this.searchResults =[]
      return
}

实现搜索建议和搜索历史的按需展示：

1.当搜索结果列表的长度不为零的时候（searchResults.length !== 0）, 需要展示搜索建议区域，隐藏搜索历史区域

2.当搜索结果列表的长度为零的时候（searchResults.length === 0）, 需要展示搜索建议区域，隐藏搜索历史区域

javascript 复制代码

<!-- 搜索建议列表 -->
<view class="sugg-list" v-if="searchResults.length !== 0">
  <!-- 省略其他代码 -->
</view>

<!-- 搜索历史 -->
<view class="history-box" v-else>
  <!-- 省略其他代码 -->
</view>

解决关键词前后顺序问题

1.data中 historyList 不做改变，依然使用push进行末尾追加

2.定义一个计算属性 historys ,将 historyList 数组 reverse 反转之后，就是此计算属性的值

3.页面中渲染搜索关键词的时候，不再使用data中的 historyList , 而是使用计算属性 historys

解决关键词重复的问题

javascript 复制代码

// 保存搜索关键词为历史记录
saveSearchHistory() {
  // this.historyList.push(this.kw)

  // 将 Array 数组转换为 Set 对象
  const set = new Set(this.historyList)
  // 调用 Set 对象的 delete 方法，移除对应的要素
  set.delete(this.kw)
  // 调用 Set 对象的 add 方法，向 Set 中添加元素
  set.add(this.kw)
  // 将 Set 对象转换为 Array 数组
  this.historyList=Array.from(set)
}