從零開始到建立第一個小程式Demo。

一.註冊+登入+完善資訊+獲取AppID+安裝開發工具+建立專案

2.登入賬號

第一次登入成功後的頁面

3.填寫小程式資訊

4.獲取AppID(小程式ID)

5.下載小程式開發工具

6.建立第一個專案

二.專案架構

1. 新建立的專案架構如下

2.專案以及每個頁面配置介紹

2.1.專案配置介紹

app.json 是當前小程式的全域性配置，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等等。

{
  "pages":[
    "pages/index/index",
    "pages/mine/mine",
    "pages/people/people",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText": "首頁",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#696969",
    "selectedColor": "#339BFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/index_tab_index.png",
        "selectedIconPath": "images/index_tab_index_p.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/people/people",
        "iconPath": "images/index_tab_mission.png",
        "selectedIconPath": "images/index_tab_mission_p.png",
        "text": "朋友"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/index_tab_archives.png",
        "selectedIconPath": "images/index_tab_archives_p.png",
        "text": "個人"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
 

3.建立Demo

3.1.建立三個頁面並在app.json中配置

3.2.配置

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

3.3.tab 實現

3.3.1.首先 建立 images資料夾 存放專案 中用到的圖片。

建立方法 

  找到專案在本地的路徑

 

然後在專案的根目錄上直接建立images資料夾

 然後到專案中檢視

這樣 images 資料夾就建立 完成了。然後將需要的圖片直接複製到images資料夾下即可。

圖片路徑

app.json配置

{
  "pages":[
    "pages/index/index",
    "pages/mine/mine",
    "pages/people/people"
  ],
  "window":{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText": "首頁",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#696969",
    "selectedColor": "#339BFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/index_tab_index.png",
        "selectedIconPath": "images/index_tab_index_p.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/people/people",
        "iconPath": "images/index_tab_mission.png",
        "selectedIconPath": "images/index_tab_mission_p.png",
        "text": "朋友"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/index_tab_archives.png",
        "selectedIconPath": "images/index_tab_archives_p.png",
        "text": "個人"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

效果

至此一個非常簡單的小程式Demo就完成了。