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

本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232

进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有详细的变现教程等你来。

前言

《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
本系列文章参考《微信小程序开发实战》并对新手做出补充说明
教程出完后将会有变现直播,请关注CSDN社区活动公告:https://bbs.csdn.net/forums/A757291228?spm=1001.2014.3001.6682&typeId=19380。

在社区中发文每周将会在活跃前十送出:

一本实物书籍 多份实物小礼品 每月送出机械键盘等奖励

教程所需

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

微信小程序开发工具,下载链接: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 >
  <view >
    <view >
      <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 >
  <view  wx:for="{{list}}" wx:for-item='value' wx:key="value{{index}}">
    <view >
      <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 >
  <view  wx:for="{{list}}" wx:for-item='value' wx:key="value{{index}}">
    <view  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>

最终效果如下:
在这里插入图片描述

来源url
栏目