前言：本文涉及小程序知识面很广很干货，各种阶段的读者来读都会找到你所需要的东西。

微信小程序的框架及工具的使用，是进行小程序开发的第一步，首先必须要理解小程序的框架配置包括app.json配置，App（）函数的使用、page()函数的使用,数据如何绑定到页面上、条件判断和列表渲染、模板的使用、import引用模板，以及include引用文件，同时还要学会工具的使用，包括Console面板、sourse面板、network面板、storage面板、Appdata面板、Wxml面板以及Sensor面板的使用

1.1app.json配置是开发小程序必会的一个功能配置，它有五个主要功能:决定页面文件路径，配置窗口的表现，配置tab标签导航，设置网络超时时间以及配置debug模式。

1.1.2app.json文件可设置配置窗口的表现，包括导航栏背景色、导航栏标题颜色、导航栏标题文字内容、窗口的背景色、下拉背景字体、loading图的样式以及是否开启下拉刷新设置。这些功能的配置都放在window这个对象里，具体代码如下。

1.1.3配置tab标签导航

微信小程序配置tab标签导航，可以配置底部标签导航和顶部标签导航，

配置顶部标签导航(具体代码如下)

界面效果图如下图所示

1.1.4设置网络超时时间

微信小程序设置网络超时时间是通过networkTimeout对象来设置的，可以设置网络请求的超时时间、WebSocket的超时时间、uploadFile文件上传超时时间和downloadFile文件下载超时时间

request:wx.request的超时时间，单位毫秒，默认为60000。
connectSocket:wx.connectSock的超时时间，单位毫秒，默认为60000。
uploadFile:wx.uploadFlie的超时时间，单位毫秒，默认为60000。
downloadFile:wx.downloadFile的超时时间，单位毫秒默认为6000。

1.1.5配置debug模式

配置debug模式是在开发者工具的控制台面板，调试信息并以info的形式给出，其信息有page的注册、页面路由、数据更新和时间触发。可以帮助开发者快速定位一些常见的问题，具体代码如下：

（1）开启debug模式，控制台面板调试信息如下

（2）没有开启debug模式，控制台的调试信息

显而易见，开启了debug模式，调试信息会更详细全面，进而更方便我们去在程序开发的过程中调试。微信小程序正式运行则需要把debug模式关闭。

1.2App函数的使用

App()函数用来注册一个微信小程序，它被放置在app.js全局文件里，可以接受object对象参数，同时还可以指定微信小程序的生命周期函数、全局函数和全局数据。具体代码如下所示

（1）onLaunch：生命周期函数。监听小程序初始化，当小程序初始化完成时，会触发onLaunch（全局只触发一次）。
（2）onShow：生命周期函数。监听小程序显示，当小程序启动，或从后台进入前台显示时，会触发onShow。
（3）onHide：生命周期函数。监听小程序隐藏，当小程序从前台进入后台时，会触发onHide。
（4）onError：错误监听函数，当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息。
（5）其他：开发者可以添加任意的函数或数据到object参数中，用this可以访问

1.3Page()函数的使用

App（）函数可用来注册一个微信小程序，同时提供生命周期函数、全局函数和全局数据，而Page函数则用来注册一个具体的页面，它在页面文件夹的js文件里，可以接受一个object参数，可以指定页面的初始数据、生命周期函数、事件处理函数等。

1.3.1初始化数据

在Page()函数的data对象里可以初始化页面要用到的函数，data会以JSON的形式由逻辑层传至渲染层，所以其数据必须是可以转化成JSON格式：字符串、数字、布尔值、对象或数组。假如界面需要姓名和性别的值，这时就可以通过data来传递数据，具体代码如下所示

界面效果图如下：

1.3.2生命周期函数

在Page()函数里也提供了一些生命周期函数，如下所示。

（1）"pgc-img">

（1）组件属性绑定是将data里的数据绑定到微信小程序的组件上，示例代码如下所示。

（2）控制属性绑定用来进行if语句条件判断，如果满足条件，则执行，否则不执行，
示例代码如下所示

（3）关键字绑定常用于组件的一些关键字，像复选框组件一样，checked关键字如果等于true，则代表选中复选框，false则代表不选中复选框，示例代码如下所示：

1.5wx:if条件判断

1.微信小程序的条件判断分为单个组件的条件判断和多个组件的条件判断
在微信小程序里，可以将wx:if="{{condition}}"应用到某个组件上，用{{condition}}"来判断是否需要渲染该代码模块，示例代码如下图所示

使用wx：elif和wx：else来添加一个else模块

2.block wx:if判断多个组件
如果想一次性控制多个组件标签，可以使用<block/>标签将多个组件包装起来，并在上面使用wx：if控制属性，下列为具体代码：

<block>并不是一个组件，它仅仅是一个包装元素，不会在任何页面渲染，只接受控制属性。

1.6wx：for列表渲染

列表渲染的使用也分为单个组件和多个组件，类似条件判断的使用。

1.wx:for控制属性绑定一个数组

我们设定index为键值对，item为变量名，示例代码如下所示：

2.block wx:for列表渲染多个组件

代码如下所示:

1.7定义和使用模板

小程序为了解决页面里重复代码的问题，提供了模板机制，把一些可以重复的代码放置在模板里进行定义代码片段，然后在不同的地方调用。

1.定义模板

建立一个存放模板的页面文件，比如将文件名命为template.wxml。template模板是通过name属性来标识的，示例代码如下所示。

这样就定义好了以head为名称的模板，然后就可以在其他页面进行使用了。

2.使用模板

定义了head为名称的模板，通过import引入到要使用模板的页面，在WXML页面文件里，使用is属性来查找head这个模板并进行使用，然后将模板所需要的data传入它所需要传入userName的值，然后就可以在页面模板里渲染出来，示例代码如下所示

1.8import引入模板

import引用可以将有模板功能的页面文件引入到要使用模板的页面，也就是说，要使用模板功能，就必须先通过import引入模板文件，然后才能找到模板进行使用。

1.import引入模板

在template.wxml中定义了一个叫person的template，示例代码如下所示：

在index.wxml中引用了template.wxml，就可以使用person模板，示例代码如下所示：

只有通过import引入模板文件，才能使用模板功能。

2.import引用作用域

import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template。
比如在second.wxml中可以使用first.wxml里的模板，因为second.wxml文件通过import引入first.wxml文件模板；在third文件中可以使用second里的模板，因为third.wxml文件通过import引入second.wxml文件模板，但是不可以使用first.wxml文件模板，因为没有引入first.wxml文件。