image

(一) 準(zhǔn)備工作

(1) 登錄注冊

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

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

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

  • https://mp.weixin.qq.com/

image

(2) 獲取 APPID

登錄后趾断，在開發(fā)入門的階段有一個比較重要的內(nèi)容需要了解，那就是 APPID吩愧，很好理解芋酌，就是這個小程序的唯一標(biāo)識，就類似我們的身份證雁佳，登錄后首頁左側(cè)欄選擇【開發(fā)】脐帝，跳轉(zhuǎn)后，選擇【開發(fā)設(shè)置】就可以看到我們的 APPID

image

這個 APPID 要記好哈糖权，在剛開始學(xué)習(xí)的時候堵腹，就會使用到

image

(3) 下載工具

在官網(wǎng)選擇一個合適的版本進行下載，這就是我們小程序的編譯器星澳，這里我選擇的是開發(fā)版疚顷，不過選擇穩(wěn)定版也是可以的，針對入門并沒有太大的區(qū)別禁偎，不過穩(wěn)定版可能出現(xiàn)的小毛病會少一些

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安裝好后腿堤，直接提示掃碼登錄，接著就是點擊左側(cè)【小程序】如暖，然后點擊右側(cè)【新建】（一個大加號）填寫一些基本的信息

• 項目名稱和目錄：自己看著弄就可以了
• APPID：之前頁面中找到的 APPID 在這個時候就可以用的上了笆檀，雖然你使用測試號也是可以進入的，到底后面還是要用自己的 ID 的装处。
• 開發(fā)模式：小程序
• 后端服務(wù)：不使用云服務(wù)误债，前面還是以學(xué)習(xí)小程序本身為主，不使用此選項
• 語言：JavaScript 和 Typescript妄迁，根據(jù)自身的熟悉程序選擇即可

image

新建后寝蹈，第一個小程序就完事了哈~

(二) 初識小程序

(1) 界面總覽

下面的區(qū)域就是一個初始化新建好的項目界面了，圖片中標(biāo)的很清楚登淘，每一塊的具體內(nèi)容箫老，第一次創(chuàng)建項目時，也可以在設(shè)置的通用設(shè)置中將默認(rèn)的的工作區(qū)以及主題（淺色還是深色）根據(jù)自己的需要修改

說明：直接在小程序官方的工具中編寫代碼也可以黔州，不過我個人選擇配合 vscode 或 sublime 進行代碼的編輯耍鬓，在微信官方開發(fā)工具或者那個查看結(jié)果以及控制臺的一些信息

image

(2) 文件類型

與傳統(tǒng)的網(wǎng)頁開發(fā)有一絲小不同，微信小程序重新定義了它的描述語言流妻，例如 wxml牲蜀、wxss 等，同時還額外提供了一層 JSON 的配置文件

wxml（頁面結(jié)構(gòu)文件）

• 用來書寫绅这、構(gòu)建頁面涣达，類似傳統(tǒng)網(wǎng)頁開發(fā)的 HTML

wxss（樣式表文件）

• 用于制定頁面樣式，從而美化頁面，類似傳統(tǒng)網(wǎng)頁開發(fā)的 CSS

js（腳本文件）

• 用于指定一定頁面交互邏輯度苔，就是 Javascript

json（靜態(tài)數(shù)據(jù)配置文件）

• JSON 格式的配置文件匆篓，設(shè)置程序的一些配置效果

(3) 結(jié)構(gòu)目錄

A：總體介紹

通過官方開發(fā)工具或者vscode等其他編輯器，你可以看到寇窑，新建一個項目后鸦概，會默認(rèn)生成一個初始化的項目結(jié)構(gòu)，里面含有很多文件甩骏，其后綴格式都是我們上面介紹過的

image

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

├── pages                             // 頁面文件夾
|   ├── index                         // 首頁
│   |   ├── index.js                  // 首頁邏輯腳本文件
│   |   ├── index.json                // 首頁配置文件
│   |   ├── index.wxml                // 首頁頁面結(jié)構(gòu)文件
│   |   ├── index.wxss                // 首頁樣式文件

|   ├── logs                          // 日志頁面
│   |   ├── logs.js                   // 日志頁面邏輯腳本文件
│   |   ├── logs.json                 // 日志頁面配置文件
│   |   ├── logs.wxml                 // 日志頁面頁面結(jié)構(gòu)文件
│   |   ├── logs.wxss                 // 日志頁面樣式文件

|   ├── utils                         // 工具js文件（第三方窗市，可刪除）
│   |   ├── util.js                   // 日志頁面邏輯腳本文件

│   ├── app.js                        // 項目的全局腳本文件
│   ├── app.json                      // 項目的全局配置文件
│   ├── app.wxss                      // 項目的全局配置文件
│   ├── project.config.json           // 項目的開發(fā)者工具的配置
│   ├── sitemap.json                  // 索引配置文件

具體的一些例如 wxml wxss 等的用法，會在后面提到横漏，這里我們還要提一下兩個內(nèi)容：

A：針對說明

app.js：項目的入口文件谨设，用來創(chuàng)建應(yīng)用程序的對象熟掂，處理程序的生命周期

app.json：項目全局的配置文件缎浇，涉及到了頁面的路徑，界面/窗口 的表現(xiàn)時間赴肚，網(wǎng)格超時的時間素跺，還有小程序底部的 tab 等等，還是非常重要的誉券，初始化新建項目后指厌，可以看到如下pages 字段和 windows 字段

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

• pages 字段，是關(guān)于頁面路徑的踊跟，也就是給客戶端說明出你小程序頁面到底在哪里

• window 字段踩验，對應(yīng) 頁面的顏色、標(biāo)題等等

• tabbar 字段商玫，底部 tab 欄（切換頁面）

貼一段官網(wǎng)關(guān)于tabbar的說明（官網(wǎng)的說明確實很可；丁）：

如果小程序是一個多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現(xiàn)拳昌，以及 tab 切換時顯示的對應(yīng)頁面袭异。

image

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

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

"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 文件來對本頁面的窗口表現(xiàn)進行配置睬辐。頁面中配置項在當(dāng)前頁面會覆蓋 app.json 的 window 中相同的配置項。同樣的宾肺，也有很多配置內(nèi)容溯饵，看一下官網(wǎng)就可以了

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

結(jié)尾

如果文章中有什么不足，歡迎大家留言交流锨用，感謝朋友們的支持丰刊！

如果能幫到你的話，那就來關(guān)注我吧增拥！如果您更喜歡微信文章的閱讀方式啄巧，可以關(guān)注我的公眾號

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

一個堅持推送原創(chuàng)開發(fā)技術(shù)文章的公眾號：理想二旬不止

image