小程序【笔记001】框架和配置文件

1 前言:

参考微信的官方框架说明,觉得写的还是比较清楚,然后,自己有些理解写入此文:

 2 简单框架构建

 其实微信的简单框架构建如上图,

框架:

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。

 比如,通过在视图层先给出name的定义,这段表述在页面结构文件wxml文件里面

然后在逻辑层,一般表述在js文件,后面我会提到,

然后,通过setdata将视图层数据变更了。

小程序项目一般由四种类型的文件构成:

-----------------------------------------------------------------------------------

1 js 文件

js文件用来实现小程序的逻辑代码

2 json文件

json文件用来做配置文件

3 wxss文件

wxss文件用来对公共样式表格进行设置,符合W3C的CSS语法规范

4 wxml文件

是页面结构文件,用于页面可视化组件的组织和描述。

-------------------------------------------------------------------------------------

小程序由页面构成

一个页面如下:

一般一个页面由四个文件构成:

---------------------------------------------------------------------------------------

JSON 小程序的配置文件

app.json 配置的是项目, pages.json配置的是每个页面

1 pages配置

1.1 app.json 里面的Pages的配置

"page/component/pages/button/button",

"page/component/pages/checkbox/checkbox",

"page/component/pages/form/form",

"page/component/pages/input/input",

"page/component/pages/label/label",

"page/component/pages/picker/picker",

"page/component/pages/radio/radio",

"page/component/pages/slider/slider",

"page/component/pages/switch/switch",

"page/component/pages/textarea/textarea",

在微信给出的Demo例子里面的app.json,我们可以看到如上的pages的配置,对应如下:

1.2 页面json 里面的Pages的配置

微信给出的的页面json配置如下,

其中,

页面的配置目录组织如下:

Demo里面只是设置了页面的标题

1.3 window 配置

"window": {

"navigationBarTextStyle": "black",

"navigationBarTitleText": "演示",

"navigationBarBackgroundColor": "#F8F8F8",

"backgroundColor": "#F8F8F8"

},

我们看到windows的对象由上述四个数据构成

1.4 tabBar 导航栏设置

"tabBar": {

"color": "#7A7E83",

"selectedColor": "#3cc51f",

"borderStyle": "black",

"backgroundColor": "#ffffff",

"list": [{

"pagePath": "page/component/index",

"iconPath": "image/icon_component.png",

"selectedIconPath": "image/icon_component_HL.png",

"text": "组件"

}, {

"pagePath": "page/API/index",

"iconPath": "image/icon_API.png",

"selectedIconPath": "image/icon_API_HL.png",

"text": "接口"

}]

},


导航键就是指的这两个东西,导航键的设置在json里面的表述比较清楚,

"list": [{

用来设置导航按钮的各个属性

其中,

"pagePath": "page/component/index",

指向的是一个要跳转的页面

打开项目,看到在路径下面有对应的页面描述的四个文件,就是指向到这个页面了。

1.5 networkTimeout

这个是一个设置配置项目,意思见闻识别意思。

10000是10秒钟的意思

"networkTimeout": {

"request": 10000,

"connectSocket": 10000,

"uploadFile": 10000,

"downloadFile": 10000

},

1.6 Debug

"debug": false

这个其实简单,就是开启或者关闭,json的语法支持布尔逻辑

2 每个页面的单独Json配置

这个比较简单,略过。

猜你喜欢

转载自blog.csdn.net/yellow_hill/article/details/80823292
今日推荐