手機歸屬地查詢
微信小程式練手 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
<!--查詢-->
<view>
<text>請輸入查詢內容</text>
<input type="number" bindinput="bindPhoneInput" value="{{ phoneNumber }}"/>
<button type="primary" bindtap="queryPhoneInfo" disabled="{{ disabled }}">查詢</button>
</view>
說明
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
<!--查詢-->
<!--查詢結果-->
<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
可以方便的根據查詢結果來切換檢視
最近搜尋功能實現
最後是最近功能記錄的功能實現,首先是檢視
<!--最近搜尋-->
<view>
<text>最近搜尋</text>
<view>
<view wx:for="{{ historyList }}" bindtap="selectHistory" data-number="{{item}}">
{{item}}
</view>
</view>
</view>
說明:
遍歷
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
})
}
})
介面美化
最後,只需要美化下介面即可。
檢視
<!--查詢-->
<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;
}