小程序仿微信发现页 03《程序员变现指南之微信&QQ 小程序真的零基础开发宝典》

1_bit

发布于 2022-01-06 08:23:52

7430

发布于 2022-01-06 08:23:52

文章被收录于专栏：我的知识小屋

教程所需

由于小程序开发需要一定的基础，这些基础需要提前掌握，本教程只对小程序开发进行零基础说明。

微信小程序开发工具，下载链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
JavaScript基础
HTML基础

目录持续更新：

小程序的 HelloWord 01《程序员变现指南之微信&QQ 小程序真的零基础开发宝典》小程序获取头像试试水 02《程序员变现指南之微信&QQ 小程序真的零基础开发宝典》小程序仿微信发现页 03《程序员变现指南之微信&QQ 小程序真的零基础开发宝典》

一、flex布局

上一节简单的了解了一下 flex，本节将对 flex 进行加深，制作一个微信的发现页。

首先跟第二节所操作的一样，删除所有不必要的代码，接着到 app.json 中更改配置文件：

"window": {
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText": "发现"
  },

navigationBarBackgroundColor 更改导航栏的背景色为黑色； navigationBarTitleText 更改导航标题为 “发现”。

此时页面效果为如下：

接着由于我们要做的微信发现页是垂直向下所以在此处需要在 index.wxml 中添加一个 view：

接着在编写一个样式使这个 view 的布局为垂直布局：

.container{
  height: 100vh;
  background-color: silver;
  display: flex;
  flex-direction: column;
}

在该样式中 height: 100vh; 表示高度为100视窗，也就是占满整个屏幕；background-color: silver; 表示这个 view 背景色为黑色；display: flex; 表示为 flex 布局；flex-direction: column; 表示为垂直布局。毕竟我们的发现窗的内容是从上往下布局的。

接着给这个 view 绑定一个样式：

接下来开始编写这个 view 中的内容：

以上是我们需要在视窗中添加的内容。我们可以看到整个视窗为横向布局，此时可以想到使用 flex 让他的 flex-direction 为横向即可。由于整个发现页不止朋友圈一个栏目，那么需要将整个朋友圈栏目视为一个整体，意思则是朋友圈需要编写在同一个 view 之中，并且这个view 之外还存在包裹这个朋友圈栏目的 view。整体结构如下：

接下来先给包裹朋友圈的 view 一个样式：

.listGroup{
  background-color: white;
  margin: 20rpx 0;
}

该样式表示给这个朋友圈添加一个背景色，并且给予一个 margin 上下外边距 20rpx距离，左右距离为0，这样将会使整个栏目的所有内容会有一个上下的距离。

接着给这个朋友圈栏目一个 flex 的横向布局：

.listItem{
  display: flex;
  flex-direction: row;
  border: 1rpx solid silver;
  padding: 10rpx;
}

flex-direction: row; 表示横向 flex 布局；border: 1rpx solid silver; 表示在四轴有一个单位为 1rpx 的边框；padding: 10rpx; 表示内边距为 10rpx。

接着点击文件夹新建按钮在页面中新建一个文件夹：

命名为image：

接着在这个文件夹中放入我们需要的素材：

随后我们在 index.wxml 中给 image 标签添加图片来源：

随后页面演示效果如下：

<view class="container">
  <view class="listGroup">
    <view class="listItem">
      <image src="/pages/image/moments.png"></image>
      <text>朋友圈</text>
      <image src="/pages/image/arrow.png"></image>
    </view>
  </view>  
</view>

这个时候发现图片过大，我们在样式文件 index.wxss 对 image 添加样式，限制image 大小：

image{
  width: 80rpx;
  height: 80rpx;
  margin: 0 15rpx;
}

限定完毕后显示效果如下：

这时发现朋友圈字体不对齐，此时在 listItem 中添加一个居中对齐即可：

.listItem{
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1rpx solid silver;
  padding: 10rpx;
}

二、循环创建栏目

接下来我们在 index.js 中创建数据，使前端栏目可以动态创建。此时点击 index.js 在 Page 中编写数据：

接着我们在 index.wxml 中使用 for 循环遍历添加的数据：

<view class="container">
  <view class="listGroup" wx:for="{{list}}" wx:for-item='value' wx:key="value{{index}}">
    <view class="listItem">
      <image src="/pages/image/moments.png"></image>
      <text>朋友圈</text>
      <image src="/pages/image/arrow.png"></image>
    </view>
  </view>  
</view>

在代码 wx:for="{{list}}" wx:for 表示循环，其实 {{list}} 表示取到 list 的值，在wx:for-item='value' 中 wx:for-item 可以理解为为这些所遍历到的值起一个别名，这个别名我起名为 value；在代码 wx:key="value{{index}}" 中 wx:key 表示当前的 key 值，添加了 value 防止重复，{{index}} 则表示当前的索引值，此时这样编写后发现当前页面如下预览：

接着由于在我们所编写的数据中，所遍历到的只是一组一组数据，这一组数据中可能有些包含大于1个数据的值，所以在栏目的 view 中，我们需要再加一个循环：

代码如下：

我们发现在里面的内容循环中，循环的值是第一个循环的内容，此时就可以为循环遍历到的数组再多次进行循环。

最后为这些元素添加上值即可：

<view class="container">
  <view class="listGroup" wx:for="{{list}}" wx:for-item='value' wx:key="value{{index}}">
    <view class="listItem" wx:for="{{value}}" wx:for-item='value1' wx:key="value1{{index}}">
      <image src="{{value1.icon}}"></image>
      <text>{{value1.text}}</text>
      <image src="/pages/image/arrow.png"></image>
    </view>
  </view>  
</view>

最终效果如下：