小程序开发之10 分钟教你做一款查询类小程序

驰网飞飞

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

基本功能如下：

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

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

小程序开发之10 分钟教你做一款查询类小程序

创建空白项目
按照以下步骤，在开发者工具中新建一个空白项目：
· AppID 可选择无。
· 取消选择选择创建 quick start 项目。在这里，我们创建空白项目，目的是加深对小程序结构的理解。

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

小程序开发之10 分钟教你做一款查询类小程序

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

小程序开发之10 分钟教你做一款查询类小程序

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

小程序开发之10 分钟教你做一款查询类小程序

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

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

小程序开发之10 分钟教你做一款查询类小程序

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

小程序开发之10 分钟教你做一款查询类小程序

在这段代码中，我们实现了：
· bindinput 用于绑定键盘输入事件。用户输入时，将会调用绑定的 bindPhoneInput 函数。
· bindtap 用于绑定点击事件。用户点击按钮后，将会调用绑定的 queryPhoneInfo 函数。
· 按钮是否可点击，取决于 disabled 的值。

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

小程序开发之10 分钟教你做一款查询类小程序

需要注意的是：
· 小程序使用微信提供的 wx.request 接口来发送请求。
· 该函数接受两个参数，一个是手机号，另外一个则是回调函数，用来处理查询的结果。
在页面里，实现刚才定义的两个事件：

小程序开发之10 分钟教你做一款查询类小程序

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

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

小程序开发之10 分钟教你做一款查询类小程序

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

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

小程序开发之10 分钟教你做一款查询类小程序

在这段代码中，我们实现了：
· 遍历 historyList 数组。
· 用户点击某一记录时候，触发 selectHistory 事件。
· 将每条手机号保存到 data-number 中，selectHistory 就可以获取对应的手机号了。

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

小程序开发之10 分钟教你做一款查询类小程序

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

转载自：知晓君
原文链接

感谢您的阅读，服务器大本营-技术文章内容集合站，助您成为更专业的服务器管理员！