小程序框架及文件介绍

小程序框架介绍

小程序框架的核心是一个响应的数据绑定系统。整个系统分为两块，视图层和逻辑层

视图层 （view）

• 内容展示

• 文本样式

视图层由WXML与WXSS编写。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构,类似于网页设计中的HTML

WXSS(WeiXin Style Sheet)用于描述页面的样式, 类似于网页设计中的CSS

组件(Component)是视图的基本组成单元。

逻辑层（app service）

• 业务逻辑

• 数据处理

小程序开发框架的逻辑层是由JavaScript编写。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

每个页面有独立的作用域，并提供模块化能力。

小程序文件介绍

小程序文件包含一个描述整体程序的app和多个描述各自页面的page.

小程序注册及配置

• 入口文件

• 配置文件

• 全局样式

app.js文件，入口注册文件，用来定义小程序的全局数据和函数，控制、监听小程序的全生命周期。在这里可以见到的全局函数有onlaunch(监听小程序初始化)，onshow(监听小程序显示),onhide(监听小程序隐藏)等。app.js中还可以定义一些全局变量，其他页面引用app.js文件后就可以直接使用这个文件中的函数和变量。

app.json是配置文件，可以配置以下信息：页面路径，窗口信息，标签导航，网络超时等。

app.wxss，类似于css，用于配置各种样式

project.config.json用于保存配置信息。

sitemap.json用于控制小程序是否能够被搜索到。

页面

一个页面由四个文件组成，如下所示：

• index(默认)，也称为首页面

utils/ 存放公共脚本文件的目录

utils/utils.js 公共脚本文件，保存一些工具代码

小程序的执行流程

小程序注册及配置

• 1.系统注册应用 app.js

• 2.进行全局配置 app.json

• 3.设置全局样式 app.wxss

• 4. 进行工具配置 project.config.json

页面渲染执行

小程序运行时，就按照app.json这个全局配置文件里的顺序来渲染执行：

例：

 
 "pages":[
    "pages/index/index", 
    "pages/test/test",
    "pages/threee/threee",
    "pages/logs/logs"
  ],

运行时 ，首先执行pages/index/index页面，其他页面根据需要切换和使用。

json文件介绍

全局配置文件，局部配置文件

特点

• 轻量级的数据交换格式

• 直观理解

• 便于修改

结构

• 文件数据被包裹在一个大括号中 {}

• 通过键值对（key-value）的方式来表达数据

• 键要用双引号括起来，

例1：

{
  "firstName": "Brett", 
  "lastName": "McLaughlin"
}   

例2：

"conversation": {
	"current": -1,
	"list": []
},

例3：

{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}