創(chuàng)建項(xiàng)目

note:
如果沒有受到邀請，選擇 “無AppID”選項(xiàng)，然后給你的項(xiàng)目取名稱，放到合適的文件目錄下面

文件

工程界面

當(dāng)我們創(chuàng)建好我們的項(xiàng)目的時(shí)候，IDE已經(jīng)為我們構(gòu)建了一些文件，并且可以看到一個(gè)簡單的頁面

工程中文件介紹

• app.js : 小程序的腳本代碼
  • 監(jiān)聽并處理小程序的生命周期函數(shù)
  • 聲明全局變量
  • 調(diào)用小程序框架提供的豐富的API

• app.json: 小程序的全局配置文件

  • 配置小程序主界面由多少個(gè)頁面組成

  • 配置小程序整體風(fēng)格

    note:
    此文件不能有任何注釋,我為了方便大家理解在下面加注釋

    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ], //兩個(gè)頁面 index 和 logs，大家可以刪掉pages/index/index來看下項(xiàng)目的運(yùn)行情況
      "window":{
        "backgroundTextStyle":"light", //文本顏色
        "navigationBarBackgroundColor": "#fff",//導(dǎo)航欄顏色
        "navigationBarTitleText": "WeChat",//項(xiàng)目名稱
        "navigationBarTextStyle":"black"//導(dǎo)航欄文本顏色
      }
    }
    

• app.wxss: 整個(gè)小程序的公共樣式表,相當(dāng)于前端編程中的 base.css

• pages： 該項(xiàng)目的頁面目錄，如果你的項(xiàng)目有多少個(gè)頁面，你就可以在里面創(chuàng)建多少個(gè)文件夾,并且在 app.json 里面配置

  • index
    • index.js : 頁面腳本代碼，處理該頁面的響應(yīng)事件
    • index.wxml : 頁面，相當(dāng)于 html,這個(gè)里面只能使用小程序提供的內(nèi)置標(biāo)簽，關(guān)于小程序內(nèi)置標(biāo)簽將在后面介紹
    • index.wxss : 頁面樣式，相當(dāng)于 css，和 css寫法沒什么區(qū)別
  • logs
    • logs.js
    • logs.json : 該頁面的配置文件，如果你想要這個(gè)頁面有單獨(dú)的呈現(xiàn)效果，可以在該頁面進(jìn)行樣式配置，它的優(yōu)先級(jí)高于app.json
    • logs.wxml
    • logs.wxss

  • 可以建很多個(gè)

    note:
    一個(gè)頁面必須要有 .js .wxml .wxss 三個(gè)文件，如果你這個(gè)界面對于全局有不一樣特點(diǎn)，我們可以創(chuàng)建一個(gè).json 文件來進(jìn)行配置

• utils : 工具庫，用于處理某些需求，如 formatTime：格式化輸出時(shí)間