手机归属地查询
微信小程序练手 Demo，基本功能
查询手机归属地
根据历史记录查询
手机位数校验
界面预览
初始化
创建空白项目
新建一个空白项目
AppID 可选择无
不选择中创建 quick start 项目，而是创建空白项目，方便加深理解
基本配置
首先，创建全局配置文件 app.json
/app.json{ "pages":[ "pages/index/index" ]} 定义了首页的路径，保存之后，将会自动生成 index 的目录
pages└── index ├── index.js // 页面业务逻辑 ├── index.json // 页面配置 ├── index.wxml // 页面视图 └── index.wxss // 页面样式
现在，还缺少一个应用的入口文件，用来注册小程序
/app.jsApp({}) 到这一步，小程序初始化就完成了。
功能实现
下图来源于小程序设计指南，我们希望做出来的东西效果能与该图较为接近
页面配置
首先，我们来为页面添加顶部导航文字
/pages/index/index.json{ "navigationBarTitleText": "手机归属地查询"} 查询模块
接下里是查询模块
/pages/index/index.wxml请输入查询内容
说明
bindinput用于绑定键盘输入事件，意味着用户输入后，触发bindPhoneInput函数bindtap用于绑定点击事件，意味着用户点击按钮后，出发queryPhoneInfo函数按钮是否可点击取决于
disabled的值；
接下里是具体的功能实现，首先，我们把手机归属地查询的功能放在全局业务文件 app.js 中，方便不同页面使用
/app.jsApp({ /** * 获取手机归属地信息 */ 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.jsvar 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.jsvar 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;}