微信小应用的认识

废话不多说，微信小应用的出现可谓轰动我们的眼球，那么接下来我就我个人的自学来吧微信小应用走一遍，工欲善其事必先利其器，没有好开发工具再好的本领也无济于事。我们可以在官网下微信小应用的开发软件，http://wxopen.notedown.cn/devtools/download.html在官网中根据自己电脑的系统进行下载安装。

我们先了解下左边的部分，

Console：

Console 有两大功能：

• 开发者可以在此输入和调试代码

小程序的错误输出，会显示在此处

 

就像Android的log控制台一样，在这里查看信息。例如：

 

大家已经看到这个信息已经打印出来了，你这时会问，这个是在哪里调用了它才被打印出来了呢，别急，下面我会继续介绍到，

Sources：

Sources  用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在 Sources Pannel 中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。

Network

Netwrok  用于观察和显示 request 和 socket 的请求情况用

Appdata：

Appdata  用于显示当前项目当前时刻 appdata 具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。

Wxml：

Wxml  用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以通过修改对应 wxss 属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的 wxml 代码。

这些只是调试页面，我们真正的要开发的是在编辑页面。我们先从下面说起，app.js是监听小程序的生命周期，具体的我就不指手画脚了，看官网，app.js

app.json：

（我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。

​ 每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。）这是官网给出的解释，

说白点就像Android中的清单文件，在这里面进行配置各种信息，注册一个新的页面需要在pages下注册，默认第一个配置就是程序的启动页面。

app.wxss：

是一个样式，类似于html中的class样式，在这里面是属于全局的，这是官网给出的（

WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言，用于描述WXML的组件样式。

WXSS用来决定WXML的组件应该怎么显示。

为了适应广大的前端开发者，我们的WXSS具有CSS大部分特性。 同时为了更适合开发微信小程序，我们对CSS进行了扩充以及修改。

与css相比我们扩展的特性有：

• 尺寸单位
• 样式导入

）

 

现在我们进入pages，index字面意思是程序的主入口，当然自己也可以定义自己的主入口，值得说的一点是，新建一个目录，下面必须要有三个文件，及xx.js,xx.wxml,xx.wxss,这是官网要求我们这么干的，xx.js是写js的代码的，xx.wxml是编写试图的，xx.wxss,是编写样式的。以上是我个人的手抄，我觉得学微信小应用自学就可以掌握，我个人的学习路线是花几天的时间吧js学会，然后花一两个礼拜看官网就可以基本的掌握的要点了。

 

侧滑的连接：侧滑