手機歸屬地查詢

本文從一個簡單的手機歸屬地查詢實現(xiàn)入手，來幫助你入門

小程序

開發(fā)。

 

 

源碼

 

基本功能如下：

• 查詢手機歸屬地
• 根據(jù)歷史記錄查詢
• 手機位數(shù)校驗

界面預覽

 

 

 

 

初始化

創(chuàng)建空白項目

新建一個空白項目

• AppID 可選擇無
• 不選擇中創(chuàng)建 quick start 項目，而是創(chuàng)建空白項目，加深對小程序結構的理解。

基本配置

首先，創(chuàng)建全局配置文件 app.json

/app.json
{
  "pages":[
    "pages/index/index"
  ]
}

在全局配置文件中，定義了一個頁面。保存之后，將會自動生成 index 頁面的基本目錄。

pages
└── index
    ├── index.js    // 頁面業(yè)務邏輯
    ├── index.json  // 頁面配置
    ├── index.wxml  // 頁面視圖
    └── index.wxss  // 頁面樣式

現(xiàn)在，還缺少一個應用的入口文件，用來注冊小程序

/app.js
App({
})

App() 方法用來注冊一個小程序。到這一步，小程序初始化就完成了。

功能實現(xiàn)

頁面配置

首先，我們來為頁面添加頂部導航文字

/pages/index/index.json
{
  "navigationBarTitleText": "手機歸屬地查詢"
}

查詢模塊

接下來是查詢模塊

/pages/index/index.wxml

<view>
  <text>請輸入查詢內容text>
  <input type="number" bindinput="bindPhoneInput" value="{{ phoneNumber }}"/>
  <button type="primary" bindtap="queryPhoneInfo" disabled="{{ disabled }}">查詢button>
view>

說明

• bindinput 用于綁定鍵盤輸入事件 - 用戶輸入時，將會調用綁定bindPhoneInput 函數(shù)
• bindtap 用于綁定點擊事件 - 用戶點擊按鈕后，將會調用綁定的 queryPhoneInfo 函數(shù)
• 按鈕是否可點擊取決于 disabled 的值；

接下里是具體的功能實現(xiàn)，首先，我們把手機歸屬地查詢的功能封裝到全局業(yè)務文件 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 發(fā)送請求；
• 該函數(shù)接受兩個參數(shù)，一個是手機號，另外一個則是自定義函數(shù)，用來處理查詢的結果。

在頁面里面實現(xiàn)剛才定義的兩個事件

/pages/index/index.js
var app = getApp();
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  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 用于管理該頁面的數(shù)據(jù)；
• this.setData() 方法用于設置 data 的屬性，如果直接使用 this.data.phoneInfo 無法改變頁面狀態(tài)；
• 在頁面中調用 app 的方法，需要先使用 getApp 進行實例化，然后通過實例來訪問方法；

查詢結果顯示

接下來在視圖里面顯示查詢結果

/pages/index/index.wxml




<view>

  <view wx:if="{{ phoneInfo }}">
   <text>查詢結果為：text>
   
   <text wx:if="{{phoneInfo.ret === 0}}">
   {{phoneInfo.operator}}{{phoneInfo.province}}{{phoneInfo.city}}
   text>
   
  <text wx:else> {{phoneInfo.msg}} text>
  view>
view>

說明 - 使用 wx:if 與 wx:else 可以方便的根據(jù)查詢結果來切換視圖

最近搜索功能實現(xiàn)

最后是最近功能記錄的功能實現(xiàn)，首先是視圖

<view>
  <text>最近搜索text>
  <view>
    <view wx:for="{{ historyList }}"  bindtap="selectHistory" data-number="{{item}}">
       {{item}}
    view>
  view>
view>

說明：

• 遍歷 historyList 數(shù)組
• 用戶點擊某一記錄時候，觸發(fā) selectHistory 事件
• 將每條手機號保存到 data-number 中，selectHistory 就可以獲取對應的手機號了

業(yè)務邏輯

// pages/index/index.js
var app = getApp();
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  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
    })
  }

})

界面美化

最后，只需要美化下界面即可。

視圖

<view class="querySection">
  <text class="help-text">請輸入查詢內容text>
  <input class="queryInput" type="number" bindinput="bindPhoneInput" value="{{ phoneNumber }}"/>
  <button class="queryBtn" type="primary" bindtap="queryPhoneInfo" disabled="{{ disabled }}">查詢button>
view>


<view>
  <view wx:if="{{ phoneInfo }}">
  <text class="help-text">查詢結果為：text>
   
   <text wx:if="{{phoneInfo.ret === 0}}">
   {{phoneInfo.operator}}{{phoneInfo.province}}{{phoneInfo.city}}
   text>
   
  <text wx:else> {{phoneInfo.msg}} text>
  view>
view>


<view>
  <text class="help-text">最近搜索text>
  <view class="items">
    <view class="item" wx:for="{{ historyList }}"  bindtap="selectHistory" data-number="{{item}}">
       {{item}}
    view>
  view>
view>

樣式

/* 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;
}