小程序学习 1 结构框架&配置

detail

框架

| 视图描述语言 | WXML&WXSS |
|逻辑层框架|基于Java Script|

框架提供了视图与逻辑层两层间的数据传输和事件系统

一个小程序的完整结构

主体

文件名	是否必要	功能
app.js	Y	逻辑
app.json	Y	公共设置
app.wxss	N	公共样式表

---

页面

文件名	是否必要	功能
js	Y	页面逻辑
wxml	Y	页面结构
wxss	N	页面样式表
json	N	页面配置

这四个文件需要相同的文件名个路径

配置-json

app.json———全局配置

{
#pages--string_arry设置页面路径，必要
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
 #window--Object设置默认窗口（状态栏，导航条，标题，窗口背景色），非必要
  "window": {
    "navigationBarTitleText": "Demo"
  },
  #tabBar--Object设置底部tab，非必要
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
#networkTimeout--Object设置网络超时时间
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
#debug--Boolean设置是否开启debug模式
  "debug": true
}

pages

{
  "pages":[
    "pages/index/index"
    "pages/logs/logs"
  ]
}

1. Pages 接受一个数组，每一项是字符串，代表小程序的一个页面，包括【路径+文件名】（不用加后缀，框架会自动寻找）
2. 第一项表示小程序的初始页面
3. 上面程序代表如下开发目录

pages/

pages/index/index.wxml

pages/index/index.js

pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

app.js

app.json

app.wxss

window
通过各种属性，设置小程序的状态栏，导航条，标题，窗口背景色
tip: HexColor 十六进制颜色#ff0ff 表示255,0,255~

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar
客户端窗口底部顶端可以切换页面，2-5个tab可通过list配置

page.json

用.json文件对本页面窗口进行配置，直设置window相关选项

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}