1.微信開發者工具自行到網上下載即可
2.打開微信開發者工具，如圖所示：
點擊創建后，如下圖所示：
#### 項目結構
```
└─ empty-folder/ ·································· 項目所在目錄
├─ pages/ ······································ 頁面目錄
│ ├─ index/ ··································· index頁面
│ │ ├─ index.js ······························ index頁面邏輯
│ │ ├─ index.wxml ···························· index頁面結構
│ │ └─ index.wxss ···························· index頁面樣式
│ └─ logs/ ···································· logs頁面
│ ├─ logs.js ······························· logs頁面邏輯
│ ├─ logs.wxml ····························· logs頁面結構
│ └─ logs.wxss ····························· logs頁面樣式
├─ utils/ ······································ 公共腳本目錄
│ └─ util.js ·································· 工具腳本
├─ app.js ······································ 應用程序邏輯
├─ app.json ···································· 應用程序配置
└─ app.wxss ···································· 應用程序公共樣式
```
#### 頁面結構
每個頁面組件也分為四個文件組成：
##### [page-name].js
頁面邏輯文件，用於創建頁面對象，以及處理頁面生命周期控制和數據處理
##### [page-name].json
設置當前頁面工作時的window的配置，此處會覆蓋app.json中的window設置，也就是說只可以設置window中設置的屬性
##### [page-name].wxml
> wxml指的是Wei Xin Markup Language
用於定義頁面中元素結構的，語法遵循XML語法，注意是XML語法，不是HTML語法，不是HTML語法，不是HTML語法
##### [page-name].wxss
> wxml指的是Wei Xin Style Sheet
用於定義頁面樣式的，語法遵循CSS語法，擴展了CSS基本用法和長度單位（主要就是rpx響應式像素）
### 項目配置
> 相關鏈接：
> - [官方文檔](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html)
> - [生成配置文件](https://weapptool.com/start.html)
小程序中的配置文件分為兩種：
- 全局配置文件，根目錄下的app.json
- 頁面配置文件，每個頁面目錄下的[page-name].json
##### app.json
項目配置聲明文件（指定項目的一些信息，比如導航欄樣式顏色等等）
```javascript
{
// 當前程序是由哪些頁面組成的（第一項默認為初始頁面）
// 所有使用到的組件或頁面都必須在此體現
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
"pages": [ ... ],
// 應用程序窗口設置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
"window": { ... },
// 應用導航欄設置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
"tabBar": { ... },
// 網絡超時設置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
"networkTimeout": {},
// 是否在控制台輸出調試信息
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
"debug": true
}
```
##### [page-name].json
用於指定特定頁面工作時，window的設置：
```javascript
{
// 導航條背景色
"navigationBarBackgroundColor": "#35495e",
// 導航條前景色（只能是white/black）
"navigationBarTextStyle": "white",
// 導航條文本
"navigationBarTitleText": "電影 « 豆瓣",
// 窗口背景顏色
"backgroundColor": "#fff",
// 窗口前景色
"backgroundTextStyle": "dark",
// 是否開啟下拉刷新
"enablePullDownRefresh": true
}
```
### 邏輯層分析
#### 應用程序邏輯`app.js`
`app.js`作為項目主入口文件，用於創建應用程序對象
```javascript
// App函數是一個全局函數，用於創建應用程序對象
App({
// ========== 全局數據對象（可以整個應用程序共享） ==========
globalData: { ... },
// ========== 應用程序全局方法 ==========
method1 (p1, p2) { ... },
method2 (p1, p2) { ... },
// ========== 生命周期方法 ==========
// 應用程序啟動時觸發一次
onLaunch () { ... },
// 當應用程序進入前台顯示狀態時觸發
onShow () { ... },
// 當應用程序進入后台狀態時觸發
onHide () { ... }
})
```
也就是說，當應用程序啟動時會自動執行項目目錄下的`app.js`文件。
在`app.js`中通過調用全局`App([option])`方法創建一個應用程序實例。
其中通過參數指定的一些特定的方法，會在特定的執行時機去執行，也就是說通常所說的生命周期事件方法。
屬性 | 類型 | 描述 | 觸發時機
-----|------|------|---------
onLaunch | Function | 生命周期函數--監聽小程序初始化 | 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
onShow | Function | 生命周期函數--監聽小程序顯示 | 當小程序啟動，或從后台進入前台顯示，會觸發 onShow
onHide | Function | 生命周期函數--監聽小程序隱藏 | 當小程序從前台進入后台，會觸發 onHide
也可以定義任意其他的對象成員（例如：方法和屬性），這些成員可以在內部直接使用，或者外部通過獲取`app`對象調用：
屬性 | 類型 | 描述
-----|------|------
其他 | Any | 開發者可以添加任意的函數或數據到 Object 參數中，用 this 可以訪問，一般用於存放業務邏輯配置，比如：API地址
app.js
```javascript
App({
data1: '123',
data2: { message: 'hello world' },
api: {
list: 'https://github.com/zce/',
detail: 'https://github.com/zce/',
},
foo () {
return 'bar'
}
})
```
other.js
```javascript
// getApp 也是全局函數，可以在任意地方調用，用於獲取全局應用程序實例對象
var app = getApp()
console.log(app.data1)
console.log(app.data2)
console.log(app.foo())
```
#### 頁面邏輯`[page-name].js`
`[page-name].js`是一個頁面的重要組成部分，用於創建頁面對象
```javascript
// 獲取全局應用程序對象
const app = getApp()
// Page也是一個全局函數，用來創建頁面對象
Page({
// ========== 頁面數據對象（可以暴露到視圖中，完成數據綁定） ==========
data: { ... },
// ========== 頁面方法（可以用於抽象一些公共的行為，例如加載數據，也可以用於定義事件處理函數） ==========
method1 (p1, p2) { ... },
method2 (p1, p2) { ... },
// ========== 生命周期方法 ==========
// 頁面加載觸發
onLoad () { ... }
...
})
```
在應用程序執行到當前頁面時，會執行當前頁面下對應的`[page-name].js`文件。
在`[page-name].js`中通過調用全局`Page([option])`方法創建一個頁面實例。
##### `Page([option])`方法`[option]`參數說明
屬性 | 類型 | 描述
---- | ---- | ----
data | Object | 頁面的初始數據
onLoad | Function | 生命周期函數--監聽頁面加載
onReady | Function | 生命周期函數--監聽頁面初次渲染完成
onShow | Function | 生命周期函數--監聽頁面顯示
onHide | Function | 生命周期函數--監聽頁面隱藏
onUnload | Function | 生命周期函數--監聽頁面卸載
onPullDownRefreash | Function | 頁面相關事件處理函數--監聽用戶下拉動作
其他 | Any | 開發者可以添加任意的函數或數據到 object 參數中，用 this 可以訪問
### 視圖層分析
#### `[page-name].wxml`頁面結構
`WXML（WeiXin Markup Language）`是`MINA框架`設計的一套標簽語言，基於`XML`。
結合一些基礎組件、事件系統、模板數據綁定，可以構建出頁面的結構。
簡單來說：wxml ≈ xml + 事件系統 + 模板引擎
例如：
```javascript
// js
Page({
data: {
todos: [
{ text: 'JavaScript', completed: false },
{ text: 'JavaScript+', completed: false },
{ text: 'JavaScript++', completed: false }
]
},
completed (e) { ... }
})
```
```xml
<!-- wxml -->
<view>
<view wx:for="{{ todos }}">
<block wx:if="{{ !item.completed }}">
<text>{{ item.text }}</text>
<button bindtap="completed" data-item-index="{{ index }}"> √ </button>
</block>
</view>
</view>
```
#### `[page-name].wxss`頁面樣式
`WXSS（WeiXin Style Sheets）`是`MINA框架`設計的一套標簽語言，基於`XML`。
`WXSS`用來決定了在`WXML`中定義的組件應該怎么顯示。
為了適應廣大的前端開發者，我們的`WXSS`具有`CSS`大部分特性。 同時為了更適合開發微信小程序，我們對`CSS`進行了擴充以及修改。
與`CSS`相比我們擴展的特性有：
- 尺寸單位
- 樣式導入（CSS也有）
##### 尺寸單位
rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
rem（root em）: 規定屏幕寬度為20rem；1rem = (750/20)rpx 。
設備 | rpx換算px (屏幕寬度/750) | px換算rpx (750/屏幕寬度) | rem換算rpx (750/20)
---- | ------------------------ | ------------------------ | ------------------------
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx | 1rem = 37.5rpx
iPhone6 | 1rpx = 0.5px | 1px = 2rpx | 1rem = 37.5rpx
iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx | 1rem = 37.5rpx
> - **建議：** 開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標准。
> - **注意：** 在較小的屏幕上不可避免的會有一些毛刺，請在開發時盡量避免這種情況。
##### 樣式導入
使用`@import`語句可以導入外聯樣式表，`@import`后跟需要導入的外聯樣式表的相對路徑，用`;`表示語句結束。
```css
@import "common.wxss";
text {
background-color: #ff0;
}
```
##### 選擇器
目前只支持如下選擇器
選擇器 | 樣例 | 樣例描述
------ | ---- | --------
.class | .intro | 選擇所有擁有 class="intro" 的組件
#id | #firstname | 選擇擁有 id="firstname" 的組件
element | view | 選擇所有 view 組件
element, element | view | checkbox 選擇所有文檔的 view 組件和所有的 checkbox 組件
::after | view::after | 在 view 組件后邊插入內容
::before | view::before | 在 view 組件前邊插入內容
##### 全局樣式與局部樣式
定義在`app.wxss`中的樣式為全局樣式，作用於每一個頁面。在`[page-name].wxss`文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋`app.wxss`中相同的選擇器。