手机归属地查询
源码
微信小程序练手 Demo，基本功能
查询手机归属地
根据历史记录查询
手机位数校验
界面预览
初始化
创建空白项目
新建一个空白项目
AppID 可选择无
不选择中创建 quick start 项目，而是创建空白项目，方便加深理解
基本配置
首先，创建全局配置文件 app.json
/app.json
{
"pages":[
"pages/index/index"
]
}定义了首页的路径，保存之后，将会自动生成 index 的目录
pages
└── index
├── index.js // 页面业务逻辑
├── index.json // 页面配置
├── index.wxml // 页面视图
└── index.wxss // 页面样式现在，还缺少一个应用的入口文件，用来注册小程序
/app.js
App({
})到这一步，小程序初始化就完成了。
功能实现
下图来源于小程序设计指南，我们希望做出来的东西效果能与该图较为接近
页面配置
首先，我们来为页面添加顶部导航文字
/pages/index/index.json
{
"navigationBarTitleText": "手机归属地查询"
}查询模块
接下里是查询模块
/pages/index/index.wxml
请输入查询内容
说明
bindinput用于绑定键盘输入事件，意味着用户输入后，触发bindPhoneInput函数bindtap用于绑定点击事件，意味着用户点击按钮后，出发queryPhoneInfo函数按钮是否可点击取决于
disabled的值；
接下里是具体的功能实现，首先，我们把手机归属地查询的功能放在全局业务文件 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);
}
})
}
})说明
使用小程序提供的
wx.request发送请求；该函数接受两个参数，一个是手机号，另外一个则是用来处理查询结果的回调函数
在页面里面实现刚才定义的两个事件
/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
}));
}
})说明
data 用于管理该页面的数据；
this.setData()方法用于设置 data 的属性，如果直接使用this.data.phoneInfo无法改变页面状态；在页面中调用
app的方法，需要先使用getApp进行实例化，然后通过实例来访问方法；
查询结果显示
接下来在视图里面显示查询结果
/pages/index/index.wxml
查询结果为：
{{phoneInfo.operator}}{{phoneInfo.province}}{{phoneInfo.city}}
{{phoneInfo.msg}}
说明 - 使用 wx:if 与 wx:else 可以方便的根据查询结果来切换视图
最近搜索功能实现
最后是最近功能记录的功能实现，首先是视图
最近搜索
{{item}}
说明：
遍历
historyList数组用户点击某一记录时候，触发
selectHistory事件将每条手机号保存到
data-number中，selectHistory就可以获取对应的手机号了
业务逻辑
// pages/index/index.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
phoneNumber: null, // 查找的手机号
phoneInfo: null, // 查询结果
historyList: [], // 查询历史
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
}));
this.addQueryHistory(this.data.phoneNumber); // 添加搜索记录
},
/**
* 将搜索记录添加到缓存
*/
addQueryHistory(phoneNumber) {
var historyList = wx.getStorageSync('historyList') || [];
if (historyList.indexOf(phoneNumber) === -1) {
historyList.unshift(phoneNumber);
wx.setStorageSync('historyList', historyList);
}
this.setData({
historyList: historyList
})
},
/**
* 页面加载后，从缓存中读取最近搜索列表
*/
onLoad: function () {
this.setData({
historyList: wx.getStorageSync('historyList') || []
})
},
/**
* 用户点击记录之后，将其添加到输入框中
*/
selectHistory(event) {
this.setData({
phoneNumber: event.currentTarget.dataset.number,
disabled: false
})
}
})界面美化
最后，只需要美化下界面即可。
视图
请输入查询内容
查询结果为：
{{phoneInfo.operator}}{{phoneInfo.province}}{{phoneInfo.city}}
{{phoneInfo.msg}}
最近搜索
{{item}}
样式
/* pages/index/index.wxss */
page {
background-color: #EFEFF4;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.querySection {
display: flex;
flex-direction: column;
margin-top: 35px;
}
.help-text {
font-size:14pt;
color:#888888;
margin-left:15px;
}
.queryInput {
width:100%;
background-color: #FFFFFF;
height: 75px;
margin:10px auto;
}
.queryBtn {
margin:15px;
}
.items {
display: flex;
flex-wrap: wrap;
}
.item {
margin:20px;
background-color: #D2D2D2;
padding: 13px;
color:#FFFFFF;
border-radius:20px;
}
.queryRst {
margin:20px;
}