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配置

这个比较简单，略过。

小程序【笔记001】框架和配置文件相关推荐

wx小程序笔记（1）
wx小程序笔记第一章:小程序前奏第一节:账号和软件第二章:小程序基础第一节:项目结构第二节:配置第三节:WXML语法数据绑定(js数据) 条件渲染(判断) 列表渲染(循环) wx:key ...
微信小程序-04-详解介绍.json 配置文件
致我自己:小程序开发不是简单一两天的事,一两天只能算是了解,有时候看多了会烦,感觉很熟悉了,其实只是对表面进行了解,对编程却知之甚少,小程序开发不是简单的改模板,一两天很多部分改模板可能都做不到,坚持 ...
初尝微信小程序2-基本框架
基本框架: .wxml :页面骨架 .wxss :页面样式 .js :页面逻辑描述一些行为 .json :页面配置创建一个小程序之后,app.js,app.json,app.wxss是必须的 ...
wx小程序笔记（2）
wx小程序笔记第三章:常用组件第一节:scroll-view组件 view: scroll-view: 设置横向滚动: 设置竖向滚动: scrolltoupper和scrolltolower事件: ...
八一、 mpvue-使用介绍（美团团队开发的语法类似 vue的小程序的前端框架）
1. mpvue-介绍 mpvue 是美团团队开发的语法类似 Vue.js 的小程序的前端框架官网开发文档 1.1. 主要特性主要有以下特性彻底的组件化开发能力:提高代码复用性完整的 Vue ...
微信小程序笔记（三）Wepy使用记录—Stylus预编译基本使用
Wepy使用记录-Stylus预编译基本使用坏境搭建请前往wepy框架官网淘宝 NPM 镜像 wepy新建wpy初始化模板参考创建空项目使用wepy init empty 项目名称命令来创 ...
微信小程序python自动化测试_微信小程序的自动化测试框架
微信小程序的自动化测试框架微信发布了小程序的自动化测试框架Minium,提供了多种运行验证方式,其特点: 支持一套脚本,iOS & Android & 模拟器,三端运行提供丰富的页 ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
小程序开发提示没有npm路径_百度小程序三个框架的各自的特点
小程序跨平台解决方案方面有Taro.Mpvue.WePY这3个平台,他们各有特点,优势不相上下,他们也在不断不停的迭代更新,都拥有大量的开发者支持,百度也拥抱三方框架,跟他们一起合作,来同步促进小程序 ...

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