本系列教程是針對粉絲的變現教程，還不是粉絲的可以關注我并且到社區：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>

最終效果如下：