前言

本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》

功能说明

输入任意手机号码，查询该手机号码归属地

小程序实现

效果演示

号码归属地查询Demo - 图1
号码归属地查询Demo - 图2

wxml代码

  1. <view class="page">
  2.   <view class="page__bd">
  3.     <view class="weui-cells__title">查归属地</view>
  4.     <view class="weui-cells weui-cells_after-title">
  5.       <view class="weui-cell ">
  6.         <view class="weui-cell__bd">
  7.           <input class="weui-input" placeholder="请输入手机号码" value="{{mobile}}" bindinput="mobileChange" />
  8.         </view>
  9.       </view>
  10.     </view>
  12.     <view wx:if="{{queryResult}}" class="weui-cells__title">查询结果</view>
  13.     <view wx:if="{{queryResult}}" class="weui-cells weui-cells_after-title">
  14.       <view wx:for="{{queryResult}}" wx:key="*this" wx:for-index="key" class="weui-cell">
  15.         <view class="weui-cell__bd">{{ key }}</view>
  16.         <view class="weui-cell__ft">{{ item }}</view>
  17.       </view>
  18.     </view>
  20.     <view class="weui-btn-area">
  21.       <button class="weui-btn" type="primary" bindtap="query">查询</button>
  22.     </view>
  23.   </view>
  24. </view>

js代码

  1. const WXAPI = require('apifm-wxapi')
  3. Page({
  4.   data: {
  5.     mobile: undefined,
  6.     queryResult: undefined,
  7.   },
  8.   onLoad: function (options) {
  10.   },
  11.   onShow: function () {
  13.   },
  14.   mobileChange(e){
  15.     this.setData({
  16.       mobile: e.detail.value,
  17.       queryResult: null
  18.     })
  19.   },
  20.   query() { // 查询
  21.     if (!this.data.mobile){
  22.       wx.showToast({
  23.         title: '手机号码不能为空',
  24.         icon: 'none'
  25.       })
  26.       return
  27.     }
  28.     WXAPI.queryMobileLocation(this.data.mobile).then(res => {
  29.       console.log(res)
  30.       if (res.code == 0) {
  31.         wx.showToast({
  32.           title: '查询成功',
  33.           icon: 'success'
  34.         })
  35.         this.setData({
  36.           queryResult: res.data
  37.         })
  38.       } else {
  39.         wx.showToast({
  40.           title: res.msg,
  41.           icon: 'none'
  42.         })
  43.       }
  44.     })
  45.   }
  46. })

关于 apifm-wxapi 更多的使用方法：

《apifm-wxapi使用说明》

本案例Demo代码下载：

《apifm-wxapi使用Demo程序》

期待你的进步！
感谢！