【微信小程序】目录结构

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page

app:

• app.js:必需文件，小程序逻辑

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

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

• app.json:必需文件，小程序公共配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• app.wxss:必需文件，小程序公共样式表

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

pages:

为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名

• .js:必需文件，页面逻辑
• .wxml:必需文件，页面结构
• .json:非必需文件，页面配置
• .wxss:非必需文件，页面样式