开发 | 只需 10 分钟，教你做一款查询类小程序

文 | 心智极客

本文从一个简单的手机归属地查询实现入手，来帮助你入门小程序开发。

基本功能如下：

• 查询手机归属地
• 根据历史记录查询
• 手机位数校验

我们来看一下小程序的最终效果：

创建空白项目

按照以下步骤，在开发者工具中新建一个空白项目：

• AppID 可选择无。
• 取消选择选择创建 quick start 项目。在这里，我们创建空白项目，目的是加深对小程序结构的理解。

基本配置

首先，我们需要创建全局配置文件 app.json。

在全局配置文件中，我们定义了一个页面。保存之后，将会自动生成 index 页面的基本目录。

现在，还缺少一个应用的入口文件，用来声明和注册小程序本体。

App() 方法用于描述小程序的全局逻辑，同时会声明和注册一个小程序实例。到这一步，小程序项目目录初始化工作就完成了。

页面配置

首先，我们来为页面添加顶部导航文字。打开 index 文件夹下的 index.json 文件，编写以下代码并保存：

查询逻辑编写

接下来是查询模块的编写。首先是视图层代码：

在这段代码中，我们实现了：

• bindinput 用于绑定键盘输入事件。用户输入时，将会调用绑定的 bindPhoneInput 函数。
• bindtap 用于绑定点击事件。用户点击按钮后，将会调用绑定的 queryPhoneInfo 函数。
• 按钮是否可点击，取决于 disabled 的值。

接下来，是具体的功能实现。首先，我们把手机归属地查询的功能封装到全局业务文件 app.js 中，方便不同页面调用。

需要注意的是：

• 小程序使用微信提供的 wx.request 接口来发送请求。
• 该函数接受两个参数，一个是手机号，另外一个则是回调函数，用来处理查询的结果。

在页面里，实现刚才定义的两个事件：

几个需要注意的点：

• data 用于管理该页面的数据。
• this.setData() 方法用于设置 data 的属性。直接使用 this.data.phoneInfo 是无法改变页面状态的。
• 在页面中调用 app.js 内的方法，需要先使用 getApp() 函数进行实例化，然后通过实例来访问方法。

查询结果显示

接下来在视图里面显示查询结果：

在这里，我们使用 wx:if 与 wx:else，来方便地根据查询结果来切换视图。

最近搜索功能的实现

最后是最近功能记录的功能实现。首先是视图层的代码：

在这段代码中，我们实现了：

• 遍历 historyList 数组。
• 用户点击某一记录时候，触发 selectHistory 事件。
• 将每条手机号保存到 data-number 中，selectHistory 就可以获取对应的手机号了。

接下来，是逻辑代码编写：

最后，我们只需要稍微美化下界面，小程序就完成了。

原文地址： http://www.jianshu.com/p/d062adec4f9c