微信小程序开发小程序框架及文件目录介绍

2019-12-1810:35:27

逻辑层初步介绍

除了视图层（即我们所看到的页⾯），⼩程序逻辑层各部分的功能如下：

index.js 逻辑代码

index.json 页⾯配置⽂件index.wxml 页⾯结构

index.wxss 表⽰index.wxml结构的样式

app.js app.json app wxss的作⽤与index是类似的，但它们作⽤于全局在后续的课程中我们将对逻辑层进⾏更深⼊的讲解。⼩程序框架及⽂件⽬录介绍

⼩程序框架介绍

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

视图层 （view）内容展⽰⽂本样式

视图层由WXML与WXSS编写。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language)⽤于描述页⾯的结构。 WXSS(WeiXin Style Sheet)⽤于描述页⾯的样式。 组件(Component)是视图的基本组成单元。

逻辑层（app service）业务逻辑数据处理

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

逻辑层将数据进⾏处理后发送给视图层，同时接受视图层的事件反馈。 每个页⾯有独⽴的作⽤域，并提供模块化能⼒。

⼩程序⽂件介绍

⼩程序⽂件包含⼀个描述整体程序的app和多个描述各⾃页⾯的page.

页⾯

⼀个页⾯由四个⽂件组成，如下所⽰：

index(默认)

⼩程序注册及配置⼊⼝⽂件配置⽂件全局样式

app.js⽂件，⽤来定义⼩程序的全局数据和函数，控制、监听⼩程序的全⽣命周期。在这⾥可以见到的全局函数有onlaunch(监听⼩程序初始化)，onshow(监听⼩程序显⽰),onhide(监听⼩程序隐藏)等。app.js中还可以定义⼀些全局变量，其他页⾯引⽤app.js⽂件后就可以直接使⽤这个⽂件中的函数和变量。app.json是配置⽂件，可以配置以下信息：页⾯路径，窗⼝信息，标签导航，⽹络超时等。app.wxss，类似于css，⽤于配置各种样式project.config.json⽤于保存配置信息。

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

⼩程序的执⾏流程⼩程序注册及配置

注册应⽤ app.js全局配置 app.json设置样式 app.wxss

⼯具配置 project.config.json页⾯渲染执⾏ - app.json主页⾯（index）从页⾯（index2）⽇志信息（logs）json⽂件介绍特点

轻量级的数据交换格式直观理解便于修改结构

⽂件数据被包裹在⼀个⼤括号中 {}

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