微信小程式入門從這裡出發（登錄註冊、開發工具、文件及結構介紹）

• 2020 年 7 月 21 日
• 筆記

(一) 準備工作

(1) 登錄註冊

• 註冊帳號：這就不談了，只需要注意使用一個全新的郵箱，別之前註冊過公眾號小程式等就可以了

  • //mp.weixin.qq.com/wxopen/waregister?action=step1

• 登錄帳號：通過郵箱密碼登錄，亦或者綁定微信後使用掃碼也是可以的

  • //mp.weixin.qq.com/

(2) 獲取 APPID

登錄後，在開發入門的階段有一個比較重要的內容需要了解，那就是 APPID，很好理解，就是這個小程式的唯一標識，就類似我們的身份證，登錄後首頁左側欄選擇【開發】，跳轉後，選擇【開發設置】就可以看到我們的 APPID

這個 APPID 要記好哈，在剛開始學習的時候，就會使用到

(3) 下載工具

在官網選擇一個合適的版本進行下載，這就是我們小程式的編譯器，這裡我選擇的是開發版，不過選擇穩定版也是可以的，針對入門並沒有太大的區別，不過穩定版可能出現的小毛病會少一些

//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等其他編輯器，你可以看到，新建一個項目後，會默認生成一個初始化的項目結構，裡面含有很多文件，其後綴格式都是我們上面介紹過的

下面我們針對一些主要的內容進行一個基本的介紹

├── 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 欄位

{
  "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 切換時顯示的對應頁面。

而一般我們想要設置出常見的效果就會選擇使用 list 進行配置

給大家舉個例子，書寫的格式就是這樣的，別忘了制定了 tabbar 一定要有在pages中設置對應的頁面哦

"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 中相同的配置項。同樣的，也有很多配置內容，看一下官網就可以了

//developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

結尾

如果文章中有什麼不足，歡迎大家留言交流，感謝朋友們的支援！

如果能幫到你的話，那就來關注我吧！如果您更喜歡微信文章的閱讀方式，可以關注我的公眾號

在這裡的我們素不相識，卻都在為了自己的夢而努力 ❤

一個堅持推送原創開發技術文章的公眾號：理想二旬不止