（一）阮一峰教程之一：初次上手
hello world 示例
- app.js
- app.json
- pages/home 子目錄
app.js - 對整個小程序進行初始化
app.js內容只有一行代碼。
App({});
app.json 配置文件，記錄項目的一些靜態配置。
app.json采用 JSON 格式。JSON 是基于 JavaScript 語言的一種數據交換格式，只有五條語法規則，非常簡單，不熟悉 JSON 的同學可以參考這篇教程。
app.json文件的內容，至少必須有一個pages屬性，指明小程序包含哪些頁面。
{
"pages": [
"pages/home/home"
]
}
上面代碼中，pages屬性是一個數組，數組的每一項就是一個頁面。這個示例中，小程序只有一個頁面，所以數組只有一項pages/home/home。
pages/home/home是一個三層的文件路徑。
- 所有頁面都放在
pages子目錄里面。 - 每個頁面有一個自己的目錄，這里是
pages下面的home子目錄，表示這個頁面叫做home。頁面的名字可以隨便起，只要對應的目錄確實存在即可。 - 小程序會加載頁面目錄
pages/home里面的home.js文件，.js后綴名可以省略，所以完整的加載路徑為pages/home/home。home.js這個腳本的文件名也可以隨便起，但是習慣上跟頁面目錄同名。
新建 pages/home 子目錄。
$ mkdir -p pages/home
然后，在這個目錄里面新建一個腳本文件home.js。該文件的內容如下。
Page({});
上面代碼中，Page()由小程序原生提供，它是一個函數，用于初始化一個頁面實例。它的參數是一個配置對象，用于設置當前頁面的行為屬性。這里是一個空對象，表示不設置任何屬性。
第五步，在pages/home目錄新建一個home.wxml文件。WXML 是微信頁面標簽語言，類似于 HTML 語言，用于描述小程序的頁面。
home.wxml的內容很簡單，就寫一行hello world。
hello world
到這一步，就算基本完成了。現在，打開小程序開發工具，導入項目目錄wechat-miniprogram-demo。如果一切正常，就可以在開發者工具里面，看到運行結果了。
WXML 標簽語言
小程序的 WXML 語言提供各種頁面標簽。下面，對 home.wxml 改造一下，加上兩個最常用的標簽。
<view>
<text>hello world</text>
</view>
上面的代碼用到了兩個標簽：<view> 和 <text>。
<view> 標簽表示一個區塊，用于跟其他區塊分隔，類似 HTML 語言的 <div> 標簽。<text> 表示一段行內文本，類似于 HTML 語言的 <span> 標簽，多個 <text> 標簽之間不會產生分行。
小程序的項目結構
總結一下，這個示例一共有4個文件，項目結構如下。
|- app.json
|- app.js
|- pages
|- home
|- home.wxml
|- home.js
這就是最簡單、最基本的小程序結構。所有的小程序項目都是這個結構，在上面不斷添加其他內容。
這個結構分成兩層：描述整體程序的頂層 app 腳本，以及描述各個頁面的 page 腳本。
項目配置文件 app.json
頂層的app.json文件用于整個項目的配置，對于所有頁面都有效。
除了前面提到的必需的pages屬性，app.json文件還有一個window屬性，用來設置小程序的窗口。window屬性的值是一個對象，其中有三個屬性很常用。
navigationBarBackgroundColor：導航欄的顏色，默認為#000000（黑色）。navigationBarTextStyle：導航欄的文字顏色，只支持black（黑色）或white（白色），默認為white。navigationBarTitleText：導航欄的文字，默認為空。
下面，改一下前面的app.json，加入window屬性。
{
"pages": [
"pages/home/home"
],
"window": {
"navigationBarBackgroundColor": "#ff0000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小程序 Demo"
}
}
上面代碼中，window屬性設置導航欄的背景顏色為紅色（#ff0000），文本顏色為白色（white），標題文字為"小程序 Demo"。
開發者工具導入項目代碼，就可以看到導航欄變掉了。
除了窗口的樣式，很多小程序的頂部或尾部，還有選項欄，可以切換到不同的選項卡。
這個選項欄，也是在app.json里面設置，使用tabBar屬性，這里就不展開了。
（二）阮一峰教程之二：頁面樣式
一、總體樣式
微信小程序允許在頂層放置一個 app.wxss 文件，里面采用 CSS 語法設置頁面樣式。這個文件的設置，對所有頁面都有效。
注意，小程序雖然使用 CSS 樣式，但是樣式文件的后綴名一律要寫成 .wxss。
打開上一篇教程的示例，在項目頂層新建一個 app.wxss 文件，內容如下。
page {
background-color: pink;
}
text {
font-size: 24pt;
color: blue;
}
上面代碼將整個頁面的背景色設為粉紅，然后將 <text> 標簽的字體大小設為 24 磅，字體顏色設為藍色。
可以看到，頁面的背景色變成粉紅，文本字體變大了，字體顏色變成了藍色。
實際開發中，直接對 <text> 標簽設置樣式，會影響到所有的文本。一般不這樣用，而是通過 class 屬性區分不同類型的文本，然后再對每種 class 設置樣式。
打開 pages/home/home.wxml 文件，把頁面代碼改成下面這樣。
<view>
<text class="title">hello world</text>
</view>
上面代碼中，我們為 <text> 標簽加上了一個 class 屬性，值為 title 。
然后，將頂層的 app.wxss 文件改掉，不再直接對 <text> 設置樣式，改成對 class 設置樣式。
page {
background-color: pink;
}
.title {
font-size: 24pt;
color: blue;
}
上面代碼中，樣式設置在 class 上面（.title），這樣就可以讓不同的 class 呈現不同的樣式。修改之后，頁面的渲染結果并不會有變化。
二、Flex 布局
各種頁面元素的位置關系，稱為布局（layout），小程序官方推薦使用 Flex 布局。不熟悉這種布局的同學，可以看看我寫的《Flex 布局教程》。
下面演示如何通過 Flex 布局，將上面示例的文本放置到頁面中央。
首先，在pages/home目錄里面，新建一個home.wxss文件，這個文件設置的樣式，只對 home 頁面生效。這是因為每個頁面通常有不一樣的布局，所以頁面布局一般不寫在全局的app.wxss里面。
然后，home.wxss文件寫入下面的內容。
page {
height: 100%;
width: 750rpx;
display: flex;
justify-content: center;
align-items: center;
}
下面解釋一下上面這段 WXSS 代碼，還是很簡單的。
height: 100%;：頁面高度為整個屏幕高度。width: 750rpx;：頁面寬度為整個屏幕寬度。
注意，這里單位是 rpx，而不是px。rpx是小程序為適應不同 寬度 的手機屏幕，而發明的一種長度單位。不管什么手機屏幕，寬度一律為750rpx。它的好處是換算簡單，如果一個元素的寬度是頁面的一半，只要寫成width: 375rpx;即可。display: flex;：整個頁面（page）采用 Flex 布局。justify-content: center;：頁面的一級子元素（這個示例是<view>）水平居中。align-items: center;：頁面的一級子元素（這個示例是<view>）垂直居中。一個元素同時水平居中和垂直中央，就相當于處在頁面的中央了。
三、WeUI
如果頁面的所有樣式都自己寫，還是挺麻煩的，也沒有這個必要。騰訊封裝了一套 UI 框架 WeUI，可以拿來用。
手機訪問 weui.io，可以看到這套 UI 框架的效果。
這一節就來看看，怎么使用這個框架的小程序版本 WeUI-WXSS，為我們的頁面加上官方的樣式。
首先，進入它的 GitHub 倉庫，在dist/style目錄下面，找到weui.wxss這個文件，將源碼全部復制到你的app.wxss文件的頭部。
然后，將page/home/home.wxml文件改成下面這樣。
<view>
<button class="weui-btn weui-btn_primary">
主操作
</button>
<button class="weui-btn weui-btn_primary weui-btn_loading">
<i class="weui-loading"></i>正在加載
</button>
<button class="weui-btn weui-btn_primary weui-btn_disabled">
禁止點擊
</button>
</view>
可以看到，加入 WeUI 框架以后，只要為按鈕添加不同的 class，就能自動出現框架提供的樣式。你可以根據需要，為頁面選擇不同的按鈕。
這個示例中，<button>元素使用了下面的class。
weui-btn：按鈕樣式的基類weui-btn_primary：主按鈕的樣式。如果是次要按鈕，就使用weui-btn_default。weui-btn_loading：按鈕點擊后，操作正在進行中的樣式。該類內部需要用<i>元素，加上表示正在加載的圖標。weui-btn_disabled：按鈕禁止點擊的樣式。
WeUI 提供了大量的元素樣式，完整的清單可以查看這里。
四、加入圖片
美觀的頁面不能光有文字，還必須有圖片。小程序的<image>組件就用來加載圖片。
打開home.wxml文件，將其改為如下代碼。
<view>
<image src="https://picsum.photos/200"></image>
</view>
開發者工具加載項目代碼，頁面的渲染結果如下，可以顯示圖片了。
<image>組件有很多屬性，比如可以通過style屬性指定樣式。
<view>
<image
src="https://picsum.photos/200"
style="height: 375rpx; width: 375rpx;"
></image>
</view>
默認情況下，圖片會占滿整個容器的寬度（這個例子是<view>的寬度），上面代碼通過style屬性指定圖片的高度和寬度（占據頁面寬度的一半），渲染結果如下。
當然，圖片樣式不一定寫在<image>組件里面，也可以寫在 WXSS 樣式文件里面。
五、圖片輪播
小程序原生的<swiper>組件可以提供圖片輪播效果。
上面頁面的圖片上面，有三個提示點，表示一共有三張圖片，可以切換顯示。
它的代碼很簡單，只需要改一下home.wxml文件即可。
<view>
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
style="width: 750rpx;">
<swiper-item>
<image src="https://picsum.photos/200"></image>
</swiper-item>
<swiper-item>
<image src="https://picsum.photos/250"></image>
</swiper-item>
<swiper-item>
<image src="https://picsum.photos/300"></image>
</swiper-item>
</swiper>
</view>
上面代碼中，<swiper>組件就是輪播組件，里面放置了三個<swiper-item>組件，表示有三個輪播項目，每個項目就是一個<image>組件。
<swiper>組件的indicator-dots屬性設置是否顯示輪播點，autoplay屬性設置是否自動播放輪播。它們的屬性值都是一個布爾值，這里要寫成{{true}}。這種{{...}}的語法，表示里面放置的是 JavaScript 代碼，這個放在下一次講解。
（三）阮一峰教程之三：腳本編程
一、數據綁定
前面的所有示例，小程序的頁面都是寫死的，也就是頁面內容不會變。但是，頁面數據其實可以通過腳本傳入，通過腳本改變頁面，實現動態效果。
小程序提供了一種特別的方法，讓頁面可以更方便地使用腳本數據，叫做"數據綁定"（data binding）。
所謂"數據綁定"，指的是腳本里面的某些數據，會自動成為頁面可以讀取的全局變量，兩者會同步變動。也就是說，腳本里面修改這個變量的值，頁面會隨之變化；反過來，頁面上修改了這段內容，對應的腳本變量也會隨之變化。這也叫做 MVVM 模式。
下面看一個例子。打開 home.js 文件，改成下面這樣。
Page({
data: {
name: '張三'
}
});
上面代碼中，Page() 方法的配置對象有一個 data 屬性。這個屬性的值也是一個對象，有一個 name 屬性。數據綁定機制規定，data 對象的所有屬性，自動成為當前頁面可以讀取的全局變量。也就是說， home 頁面可以自動讀取 name 變量。
接著，修改 home.wxml 文件，加入 name 變量。
<view>
<text class="title">hello {{name}}</text>
</view>
上面代碼中，name變量寫在 {{...}} 里面。這是小程序特有的語法，兩重大括號表示，內部不是文本，而是 JavaScript 代碼，它的執行結果會寫入頁面。因此，{{name}} 表示讀取全局變量 name 的值，將這個值寫入網頁。
注意，變量名區分大小寫，name 和 Name 是兩個不同的變量名。
