微信小程序探索

什么是小程序：小程序是一种不需要下载安装既可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下既可打开应用。也体现了“用完即走” 的理念，用户不用关心是否安装了太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

为什么要出小程序：因为服务号的体验及功能，不能满足用户的需求，所以催产出小程序。

小程序 = 刚需 + 低频；

传统应用是这样的架构：



图1.传统应用结构
例如微信就是这样的：



图2.微信APP结构
慢慢的人们发明出一种混合开发的应用，例如基于phoneGap或者Cordova的，这种混合应用：



图3.混合开发应用的结构
那么其实小程序是个什么呢？其实他就类似于混合开发的应用，只不过他不是基于Cordova或者phoneGap的，他是基于微信的，在微信的基础上开发出来的一种应用，由微信给他提供的平台：



图4.小程序和微信的关系
那么微信到底给小程序提供了什么功能呢？或者说小程序都能干啥呢？我们可以搜索一个叫做“小程序示例”的小程序，这里面展示了小程序官方组件以及接口，开发人员可以利用这些组件及接口来进行小程序开发。

并且微信官方也给出了小程序的开发教程以及开发工具，下面我们新建一个小程序来给大家讲解小程序的开发结构。



图5.小程序开发工具界面.

这是我们新建的一个小程序，我们就拿这个来说说它里面这些文件都是干嘛的？怎么用的？

咱先来看最外层的三个文件：

1、app.json文件

这个文件的作用是用来写小程序的一些配置文件，目前微信官方给出了这么几个配置文件分别是：



图6.app.json文件配置表
这五个配置项分别涵盖了，页面路径，页面窗口，导航栏，网络超时以及调试的配置信息，开发者可以在app.json文件中分别对这些选项进行配置。

我们给一个例子：



图7.app.json举例
2、app.js文件

这个文件是用来写一些逻辑功能的代码，例如我们在里面创建小程序实例，定义生命周期，调用微信API，获取数据等等。

这个文件是比较重要的。

3、app.wxss文件

这是一个样式文件，在这里我们来定义全局共享样式，也就是在这定义的样式每一个页面都可以使用。这里面的代码和CSS代码比较相像。

好了外层文件介绍完了那么我们来看文件夹。

4、utils文件夹

在这个文件夹里面我们通常放一些工具类，像一些大家都能使用到的例如：计算圆面积的方法等等。

5、pages文件夹

在这个文件夹里我们可以看到里面有几个子文件夹，这里面每一个子文件夹其实都是一个页面，下面我们以logs文件夹为例讲一下里面的东西。

5.1、logs.js文件

在这个文件里我们来写logs页面的逻辑代码，如页面逻辑，功能实现等。

5.2、logs.json文件

在这个文件里面我们来配置logs页面的window选项的配置信息，在这个文件里只能配置window选项，并且配置后的信息会覆盖掉app.json中window选项的配置信息

5.3、logs.wxml文件

我们把这个文件的后缀分开就是：wxml:wei xin markup language,所以说这是微信的标签语言，在这个文件里我们来写页面的结构，就是放一些view、text、image等等这些东西，组成一个页面。我们在配置这些组件的样式时可以把logs.wxss和app.wxss里的样式配合起来用。

5.4、logs.wxss文件

我们同样把这个文件的后缀分开：wxss:wei xin style sheet,这是啥啊？这就是微信样式表，看来微信还自己开发了一套语言（啪啪啪，打脸三下，其实不就是CSS嘛！）在这个文件里面同样是用来写样式的，但是这个文件里的样式只是给这个页面用的。

啦啦啦~ 分析完了