微信小程序实战项目(分类)-three

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

1.分类页面效果图

2.分类分解图

3.分类业务逻辑

1.加载分页页面数据

2.点击左侧菜单，右侧动态渲染数据

4.接口API

https://api-hmugo-web.itheima.net/api/public/v1/categories

5.关键技术

5.1.scroll--view 组件

scroll-view组件表示可滚动视图区域。属性包括水平和垂直滚动，分别为scroll-x表示允许横向滚动、scroll-y表示允许纵向滚动、scroll-top表示设置竖向滚动条位置、scroll-left表示设置横向滚动条位置，这些属性是很常见的。

设置scroll-view组件之前一定要给它组件的高度，可以是px，也可以是rpx，也可以是%，我一般常用就是rpx和%，因为根据手机屏幕大小不一样，所以需要给自适应的宽高度。如果没有设置高度，否则scroll-view组件是不会生效的。

一般需求就是多个item的地方会用到这个scroll-view组件。

主要属性有：

属性	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发scrolltoupper事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发scrolltolower事件
scroll-into-view	String		值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发scrolltoupper事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发scrolltolower事件

简单的代码例子：

5.1.1垂直滚动

<!--垂直滚动，一定要设置高度-->
<scroll-view scroll-y="true" style="height: 600rpx">
 <view style="background: black; width: 100%; height: 300rpx" ></view>
 <view style="background: green; width: 100%; height: 300rpx"></view>
 <view style="background: black; width: 100%; height: 300rpx"></view>
 <view style="background: green; width: 100%; height: 300rpx"></view>
 <view style="background: black; width: 100%; height: 300rpx"></view>
</scroll-view>

如下图：

5.1.2水平滚动

<!-- 水平滚动 -->
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
 <view style="background: red; width: 400rpx; height: 200rpx; display: inline-block" ></view>
 <view style="background: green; width: 400rpx; height: 200rpx; display: inline-block"></view>
 <view style="background: red; width: 400rpx; height: 200rpx; display: inline-block"></view>
 <view style="background: green; width: 400rpx; height: 200rpx; display: inline-block"></view>
 <view style="background: red; width: 400rpx; height: 200rpx; display: inline-block"></view>
</scroll-view>

如下图：

CSS:

white-space表示属性设置处理元素内的空白。

normal: 默认处理方式，文本自动处理换行。

pre: 保持HTML源代码的空格与换行,等同与pre标签。

nowrap: 强制文本在一行,除非遇到br换行标签。

pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行。

pre-line: 同pre属性,但是遇到连续空格会被看作一个空格。

inherit: 从父元素继承white-space属性的值。

5.2.ES7的 async 和 await

这个ES7的async和await，都是基于ES6的Promise实现。我讲过ES6的Promise详解的文章（微信小程序实战项目（首页）——two）。一般通常，在js异步请求数据时，但想想如果多个回调函数嵌套，看起来代码不优雅。因此ES6的Promise和ES7的async和await可以解决回调函数嵌套的问题。

先说说async和await详解。

async作为异步函数，其实里面有个await使用，意思是等待的表示。但是我们要放一个返回Promise对象，而且它是等待Promise对象的执行完毕后，并返回结果。就是说，只要到await地方需要等待执行后面的对象。

1.async函数返回是一个Promise对象；

2.await后面跟着Promise对象；

3.await表示在等待Promise对象返回结果，再继续执行。

简单示范例子：

function thePromise(){
  return new Promise(resolve=>{
    setTimeout(()=>{
      resolve('异步完成')
    },1000)
  })
}
async function data(){
  let a = 1
  a = await thePromise() // 异步完成
  console.log(a)
}
data(); //调用

--结果输出为“异步完成”--

其实在await后面就是跟Promise对象。

思路：await当然会输出Promise对象resolve的值，只要Promise对象被resolve执行之后，async函数的await就会往下走。

具体的过程：首先调用data函数，再遇到await并要等待，如果代码就执行到这里，等待后面的Promise对象执行完毕后，才拿到Promise对象的resolve的值并返回结果，然后await才会继续向下执行。

对于ES7的async和await来说非常优雅，可以不需要这么多写then（）。

当在JS开始渲染的时候，它们没有真正的暂停工作，其实它可以处理其他的事情。

小程序实战项目 注意： 使用ES7的async和await之前，必须下载facebook出的runtime.js类库，否则就会报错。

首先创建一个lib/runtime/runtime.js文件，然后可以下载为runtime类库。

首先在/pages/category/index.js,（ES7的async和await）部分代码如下：

  // 获取分类数据
  async getCates() {
    
    // 1 使用es7的async await来发送请求
    const res = await request({ url: "/categories"});
    // this.Cates = res.data.message;
    this.Cates = res;
    // 把接口的数据存入到本地存储中
    wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });
    // 构造左侧的大菜单数据
    let leftMenuList = this.Cates.map(v => v.cat_name);
    // 构造右侧的商品数据
    let rightContent = this.Cates[0].children;
    this.setData({
      leftMenuList,
      rightContent
    })
  },

在/pages/category/index.js，然后引入为../../request/index.js和../../lib/runtime/runtime。引入完成后，最后保证不会报错。

import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';

在/request/index.js,其实上request是定义公共的url，（ES6的Promise对象）部分代码如下：

    //url:"https://api-hmugo-web.itheima.net/api/public/v1/categories"
    const baseUrl="https://api-hmugo-web.itheima.net/api/public/v1";
       //返回new Promise对象
    return new Promise((resolve,reject)=>{
         wx.request({
           ...params,//ES6,对象的扩展运算符
           url:baseUrl+params.url,
           success:(result)=>{
               resolve(result.data.message);
           },
           fail:(err)=>{
               reject(err);
           }
        });
    })

其实上这两者都是联系起来，就像跟上面（ES7的async和await）过程讲解一样。

这样OK！！！