您现在的位置: 微信小程序 > 微信小程序开发 > 入门 >

微信小程序学习摘要系列《一》目录结构,配置

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-01-27 14:49热度:
一:目录结构

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

一个MINA程序主体部分由三个文件组成,必须放在项目根目录下

app.js      必须项  小程序逻辑
app.json    必须项  小程序公共设置
app.wxss    可选项  小程序公共样式表

一个MINA页面由四个文件组成,分别是

wxml        必须项    页面结构
wxss        可选项    页面样式表
json        可选项    页面配置
js          必须项    页面逻辑

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

二:配置
app.json文件对微信小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多个tab等。
{
  "pages": [
    "page/index/index",
    "page/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "page/index/index",
      "text": "首页"
    }, {
      "pagePath": "page/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
app.json配置项列表
pages       StringArray     必选项   设置页面路径

window      Object          可选项   设置默认页面的窗口

tabBar      Object          可选项   设置底部tab的表现

networkTimeout  Object      可选项   设置网络超时时间

debug        Boolean        可选项   设置是否开启debug模式
pages
接受一个字符串数组,来指定小程序由那些页面组成,每一项代表页面的信息,数组的第一项代表小程序的初始页面。
小程序新增、减少页面,都需要对pages数组进行修改。
window 用于设置小程序的状态栏、导航条、标题、窗口背景色
navigationBarBackgroundColor  导航背景色 #000000
navigationBarTextStyle        导航栏标题颜色,仅支持 black/white
navigationBarTitleText        导航栏标题文字内容
backgroundColor               窗口的背景色#ffffff
backgroundTextStyle           下拉背景字体、loading图的样式,仅支持dark/light
enablePullDownRefresh         是否开启下拉刷新false

页面.json只能设置window相关的配置项,以决定本页面窗口表现,所以无需写window这个关键字。
tabBar
如果我们小程序是一个多tab应用,那么我们可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面。
tabBar是一个数组,只能配置最少2个,最多5个tab,tab按数组的顺序排序。

color              必选项    tab上文字默认颜色
selectedColor      必选项    tab上文字选中时的颜色
backgroundColor    必选项    tab的背景色
borderStyle        可选项    tab上边框的颜色,仅支持black/white
list               必选项    tab的列表,详见list属性

其中list接受一个数组,数组中的每一项都是一个对象,其属性如下:
pagePath           必选项    页面路径,必须在pages中先定义
text               必选项    tab上按钮文字
iconPath           必选项    图片路径,icon大小限制为40kb
selectedIconPath   必选项    选中时的图片路径,icon大小限制为40kb
networkTimeout
设置各种网络请求超时时间

request             可选项   wx.request的超时时间,单位毫秒
connectSocket       可选项   wx.connectSocket的超时时间,单位毫秒
uploadFile          可选项   wx.uploadFile的超时时间,单位毫秒
downloadFile        可选项   wx.downloadFile超时时间,单位毫秒