小程序学习 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.wxmlpages/index/index.jspages/index/index.wxsspages/logs/logs.wxmlpages/logs/logs.jsapp.jsapp.jsonapp.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"}