【小程序项目开发-- 京东商城】uni-app之分类导航区域

欢迎来到
魔术之家！！

该文章收录专栏
✨-- 2022微信小程序京东商城实战 --✨

专栏内容
✨-- 京东商城uni-app项目搭建 --✨
✨-- 京东商城uni-app 配置tabBar & 窗口样式 --✨
✨-- 京东商城uni-app开发之分包配置 --✨
✨-- 京东商城uni-app开发之轮播图 --✨
✨-- 京东商城uni-app之分类导航区域 --✨
✨-- 京东商城uni-app 首页楼层商品 --✨
✨-- 京东商城uni-app 商品分类页面（上） --✨
✨-- 京东商城uni-app 商品分类页面（下） --✨
✨-- 京东商城uni-app之自定义搜索组件（上） --✨
✨-- 京东商城uni-app之自定义搜索组件（中） --✨

实现目标：

一、封装uni.$showMsg()

• 开发场景

在项目中，我们经常需要多次调取数据，而当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。

具体的改造步骤如下：
在main.js 项目入口文件中，为uni挂载一个$showMsg() 方法，$表示自定义挂载函数

在函数上是赋值参数用=， 在showToast函数内传的是一个字典，里面赋值是:

// 挂载 uni请求数据消息提示 方法 (默认)
uni.$showMsg = function(title = '数据加载错误...', duration = 1500,icon = 'fail' ) {
  uni.showToast({
    title,
    duration,
    icon
  })
}

将封装好的代码 用于home页面，

 onLoad() {
      // 调取方法，获取轮播图数据
      this.getSwiperList()
    },
    methods: {
      async getSwiperList() {
        // '/' 根目录即为在main.js的文件配置的 baseUrl 
        const res = await uni.$http.get('/api/public/v1/home/swiperdata')
        // 数据调取失败
        if (res.data.meta.status != 200) return uni.$showMsg()

        // 将调用的数据 赋值
        this.swiperList = res.data.message
        uni.$showMsg('数据请求成功!', 'success')
      }
    }

二、 响应数据参考

{
    "message": [
        {
            "image_src": "https://www.zhengzhicheng.cn/pyg/banner1.png",
            "open_type": "navigate",
            "goods_id": 129,
            "navigator_url": "/pages/goods_detail/main?goods_id=129"
        },
        {
            "image_src": "https://www.zhengzhicheng.cn/pyg/banner2.png",
            "open_type": "navigate",
            "goods_id": 395,
            "navigator_url": "/pages/goods_detail/main?goods_id=395"
        },
        {
            "image_src": "https://www.zhengzhicheng.cn/pyg/banner3.png",
            "open_type": "navigate",
            "goods_id": 38,
            "navigator_url": "/pages/goods_detail/main?goods_id=38"
        }
    ],
    "meta": { "msg": "获取成功", "status": 200 }
}

三、获取分类导航数据

• 在data节点定义navList 数据

   data() {
      return {
        // 轮播图数组
        swiperList: [],
        //分类导航数组
        navList: []
      };

• 在method 定义调取数据函数getNavList()

async getNavList(){
        // 调取数据
        const res =  await uni.$http.get('/api/public/v1/home/catitems')
        // 如果调取失败 返回错误信息并退出
        if(res.data.meta.status != 200 ) return uni.$showMsg()
        // 赋值
        this.navList =  res.data.message
        uni.$showMsg('数据加载成功','success')
      }
}

• 在生命周期函数onload调用函数getNavList()

 onLoad() {
    // 调取方法，获取轮播图数据
    this.getSwiperList(),
    // 获取分类导航数据
    this.getNavList()
  },

调取成功

四、分类导航UI结构

在需要循环标签的属性节点需要在前面加上 :提示后面的是变量或变量表达式

3.1大坑勿踩！！！

• 大坑一：使用 vue-for 动态循环轮播图数组，循环动态绑定需要标签属性节点前都要加上 :（:是 v-bind:的缩写，即动态绑定数据，后面的是变量或者变量表达式，如果没有冒号的则为字符串，此时循环无法正常显示效果、）
• 大坑二：在UI渲染 template模板一定需要一个 标签 view 将全部内容包裹起来，不然会报如下错误:
  Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as