微信小程序详解005——逻辑层js文件（上）

回顾

在上篇文章中，我们了解到，微信小程序开发的目录结构，微信小程序的开发文件，包含描述整体程序的全局文件和多个描述各自页面的pages目录。本文中，我们将对全局文件中的app.js和页面文件中的page.js文件进行详细分析。

当然，本文不会对javascript语言本身进行介绍，我们只针对微信小程序开发过程中，js文件所起到的作用，以及常用函数等方面进行介绍。如果想深入的了解js语言，建议你参阅相关资料，系统的学习一下js语言。（后续有机会，笔者也会撰写javascript语言的系列博客）

1. 注册小程序

注册小程序是指对整个小程序的注册，所以，它一定发生在app.js文件中，如图1所示：

图1 app.js文件代码构成

从图1中可以看出，app.js文件中的代码包含在函数App（）中，App中注册了一系列的函数（图中的示例只有一个函数onLaunch）。

App(Object)就是对小程序的注册，其中Object参数就是一系列与生命周期相关的函数，除了图1中给出的onLaunch函数外，还有以下几个常用的函数：

App()函数完成对小程序的注册，其中不仅包含以上几种系统给定的回调函数，还可以自己添加自定义函数，或者全局的数据、变量等，如图2所示：

图2 App()注册函数结构

2. 注册页面

App()是对小程序全局的注册，相对应的对页面也有注册函数Page(Object)，因为是对页面的注册，所以Page()函数一定在Page.js文件中，如图3所示：

图3 page.js文件代码

从图3中可以看出，Page(Object)中注册了一系列函数，其中参数Object还有以下可选项。

看到这，读者肯定会问，为什么在图3中的previewImg1等函数，在Object参数列表中没有。因为Object除了上述给出的页面函数外，还可以是组件处理函数，其中data初始化数据，和组件处理函数，是小程序开发的重点（在后续的项目开发中，读者再慢慢体会）。下面，我们介绍一下组件处理函数。

3. 组件事件处理函数

如果我现在有一个需求，在页面中，通过.wxml文件，我们布局了一个button按钮，我们现在要求点击它，出现一系列的响应，这时就需要用到组件处理函数。

图4 组件处理函数案例分析

如图4所示，上面部分是.wxml文件代码，布局了一个view组件，并给组件添加一个监听事件viewTap，而viewTap事件的具体实现，就是在js文件中实现，如图4下所示。

（未完）

总结

本文，我们对小程序的逻辑层即js文件进行了详细的分析，重点不是介绍语法，希望对读者的学习有所帮助。

（如果对你学习有所帮助，希望能加个关注）