网页手机号抓取程序(简单的手机归属地查询实现入手，来帮助你入门小程序开发 )
优采云 发布时间: 2022-02-03 03:19网页手机号抓取程序(简单的手机归属地查询实现入手，来帮助你入门小程序开发
)
正文 | 头脑极客
本文从一个简单的手机归属地查询实现开始，帮助你开始小程序开发。
基本功能如下：
我们来看看小程序的最终效果：
创建空白项目
按照以下步骤在开发者工具中新建一个空白项目：
基本配置
首先，我们需要创建全局配置文件 app.json。
// /app.json
{
"pages":[
"pages/index/index"
]
}
在全局配置文件中，我们定义了一个页面。保存后会自动生成索引页的基目录。
pages
└── index
├── index.js // 页面业务逻辑
├── index.json // 页面配置
├── index.wxml // 页面视图
└── index.wxss // 页面样式
现在还缺少用于声明和注册小程序本体的应用程序入口文件。
// /app.js
App({
})
App() 方法用于描述小程序的全局逻辑，同时也声明和注册了一个小程序实例。至此，小程序项目目录的初始化完成。
页面配置
首先，让我们在页面中添加顶部导航文本。打开 index 文件夹中的 index.json 文件，编写如下代码并保存：
// /pages/index/index.json
{
"navigationBarTitleText": "手机归属地查询"
}
查询逻辑编写
接下来是查询模块的编写。首先是视图层代码：
// /pages/index/index.wxml
请输入查询内容
查询
在这段代码中，我们实现：
接下来是具体的功能实现。首先，我们将手机归属地查询功能封装到全局业务文件app.js中，方便不同页面调用。
// /app.js
App({
/**
* 获取手机归属地信息
*/
getPhoneInfo(phoneNum, callback) {
wx.request({
url:
'https://www.iteblog.com/api/mobile.php?mobile=' + phoneNum,
header: {
'content-type': 'application/json'
},
success: function (res) {
callback(res.data);
}
})
}
})
必须注意的是：
在页面中，实现刚才定义的两个事件：
// /pages/index/index.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
phoneNumber: null, // 查找的手机号
phoneInfo: null, // 查询结果
disabled: true // 默认不可查询
},
/**
* 键盘输入手机号事件处理
*/
bindPhoneInput(event){
this.setData({
phoneNumber: event.detail.value, // 将用户输入的手机号与页面变量进行绑定
phoneInfo: null // 清空过往查询结果
})
this.setDisabled();
},
/**
* 验证手机是否为 11 位
*/
setDisabled() {
this.setData({
disabled: (this.data.phoneNumber && this.data.phoneNumber.toString().length === 11) ? false : true
})
},
/**
* 用户点击查询处理
*/
queryPhoneInfo() {
app.getPhoneInfo(this.data.phoneNumber, data => this.setData({
phoneInfo: data
}));
}
})
需要注意的几点：
查询结果展示
接下来，在视图中显示查询结果
查询结果为：
{{phoneInfo.operator}}{{phoneInfo.province}}{{phoneInfo.city}}
{{phoneInfo.msg}}
