本系列教程是針對粉絲的變現教程，還不是粉絲的可以關注我并且到社區：https://bbs.csdn.net/topics/603436232

進行打卡，不是老粉的也可以獲取最終的技術變現學習，最終還有詳細的變現教程等你來。

前言

《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》
本系列文章參考《微信小程序開發實戰》
教程出完后將會有變現直播，請關注CSDN社區活動公告：https://bbs.csdn.net/forums/A757291228?spm=1001.2014.3001.6682&typeId=19380。

在社區中發文每周將會在活躍前十送出一本實物書籍以及多份實物小禮品，每月送出機械鍵盤等獎勵。

目錄 持續更新：

小程序的 HelloWord 01《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》
小程序獲取頭像試試水 02《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》
小程序仿微信發現頁 03《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》

教程所需

由于小程序開發需要一定的基礎，這些基礎需要提前掌握，本教程只對小程序開發進行零基礎說明。

• 微信小程序開發工具，下載鏈接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

• JavaScript基礎

• HTML基礎

一、新建項目

打開小程序的開發工具后，通過微信掃碼進行登錄，在登錄后需要創建新項目：

在創建新項目時根據自身習慣或項目種類對項目進行取名，在小程序ID處填入對應的小程序ID（小程序ID可在注冊小程序后進入管理后臺查看）。完成上述步驟后點擊右下角綠色按鈕進行項目創建。

二、目錄結構

點擊確定后等待項目創建加載，完畢后將會出現以下操作面板：

每個面板的作用已在圖中說明。

接下來在正式開始編輯前我們需要了解一下文件夾目錄結構，不同的文件夾目錄所存放的文件是不一樣的，在正式學習開發前這一個步驟非常重要。

下面是文件的目錄說明，暫時需要了解的內容已用紅色框標記。

通過以上文件目錄還發現一個重要的知識點，例如page目錄中的目錄名，與內部文件的文件名相同，只是用不通過的后綴作為區分。

此時我們點擊某一個文件查看會發現代碼看不懂，例如 index.wxml文件：

這時我們需要將所有的代碼刪除，自己填入最基礎的代碼。
需要清除的代碼文件有 index 目錄下的 .js、.wxml、.wxss文件下代碼，以及app.js、app.wxss文件中的代碼。

注意：.json文件是配置文件，刪除代碼后將不會索引界面會出現問題，所以在此注意 .json 文件不需要刪除其中代碼。

清空后在App.js中輸入 App，選擇如圖對應的代碼補全提示：

此時代碼內容將會進行自動補全，可以看到每個函數中有對應的注釋內容：

我們接著在 index.js文件中輸入 Page，按照代碼補全的提示選擇 Page項：

此時補全后將會出現基礎的代碼內容：

接下來到app.json 中修改代碼如下：

{"pages": ["pages/index/index"],"window": {"navigationBarBackgroundColor": "#FF6600","navigationBarTitleText": "Demo 01"}
}

保存之后演示區將會更改：

從演示中可以得知：
navigationBarBackgroundColor 對應的是小程序導航欄的背景色，更改對應的值將會使導航欄狀態更改；
navigationBarTitleText 是導航欄的標題；

并且在以上配置中，我們可以得知 windows下的內容為當前小程序主題窗口的相關配置，則以上所說的兩個屬性均放在 windows 節點下：

"window": {"navigationBarBackgroundColor": "#FF6600","navigationBarTitleText": "Demo 01"}

三、HelloWorld

咱們基本上對第一個項目內容有所熟悉后，現在開始在 index 頁面中添加一些元素。在小程序開發中<image> 標簽標示圖片組件、<text>標簽標示文本。這些標簽需要編寫在wxml文件中，wxml文件等于是一個頁面編輯的文件。

現在點開 index.wxml文件，在文件中輸入：

<text>
helloWorld 程序員變現指南 @1_bit
</text>

保存或者按保存快捷鍵 ctrl+s，這是演示界面將會出現內容：

從中可以明白只要在<text>...</text>之間填入啥就可以顯示啥。
那么我們的第一個helloworld小程序就完成了，簡簡單單，變現指日可待。