查看“小程序框架及文件介绍”的源代码

==小程序框架介绍==

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

[[文件:wx1-51.png]]

===视图层 （view）===

*内容展示

*文本样式

视图层由WXML与WXSS编写。

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

WXML(WeiXin Markup language)用于描述页面的结构。

WXSS(WeiXin Style Sheet)用于描述页面的样式。

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

===逻辑层（app service）===

*业务逻辑

*数据处理

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

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

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


==小程序文件介绍==

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

===小程序注册及配置===

*入口文件

*配置文件

*全局样式

[[文件:wx1-53.png]]

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

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

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

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

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

===页面===

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

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

[[文件:wx1-52.png]]

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

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

==小程序的执行流程==
===小程序注册及配置===

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

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

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

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

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

例：

  <nowiki>
 "pages":[
    "pages/index/index", 
    "pages/test/test",
    "pages/threee/threee",
    "pages/logs/logs"
  ],</nowiki>

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

==json文件介绍==
全局配置文件，局部配置文件
===特点===

*轻量级的数据交换格式

*直观理解

*便于修改

===结构===

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

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

*键要用双引号括起来，

例1：

 <nowiki>
{
  "firstName": "Brett", 
  "lastName": "McLaughlin"
}   </nowiki>

例2：

 <nowiki>
"conversation": {
	"current": -1,
	"list": []
},</nowiki>

例3：

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