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

進(jìn)行打卡，不是老粉的也可以獲取最終的技術(shù)變現(xiàn)學(xué)習(xí)，最終還有詳細(xì)的變現(xiàn)教程等你來。

前言

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

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

目錄 持續(xù)更新：

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

教程所需

由于小程序開發(fā)需要一定的基礎(chǔ)，這些基礎(chǔ)需要提前掌握，本教程只對小程序開發(fā)進(jìn)行零基礎(chǔ)說明。

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

• JavaScript基礎(chǔ)

• HTML基礎(chǔ)

一、新建項目

打開小程序的開發(fā)工具后，通過微信掃碼進(jìn)行登錄，在登錄后需要創(chuàng)建新項目：

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

二、目錄結(jié)構(gòu)

點擊確定后等待項目創(chuàng)建加載，完畢后將會出現(xiàn)以下操作面板：

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

接下來在正式開始編輯前我們需要了解一下文件夾目錄結(jié)構(gòu)，不同的文件夾目錄所存放的文件是不一樣的，在正式學(xué)習(xí)開發(fā)前這一個步驟非常重要。

下面是文件的目錄說明，暫時需要了解的內(nèi)容已用紅色框標(biāo)記。

通過以上文件目錄還發(fā)現(xiàn)一個重要的知識點，例如page目錄中的目錄名，與內(nèi)部文件的文件名相同，只是用不通過的后綴作為區(qū)分。

此時我們點擊某一個文件查看會發(fā)現(xiàn)代碼看不懂，例如 index.wxml文件：

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

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

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

此時代碼內(nèi)容將會進(jìn)行自動補全，可以看到每個函數(shù)中有對應(yīng)的注釋內(nèi)容：

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

此時補全后將會出現(xiàn)基礎(chǔ)的代碼內(nèi)容：

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

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

保存之后演示區(qū)將會更改：

從演示中可以得知：
navigationBarBackgroundColor 對應(yīng)的是小程序?qū)Ш綑诘谋尘吧?#xff0c;更改對應(yīng)的值將會使導(dǎo)航欄狀態(tài)更改；
navigationBarTitleText 是導(dǎo)航欄的標(biāo)題；

并且在以上配置中，我們可以得知 windows下的內(nèi)容為當(dāng)前小程序主題窗口的相關(guān)配置，則以上所說的兩個屬性均放在 windows 節(jié)點下：

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

三、HelloWorld

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

現(xiàn)在點開 index.wxml文件，在文件中輸入：

<text> helloWorld 程序員變現(xiàn)指南 @1_bit </text>

保存或者按保存快捷鍵 ctrl+s，這是演示界面將會出現(xiàn)內(nèi)容：

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

總結(jié)

以上是生活随笔為你收集整理的小程序的 HelloWord 01《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。