微信小程序?qū)崿F(xiàn)IP歸屬地獲取功能
更新時間：2022年09月16日 10:09:12 作者：小碼code
在日常開發(fā)中，后端主要提供數(shù)據(jù)以及處理業(yè)務邏輯，前端主要提供頁面布局以及數(shù)據(jù)展示。本文主要介紹如何實現(xiàn)一個簡單獲取IP歸屬地的小程序，感興趣的可以了解一下
在日常開發(fā)中，后端主要提供數(shù)據(jù)以及處理業(yè)務邏輯，前端主要提供頁面布局以及數(shù)據(jù)展示。后端程序員對于頁面布局接觸比較少，但是小程序有完善的文檔說明、頁面布局也相對簡單，實現(xiàn)起來相對簡單一些。而且小程序相對于安卓或者IOS審核機制也相對簡單一些。本文介紹如何實現(xiàn)一個簡單獲取IP歸屬地的小程序。
效果展示
頁面主要有兩個功能：
- 顯示當前IP地址和歸屬地。
- 根據(jù)查詢條件顯示歸屬地。
頁面布局從上往下分成三部分：
- 第一部分為文字說明，介紹頁面功能。
- 第二部分顯示當前IP地址。
- 第三部分顯示查詢的地址結果。
實現(xiàn)步驟
將三個布局從上往下，從上往下依次編寫，并配置樣式和布局詳解。
頂部展示（第一部分）
實現(xiàn)效果：
設置一個藍色布局，設置藍色背景，寬度為100%，高度為330rpx。
<view style="height: 100%;width: 100%;"> <view style="width: 100%;height: 330rpx;background-color: #6e74dd"> </view> </view>
展示效果：
2、 里面分成兩個布局，左邊顯示文字，右邊顯示一個小圖標。
- 首先設置布局左浮動，
float:left - 左邊文字字體設置成白色，文字調(diào)整大小和邊距。
- 右邊調(diào)整邊距和大小。
詳情代碼:
# 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%;
}效果展示：
中間展示（第二部分）
實現(xiàn)效果：
- 首先
view設置寬度90%，高度自適應，背景調(diào)整成白色。整體往上移動，部分覆蓋在第一部分藍色背景上。 - 左側設置
view設置導航條，設置上下寬，左右窄的布局。 - 右側調(diào)整邊距和顯示自提大小。
- 請求
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
})
}
})效果展示：
尾部部分（第三部分）
實現(xiàn)效果：
尾部部分是IP歸屬地的查詢，根據(jù)用戶輸入的IP查詢歸屬地。
- 整個最大的
view寬度90%，背景設置成白色，調(diào)整高度和圓角。 - 最上面設置文字說明，設置邊距和字體大小。
- 中間輸入框，設置文字居中，需要將行高和高度設置成相同的高度
height: 78rpx; line-height:78rpx;。 - 按查詢按鈕調(diào)整間距，高度以及圓角。
- 請求
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: "請?zhí)顚懻_ 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 規(guī)格合法
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每次輸入數(shù)據(jù)實時傳遞給searchIp變量。isValidIP驗證IP的合法性。- 結果展示使用
showResult判斷，查詢成功后showResult改成true,使用wx:if顯示結果數(shù)據(jù)。 效果展示：
總結
從上、中、下三個部分分別講解頁面的布局。
整體布局主要是需要設置寬度，一般設置成90%的寬度，高度自適應。
視圖之間的布局主要調(diào)整邊距、修改大小。
文字上下居中需要設置height和line-height改成一致。
整體布局需要顏色統(tǒng)一，看起來簡潔、大方。
后端程序?qū)η岸瞬皇煜?，但是多多練習一些標簽的使用，上手還是很快的。
小程序展示
打開微信掃一掃，查看你的IP歸屬地:
到此這篇關于微信小程序?qū)崿F(xiàn)IP歸屬地獲取功能的文章就介紹到這了,更多相關小程序IP歸屬地獲取內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Uncaught?SyntaxError:Unexpected?token?'<'?(
這篇文章主要為大家介紹了JS判斷趨近于直線的多邊形(退化多邊形)實例探究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2024-01-01
JS Common 2 之比較常用到的函數(shù)...2007-03-03
js下通過prototype擴展實現(xiàn)indexOf的代碼
這里使用js prototype擴展實現(xiàn)的indexOf的實現(xiàn)代碼，跟js自帶的方法，差不多。2010-12-12
基于javascript實現(xiàn)全國省市二級聯(lián)動下拉選擇菜單
這篇文章主要介紹了基于javascript實現(xiàn)全國省市二級聯(lián)動下拉選擇菜單，以一個完整實例形式較為詳細的分析了js實現(xiàn)省市二級聯(lián)動下拉菜單的實現(xiàn)技巧，非常簡單實用,需要的朋友可以參考下2016-01-01
js簡單實現(xiàn)讓文本框內(nèi)容逐個字的顯示出來
逐個字顯示效果就像是打印機一樣，在某些情況下起到強調(diào)作用，下面有個不錯的示例，大家可以學習下2013-10-10
解決Jstree 選中父節(jié)點時被禁用的子節(jié)點也會選中的問題
下面小編就為大家分享一篇解決Jstree 選中父節(jié)點時被禁用的子節(jié)點也會選中的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要給大家介紹了關于JavaScript中String對象的使用方法以及實例的相關資料,文中通過實例代碼介紹的非常詳細,方便開發(fā)者在JavaScript開發(fā)中更好地處理字符串,需要的朋友可以參考下2022-04-04
JavaScript實現(xiàn)設置默認日期范圍為最近40天的方法分析
這篇文章主要介紹了JavaScript實現(xiàn)設置默認日期范圍為最近40天的方法,結合實例形式分析了javascript結合HTML5 date元素進行時間運算相關操作技巧,需要的朋友可以參考下2017-07-07
javascript 數(shù)組(list)添加/刪除的實現(xiàn)
這篇文章主要介紹了javascript 數(shù)組(list)添加/刪除，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
COM組件中調(diào)用JavaScript函數(shù)詳解及實例
這篇文章主要介紹了COM組件中調(diào)用JavaScript函數(shù)詳解及實例的相關資料,需要的朋友可以參考下2017-02-02