後端程序員實現一個IP歸屬地的小程序
- 2022 年 9 月 16 日
- 筆記
在日常開發中,後端主要提供數據以及處理業務邏輯,前端主要提供頁面布局以及數據展示。後端程序員對於頁面布局接觸比較少,但是小程序有完善的文檔說明、頁面布局也相對簡單,實現起來相對簡單一些。而且小程序相對於
安卓
或者IOS
審核機制也相對簡單一些。本文介紹如何實現一個簡單獲取IP歸屬地
的小程序。
效果展示
頁面主要有兩個功能:
- 顯示當前
IP地址
和歸屬地
。 - 根據查詢條件顯示
歸屬地
。
頁面布局從上往下分成三部分:
- 第一部分為文字說明,介紹頁面功能。
- 第二部分顯示當前
IP地址
。 - 第三部分顯示查詢的地址結果。
實現步驟
將三個布局從上往下,從上往下依次編寫,並配置樣式和布局詳解。
頂部展示(第一部分)
實現效果:
- 設置一個藍色布局,設置藍色背景,寬度為
100%
,高度為330rpx
。
<view style="height: 100%;width: 100%;">
<view style="width: 100%;height: 330rpx;background-color: #6e74dd">
</view>
</view>
- 展示效果:
2、 裏面分成兩個布局,左邊顯示文字,右邊顯示一個小圖標。
- 首先設置布局左浮動,
float:left
- 左邊文字字體設置成白色,文字調整大小和邊距。
- 右邊調整邊距和大小。
詳情代碼:
# xwml
<view class="ip_intro left_float">
<view style="font-size:x-large">IP地址歸屬地</view>
<view style="padding-top: 3%;">一鍵查詢 快速方便</view>
</view>
<view class="left_float intro_icon">
<image style="width: 80px;height: 80px;" src="/images/ip_search.png" mode="heightFix"></image>
</view>
# wxss
.left_float {
float: left;
}
.ip_intro {
padding-left: 5%;
padding-top: 10%;
color: white;
}
.intro_icon {
padding-left: 25%;
margin-top: 8%;
}
效果展示:
中間展示(第二部分)
實現效果:
- 首先
view
設置寬度90%
,高度自適應,背景調整成白色。整體往上移動,部分覆蓋在第一部分藍色背景上。 - 左側設置
view
設置導航條,設置上下寬,左右窄的布局。 - 右側調整邊距和顯示自提大小。
- 請求
IP歸屬地
信息,請求地址www.jeremy7.cn/springboot-schedule/holiday/ip-address
。
詳情代碼:
# wxml
<view class="clean_float local_div">
<view class="left_float">
<view class="local_bar"></view>
</view>
<view class="left_float local_text">
<view>當前IP地址:{{localIp}}</view>
<view style="margin-top: 12rpx;">歸屬地:{{localAddress}}</view>
</view>
</view>
# wxss
.clean_float {
clear:both;
}
.local_div {
width: 90%;
height: 130rpx;
margin: 0 auto;
background-color: #ffffff;
margin-top: -10%;
border-radius: 10px;
}
.local_bar {
margin-left: 30rpx;
margin-top: 50rpx;
border-radius: 2px;
width: 8rpx;
height: 50rpx;
background-color: #6e74dd;
}
.local_text {
font-size: small;
margin-left: 25rpx;
margin-top: 35rpx;
}
# js
data: {
localIp: "---",
localAddress: "---"
}
var that = this;
wx.request({
url: "htts://www.jeremy7.cn/springboot-schedule/holiday/ip-address",
success (res){
var data = res.data;
that.setData({
localAddress:data.address,
localIp:data.ip
})
}
})
效果展示:
尾部部分(第三部分)
實現效果:
尾部部分是IP歸屬地
的查詢,根據用戶輸入的IP
查詢歸屬地。
- 整個最大的
view
寬度90%
,背景設置成白色,調整高度和圓角。 - 最上面設置文字說明,設置邊距和字體大小。
- 中間輸入框,設置文字居中,需要將行高和高度設置成相同的高度
height: 78rpx; line-height:78rpx;
。 - 按查詢按鈕調整間距,高度以及圓角。
- 請求
IP歸屬地
信息,請求地址www.jeremy7.cn/springboot-schedule/holiday/ip-address
,傳入查詢的IP
。
詳情代碼如下:
# wxml
<view class="ip_find">
<view class="ip_find_text">IP歸屬地查詢</view>
<view>
<input class="ip_input" type="text" bindinput="changeIp"/>
</view>
<view class="ip_find_btn">
<view bindtap="findAddress">查詢</view>
</view>
<view class="result_div" wx:if="{{showResult}}">
<view class="left_float">
<view class="local_bar"></view>
</view>
<view class="left_float local_text">
<view>當前IP地址:{{resultIp}}</view>
<view style="margin-top: 12rpx;">歸屬地:{{resultAddress}}</view>
</view>
</view>
</view>
# wxss
.ip_find {
width: 90%;
height: 700rpx;
margin: 0 auto;
background-color: #ffffff;
margin-top: 20px;
border-radius: 10px;
}
.ip_input {
height: 78rpx;
background-color: #F5F5F5;
width: 90%;
margin: 30rpx auto;
border-radius: 24px;
text-align: center;
line-height:78rpx;
}
.ip_find_text {
padding-top: 28px;
padding-left: 20px;
font-weight: bolder;
}
.ip_find_btn {
height: 78rpx;
background-color: #6e74dd;
width: 90%;
margin: 0 auto;
border-radius: 24px;
text-align: center;
line-height:78rpx;
}
# js
findAddress() {
var that = this;
var searchIp = this.data.searchIp;
console.log(searchIp);
var valid = that.isValidIP(searchIp);
if(!valid) {
wx.showToast({
title: "請填寫正確 IP",
icon: 'none',
duration: 2000
})
return;
}
that.searchAddress(searchIp);
},
searchAddress(searchIp) {
var that = this;
wx.request({
url: "htts://www.jeremy7.cn/springboot-schedule/holiday/ip-address",
data: {
ip:searchIp
},
success (res){
var data = res.data;
var data = res.data;
that.setData({
resultAddress:data.address,
resultIp:data.ip,
showResult:true
})
}
})
},
// 驗證 IP 規格合法
isValidIP(ip) {
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
return reg.test(ip);
},
changeIp: function (e){
this.setData({
searchIp: e.detail.value
})
},
changeIp
每次輸入數據實時傳遞給searchIp
變量。isValidIP
驗證IP
的合法性。- 結果展示使用
showResult
判斷,查詢成功後showResult
改成true
,使用wx:if
顯示結果數據。
效果展示:
總結
- 從上、中、下三個部分分別講解頁面的布局。
- 整體布局主要是需要設置寬度,一般設置成
90%
的寬度,高度自適應。 - 視圖之間的布局主要調整邊距、修改大小。
- 文字上下居中需要設置
height
和line-height
改成一致。 - 整體布局需要顏色統一,看起來簡潔、大方。
- 後端程序對前端不熟悉,但是多多練習一些標籤的使用,上手還是很快的。
小程序展示
打開微信掃一掃,查看你的IP歸屬地
: