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

微信小程序的框架及工具的使用，是进行小程序开发的第一步，首先必须要理解小程序的框架配置包括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）onLoad:生命周期函数。监听页面加载，一个页面只会调用一次。
• （2）onReady:生命周期函数。监听页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• （3）onShow:生命周期函数。监听页面显示，每次打开页面都会调用一次。
• （4）onHide:生命周期函数。监听页面隐藏，当navigateTo或底部tab切换时调用。
• （5）onUnload:生命周期函数。监听页面卸载，当redirectTo或navigateBack时调用。

1.3.3相关事件函数

在Page()函数里也提供了一些常用的函数，比如下拉刷新、页面转发事件函数。

• （1）onPullDownRefresh:下拉刷新。
• 监听用户下拉刷新事件，需要在config的window选项中开启enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh可以停止在当前页面的下拉刷新。
• （2）onShareAppMessage:用户转发。
• 只要有定义了此事件的处理函数，右上角菜单才会显示"转发"按钮。用户点击转发按钮的时候会调用，此事件需要return一个Object，用于自定义转发内容。

1.4数据绑定

WXML页面的动态数据都是来自js文件Page的data，数据绑定就是通过双大括号{{}}将变量包起来，在WXML页面里将数据值显示出来。代码示例如下

• （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文件。

1.9include引用文件

• include的引用功能是引用除外的全部代码，相当于把引用文件的代码复制过来。
• 比如每个页面都有一样的导航菜单和版权信息，这时就可以把导航菜单代码和版权信息代码都放置在一个单独的文件中，然后就可以在页面中直接使用了，并不需要重复的编写代码，同时能保持代码、页面展示的一致性。

接下来技术哥给大家介绍开发小程序最最实用的几大面板

Console面板

• Console面板可以用来在开发过程中输入调试信息的，如果代码编写有误，则会输出相应的错误

• 除了可以输出错误信息，同时也允许输入代码

Sources面板

• Sources面板可以用来显示当前项目的脚本文件，它包括两部分脚本文件：一部分是开发者自己编写的脚本文件，另一部分是工具根据开发者的脚本进行包装的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，在尾部会有require的主动调用

Network面板

• Network面板可以用来显示调用哪些文件以及这些文件调用的状态，可以看到所有调用的文件信息，包括文件名称、路径、大小、调用状态、时间等信息，包括文件的名称、路径、大小、调用状态、时间等信息

• 单击某一个调用的文件，会查看到HTTP的请求，包括请求的URL、请求的方式(GET/POST)、请求的状态（200代表成功）、IP地址等

Storage面板

• Storage面板可用来管理本地缓存数据的地方，可以使用wx.setStorage或者wx.setStorageSync这两个API将数据缓存起来，在Storage面板中就可以查看

• 在Storage面板里可以对缓存数据进行管理，既可以删除缓存的本地数据，也可以在Storage面板里通过key-value的形式添加缓存数据

Appdata面板

• Appdata面板可用来显示当前页面当时当刻的数据，并且可以查看本页面用到了哪些数据

• 除了显示当前页面的数据，还可以对当前页面数据进行编辑，修改当前页面的数据

Wxml面板

• Wxml可用来显示当前页面的代码以及展示的数据

• 同时还可以编辑代码的样式，方便进行界面的布局和样式的编写

Sensor模板

• Sensor面板可用来选择模拟地理位置

• 除了可以模拟地理位置，还可以模拟移动设备的表现，用于调试重力感应API

今天"技术哥"给大家介绍了小程序的框架及工具，大家一定不要死记硬背，重在理解，如果忘记了返回来再看一遍，这样效率是最高的！"技术哥"接下来还会给大家带来更深入更详细的小程序教程，请大家继续关注"技术哥"，做一个持续学习者！