本系列教程是针对粉丝的变现教程，还不是粉丝的可以关注我并且到社区：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 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>
最终效果如下：
