宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：uni-app

🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

        ⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第二站就是uni-app开发，希望看到我文章的朋友能对你有所帮助。

目录

项目搭建

配置tabBar路由

Git管理项目

主页搭建

实现轮播图区域

配置小程序分包

分类导航区域

楼层布局区域

---

项目搭建

今天实现一个商城购物的案例，并制作成一个微信小程序在手机上使用，项目需要有四个tabBar按钮来实现，如果第一次接触uni-app的话，欢迎订阅一下本专栏，学习里面的文章，项目的实现原理基本可以搞懂，废话不多说，直接上手操作。

配置tabBar路由

在pages目录上创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面。在 HBuilderX 中，具体步骤如下：

接下来需要配置tabBar，相关图标库可以自行去阿里云图标库查找，这里不再赘述，如下：

接下来项目的样式，我都会在小程序中进行检测配置，最后打包APP，结果如下所示：

Git管理项目

因为此项目的代码还是比较多的，这里的话我就借助git进行版本管理，创建子分支，如果子分支没问题的话就合并主分支，要知道我们在创建uni-app项目文件，是没有git忽略文件的，这里需要我们单独创建，具体操作如下：

在项目根目录中新建 .gitignore 忽略文件，并配置如下：

注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪,此时，为了让 Git 能够正常追踪 unpackage 目录，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位。

# 忽略的目录
/node_modules
/unpackage/dist

创建好忽略文件后，现在将文件上传到远程仓库上，这里我使用的是github，当然你也可以选择国内的gitee，效果都是一样的，如下：

创建远程仓库：进入github网址，登录自己的账号后点击右上角头像新建仓库，如下

创建完成后，会跳转到如下界面，上面代码详细的告诉你如何将代码提交到远程库：  

生成本地仓库：具体步骤如下：

git init 生成工作区

git status 查看提交的文件情况

git add . 提交到暂存区

git commit -m "shop" 提交到版本区

推送到远程仓库：具体步骤如下：

git remote add origin git@github.com:ztK63LrD/uni-app_shop.git   关联别名

git push -u origin main 推送分支

推送完成之后，刷新github页面就会将我们推送的代码呈现在页面上，如下：

创建dev分支：基于master在本地创建dev分支，用来检测开发和记录相关代码，如下：

git checkout -b dev 创建并切换到该分支

git push origin -u "dev" 将该分支推送到远程仓库上

ok，接下来就开始在我们创建的子分支dev上进行代码的书写， 当确保代码完整性后再与主分支master进行合并，这样会大大提高代码的正确性和规范性。接下来开始真正的项目编写，收好小板凳瞪大眼睛开始学习了。

主页搭建

接下来实现主页样式以及功能的搭建，具体实现过程如下：

实现轮播图区域

实现轮播图很简单，只要操作uni-app发起网络请求的相关API即可使用，详情可参看官网：

给出详细代码如下：

<template><view><!-- 轮播图区域 --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!-- 循环渲染轮播图的item项 --><swiper-item v-for="(item,index) in swiperList" :key="index"><view class="swiper-item"><!-- 动态绑定图片的 src 属性 --><image :src="item.image_src" mode="aspectFill"></image></view></swiper-item></swiper></view>
</template><script>export default {data() {return {swiperList:[] // 轮播图数据列表};},onLoad() {this.getSwiperList() // 调用方法，获取轮播图数据},methods:{// 获取轮播图数据的函数getSwiperList(){uni.request({url:'https://www.uinav.com/api/public/v1/home/swiperdata',success:res => {console.log(res)this.swiperList = res.data.message},fail:error => {uni.showToast({title:'数据请求失败！',duration:1500,icon:'none'})}})}}}
</script><style lang="scss">
swiper{height: 330rpx;.swiper-item, image{width: 100%;height: 100%;}
}
</style>

因为后期可能会出现很多的需要进行弹框的操作，所以这里我们可以将上面的代码中进行弹框操作的showToast()函数进行一个全局的封装，操作如下：

配置小程序分包

如果小程序的项目资源过大的话，所有的页面与资源都被打包在一起会导致由于项目体积过大从而影响小程序首次启动的下载时间，所以本次项目需要对小程序进行分包处理，对于分包的详情信息可参考我之前的一篇文章：小程序分包处理 。具体分包过程如下：

在项目根目录中创建分包的根目录，命名为subpkg；然后在pages.json中和pages节点平级的位置声明 subPackages 节点，用来定义分包的相关结构，如下：

在subpkg目录上鼠标右键新建页面选项，填写以下页面的相关信息：

最后在subPackages节点下生成相应的分包路径，如下：

分包的基本配置完成后， 我们将原本的轮播图图片设置可跳转的navigator标签并将图片对应的id进行传递过去，如下：

分类导航区域

接下来实现主页的分类导航区域，具体实现过程如下：

调用获取分类列表数据的接口，将数据转存到data当中去，如下：

转存完后开始设置分类列表的布局，如下：

界面如下：

现在开始给分类列表配置点击事件，进行页面的跳转，因为项目的页面还开始写完，现在仅写分类列表中第一个分类图片的点击事件吧，如下：

楼层布局区域

接下来实现主页的楼层布局区域，具体实现过程如下：

调用获取楼层区域的接口，获取楼层区域的数据并将其转存到data里面：

渲染楼层的图片与标题，定义如下的ui结构：

美化楼层的样式：

具体样式如下：

接下来给图片设置点击跳转链接，跳转到其相关的商品列表页面，这里需要设置一下分包来提供给跳转链接的详情界面，如下：

接下来需要对调用获取楼层接口的数据进行一个处理，设置一个能匹配我们目前设置url路径的地址，如下：

接下来对楼层的图片设置路由跳转标签，并将其图片参数进行传递，如下：

至此首页的基本功能已经完成，其相关的分包下的分页内容，会在后面进行讲解到，因为代码量比较多，项目我会分三篇文章来讲解，如果觉得不错的话，可以给博主一键三联，您的支持就是博主创作的最大动力。

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/2241952.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章：

uni-app–》如何实现网上购物小程序（一）？

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页：亦世凡华、 🛺系列专栏：uni-app 🚲座右铭：人生亦可燃烧，亦可腐败&#xf……

编程日记2023/4/8 18:26:18

动态链表创建及操作（对静态的补充）

0.修改上两节中结构体形式和遍历链表函数
1、原因：不妨增加一个结构体中的成员变量用来表示数据，修改打印链表的函数，让它同时打印节点序号和节点数据。这样，我们能直观地看出头插法和尾插法创建动态链表时的特点。
2、修改之处……

编程日记2023/4/8 18:26:06

手撕/手写/自己实现 BN层/batch norm/BatchNormalization python torch pytorch

计算过程
在卷积神经网络中，BN 层输入的特征图维度是 （N,C,H,W）, 输出的特征图维度也是 （N,C,H,W） N 代表 batch size C 代表 通道数 H 代表 特征图的高 W 代表 特征图的宽
我们需要在通道维度上做 batch normalizat……

编程日记2023/4/8 18:25:53

Redis介绍、安装、持久化、数据类型、常用操作、安全设置

Redis介绍、安装、持久化、数据类型、常用操作、安全设置文章目录Redis介绍Redis安装Redis持久化Redis数据类型和常用操作操作教程Redis键值和服务的常用操作Redis安全设置文章目录
Redis介绍
1.Redis和Memcached类似，也属于key-value数据存储的NoSQL，……

编程日记2023/4/8 18:25:44

Axure RP 9 for Mac(原型设计软件)

Axure RP 9 for Mac是一款交互式原型设计软件，使用axure rp9以最佳的方式展示您的作品，优化现代浏览器并为现代工作流程设计。同时确保您的解决方案正确完整地构建。Axure RP 9 for Mac为您整理笔记，将其分配给UI元素，并合并屏幕注……

编程日记2023/4/8 18:25:44

php通过ftp上传文件

php通过ftp上传文件
条件：
利用php -m 查看是否有开启ftp扩展（没有则 利用php –ini 查看php.ini路径 开启ftp扩展 php_ftp） 使用方法：
<?php
/*** 1.利用php -m 查看是否有开启ftp扩展* 2.利用php –ini 查看php.ini文化……

编程日记2023/4/8 18:25:44

tp5配置定时任务

第一步
1.0 App/模块/ 下创建command文件夹
2.0 .我这边是创建在command模块里面,在command模块下创建一个SendMessage.php文件(位置和具体名字自己根据需求定)3.0 复制下面的代码到SendMessage.php （主要命名空间）
<?php
namespace app\command;u……

编程日记2023/4/8 18:25:43

nginx设置ip黑名单的方法

step1 新建黑名单文件
在Nginx的conf目录下面建立ipblcak文件（名称可以随意），把想要屏蔽的IP只要加入这个文件即可，格式如下：deny 61.144.118.185;一行添加一个，添加完成后保存。
step2 加载配置文件
如……

编程日记2023/4/8 18:25:43

linux 常用命令（必备）

linux常用命令目录操作文件权限文件操作服务命令用户操作防火墙命令（端口）目录操作
|mkdir | 目录路径 参数:-p(递归) | 创建目录 |mkdir /home/www -p
|rmdir | 目录路径 参数:-p(递归 | 删除目录 |rmdir /home/www -p
|cd | ……

编程日记2023/4/8 18:25:42

PHP 中 include 和 require 的区别

include 和 require 的区别
include incluce 在用到时加载 引入文件的时候，如果碰到错误，会给出提示，并继续运行下边的代码require
require 在一开始就加载 引入文件的时候，如果碰到错误，会给出提示&#xff0c……

编程日记2023/4/8 18:25:42

Spring Boot概述（一）

1. SpringBoot 概述
1.1 SpringBoot 概念
SpringBoot提供了一种快速使用Spring的方式，基于约定优于配置的思想，可以让开发人员不必在配置与逻辑业务之间进行思维的切换，全身心的投入到逻辑业务的代码编写中，从而大大提高了开发的……

编程日记2023/4/16 14:58:12

计算机笔试/面试常见逻辑题/智力题汇总

说明：按种类汇总，难度不分先后，做了分级罗列，方便后续扩充，大家有比较有意思的题目可以在讨论区讨论。 下面有的题题解相对复杂的直接参考了网上的一些解答，而有的题解我认为并不好的也做了补充&#xff0c……

编程日记2023/4/16 14:58:01

OpenAI文档翻译——搭建第一个自己的ChatGPT应用

这篇主要是讲了重头到位创建一个基于OpenAI API的应用程序的过程，同时给出了Node.js、Python版本的实例代码。应用程序的构建总体来说是很简单的就是一个接口调用，前提是我们需要提供密匙。
如果想要获取更好的结果返回一个是可以给模型提供一些列子从而……

编程日记2023/4/16 14:57:51

python以及PyCharm工具的环境安装与配置

这里以Windows为例
Python的安装
当然是到Python官网下载咯，https://www.python.org/downloads/点我直达，如图： 可以下载最新版本，可以下拉找到之前特定的版本安装，如图： 这里先择的是最新版的进行安装……

编程日记2023/4/16 14:57:39

JavaScript【六】JavaScript中的字符串(String)

文章目录🌟前言🌟字符串(String)🌟单引号和双引号的区别🌟属性🌟 length :字符串的长度🌟 方法🌟 str.charAt(index);🌟 str.charCodeAt(index);🌟 String.fromCharCode(……

编程日记2023/4/16 14:57:29

获取文件MD5小案例（未拆分文件）

文章目录前端获取MD5后端获取MD5前端获取MD5
1、引入js
<script src"js/spark-md5.min.js" type"text/javascript"></script>注：spark-md5库GitHub链接 2、这里是一个按钮和被隐藏调的<input/>标签 <body><button……

编程日记2023/4/16 14:57:19

Java 进阶(15)线程安全集合

CopyOnWriteArrayList
线程安全的ArrayList，加强版读写分离。
写有锁，读⽆锁，读写之间不阻塞，优于读写锁。
写⼊时，先copy⼀个容器副本、再添加新元素，最后替换引⽤。
使⽤⽅式与ArrayList⽆异。
示例……

编程日记2023/4/16 14:57:08

HR：面试官最爱问的linux问题，看看你能答对多少

文章目录摘要Linux的文件系统是什么样子的？如何访问和管理文件和目录？如何在Linux中查看和管理进程？如何使用Linux命令行工具来查看系统资源使用情况？如何配置Linux系统的网络设置？如何使用Linux的cron任务调度器来执行……

编程日记2023/4/16 14:56:56

vscode开发常用的工具栏选项,查看源码技巧以及【vscode常用的快捷键】

一、开发常用的工具栏选项
1、当前打开的文件快速在左侧资源树中定位： 其实打开了当前的文件已经有在左侧资源树木定位了，只是颜色比较浅 2、打开太多文件的时候，可以关闭 3、设置查看当前类或文件的结构 OUTLINE
相当于idea 查看当前类或接……

编程日记2023/4/16 14:56:45

数据要素化条件之一：原始性

随着技术的发展，计算机不仅成为人类处理信息的工具，而且逐渐地具有自主处理数据的能力，出现了替代人工的数据智能技术。数据智能的大规模使用需要关于同一分析对象或同一问题的、来源于不同数据源的海量数据。这种数据必须是针对特定对象的记……

编程日记2023/4/16 14:56:36