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

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

1、申請註冊小程序

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

2、安裝開發工具

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

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

3、新建項目

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

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

 

 4、小程序代碼結構

　　開發目錄：　　

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

　　一、app.json

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

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

 

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

5、測試Demo

　　

　　

 

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