從零開始的微信小程序入門教程(一)

以前說要和同事一塊兒開發個微信小程序項目，如今也在界面設計，功能定位等需求上開始實施了。因此在還未正式寫項目前，打算在空閒時間學習下小程序。本意是在學習過程當中結合實踐整理出一個較爲入門且不是很厚的教程，但也很難保證時間充裕能一直寫下去。因此先開個頭留個坑，那麼本文開始先從小程序註冊到建立第一個小程序提及：

1、從註冊開始

要開發小程序天然要申請註冊一個小程序，咱們先進入微信公衆平臺註冊帳號(如有帳號則直接登陸)。

由於微信公衆號同時管理着訂閱號，公衆號以及小程序等多種帳號，因此這裏要選擇小程序帳號類型；記住，不一樣公衆號服務之間帳號不通用，因此使用註冊的郵箱不能被其它公衆號服務或者本身微信綁定過。

能夠看到上圖中我最後註冊的郵箱是新浪郵箱，由於個人QQ郵箱被本身微信綁定過了，沒法再次使用。

註冊完成後登錄，就能夠建立 本身的小程序了，這裏不累贅，請按照提示依次填寫小程序信息；在填寫完成建立小程序後，咱們能夠獲得一個小程序ID，就像每一個人的身份證ID是獨一無二同樣，每一個小程序也有獨一ID，咱們在後期小程序開發工具中會利用此ID開發你的小程序，因此這裏須要留意一下這個東西。

2、安裝開發者工具

前往官網下載微信小程序開發者工具，這裏提供了三個版本，我下載了穩定版。雙擊安裝，仍是別建議默認裝在C盤，強迫症。安裝完成後雙擊啓動軟件，選擇小程序；界面頂端有新建項目和導入項目兩種，這裏咱們選擇新建來到以下界面：

項目名稱：項目的名字，取個好聽的，最好仍是別取中文，這裏我就叫demo-wechat。

目錄：項目存放目錄，這裏我就在D盤新建一個空的demo-wechat文件夾存放此項目。

AppID：若是是開發咱們建立的小程序這裏就須要填寫此ID，很明顯咱們處於學習階段怎麼上手就玩本身的小程序，這裏使用測試號。

開發模式：選擇小程序。

後端服務：暫時不會用到，選擇不使用雲服務。

語言：這裏我選擇JavaScript，若是你習慣typescript，也能夠換成此項。

好了，點擊建立按鈕！正式開啓咱們第一個小程序。

3、簡單瞭解界面與基本文件

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規則

4、部分注意點

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文件中沒法使用註釋，添加任意註釋都會引起報錯。

那麼到這裏，咱們走完了註冊小程序以及開發者工具安裝流暢，並簡單介紹了開發者工具界面，以及開發涉及的文件類型，以及文件做用，咱們成功建立了一個小程序，雖然它很簡單。

後續文章我想之前端學習的的順序來展開，從wxml+wxss寫出基本頁面，再到js數據交互與事件觸發，最後介紹小程序其它API等。畢竟咱們學習前端開發也是以先學會寫靜態頁面開始，我想這樣會更容易接受一點。