小程式入門學習—hello world
簡易教程
起步準備
- 申請賬號: 開發小程式首先需要在官網申請一個賬號，通過這個帳號你就可以管理你的小程式。點選 連線填寫相應資訊就可以申請小程式賬號。在這個小程式管理平臺，你可以管理你的小程式的許可權，檢視資料報表，釋出小程式等操作。申請成功後，登入 https://mp.weixin.qq.com ，我們可以在選單 “設定”-“開發設定” 看到小程式的 AppID 了 。小程式的 AppID 相當於小程式平臺的一個身份證，很多地方要用到。
- 安裝開發工具： 點選開發工具下載根據系統下載安裝包。安裝成功後開啟小程式開發者工具，用微信掃碼登入開發者工具就可以開始小程式開發之旅了。
第一個Hello World小程式
開啟開發工具新建專案選擇小程式專案，選擇程式碼存放的硬碟路徑，填入剛剛申請到的小程式的 AppID，給專案起一個好聽的名字，最後，勾選 “建立 QuickStart 專案” （注意: 要選擇一個空的目錄才會有這個選項），點選確定，你就得到了你的第一個小程式了，點選頂部選單編譯就可以在微信開發者工具中預覽你的第一個小程式。
小程式程式碼結構
我們建立第一個小程式的時候，可以看到專案中生成了4種不同的檔案，分別是：
.json 字尾的 JSON 配置檔案
.wxml 字尾的 WXML 模板檔案
.wxss 字尾的 WXSS 樣式檔案
.js 字尾的 JS 指令碼邏輯檔案
- json配置檔案
這個檔案主要用於設定一些頁面配置，每個頁面的配置對該頁面起作用，比如page.json就是配置page頁面的樣式等，如果和全域性配置重複會以此頁面的配置為準。app.json 是當前小程式的全域性配置，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。Hello World小程式的app.json配置如下：這個檔案主要用於設定一些頁面配置，每個頁面的配置對該頁面起作用，比如page.json就是配置page頁面的樣式等，如果和全域性配置重複會以此頁面的配置為準。app.json 是當前小程式的全域性配置，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。Hello World小程式的app.json配置如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
- pages欄位 —— 用於描述當前小程式所有頁面路徑，這是為了讓微信客戶端知道當前你的小程式頁面定義在哪個目錄。陣列的第一項代表小程式的初始頁面（首頁）。小程式中新增/減少頁面，都需要對 pages 陣列進行修改。
- window欄位 —— 定義小程式所有頁面的頂部背景顏色，文字顏色定義等。
（頁面的.json只能設定 window 相關的配置項，以決定本頁面的視窗表現，所以無需寫 window 這個鍵。）
工具配置 project.config.json：小程式開發者工具在每個專案的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個檔案，當你重新安裝工具或者換電腦工作時，你只要載入同一個專案的程式碼包，開發者工具就自動會幫你恢復到當時你開發專案時的個性化配置，其中會包括編輯器的顏色、程式碼上傳時自動壓縮等等一系列選項。
- WXML 模板
相當於前端開發中的Html（也相當於Android中的頁面xml配置檔案），和HTML 非常相似，WXML 也是由標籤、屬性等等構成，可以理解WXML就是微信為了小程式開發而制定的一個html標準。他們的不同之處在於：
- 標籤名字有點不一樣：往往寫 HTML 的時候，經常會用到的標籤是 div, p, span，小程式的 WXML 用的標籤是 view, button, text 等等，這些標籤就是小程式給開發者包裝好的基本能力
- 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表示式：在網頁一般開發中我們往往需要在JS中直接控制DOM，從而響應使用者的行為。這樣程式碼會充斥著非常多的介面互動邏輯和程式的各種狀態變數，顯然這不是一個很好的開發模式，因此就有了 MVVM 的開發模式（例如 React, Vue），提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS 只需要管理狀態即可，然後再通過一種模板語法來描述狀態和介面結構的關係即可。小程式中就是用了這個思路，比如要把Hello World顯示在介面上，我們是這樣寫的：
WXML中：
<text>{{msg}}</text>
JS中只需管理狀態
this.setData({ msg: "Hello World" })
通過 {{ }} 的語法把一個變數繫結到介面上，稱為資料繫結。僅僅通過資料繫結還不夠完整的描述狀態和介面的關係，還需要 if/else, for等控制能力，在小程式裡邊，這些控制能力都用 wx: 開頭的屬性來表達。
- WXSS 樣式
相當於前端開發中的CSS，WXSS 具有 CSS 大部分的特性，小程式在 WXSS 也做了一些擴充和修改。
- 新增了尺寸單位。在寫 CSS 樣式時，開發者需要考慮到手機裝置的螢幕會有不同的寬度和裝置畫素比，採用一些技巧來換算一些畫素單位。WXSS 在底層支援新的尺寸單位 rpx ，小程式底層來換算即可，由於換算採用的浮點數運算，所以運算結果會和預期結果有一點點偏差。
- 提供了全域性的樣式和區域性樣式：例如hello world專案中的app.wxss和page.wxss
- WXSS 僅支援部分 CSS 選擇器
- JS 互動邏輯
在小程式裡邊，我們就通過編寫 JS 指令碼檔案來處理使用者的操作。
<view>{{ msg }}</view>
<button bindtap="clickMe">點選我</button>
點選 button 按鈕的時候，我們希望把介面上 msg 顯示成 “Hello World”，於是我們在 button 上宣告一個屬性: bindtap ，在 JS 檔案裡邊聲明瞭 clickMe 方法來響應這次點選操作：
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
在JS中可以通過小程式豐富的API呼叫很多微信提供的能力。
小程式的啟動
- 微信客戶端在開啟小程式之前，會把整個小程式的程式碼包下載到本地。
緊接著通過 app.json 的 pages 欄位就可以知道你當前小程式的所有頁面路徑:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
寫在 pages 欄位的第一個頁面就是這個小程式的首頁（開啟小程式看到的第一個頁面）。
小程式啟動之後，在 app.js 定義的 App 例項的 onLaunch 回撥會被執行:
App({
onLaunch: function () {
// 小程式啟動之後 觸發
}
})
整個小程式只有一個 App 例項，是全部頁面共享的。
- 程式與頁面
一個頁面的程式碼其實包含4個檔案，微信客戶端會首先根據xx.json配置生成一個也頁面，介面的頂部的文字顏色等都可以在這裡配置，接著會裝載xx.wxml結構和xx.wxss樣式，最後會裝載 xx.js。比如 log.js的結構大致如下：
Page({
data: { // 參與頁面渲染的資料
logs: []
},
onLoad: function () {
// 頁面渲染後 執行
}
})
Page 是一個頁面構造器，這個構造器就生成了一個頁面。在生成頁面的時候，小程式框架會把 data 資料和 log.wxml 一起渲染出最終的結構，於是就得到了你看到的小程式的樣子。在渲染完介面之後，頁面例項就會收到一個 onLoad 的回撥，你可以在這個回撥處理你的邏輯。
-
元件
小程式提供了很多類似html中div、p等的標籤元件，如顯示地圖只需寫<map></map>標籤。使用元件的時候，還可以通過屬性傳遞值給元件，讓元件可以以不同的狀態去展現<map longitude="廣州經度" latitude="廣州緯度"></map>小程式提供了很多類似html中div、p等的標籤元件，如顯示地圖只需寫<map></map>標籤。使用元件的時候，還可以通過屬性傳遞值給元件，讓元件可以以不同的狀態去展現<map longitude="廣州經度" latitude="廣州緯度"></map>
元件的內部行為也會通過事件的形式讓開發者可以感知，例如使用者點選了地圖上的某個標記，你可以在 js 編寫 markertap 函式來處理：
<map bindmarkertap="markertap" longitude="廣州經度" latitude="廣州緯度"></map> -
API
為了讓開發者可以很方便的調起微信提供的能力，例如獲取使用者資訊、微信支付等等，小程式提供了很多 API 給開發者去使用。需要注意的是：多數 API 的回撥都是非同步，所以要注意處理好程式碼邏輯的非同步問題。