uniapp--咸虾米壁纸项目（一）

一、项目初始化公共目录和设计稿尺寸测量工具

1、浏览器中搜索打开即时设计->点击创建文件，把素材图片拖入打开进行测量 2、在HBuilderx中新建项目，初始化公共目录

api文件夹用于存放项目中用到的接口方法

common文件夹用于存放项目中用到的图片资源以及项目通用样式

common-style.scss文件用于存放项目通用样式，项目通用样式文件创建完之后，被引入到App.vue中的style标签中。（记住！！！项目的通用样式写在common/common-style.scss文件中，然后再到App.vue中的style标签中引入写好的样式文件）

base-style.scss文件用于存放项目中通用的颜色变量

然后再把通用颜色样式文件引入到根目录下的uni.scss文件中，便于项目中直接使用变量

pages文件夹用于存放项目页面

components文件夹用于存放项目中公用的组件

utils文件夹用于存放项目中用到的工具方法，utils/request.js用于封装promise请求，即利用promise来封装uni.request请求。便于之后接口方法的书写。

二、首页轮播图结构搭建及样式配置(利用uniapp的swiper组件，具体组件属性见uniapp官网)

pages/index/index.vue:

然后搭建好了静态结构之后，开始书写样式：可以根据在"即时设计"网站中利用工具来测量素材图片中轮播图的宽高

然后开始配置功能：

在api/apis.js中封装接口方法：（首先要引入在utils/request.js中封装的uni.request请求方法）

再在pages/index/index.vue中封装一个函数用于调用接口方法，获取轮播图数据。

然后再将获取到的数据渲染在页面中

三、下面完成公告部分：（也属于轮播显示，不过与前面的轮播图不一样的地方是，公告内容是纵向轮播的，所以也是利用swiper组件）

公告标题前面显示的，以及后面的箭头图标都属于uniapp中的uni-icons图标,可以在uniapp官网中搜索uni-icons图标，然后去选择一个想要的图标显示。

先搭建结构：

再书写样式：

**!!!**给uni-icons图标配置先前设置过的通用颜色变量，

不能直接：

uni-icons type="" color="变量名"

这样是不会生效的！

所以，如果要使用通用颜色变量值给uni-icons图标配置颜色，必须使用固定语法：

例如，给公告中的喇叭图标配置通用颜色变量值，

css 复制代码

  .left{

   :deep(){
   
       .uni-icons { 
       
         color : 颜色变量名
         
         }
         
       }
         
   }

这样子配置才会使颜色生效。其他的就是普通写法：

例如：

css 复制代码

  .text{
     color:变量名
     }

最后配置功能：

在api/apis.js中封装接口方法，用于获取公告内容

然后再到index.vue中封装一个函数用于调用接口方法，获取数据

然后再渲染页面

四、完成每日推荐部分的显示

这里的布局是利用了滚动显示图片，用到的是uniapp中的scoll-view组件，属性见官网

我们发现每日推荐部分的标题与专题精选部分的标题结构是一模一样的。所以可以把该部分的标题封装成一个公用组件，存放在components文件夹下。

components/common-title/common-title.vue

然后开始先搭建头部结构及样式

然后我们再利用插槽传值的方式，在相应的部分传递相应的内容给头部结构组件。

使用具名插槽传递内容的语法：（template包裹的内容就会去取代 slot name="插槽名" 这个内容。）

slot.vue是被传递内容的组件，app.vue是传递内容的组件。

每日推荐部分的头部结构中不仅用到了uni-icons图标，还用到了uniapp中的uni-dateformat日期格式化组件，用法见官网。

搭建"每日推荐"部分的主题结构--滚动图片显示。利用scroll-view组件。并且设置横向滚动 scroll-x

实现滚动图片效果，使用scroll-view组件，然后里面存放图片盒子。层级关系为：

sql 复制代码

   <scroll-view>
      <view class="box">
        <image src="">
      </view>
   </scroll-view>

设置样式的时候，一定要给scroll-view组件设置样式white-space:nowrap ,还要给存放图片的盒子box设置样式 display:inline-block

这里给uni-icons日期图标设置通用颜色变量，也是用了固定语法 :deep(){...}设置的。

然后就是进行封装接口方法在api/apis.js中

然后再在页面中封装一个函数用于调用接口方法，获取每日推荐数据

最后进行渲染数据

五、完成专题精选部分结构搭建及样式配置

可以将每一张图片都封装成一个item组件，便于复用。

components/theme-item/theme-item.vue:

先搭建图片的结构：

图片由左上角的tab标签，图片，下方的模糊遮罩层三部分组成。

navigator组件也是uniapp中的一个组件，详细用法官网可见。有点类似于a标签，表示点击后可以跳转到其他页面。

然后根据效果图，可以发现有两种图片效果显示，一种是正常图片，另一种是"更多"效果的图片，所以在theme-item.vue中准备两种图片。

正常图片是由：左上角标签，图片，下方遮罩层三部分组成 "更多"效果图片是由：图片，遮罩层，"更多效果"的图标三部分组成。（"更多效果"的图标还有文字是显示在遮罩层上的。）

"更多效果"图片

ini 复制代码

   <navigator url="">
      <image src=""/>
      <view class="mask">
         <uni-icons type=""/>
         <view class="text">更多</view>
      </view>
   </navigator>

然后再搭建样式：（主要是利用定位）

给背景区域添加模糊效果：可以利用 backdrop-filter:blur(模糊数值)来实现。

给左上角标签设置样式：

less 复制代码

  transform:scale(缩小值)
  transform-origin:left top

表示让标签盒子的大小以左上角为基准，缩小0.8倍。用这种方式缩小盒子，不会影响里面的内容布局。

然后搭建好了图片item组件后，再到首页中"专题推荐"部分使用图片组件。

专题部分中先引入头部结构组件：

xml 复制代码

<common-title>
  <template #name>专题推荐</template>
  <template #custom>
     <navigator url="">more+</navigator>
  </template>
/common-title>

然后再引入图片item组件：

xml 复制代码

  <view class="content">
    <theme-item></theme-item>
  </view>

然后注意： 效果图中有八张图片是正常图片，只有最后一张图片是"更多效果"的图片，因此要对其作出处理

ini 复制代码

  <theme-item v-for="item in 8" ></theme-item>
  <theme-item :isMore="true"></theme-item>

利用父传子，如果是更多效果的图片，就传入值isMore:true,然后再到图片组件中利用props接收父组件中传入的内容，进行条件判断显示。

由于在图片item组件中，有两种图片结构，可以利用props来接收父组件中传入的内容isMore

php 复制代码

  defineProps({
     isMore:{
       type:boolean,
       default:false
      }
    })
    
  //在进行一个条件判断：
  
  <navigator url="" v-if="!isMore">
     //正常图片
  </navigator>
  <navigator url="" v-if="isMore">
     //更多效果的图片
  </navigator>

这样就可以实现，只有传入了内容isMore:true的才会显示"更多效果"的图片。

再配置结构的样式：

在专题精选部分，图片呈现grid布局。一行三个图片

less 复制代码

  displa:grid
  grid-template-columns:repeat(3,1fr)
  gap:5rpx

最后实现请求真实数据封装接口方法：

再到首页封装函数用于请求数据

最后进行渲染

将获取到的图片数据利用父传子，传给图片theme-item组件。

ruby 复制代码

   <theme-item v-for="item in classifyList" :key="item._id" :item=item />
   <theme-item :isMore="true" />  //"更多效果"的图片，传入isMore:true 让"更多效果"的图片显示。

再到图片item组件中接收数据

php 复制代码

  defineProps({
    isMore:{
       type:boolean,
       default:false
     },
    item:{
        type:Object,
        default(){
            return {
		      name:"默认名称",	
                picurl:"../../common/images/classify1.jpg",
                updateTime:Date.now() - 1000*60*60*5
	}
} }

在到图片组件中进行数据渲染

xml 复制代码

  <navigator url="" v-if="!isMore" >
    <image :src="item.picurl" />
    <view ...遮罩层>{{item.name}} </>
    <view ...标签>{{item.updateTime}}</>
  </navigator>

实现标签中时间的实时更新：

封装一个js工具方法用于实现时间的实时更新：

工具方法封装在工具文件夹utils下：

utils/common.js:

然后再到图片item组件中引入工具方法：

javascript 复制代码

import { compareTimestamp } from '../../utils/common';

最后再使用工具方法：并将获取到的时间戳数据作为参数传入：

xml 复制代码

  <navigator url="" v-if="!isMore" >
    <image :src="item.picurl" />
    <view ...遮罩层>{{item.name}} </>
    <view ...标签>{{compareTimestamp(item.updateTime)}}</>
  </navigator>

六、实现底部tabBar导航栏结构及功能的搭建：

在uniapp中，搭建底部tabBar导航栏是通过在pages.json文件中配置：（官网中搜索tabBar可以知道用法）

先新建其他页面：分类页，个人中心页

pages/classify/classify.vue

pages/user/user.vue

然后在pages.json中搭建底部tabBar