工欲善其事必先利其器，學(xué)習(xí)小程序開發(fā)當然需要一個好的開發(fā)工具：
微信小程序開發(fā)工具

下載完成后創(chuàng)建我們的項目：

圖片.png

選擇第一個，小程序項目：

圖片.png

AppID是個什么東西？

AppID相當于你的小程序在微信中的“身份證”，有了它，微信客戶端才能確定你的小程序“身份”，并使用微信提供的高級接口。
想要獲得 AppID，只需要在微信公眾平臺官網(wǎng)首頁（mp.weixin.qq.com）注冊小程序賬號并登錄，就可以在網(wǎng)站的“設(shè)置”-“開發(fā)者設(shè)置”中，查看到微信小程序的 AppID 了。這里我們暫時不選擇填寫AppID。

圖片.png

上面是小程序文件的代碼框架目錄，app.js、app.json、app.wxss，這三個中前兩個是必看的，前兩個相當于目錄，就好比你讀一本書，都要先看一下目錄，所以以后看別人項目的時候，首先先看app.js和app.json。

● app.js是小程序的腳本代碼。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數(shù)據(jù)。
?
● app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認標題。注意該文件不可添加任何注釋。

● app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。

app.json解析：首先既然是.json所以一定是json格式，這里面包含兩部分pages和window，固定字段，pages就是整個小程序包含的頁面，可以根據(jù)路徑查找到對應(yīng)的頁面，window就是設(shè)置一些窗口樣式，依次是配置小程序的窗口 背景字體樣式，配置導(dǎo)航條背景樣式，配置默認標題，及顏色。

現(xiàn)學(xué)現(xiàn)賣，假如我要把小程序的導(dǎo)航欄的顏色改為黃色怎么辦？在app.json中找到window,對代碼進行修改就好了，navigationBarBackgroundColor我發(fā)現(xiàn)只支持RGB？ 但是navigationBarTextStyle只支持黑色跟白色。

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#FFFF00",
    "navigationBarTitleText": "Wechat",
    "navigationBarTextStyle":" #FF0000"

顯示效果如下：

圖片.png

假如我們想添加一個頁面該咋辦？還是在app.json中找到pages，然后進行添加。比如這樣：

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/extralPage/extralPage"
  ],

添加好之后保存，系統(tǒng)會自動幫我們創(chuàng)建相應(yīng)的文件，就像這樣：

圖片.png

我們怎樣在底部制做一個條形欄呢？同樣是在app.json中使用tagBar來創(chuàng)建：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/extralPage/extralPage"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#FFFF00",
    "navigationBarTitleText": "Wechat",
    "navigationBarTextStyle":" black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

顯示的效果就像這樣：

圖片.png

首頁就是當前的頁面，而日至頁面則是記錄著我們每次修改的顯示時間的一個界面，就像這樣子：

圖片.png