從零開始的微信小程序入門教程(一)
之前說要和同事一起開發個微信小程序項目，現在也在界面設計，功能定位等需求上開始實施了。所以在還未正式寫項目前，打算在空閒時間學習下小程序。本意是在學習過程中結合實踐整理出一個較爲入門且不是很厚的教程，但也很難保證時間充裕能一直寫下去。所以先開個頭留個坑，那麼本文開始先從小程序註冊到創建第一個小程序說起：
一、從註冊開始
要開發小程序自然要申請註冊一個小程序，我們先進入微信公衆平臺註冊賬號(若有賬號則直接登錄)。
因爲微信公衆號同時管理着訂閱號，公衆號以及小程序等多種賬號，所以這裏要選擇小程序賬號類型；記住，不同公衆號服務之間賬號不通用，所以使用註冊的郵箱不能被其它公衆號服務或者自己微信綁定過。
可以看到上圖中我最後註冊的郵箱是新浪郵箱，因爲我的QQ郵箱被自己微信綁定過了，無法再次使用。
註冊完成後登陸，就可以創建 自己的小程序了，這裏不累贅，請按照提示依次填寫小程序信息；在填寫完成創建小程序後，我們可以得到一個小程序ID，就像每個人的身份證ID是獨一無二一樣，每個小程序也有獨一ID，我們在後期小程序開發工具中會利用此ID開發你的小程序，所以這裏需要留意一下這個東西。
二、安裝開發者工具
前往官網下載微信小程序開發者工具，這裏提供了三個版本，我下載了穩定版。雙擊安裝，還是別建議默認裝在C盤，強迫症。安裝完成後雙擊啓動軟件，選擇小程序；界面頂端有新建項目和導入項目兩種，這裏我們選擇新建來到如下界面：
項目名稱：項目的名字，取個好聽的，最好還是別取中文，這裏我就叫demo-wechat。
目錄：項目存放目錄，這裏我就在D盤新建一個空的demo-wechat文件夾存放此項目。
AppID：如果是開發我們創建的小程序這裏就需要填寫此ID，很明顯我們處於學習階段怎麼上手就玩自己的小程序，這裏使用測試號。
開發模式：選擇小程序。
後端服務：暫時不會用到，選擇不使用雲服務。
語言：這裏我選擇JavaScript，如果你習慣typescript，也可以換成此項。
好了，點擊創建按鈕！正式開啓我們第一個小程序。
三、簡單瞭解界面與基本文件
1.界面入門介紹
整個微信開發工具很像我們使用谷歌打開調試欄的狀態，有很多熟悉的影子，我們一一說。
在編輯器左上角可以看到模擬器、編輯器、調試器三個綠色按鈕。它們分別對應了開發者工具的左側，也就是實時預覽區域；右上側區域，我們日常開發寫代碼管理項目目錄的地方；以及右下側，調試區域。
再往右一點，可以看到一個預覽按鈕，點擊會提供了一個有效期限的二維碼，我們可以通過微信掃碼在手機端真實預覽項目；以及右邊的真機調試，也就是在手機上調試我們的項目。
再往右邊可以看到一個版本管理。如果我們的項目想多人同時開發，開發者工具這點就比較貼心，直接提供了初始化git倉庫等功能，便於多人維護。
再往下一欄，可以看到機型模型，網絡模擬等選項，這些在谷歌控制檯調試移動端使用也比較頻繁。
2.文件類型與部分文件說明
除了開發者界面帶來的新鮮感，我們也注意到小程序代碼中的文件類型大致分爲以下四種：
.wxml：微信模板文件，類似網頁開發的html文件。
.wxss：微信樣式表文件，用於定於頁面樣式。
.js：腳本文件，代碼邏輯寫在這。
.json：靜態數據配置文件。
我們根據小程序快速生成的目錄結構分別說下不同文件的作用：
app.json---小程序全局配置文件
我們打開app.json文件，可以看到如下代碼：
{
"pages":[ //頁面數組
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light", //背景文本樣式 可選light dark
"navigationBarBackgroundColor": "#fff", //導航背景色，可定義任意顏色
"navigationBarTitleText": "WeChat", //導航標題，可定義任意文本
"navigationBarTextStyle":"black" //導航文本顏色，可選black white
}
}
此文件主要管理小程序的全局配置，包括小程序頁面路徑，界面表現(標題，背景色，字體色)，網絡超時時間，底部tab等；
這裏開發者工具幫我們快速生成的配置只包含了pages字段與windows字段。
pages字段用於描述小程序所有頁面路徑，注意，如果你刪除了此字段中的某條路徑，你得同步刪除掉對應的頁面文件夾。反之，增加頁面也是如此。
windows字段用於定於所有頁面的頂部背景顏色，文字顏色，標題等，這是一個全局的配置，修改了所有頁面都會生效。當然，我們可以在單個頁面json配置中定義獨特的風格用於覆蓋全局配置，比如讓每個頁面的頭部顏色都不一樣。查看更詳細的小程序配置
這裏我將windows字段配置修改了一部分，可以看到小程序界面發生了變化。(感覺挺好看...)
project.config.json---開發者工具配置
此文件用於定義開發者工具的個性化定製，比如界面顏色，編譯配置等等。
大家用過npm都知道下載三方庫都會生成一個package.json文件，此文件記錄了下載過得所有庫名與版本信息，如果我們換了電腦，其實不用將之前下載的文件拷貝過去，而是隻用拷貝一個package.json再次執行下載就可以復原你需要的三方庫。
那麼project.config.json類似如此，它保存了你對於開發者工具的相關配置，如果你換電腦了，你可以通過此文件直接還原你最初習慣的開發設置。查看詳細開發者工具配置
wxml模板
我們在前端開發中對頁面佈局使用的更多是div p span這樣的標籤去組成一個頁面組件。微信小程序對此對標籤進行了封裝，雖然不能使用那些熟悉的標籤，但微信小程序提供了更爲方便的例如view，text等標籤。
除了標籤變化，wxml還新增了例如wx:if類似的屬性，用過angular，vue之類框架的同學應該馬上聯想到了；確實如此，微信小程序也推行了MVVM做法，我們只用關心數據層，當數據發生變化，通過數據綁定的做法，模板中的表達式以及wx：等屬性來幫你實現視圖變化。查看更詳細的wxml語法
wxss樣式
小程序中的樣式表寫法與網頁開發類似，可以看到全局配置中和每個頁面文件夾下都存在一個wxss文件，這點與json配置一樣。我們可以在app.wxss中定義全局樣式，而在頁面下的wxss樣式中定義此頁面獨有的頁面。查看更詳細的wxss規則
四、部分注意點
1.微信小程序與網頁開發的區別
我們都知道瀏覽器渲染層與邏輯層都由同一線程處理，所以會存在堵塞的情況；但微信小程序由不同線程處理，邏輯層在jscore中。---微信有不同的線程處理渲染與邏輯
| 運行環境 | 邏輯層 | 渲染層 |
| iOS | JavaScriptCore | WKWebView |
| android | V8 | chromium定製內核 |
| 開發工具 | NWJS | Chrome WebView |
不同環境下小程序線程
我們在網頁開發中能方便操作dom bom，但微信小程序中沒有完整的瀏覽器對象，所以無法操作dom，類似JQ的框架也無法正常運行。---不能操作dom，用不了JQ
網頁開發中我們常常通過mpn引入三方庫，但jscore環境與nodejs不太相同，因此在網頁開發中npm的包一部分在微信可能無法使用。
2.關於添加頁面
pages文件夾下文的頁面數量一定得與json中的pages字段數組對應，新增頁面推薦做法是直接在pages數組中新增一條頁面路徑，保存後pages文件夾會自動生成一個新的頁面，這樣做更加方便和保險。
可以看到新增一條路徑，保存後自動新增了文件夾，非常方便。但我們刪除pages字段中的某條路徑時，文件夾不會自動刪除，所以記住手動刪除對應文件，保證兩者是對應關係。
3.注意json文件寫法
1.json文件都是被包裹在{}中，並以key-value方式展示。注意，key一定要加上雙引號，沒加雙引號，或者加了單引號都會報錯。
2.其次，json的值只能是數字，字符串(需要加雙引號)，布爾值，數組(放在[]中)，對象(放在{}中)，或者null，不支持undefined以及其它數據結構，否則會報錯。
3.json文件中無法使用註釋，添加任意註釋都會引發報錯。
那麼到這裏，我們走完了註冊小程序以及開發者工具安裝流暢，並簡單介紹了開發者工具界面，以及開發涉及的文件類型，以及文件作用，我們成功創建了一個小程序，雖然它很簡單。