小程序【笔记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配置

这个比较简单，略过。