目录结构

 

APP.JSON 文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 TAB 等。相当于iOS开发中的AppDelegate

 

APP.JS 是小程序逻辑部分

 

WXSS(WEIXIN STYLE SHEETS)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。

尺寸单位

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

• rem（root em）: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。
• 文件结构
  框架程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个框架程序主体部分由三个文件组成，必须放在项目的根目录，如下：

• 文件类型	必填	作用
  js	是	页面逻辑
  json	否	页面配置
  wxss	否	页面样式表
  wxml	是	页面结构

• 注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。
• pages
  接收一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。 文件名不需要写文件后缀，因为框架会自动去寻找路径.json、.js、.wxml、.wxss的四个文件进行整合。
  window
  用于设置小程序的状态栏、导航条、标题、窗口背景色。
  属性
  类型
  默认值
  描述
  navigationBarBackgroundColor
  HexColor
  #000000
  导航栏背景颜色，如”#000000”
  navigationBarTextStyle
  String
  white
  导航栏标题颜色，仅支持 black/white
  navigationBarTitleText
  String
  Wechat
  导航栏标题文字内容
  backgroundColor
  HexColor
  #ffffff
  窗口的背景色
  backgroundTextStyle
  String
  dark
  下拉背景字体、loading 图的样式，仅支持 dark/light
  enablePullDownRefresh
  Boolean
  false
  是否开启下拉刷新，详见页面相关事件处理函数。
  
  tabBar
  如果我们的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。 tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
  属性说明：
  属性
  类型
  必填
  默认值
  描述
  color
  HexColor
  是
   
  tab 上的文字默认颜色
  selectedColor
  HexColor
  是
   
  tab 上的文字选中时的颜色
  backgroundColor
  HexColor
  是
   
  tab 的背景色
  borderStyle
  String
  否
  black
  tabbar上边框的颜色， 仅支持 black/white
  list
  Array
  是
   
  tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
  
  其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：
  属性
  类型
  必填
  描述
  pagePath
  String
  是
  页面路径，必须在 pages 中先定义
  text
  String
  是
  tab 上按钮文字
  iconPath
  String
  是
  图片路径，icon 大小限制为40kb
  selectedIconPath
  String
  是
  选中时的图片路径，icon 大小限制为40kb
  
  
  networkTimeout
  可以设置各种网络请求的超时时间。
  属性说明：
  属性
  类型
  必填
  描述
  request
  Number
  否
  wx.request的超时时间，单位毫秒
  connectSocket
  Number
  否
  wx.connectSocket的超时时间，单位毫秒
  uploadFile
  Number
  否
  wx.uploadFile的超时时间，单位毫秒
  downloadFile
  Number
  否
  wx.downloadFile的超时时间，单位毫秒
  
  debug
  可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册、页面路由、数据更新、事件触发。可以帮助开发者快速定位一些常见的问题。
  page.json
  每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写window这个键，如：
  {
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
  }
  注册程序
  App
  App()函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。 object参数说明：
  属性
  类型
  描述
  触发时机
  onLaunch
  Function
  生命周期函数–监听小程序初始化
  当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  onShow
  Function
  生命周期函数–监听小程序显示
  当小程序启动，或从后台进入前台显示，会触发 onShow
  onHide
  Function
  生命周期函数–监听小程序隐藏
  当小程序从前台进入后台，会触发 onHide
  其他
  Any
  开发者可以添加任意的函数或数据到 Object 参数中，用this可以访问
   
  
  前台、后台定义：
  当用户点击左上角关闭，或者按了设备Home键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。
  示例代码：
  App({
  onLaunch: function() {
  // Do something initial when launch.
  },
  onShow: function() {
  // Do something when show.
  },
  onHide: function() {
  // Do something when hide.
  },
  globalData: 'I am global data'
  })
  App.prototype.getCurrentPage() getCurrentPage()函数用于获取当前页面的实例。 getApp() 我们提供了全局的getApp()函数，可以获取到小程序实例。
  // other.js
  var appInstance = getApp()
  console.log(appInstance.globalData) // I am global data

• 文件	必填	作用
  app.js	是	小程序逻辑
  app.json	是	小程序公共设置
  app.wxss	否	小程序公共样式表

  一个框架页面由四个文件组成，分别是：