微信小程式入門從這裡出發（登入註冊、開發工具、檔案及結構介紹）
阿新 • • 發佈：2020-07-21
# (一) 準備工作
## (1) 登入註冊
- 註冊賬號：這就不談了，只需要注意使用一個全新的郵箱，別之前註冊過公眾號小程式等就可以了
- `https://mp.weixin.qq.com/wxopen/waregister?action=step1`
- 登入賬號：通過郵箱密碼登入，亦或者繫結微信後使用掃碼也是可以的
- `https://mp.weixin.qq.com/`
## (2) 獲取 APPID
登入後，在開發入門的階段有一個比較重要的內容需要了解，那就是 APPID，很好理解，就是這個小程式的唯一標識，就類似我們的身份證，登入後首頁左側欄選擇【開發】，跳轉後，選擇【開發設定】就可以看到我們的 APPID
這個 APPID 要記好哈，在剛開始學習的時候，就會使用到
## (3) 下載工具
在官網選擇一個合適的版本進行下載，這就是我們小程式的編譯器，這裡我選擇的是開發版，不過選擇穩定版也是可以的，針對入門並沒有太大的區別，不過穩定版可能出現的小毛病會少一些
`https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html`
安裝好後，直接提示掃碼登入，接著就是點選左側【小程式】，然後點選右側【新建】（一個大加號）填寫一些基本的資訊
- 專案名稱和目錄：自己看著弄就可以了
- APPID：之前頁面中找到的 APPID 在這個時候就可以用的上了，雖然你使用測試號也是可以進入的，到底後面還是要用自己的 ID 的。
- 開發模式：小程式
- 後端服務：不使用雲服務，前面還是以學習小程式本身為主，不使用此選項
- 語言：JavaScript 和 Typescript，根據自身的熟悉程式選擇即可
新建後，第一個小程式就完事了哈~
# (二) 初識小程式
## (1) 介面總覽
下面的區域就是一個初始化新建好的專案介面了，圖片中標的很清楚，每一塊的具體內容，第一次建立專案時，也可以在設定的通用設定中將預設的的工作區以及主題（淺色還是深色）根據自己的需要修改
說明：直接在小程式官方的工具中編寫程式碼也可以，不過我個人選擇配合 vscode 或 sublime 進行程式碼的編輯，在微信官方開發工具或者那個檢視結果以及控制檯的一些資訊
## (2) 檔案型別
與傳統的網頁開發有一絲小不同，微信小程式重新定義了它的描述語言，例如 wxml、wxss 等，同時還額外提供了一層 JSON 的配置檔案
**wxml（頁面結構檔案）**
- 用來書寫、構建頁面，類似傳統網頁開發的 HTML
**wxss（樣式表文件）**
- 用於制定頁面樣式，從而美化頁面，類似傳統網頁開發的 CSS
**js（指令碼檔案）**
- 用於指定一定頁面互動邏輯，就是 Javascript
**json（靜態資料配置檔案）**
- JSON 格式的配置檔案，設定程式的一些配置效果
## (3) 結構目錄
### A：總體介紹
通過官方開發工具或者vscode等其他編輯器，你可以看到，新建一個專案後，會預設生成一個初始化的專案結構，裡面含有很多檔案，其後綴格式都是我們上面介紹過的
下面我們針對一些主要的內容進行一個基本的介紹
```js
├── pages // 頁面資料夾
| ├── index // 首頁
│ | ├── index.js // 首頁邏輯指令碼檔案
│ | ├── index.json // 首頁配置檔案
│ | ├── index.wxml // 首頁頁面結構檔案
│ | ├── index.wxss // 首頁樣式檔案
| ├── logs // 日誌頁面
│ | ├── logs.js // 日誌頁面邏輯指令碼檔案
│ | ├── logs.json // 日誌頁面配置檔案
│ | ├── logs.wxml // 日誌頁面頁面結構檔案
│ | ├── logs.wxss // 日誌頁面樣式檔案
| ├── utils // 工具js檔案（第三方，可刪除）
│ | ├── util.js // 日誌頁面邏輯指令碼檔案
│ ├── app.js // 專案的全域性指令碼檔案
│ ├── app.json // 專案的全域性配置檔案
│ ├── app.wxss // 專案的全域性配置檔案
│ ├── project.config.json // 專案的開發者工具的配置
│ ├── sitemap.json // 索引配置檔案
```
具體的一些例如 wxml wxss 等的用法，會在後面提到，這裡我們還要提一下兩個內容：
### A：針對說明
**app.js：**專案的入口檔案，用來建立應用程式的物件，處理程式的生命週期
**app.json**：專案全域性的配置檔案，涉及到了頁面的路徑，介面/視窗 的表現時間，網格超時的時間，還有小程式底部的 tab 等等，還是非常重要的，初始化新建專案後，可以看到如下pages 欄位和 windows 欄位
```json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
```
- pages 欄位，是關於頁面路徑的，也就是給客戶端說明出你小程式頁面到底在哪裡
- window 欄位，對應 頁面的顏色、標題等等
- tabbar 欄位，底部 tab 欄（切換頁面）
貼一段官網關於tabbar的說明（官網的說明確實很可！）：
如果小程式是一個多 tab 應用（客戶端視窗的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。
| 屬性 | 型別 | 必填 | 預設值 | 描述 |
| :-------------- | :------- | :--- | :----- | :--------------------------------------------------------- |
| color | HexColor | 是 | | tab 上的文字預設顏色，僅支援十六進位制顏色 |
| selectedColor | HexColor | 是 | | tab 上的文字選中時的顏色，僅支援十六進位制顏色 |
| backgroundColor | HexColor | 是 | | tab 的背景色，僅支援十六進位制顏色 |
| borderStyle | string | 否 | black | tabbar 上邊框的顏色， 僅支援 `black` / `white` |
| list | Array | 是 | | tab 的列表，詳見 `list` 屬性說明，最少 2 個、最多 5 個 tab |
| position | string | 否 | bottom | tabBar 的位置，僅支援 `bottom` / `top` |
| custom | boolean | 否 | false | 自定義 tabBar，最低需要 2.5 版本 |
而一般我們想要設定出常見的效果就會選擇使用 list 進行配置
| 屬性 | 型別 | 必填 | 說明 |
| :--------------- | :----- | :--- | :----------------------------------------------------------- |
| pagePath | string | 是 | 頁面路徑，必須在 pages 中先定義 |
| text | string | 是 | tab 上按鈕文字 |
| iconPath | string | 否 | 圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支援網路圖片。 **當 `position` 為 `top` 時，不顯示 icon。** |
| selectedIconPath | string | 否 | 選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支援網路圖片。 **當 `position` 為 `top` 時，不顯示 icon。****** |
給大家舉個例子，書寫的格式就是這樣的，別忘了制定了 tabbar 一定要有在pages中設定對應的頁面哦
```json
"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home.png"
},
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my.png"
}
]
},
```
每一個小程式頁面也可以使用 `.json` 檔案來對本頁面的視窗表現進行配置。頁面中配置項在當前頁面會覆蓋 `app.json` 的 `window` 中相同的配置項。同樣的，也有很多配置內容，看一下官網就可以了
`https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html`
# 結尾
如果文章中有什麼不足，歡迎大家留言交流，感謝朋友們的支援！
如果能幫到你的話，那就來關注我吧！如果您更喜歡微信文章的閱讀方式，可以關注我的公眾號
> 在這裡的我們素不相識，卻都在為了自己的夢而努力 ❤
>
> 一個堅持推送原創開發技術文章的公眾號：理想二旬不止
![](http://image.ideal-20.cn/ideal-20/QRcode-rectangle-