【小程序项目开发 -- 京东商城】uni-app 之首页商品楼层

作者：计算机魔术师

2022 年 8 月 29 日
广东
本文字数：4113 字
阅读完需：约 13 分钟

🤵‍♂️ 个人主页: @计算机魔术师👨‍💻 作者简介：CSDN 内容合伙人，全栈领域优质创作者。

🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推|

还没有账户的小伙伴<font size=5> 速速点击链接登录注册把！🎉🎉

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

@[toc]

一、效果图：

二、数据获取:

数据接口样式【分为标题（包括图片，文字），列表（图片文字）】

{    "message": [        {            "floor_title": {                "name": "时尚女装",                "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_title.png"            },            "product_list": [                {                    "name": "优质服饰",                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_1@2x.png",                    "image_width": "232",                    "open_type": "navigate",                    "navigator_url": "/pages/goods_list?query=服饰"                },                {                    "name": "春季热门",                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_2@2x.png",                    "image_width": "233",                    "open_type": "navigate",                    "navigator_url": "/pages/goods_list?query=热"                },                {                    "name": "爆款清仓",                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_3@2x.png",                    "image_width": "233",                    "open_type": "navigate",                    "navigator_url": "/pages/goods_list?query=爆款"                },                {                    "name": "倒春寒",                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_4@2x.png",                    "image_width": "233",                    "open_type": "navigate",                    "navigator_url": "/pages/goods_list?query=春季"                },                {                    "name": "怦然心动",                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_5@2x.png",                    "image_width": "233",                    "open_type": "navigate",                    "navigator_url": "/pages/goods_list?query=心动"                }            ]        },           "meta": { "msg": "获取成功", "status": 200 }}

复制代码

定义 data 数据

 data() {      return {        // 楼层数据数组        floorList: []      };

复制代码

method 定义调取数据方法

//获取楼层导航数据      async getfloorList() {        const {          data: res        } = await uni.$http.get('/api/public/v1/home/floordata')        //如果调取失败 显示报错提示        if (res.meta.status != 200) return uni.$showMsg()        this.floorList = res.message      },

复制代码

onload 调取函数

三、UI 界面渲染

在动态循环数据列表渲染页面图片等，可以使用 vue 语法 v-bind:,动态绑定，也支持 mustache 语法，但是只限于将文字等一些输出用 mustache 语法如输出标题文字，组件内属性还是不支持 mustache 语法的
且对于所得到图片得样式动态 style 中需要后面加上 {} 表示动态渲染

<!-- 楼层区域 -->    <!-- 楼层容器 -->    <view class="">      <!-- 楼层 item -->      <view class="floor_list" v-for="(item,index) in floorList" v-bind:key="index">        <!-- 楼层标题 -->        <view class="floor_title">          <image v-bind:src="item.floor_title.image_src" class="floor_title_image" mode="widthFix"></image>          <!-- <text>{{item.floor_title.name}}</text> -->        </view>        <!-- 楼层列表 -->        <view class="floor_product">          <!-- 左侧大图片 -->          <view class="left-img-box">            <!-- 拼接 不全单位px -->            <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}">            </image>          </view>          <!-- 右侧图片列表 -->          <view class="right-img-box">            <!-- 判断索引为0得情况 -->            <view class="right-img-item" v-for="(product,i) in item.product_list" v-bind:key="i" v-if="i != 0">              <image :src="product.image_src" :style="{width: product.image_width + 'rpx'}" mode="widthFix">            </view>            </image>          </view>        </view>      </view>    </view>
//注释：样式  .floor_title {    display: flex;    flex-direction: column;
  }
  .floor_title image {    height: 60rpx;    width: 100%;  }
  .floor_product {    display: flex;    padding: 10rpx;  }
  .right-img-box {    justify-content: space-around;    display: flex;    flex-wrap: wrap;  }

复制代码

在设置样式中 自动换行样式为 flex-wrap: wrap;而不能使用 white-space： normal 这是因为 display:flex 会与 white-space： normal 导致样式冲突，无法达到效果

效果图：

四、跳转到商品页

创建商品页，由于该页面不是用户在加载小程序主要初始化的对象，将其放在分包中。

4.1、处理接口 URL 地址

在实际中接口所给的 URL 地址与自己的命名页面不匹配，且需要对应页面参数，则需要对其进行操作

由于调取数据和渲染页面是同步操作，所以这里处理 URl 链接则使用forEach循环他与 for 区别在于（for&forEach文章讲解 & 箭头函数）

for 是通过下标来索引对应数据，forEach 是 JavaScript 定义的数组的函数方法通过 JavaScript 底层程序循环遍历数组的数据元素，原理是指针指向，所以在面对几百万数据集，for 可能会卡，forEach 还是几毫秒。
for 可以通过 break 中断， forEach 不可以
forEach 是数组的函数方法，无法进行对变量进行赋值修改等操作

两者最大的区别

🎏forEach 是一种函数 可以通过==设定参数== 来存储索引下标数据数值，这样在操作上更加的便利
🎏for 循环的执行只能是通过循环生成索引下标数值然后通过索引下标操作数组的数据元素

实现代码

 methods: {   //获取楼层导航数据   async getfloorList() {     const {       data: res     } = await uni.$http.get('/api/public/v1/home/floordata')     //如果调取失败 显示报错提示     if (res.meta.status != 200) return uni.$showMsg()          // 双重forEach循环修改URL     res.message.forEach(floor => {         floor.product_list.forEach(prd => {           prd.navigator_url = '/subpackages/goods_list/goods_list?' + prd.navigator_url.split('?')[1]  //切割为列表 取后面的页面参数       })     })     this.floorList = res.message   },

复制代码

成功修改

五、配置页面组件 navigator 跳转页面

将对应商品页的view 改为 navigator 组件

 <!-- 楼层区域 -->    <!-- 楼层容器 -->    <view class="">      <!-- 楼层 item -->      <view class="floor_list" v-for="(item,index) in floorList" v-bind:key="index">        <!-- 楼层标题 -->        <view class="floor_title">          <image v-bind:src="item.floor_title.image_src" class="floor_title_image" mode="widthFix"></image>          <!-- <text>{{item.floor_title.name}}</text> -->        </view>        <!-- 楼层项目列表 -->        <view class="floor_product">          <!-- 左侧大图片 -->          <navigator class="left-img-box" :url="item.product_list[0].navigator_url">            <!-- 拼接 不全单位px -->            <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}">            </navigator>          <!-- 右侧图片列表 -->          <view class="right-img-box">            <!-- 判断索引为0得情况 -->            <navigator class="right-img-item" v-for="(product,i) in item.product_list" v-bind:key="i" v-if="i != 0" :url="product.navigator_url">              <image :src="product.image_src" :style="{width: product.image_width + 'rpx'}" mode="widthFix">            </navigator>            </image>          </view>        </view>      </view>    </view>

复制代码

接受页面参数，并渲染为窗口标题在 goods_list.vue 文件中

export default {    data() {      return {        title:''   //定义参数      };    },    onLoad(options){      this.title = options  // 接收参数并赋值      },    onReady(){      uni.setNavigationBarTitle({        title: this.title.query  // 编程时 设置样式      })    }

复制代码

效果：

六、分支合并与提交（选读*）

将本地 home 分支合并到 master 分支
代码推送到远程仓库
删除分支

操作

git branch 注释：查看当前分支
git status 注释：查看当前文件状态
git add . 注释：添加所有文件到暂存区
git commit -m "完成了首页功能的开发" 注释：提交到本地仓库
git push -u origin home 注释： -u 是配置 upstream，提交本地仓库到远程仓库的分支 home 保存,确定了默认主机
git checkout master 注释：切换分支到 master
git merge home 注释：合并分支
giit push 注释：由于前面-u 设置了 upstearm 所以这次默认提交到 master 分支(不需要其他参数）
git branch -d home 注释：删除本地 home 分支

  ✨谢谢你的阅读，您的点赞和收藏就是我创造的最大动力！✨

复制代码

发布于: 刚刚阅读数: 3

计算机魔术师

关注

还未添加个人签名 2022.08.13 加入

还未添加个人简介

发布

暂无评论

创作场景

【小程序项目开发 -- 京东商城】uni-app 之首页商品楼层

一、效果图：

二、数据获取:

三、UI 界面渲染

四、跳转到商品页

4.1、处理接口 URL 地址

五、配置页面组件 navigator 跳转页面

六、分支合并与提交（选读*）

计算机魔术师

评论