從2017年年初微信小程式出世以來，因為它不用安裝，不佔記憶體，即點即用等優良特性，受到了廣大人民群眾的喜愛，越來越多的企業、組織和團體把目光投向了微信小程式的開發，微信小程式的熱度也隨之水漲船高。

▍預設基礎結構（自動建立）

【注意】app.js、app.json、app.wxss作用於全域性所有的頁面。

1、app.js：小程式邏輯。

//app.js
App({
  onLaunch: function () {
    // 展示本地儲存能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登入
    wx.login({
      success: res => {
        // 傳送 res.code 到後臺換取 openId, sessionKey, unionId
      }
    })
    // 獲取使用者資訊
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 傳送給後臺解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})
 

2、app.json：小程式公共設定，對微信小程式進行全域性配置，決定頁面檔案的路徑【pages】、視窗表現【window】、設定網路超時時間【networkTimeout】、設定多 tab【tabBar】 等。

【注意】json檔案中不能添加註釋，否則會報錯。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的小程式",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#fff",
    "enablePullDownRefresh": false,
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "red",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
 

【pages】頁面檔案的路徑。陣列的第一項代表小程式的初始頁面。小程式中新增/減少頁面，都需要對 pages 陣列進行修改。

【window】視窗表現。

【tabBar】底部導航欄。只能配置最少2個、最多5個 tab，tab 按陣列的順序排序。

其中 list 接受一個數組，陣列中的每個項都是一個物件，其屬性值如下：

【networkTimeout】設定網路超時時間。

【debug】是否開啟除錯模式。true或者false。

3、app.wxss：小程式公共樣式表（類似於h5的css檔案，支援class、id等選擇器）。

/**app.wxss**/

/* 引入框架方式，非必需 */
@import "resources/styles/weui.wxss";

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
 

4、project.config.json：專案配置檔案。

{
	"description": "專案配置檔案。",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.0.4",
	"appid": "你的APPID",
	"projectname": "你的專案名",
	"isGameTourist": false,
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

▍頁面組成及結構

建立的頁面路徑必須新增到app.json的page中。

一個頁面一般由wxml、js、wxss、json四個檔案組成，四個檔案必須同名。

【建議】可以直接在app.json的page中新增你想要新增的頁面，此時頁面的4個檔案會自動生成，不需要手動建立。

1、wxml：必要檔案。頁面結構，其標籤與H5所使用的標籤有一定的區別。例如：H5主要的容器標籤是<div></div>，但是在wxml檔案中沒有div標籤，其主要容器標籤為<view></view>。參考示例：

<!--pages/index/introduction.wxml-->
<view class='contain'>
  <text>文字控制元件</text>
</view>

2、js：必要檔案。頁面中的資料以及函式方法處理。

3、wxss：非必要檔案。頁面的樣式檔案。當頁面wxss檔案配置的樣式與app.wxss配置的樣式出現衝突時，以頁面wxss檔案配置的樣式為準。

4、json：非必要檔案。在json檔案中僅能配置下面表格中的引數（配置詳情可參考app.json的【window】），當頁面配置的json檔案與app.json出現衝突時，以頁面配置的json檔案。