开发 | 只需 10 分钟，教你做一款查询类小程序
文 | 心智极客
本文从一个简单的手机归属地查询实现入手，来帮助你入门小程序开发。
基本功能如下：
查询手机归属地
根据历史记录查询
手机位数校验
我们来看一下小程序的最终效果：
创建空白项目
按照以下步骤，在开发者工具中新建一个空白项目：
AppID 可选择无
取消选择选择创建 quick start 项目。在这里，我们创建空白项目，目的是加深对小程序结构的理解。
首先，我们需要创建全局配置文件 app.json。
// /app.json
"pages/index/index"
在全局配置文件中，我们定义了一个页面。保存之后，将会自动生成 index 页面的基本目录。
└── index
├── index.js
├── index.json
├── index.wxml
└── index.wxss
现在，还缺少一个应用的入口文件，用来声明和注册小程序本体。
// /app.js
App() 方法用于描述小程序的全局逻辑，同时会声明和注册一个小程序实例。到这一步，小程序项目目录初始化工作就完成了。
首先，我们来为页面添加顶部导航文字。打开 index 文件夹下的 index.json 文件，编写以下代码并保存：
// /pages/index/index.json
"navigationBarTitleText": "手机归属地查询"
查询逻辑编写
接下来是查询模块的编写。首先是视图层代码：
// /pages/index/index.wxml
&请输入查询内容&
type="number" bindinput="bindPhoneInput" value="{{ phoneNumber }}/&
type="primary" bindtap="queryPhoneInfo" disabled="{{ disabled }}&查询&
在这段代码中，我们实现了：
bindinput 用于绑定键盘输入事件。用户输入时，将会调用绑定的 bindPhoneInput 函数。
bindtap 用于绑定点击事件。用户点击按钮后，将会调用绑定的 queryPhoneInfo 函数。
按钮是否可点击，取决于 disabled 的值。
接下来，是具体的功能实现。首先，我们把手机归属地查询的功能封装到全局业务文件 app.js 中，方便不同页面调用。
// /app.js
* 获取手机归属地信息
getPhoneInfo(phoneNum, callback) {
wx.request({
'/api/mobile.php?mobile=' + phoneNum,
'content-type': 'application/json'
success: function (res) {
callback(res.data);
需要注意的是：
小程序使用微信提供的 wx.request 接口来发送请求。
该函数接受两个参数，一个是手机号，另外一个则是回调函数，用来处理查询的结果。
在页面里，实现刚才定义的两个事件：
// /pages/index/index.js
var app = getApp();
phoneNumber: null,
phoneInfo: null,
disabled: true
bindPhoneInput(event){
this.setData({
phoneNumber: event.detail.value,
phoneInfo: null
this.setDisabled();
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.js 内的方法，需要先使用 getApp() 函数进行实例化，然后通过实例来访问方法。
查询结果显示
接下来在视图里面显示查询结果
&!-- /pages/index/index.wxml --&
wx:if="{{ phoneInfo }}&
&查询结果为：&
wx:if="{{phoneInfo.ret === 0}}&
{{phoneInfo.operator}}{{phoneInfo.province}}{{phoneInfo.city}}
wx:else& {{phoneInfo.msg}} &
在这里，我们使用 wx:if 与 wx:else，来方便地根据查询结果来切换视图。
最近搜索功能的实现
最后是最近功能记录的功能实现。首先是视图层的代码：
&最近搜索&
wx:for="{{ historyList }}
bindtap="selectHistory" data-number="{{item}}&
在这段代码中，我们实现了：
遍历 historyList 数组
用户点击某一记录时候，触发 selectHistory 事件
将每条手机号保存到 data-number 中，selectHistory 就可以获取对应的手机号了
接下来，是逻辑代码编写：
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
最后，我们只需要稍微美化下界面，小程序就完成了。
原文地址：/p/d062adec4f9c
关注「知晓程序」公众号，在微信后台回复「源码」，获取这个小程序的项目源代码。
有好的产品或者项目希望我们报道，猛戳这里
134文章总数
全新爱范儿 App 现已适配
Android 及 iPhone
使用微信扫码关注爱范儿微信公众号
关注爱范儿微信号，连接热爱，关注这个时代最好的产品。
想让你的手机好用到哭？关注这个号就够了。
关注玩物志微信号，就是让你乱花钱。1989人阅读
------前端开发（4）
这几天总是在忙，终于抽空来研究一下微信小程序，大概看了一下API,最终实现了 闪屏页动画+登录验证+Toast提示+Tab页面+手机归属地查询。
最终实现的功能
这里我就不讲解了，因为太基础了，最好是看API,我这里把Demo放到了CSDN上，可以下载！！扫码关注博主！！
链接： 密码：b621
微信公众号：可以得到解压密码！！
关注博主是一种态度，评论博主是一种欣赏！！
欢迎关注我的微博：
关注微信公众号：YangZheShare
（欢迎关注，最新最实用的技术干货分享）
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：117166次
积分：1287
积分：1287
排名：千里之外
原创：29篇
评论：65条
长期为您推荐优秀博文、开源项目、视频等，进入还有好玩的等着你。扫一扫下方二维码或搜索微信号YangZheShare即可关注：
阅读：14548
&&QQ群 &&&：
&&新浪微博 :
(2)(4)(2)(4)(1)(2)(6)(2)(1)(2)(5)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'腾讯手机管家号码鉴定小程序上线，查询号码让毕业求职更靠谱
继画风清奇的毕业照片刷屏网络后，毕业的大学生们加入了求职大军。然而毕业季的求职高峰期，也是诈骗高发的集中阶段，求职的大学生们还应提高警惕。
近日，四川陈先生就因轻信招聘信息，遭遇诈骗。陈先生在东营某小区附近的广告栏中看到一张招聘广告，&某企业单位招聘办公室文职，月薪4千元左右&。他主动去电咨询相关问题，并先后向对方转账800元的报名费和培训费，结果工作没找到，对方反而消失了。
那么，对毕业生求职者来说，如何来分辨工作职位是否靠谱呢？其实，招聘信息中留下的联系方式包含&玄机&，通过查询该联系方式的标记类型，可直接避免被骗。
腾讯手机管家近日推出的&腾讯手机管家号码鉴定&小程序，在&反诈骗信息查询&功能基础上，可以帮助求职者快速检索电话号码的标记类型。当用户搜索某招聘电话，结果显示&被XXX人标记为诈骗电话&，就可以意识到对方是骗子，及时放弃投递简历，避免风险和浪费时间。
（图：腾讯手机管家号码鉴定小程序上线）
用户打开微信小程序，直接搜索&腾讯手机管家号码鉴定&，就能进入小程序查询陌生电话号码，将原来需要多个步骤操作的流程大大简化。同时，用户在微信搜索栏输入电话号码，通过&腾讯手机管家号码鉴定&小程序技术支持，实现一键获悉该号码的标记类型，更方便快捷。
（图：微信搜索中，借助&腾讯手机管家号码鉴定&小程序识别诈骗电话）
&腾讯手机管家号码鉴定&小程序依托业内最大的安全号码数据库，让用户在无需下载APP的情况下，随时查询陌生号码，大大提升了便捷性。目前，号码鉴定小程序支持对骚扰诈骗电话等类型以及企业黄页号码进行识别。值得一提的是，用户安装腾讯手机管家APP，可以享受到骚扰拦截、安全检测等全面的服务，让手机更安全。
事实上，除了求职类场景，很多用户在收看电视购物节目或选择投资项目时，同样需要警惕其中的&猫腻&，快速打开微信或者腾讯手机管家号码鉴定小程序，对相关联系方式进行搜索，即可一键获知该电话号码的归属地、标记类型等，避开风险。
官方微博/微信
每日头条、业界资讯、热点资讯、八卦爆料，全天跟踪微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与，TechWeb官方微博期待您的关注。
↑扫描二维码
想在手机上看科技资讯和科技八卦吗？想第一时间看独家爆料和深度报道吗？请关注TechWeb官方微信公众帐号：1.用手机扫左侧二维码；2.在添加朋友里，搜索关注TechWeb。
相关的资讯有：
相关的博文有：
对于苹果来说，今天是个大日子，因为自家最新的iPhone X正式开卖，而有些用户凭借时区...
11月2日，OPPO在京举办新品发布会，正式发布旗下首款全面屏机型OPOO R11s。我们已经抢...
Razer Phone是一款不折不扣的游戏手机，配置、设计专为游戏优化，最大的特点是搭载骁...
监管文件显示，科斯罗萨西周四通知纽约时报公司董事会，他将因为出任Uber的新职位而卸...
北京时间10月30日早间消息，Uber上周五宣布任命一名新的首席法务官，帮助该公司应对诸...
一名美国法官已责令进行一项新的审判，目的是判定三星应因其抄袭苹果公司iPhone外观设...
今天，网易《终结者2：审判日》官方宣布，将于日早上11点开启安卓不删档首...
今晨，微软面向Windows 10用户发布两个正式版累积更新。其中，创意者更新Version 1703...
昨日晚间，迅雷团队宣布9.1.43版本发布，详细版本号为9.1.43.938，该版本继续进行体验...
炉石传说本周乱斗迷你战争，这是这个乱斗第3次出现了，需要自己组卡，本周的套路很多......
阴阳师奴良陆生妖气副本从哪进?阴阳师奴良陆生妖气副本是本次联动活动的副本哦入口哦!......
天天酷跑地狱战马已经上线了，那么天天酷跑地狱战马碎片怎么获得，下面就来看看把。......
《绝地求生大逃杀》中的四排是需要有一些战术策略的，这样团队合作才能发挥出较好的效......
Copyright (C)
All rights reserved.
请选择一张图片分享
要转发到新浪微博，请
要转发到QQ空间，请[转载]巧用excel查询手机归属地
vlookup大有用处啊
一般情况下，如果我们需要查询手机归属地，我们直接百度一下就可以知道手机归属地。但是如果我们要查询100个，1000个，10000个用户的手机号码归属地，那我们是不是也要一个个去百度呢？别说你用不到，如果你要做精准手机会员影响的时候，你就用得到。
今天，我跟大家分享一个通过excel就可批量获取手机号归属地的方法。原理其实很简单，手机号码归属地跟手机的前7为是相对应的，如：1516662对应的省份是山东，对应的城市是青岛，以1516662为开头的手机号的对属地都是山东青岛的。明白这个原理之后问题就好办了，以下是操作步骤：
首先，我们需要一个手机号编码归属地数据库，这个在百度文库里可以找到：
下载下来后处理一下并导入到excel中，具体格式如下：
如需下载我整理好的手机号数据库，请移步这里下载： &&&
其次，要对需要比配的手机号做处理，我们需要截取手机号码的前七位以作比配。具体需要用到mid函数，具体格式为：=MID(手机号所在的单元格,1,7)。
最后，我们需要VLOOKUP函数来做比配，这里我就不说VLOOKUP的使用方法了。具体格式如下：=VLOOKUP(F4,A:E,2,0)。
&&通过这样的方法就可以轻松地批量获取手机号的归属地了。
这里附上excel原始文件，大家可以直接下载使用，只需把手机号粘贴到【要比配的手机号】一栏，然后自动填充【截取手机号前7位】、【比配省份】、【比配城市】即可比配。
原始文件下载请移步这里：&&&&&
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。