小程序開發入門
學習技術不要光看視頻、教材，一定要動手實踐。只有實戰，技術纔會變得簡單。小程序相比其他編程語言來說，可以讓我們更快做出一些技術產品。
開始前的準備
小程序的開發有兩樣東西必不可少，一個是小程序開發的技術文檔；還有一個就是小程序的開發者工具。
開發者工具：小程序開發者工具下載地址
大家可以根據自己電腦的操作系統來下載對應的穩定版安裝包進行安裝。就和我們寫Word、PPT文檔要用Office的軟件一樣，我們要在開發者工具上多多動手，技術才能掌握的更加真切。
技術文檔：官方小程序技術文檔
技術文檔大家先只需要花五分鐘左右的時間瞭解大致的結構即可，先按照我們的教學步驟學完之後再來看也不遲。官方的小程序技術文檔過於全面而且詳細，對於初學者或者零基礎的朋友來說，我們會引導大家如何循序漸進的學習文檔裏的技術知識。
多看技術文檔和多用開發工具也是我們學習其他編程語言或技術最爲重要的兩點，凡是脫離技術文檔和開發工具看視頻、看文章以及蒐集再多的資料都是捨本求末的錯誤做法，而這也是很多初學者的一個通病。
值得注意的是小程序的開發功能更新非常頻繁，很多網上的教程內容都比較過時，而只有技術文檔纔是同步最新的。無論你是初學者還是高手，技術文檔都是我們技術開發的基礎與落腳點，常讀常新。
註冊微信小程序
小程序的註冊非常方便，打開小程序註冊頁面，按照要求填入個人的信息，驗證郵箱和手機號，掃描二維碼綁定你的微信號即可，3分鐘左右的時間即可搞定。
註冊頁面：小程序註冊頁面
註冊小程序時不能使用註冊過微信公衆號、微信開放平臺的郵箱哦，也就是需要你使用一個其他郵箱纔行。
當我們註冊成功後，就可以自動登入到小程序的後臺管理頁面啦，如果你不小心關掉了後臺頁面，也可以點擊小程序後臺管理登錄頁進行登錄。
後臺管理頁：小程序後臺管理登錄頁
小程序和微信公衆號的登錄頁都是同一個頁面，他們會根據你的不同的註冊郵箱來進行跳轉。
進入到小程序的後臺管理頁後，點擊左側菜單的開發進入設置頁，然後再點擊開發設置，在開發者ID裏就可以看到AppID(小程序ID)，這個待會我們有用。
注意小程序的ID（AppID）不是你註冊的郵箱和用戶名，你需要到後臺查看纔行哦~
開通雲開發服務
點擊微信開發者工具的“雲開發”圖標，在彈出框裏點擊“開通”，同意協議後，會彈出創建環境的對話框。這時會要求你輸入環境名稱和環境ID，以及當前雲開發的基礎環境配額（基礎配額免費，而且足夠你使用哦）。
建議你環境名稱可以使用 xly、環境ID自動生成即可，當你的雲開發環境出現問題的時候，你可以提供你的環境ID，雲開發團隊會有專人爲你解答。
按照對話框提示的要求填寫完之後，點擊創建，會初始化環境，環境初始化成功後會自動彈出雲開發控制檯，這樣我們的雲開發服務就開通啦。大家可以花兩分鐘左右的時間熟悉一下雲開發控制檯的界面。
新建一個模板小程序
安裝完開發者工具之後，我們使用微信掃碼登錄開發者工具，然後使用開發者工具新建一個小程序的項目，
- 項目名稱：這個可以根據自己的需要任意填寫，可以是中文；
- 目錄：大家需要先在電腦上新建一個空文件夾，然後選擇這個空文件夾；
- AppID：就是之前我們找到的AppID(小程序ID)（也可以點擊右邊的下拉框，下拉選擇AppID）
- 開發模式爲小程序
- 後端服務選擇不使用雲服務，注意爲了教學的需要，先選擇不使用雲服務
- 語言爲JavaScript
點擊新建確認之後就能在開發者工具的模擬器裏看到一個簡單的Hello World模板小程序，在編輯器裏看到這個小程序的源代碼。
小任務： 分別點擊開發者工具工具欄上的模擬器、編輯器、調試器，以及下面的手機下拉框、顯示百分比，看看有什麼效果。找到開發者工具的菜單欄，在項目菜單欄裏找到查看所有項目，在設置菜單欄裏找到外觀設置，切換一下主題、調試器主題（深色、淺色）。
接下來，我們點擊開發者工具的工具欄裏的預覽圖標，就會彈出一個二維碼，使用你的手機微信掃描這個二維碼就能在微信裏看到這個小程序啦。以後我們要自己開發一個小程序都可以按照上面的操作新建一個模板小程序，然後在這個的基礎上修改開發。
如果你沒有使用微信登錄開發者工具，以及你的微信不是該小程序的開發者是沒法預覽的哦。這個Hello World模板小程序非常簡單，但是它的文件結構卻是完整的。
文件結構與頁面組成
在瞭解以下知識時，大家只需要結合開發者工具的編輯器對照着介紹，一一展開文件夾、用編輯器查看文件的源代碼，大致瀏覽一下即可。這就是實戰學習的方法（和看書、看視頻的學習方法不同），千萬不要死記硬背哦，你以後用多了自然就記住啦~
小程序的文件結構
在開發者工具的編輯器裏可以看到小程序源文件的根目錄下有app.js、app.json和app.wxss，這是小程序必不可少的三個主體文件，下面我們來大致瞭解一下小程序文件結構（只需要大致瞭解就可以啦~不理解也沒有關係）。
- app.json：小程序的公共設置，可以對小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置多 tab 等；
- app.wxss：小程序的公共樣式表，可以配置整個小程序的文字的字體、顏色、背景，圖片的大小等樣式；
- app.js：小程序的邏輯（這個可以先放着，不用管）
- pages文件夾：這裏存放着小程序的所有頁面，展開pages文件夾就可以看到有index和logs兩個頁面文件夾；
小任務：在結合開發者工具實戰了解了上面的知識之後，你明白了哪個文件夾是小程序的根目錄嗎？
小程序的頁面組成
在每一個頁面文件夾裏都有四個文件，這四個文件的名稱都是一樣的，它們分別爲：
- json文件，和上面的app.json作用基本相同，只是app.json控制的是整個小程序的設置，而頁面的json文件只控制單個頁面的配置（因爲有時候全局配置就夠用了，所以頁面配置有時候是空的）；
- wxml文件，小程序的頁面結構，文字、圖片、音樂、視頻、地圖、輪播等組件都會放在這裏；
- wxss文件，小程序的頁面樣式，和app.wxss一樣是控制樣式，而頁面的wxss文件是控制單個頁面的樣式；
- js文件，這個是控制小程序頁面的邏輯（這個可以先放着，不用管）
小程序的全局配置
在前面我們已經提到，app.json可以對整個小程序進行全局配置，而配置的依據就需要我們參考技術文檔了。
技術文檔：小程序全局配置
打開上面的小程序全局配置技術文檔，裏面會有很多你看不懂的名稱，這是非常正常的，大家也不需要記，只需要花兩三分鐘時間快速瀏覽一下即可，後面我們會教大家如何結合技術文檔來實戰學習。
json語法
在對小程序進行配置之前，可以使用開發者工具打開app.json文件，對照着下面的json語法來進行理解：
- 大括號{}保存對象，我們來看一下app.json，哪些地方用到了大括號{}，{}裏面就是對象；
- 中括號[]保存數組，我們可以看到中括號[]裏有
“pages/index/index”等（這是小程序頁面的路徑），那這些頁面路徑就是數組啦；數組裏的值都是平級的關係；
- 各個數據之間由英文字符逗號,隔開，注意這裏的數據包括對象、數據、單條屬性與值，大家可以結合app.json仔細比對逗號,出現的位置，平級數據的最後一條數據不要加逗號,，也就是隻有數據之間纔有逗號。
- 字段名稱（屬性名）與值之間用冒號:隔開，字段名稱在前，字段的取值在後；
- 字段名稱用雙引號””給包着；
注意，這裏所有的標點符號都需要是英文狀態下的，也就是我們經常聽說的全角半角里的半角狀態，不然會報錯哦。很多之前沒有接觸過編程的童鞋經常會犯這樣的錯誤，一定要多多注意！當我們要輸入編程裏的標點符號時，一定要先確認一下，你的輸入法是漢語形態，還是字母形態，如果輸的是漢字形態，一定要切換哦~
設置小程序窗口表現
使用開發者工具打開app.json文件，可以看到如下代碼裏有一個window的字段名（如前面所說，字段名要用雙引號””包着），它的值是一個對象（如前面所說，{}大括號裏的就是對象），可見對象可以是一組數據的集合，這個集合裏包含着幾條數據。
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
這些就是window配置項，可用於設置小程序的狀態欄、導航條、標題、窗口背景色。
小任務：打開小程序全局配置查看backgroundTextStyle、navigationBarBackgroundColor、navigationBarTitleText、navigationBarTextStyle的配置描述（大致瞭解即可）。
使用開發者工具的編輯器將以上屬性的值改成如下代碼（這裏的backgroundTextStyle只有在設置了下拉刷新樣式時纔會比較明顯，以後會介紹）
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#1772cb",
"navigationBarTitleText": "雲開發技術訓練營",
"navigationBarTextStyle": "white"
},
添加完成之後記得保存代碼哦，文件修改沒有保存會在標籤頁有一個小的綠點。可以使用快捷鍵（同時按）Ctrl和S來保存（Mac電腦爲Command和S）。
然後點擊開發者工具的編譯圖標，就能看到更新之後的效果啦，也可以點擊預覽，使用手機微信掃描生成的二維碼查看實際效果。
小任務： navigationBarBackgroundColor值是 #F8F8F8， #1772cb，這是十六進制顏色值，它是一個非常基礎而且用途範圍極廣的計算機概念，大家可以搜索瞭解一下：1、如何使用電腦版微信、QQ的截圖工具取色（取色顏色會有一點偏差）；2、RGB顏色與十六進制顏色如何轉換；
新建小程序頁面
新建頁面的方法有兩種，一種是使用開發者工具在pages文件夾下新建；還有一種是通過app.json的pages配置項來新建，我們先來看第2種方法。
通過app.json新建頁面
pages配置項是設置頁面的路徑，也就是我們在小程序裏寫的每一個頁面都需要填寫在這裏。使用開發者工具打開app.json文件，在pages配置項裏新建一個home頁面（頁面名稱可以是任意英文名），代碼如下：
"pages/home/home",
"pages/index/index",
"pages/logs/logs"
大家寫的時候可以回顧一下json語法，每個頁面後都記得要用逗號,隔開，如果你的文件代碼寫錯了，開發者工具會報錯。
在模擬器就能看到我們新建的這個首頁了，會顯示如下內容：
pages/home/home.wxml
大家再來看看小程序的文件夾結構，是不是在pages文件夾下面多了一個home的文件夾？而且這個文件夾還自動新建了四個頁面文件。
我們刪掉文件目錄下的index和logs文件夾，然後把app.json的pages配置項修改爲：
"pages": [
"pages/home/home",
"pages/list/list",
"pages/partner/partner",
"pages/more/more"
],
也就是我們刪掉了index和logs頁面配置項的同時，又新增了三個頁面(list、partner、more，這三個頁面名稱大家可以根據自己需要來命名)。
小任務：這些新建的頁面文件都在電腦上的什麼呢？比如在開發者工具右鍵點擊home文件夾或者home.wxml，選擇“在硬盤打開”就可以看到該文件在我們電腦的文件夾裏什麼的位置啦
小程序的首頁
在pages配置項的技術文檔裏有這樣一句：“數組的第一項代表小程序的初始頁面”，是什麼意思呢？
技術文檔：pages配置項
使用開發者工具打開app.json，把之前建好的”pages/list/list”剪切粘貼到”pages/home/home”的前面，也就是把list頁面放到了數組的第一項，再來模擬器裏看一下小程序的變化。原來pages配置項的第一項就是小程序的首頁啦。
小任務：現在我們來使用新建頁面的第1種方法，使用開發者工具在pages文件夾下新建頁面。首先選中pages文件夾，然後點擊上方的+號或鼠標右鍵，新建目錄，然後輸入目錄名爲post，然後再選中post文件夾，新建頁面，頁面名也爲post，新建之後看看pages配置項的變化。
瞭解配置項的書寫方式
在前面我們已經瞭解了window配置項、pages配置項，在技術文檔小程序全局配置瞭解到window、pages這些都是全局配置項的屬性，全局配置項的屬性還有tabBar、networkTimeout、usingComponents、permission等，大家可以在技術文檔裏瞭解每個屬性的描述，大致瞭解他們的功能。
這裏我們來宏觀瞭解一下配置項的書寫語法，大家可以結合下面這段代碼（不要粘貼到app.json裏面）來理解app.json的寫法，免得配置錯誤：
- 每個配置項比如pages、window都用引號””包住，冒號:後面是配置項的屬性與值；
- 每個配置項之間用逗號,隔開，最後一項沒有逗號，配置項是平級關係，不要把tabBar配置項寫到window配置項裏面了；
- 配置項裏面的數組或對象的最後一項也沒有逗號
- 書寫時注意縮進，大括號{}、中括號[]都是成對書寫，即使是嵌套時也不能有遺漏}或]；
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首頁"
}, {
"pagePath": "pages/logs/logs",
"text": "日誌"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
]
}
配置tabBar配置項
在很多App的底部都有一個帶有小圖標的切換tab，比如手機微信App底部就有微信、通訊錄、發現、我四個tab，這個小圖標就是icon，整個呢就是tabBar，小程序也可以有，需要我們在app.json裏配置tabBar配置項。
icon下載
在官方技術文檔裏我們瞭解到icon 大小限制爲40kb，建議尺寸爲81px * 81px（大一點是可以的），不懂設計icon的童鞋可以去矢量圖標庫去下載。（注意下載的格式要是png哦）
icon資源：iconfont阿里巴巴矢量圖標庫
大家可以留意下手機微信的tabBar的每一個icon其實是一組兩個，也就是選中時的狀態和沒有選中時的狀態，他們的顏色也是不一樣的，而在iconfont裏大家除了選擇圖標還可以選擇不同的顏色來下載哦。比如我們要讓tabBar有四個切換tab，那麼我們就需要下載4個icon的兩種配色共8張圖片。
使用開發者工具在模板小程序的根目錄下新建一個image的文件夾，把命名好的icon都放在裏面，這個時候你的文件夾結構如下：
小程序的根目錄
├── image
│ ├── icon-tab1.png
│ ├── icon-tab1-active.png
├── pages
├── utils
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── sitemap.json
icon的配色最好是一明一暗，而且與你的小程序的整體顏色風格保持一致，這樣切換起來纔不會突兀；選擇的這4個icon的風格最好一致，不然tabBar就不會好看啦。icon的名稱最好也一致，比如home對應的icon可以爲home.icon和home-active.icon。
注意：圖片的名稱必須是英文，不要用中文。頁面也好、文件也好、文件夾的名稱也好，都要使用英文，裏面的標點符號也必須是英文字符。
配置tabBar配置項
通過tabBar配置項，可以設置tabBar的默認字體顏色、選中過的字體顏色、背景色等。
技術文檔：tabBar配置項
通過技術文檔，我們先大致瞭解color、selectedColor、backgroundColor的意思。然後使用開發者工具打開app.json在window配置項後面新建一個tabBar配置項，代碼如下：
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#13227a",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "image/icon-tab1.png",
"selectedIconPath": "image/icon-tab1-active.png",
"text": "首頁"
},
{
"pagePath": "pages/list/list",
"iconPath": "image/icon-tab2.png",
"selectedIconPath": "image/icon-tab2-active.png",
"text": "活動"
},
{
"pagePath": "pages/partner/partner",
"iconPath": "image/icon-tab3.png",
"selectedIconPath": "image/icon-tab3-active.png",
"text": "夥伴"
},
{
"pagePath": "pages/more/more",
"iconPath": "image/icon-tab4.png",
"selectedIconPath": "image/icon-tab4-active.png",
"text": "更多"
}
]
}
這裏有一個比較重要的屬性就是list，它是一個數組，決定了tabBar上面的文字、icon、以及點擊之後的跳轉鏈接。
- pagePath必須爲我們在pages配置項裏建好的頁面
- text是tab按鈕上的文字
- iconPath、selectedIconPath分別爲沒有選中時的圖片路徑和選中時的圖片路徑。
小任務：你知道應該如何製作一個底部沒有tabBar的小程序嗎？要讓tabBar沒有icon，應該如何配置？給tabBar添加一個position屬性，值爲top，小程序在界面上會有什麼變化？再給小程序新增幾個頁面（不添加到tabBar上），我們應該如何在模擬器看到頁面的內容？
小程序的頁面配置
使用打開一個頁面的頁面json文件，比如home的home.json，在json裏面新建一些配置信息，如下所示。
技術文檔：小程序頁面配置
{
"usingComponents": {},
"navigationBarBackgroundColor": "#ce5a4c",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小程序頁面",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
配置的屬性與值的含義我們可以結合實際的效果以及技術文檔來了解。
本文轉載自小程序技術訓練營