小程序入門---開發工具的使用

小程序發佈到現在已經2年零2個月了，現在越來越多的企業傾向於開發小程序。作爲一位前端開發人員，雖然對小程序有所耳聞，卻一直沒有嘗試去做。只是覺得很火的樣子，今天突然有了點興趣，就學習了一下，覺得還真不錯！下面我簡單聊一下小程序開發工具的使用以及相關入門知識。

一、申請註冊小程序

　　使用一個沒有註冊過微信公衆號和小程序的郵箱，註冊小程序。註冊地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1

二、安裝開發工具

開發工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19030621

下載完成後，打開小程序開發者工具，用微信掃碼登錄開發者工具，準備開發你的第一個小程序吧！

三、新建項目

新建項目選擇小程序項目，選擇代碼存放的硬盤路徑，填入剛剛申請到的小程序的 AppID，給你的項目起一個好聽的名字，最後，勾選 "創建 QuickStart 項目" （注意: 你要選擇一個空的目錄纔會有這個選項），點擊確定，你就得到了你的第一個小程序了，點擊頂部菜單編譯就可以在微信開發者工具中預覽你的第一個小程序。

點擊確定後，就可以看見自己的第一個小程序了。開發工具上有模擬器、編輯器和調試器。每次編輯完代碼保存後，頁面會自動刷新。體驗還不錯。

 

 四、小程序代碼結構

　　開發目錄：　　

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

　　1、app.json

　　　　這是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等

{
  "pages": ["pages/index/index", "pages/logs/logs"],  // 頁面配置
  "window": {
    "backgroundTextStyle": "light", // 下拉 loading 的樣式，僅支持 dark / light
    "navigationBarBackgroundColor": "#fff",  //導航欄背景顏色 支持16進制
    "navigationBarTitleText": "WeChat", // 導航欄標題文字內容
    "navigationBarTextStyle": "black"   // 導航欄標題顏色，僅支持 black / white
  }
}

 

2、在pages目錄下，由一個文件夾中的四個同名不同類型文件組成。.js是腳本文件，.json是配置文件，.wxss是樣式表文件，.wxml是頁面結構文件，其中json和wxss文件爲非必須（默認會繼承app的json和wxss默認設置）。

五、測試Demo

　　

　　

 

 今天就先到這，後面繼續。小程序還挺好玩的。