微信小程序开发1——框架主体文件

微信小程序开发1——框架主体文件

一、 框架

​ 微信小程序框架将整个系统划分为视图层和逻辑层。

​ 视图层由框架设计标签语言WXML和用于描述WXML组件样式的WXSS组成，类似于HTML和CSS的关系；逻辑层框架由JavaScript编写。接近HTML+CSS+JavaScript的前端开发模式。

​ 一个页面由app.wxml、app.wxss、app.js、和app.json的文件组成，分别控制页面的结构、样式、逻辑和配置。其中app.wxml和app.js文件是必须的。

二、 框架主体文件

1.配置文件（app.json）

​ app.json为小程序公共配置，配置小程序全局变量，在程序加载时加载其配置项有：

pages	设置页面路径，必填
window	设置默认页面的窗口表现
tabBar	设置菜单的表现
networkTimeout	设置网络超时时间
debug	设置是否开启debug模式，默认false

​ app.json文件内容整体结构如下：

{
//页面路径配置
"pages":[
	"页面路径/文件名1"，//如"mypages/index/index",无需后缀，自动保存
	"页面路径/文件名2"
],
//默认页面窗口设置
"window":{},
//底部tab设置
"tabBar":{},
//设置网络请求API的超时时间
"networkTimeout":{},
//是否为debug模式
"debug":false
}

（1）window配置

属性	意义
navigationBarBackgroundColor	导航栏背景颜色，值为HexColor（十六位颜色值），默认为#000000
navigationBarTextStyle	导航栏标题颜色，仅支持black、white，默认值为white
navigationBarTitleText	导航栏文字内容
backgroundColor	窗口背景色，值为HexColor（十六位颜色值），默认为#ffffff
backgroundTextStyle	下拉背景字体、loading图的样式，仅支持dark、light
enablePullDownRefresh	是否开启下拉刷新，默认为false

（2） tabBar配置

属性	意义
color	tab上文字默认颜色，值为HexColor，必填
selectedColor	tab上文字选中时的颜色，值为HexColor，必填
backgroundColor	tab背景色，值为HexColor，必填
borderStyle	tabber上边框的颜色，仅支持block、white
position	tab显示在顶部top，或底部bottom，默认底部
list：	tab的列表，必填，其值为一个数组，最少两个最多五个，每一项是一个对象，以下四项为list的属性
pagePath	页面路径，必须先在pages中定义，必填
text	tab上按钮的文字，必填
iconPath	tab上icon图片的相对路径，大小限制为40KB，必填
selectIconPath	选中时icon图片的相对路径，大小限制为40KB，必填

示例代码块：

  "tabBar": {
    "color": "#000000",
    "selectedColor": "#FFB6C1",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "black",
    "list":[
      {
        "iconPath": "图片路径.png",
        "selectedIconPath": "图片路径.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "iconPath": "图片路径.png",
        "selectedIconPath": "图片路径.png",
        "pagePath":    "pages/index/index",
        "text": "搜索"
      },
      {
        "iconPath": "图片路径.png",
        "selectedIconPath": "图片路径.png",
        "pagePath":    "pages/index/index",
        "text": "列表"
      }
  ],
  "position": "bottom"
  }

（3）networkTimeout配置

属性	意义
request	设置小程序连接超时时间，单位毫秒
connectSocket	设置wx.connectSocket超时时间，单位毫秒
uploadFile	设置wx.uploadFile超时时间，单位毫秒
downloadFile	设置wx.downloadFile超时时间，单位毫秒