微信小程序開發實現的IP地址查詢功能示例

<view class="container">
 <view class="page-body">
 <view class="weui-search-bar {{searchFocusCss}}" id="searchBar">
 <view class="weui-search-bar__form">
 <view class="weui-search-bar__box">
 <icon class="weui-icon-search"></icon>
 <input type="text" class="weui-search-bar__input" id="searchInput" placeholder="輸入IP" confirm-type="search" bindinput="bindKeyInput" bindconfirm="searchSubmit" value="{{searchValue}}" focus="{{focus}}" />
 <a href="javascript:" rel="external nofollow" class="weui-icon-clear" id="searchClear" bindtap="searchClearClick"></a> 
 </view>
 <view class="weui-search-bar__label" id="searchText" bindtap="searchTextClick">
 <icon class="weui-icon-search"></icon>
 <view class="weui-search-bar__label_span">搜索（8.8.8.8）</view>
 </view>
 </view>
 <view class="weui-search-bar__cancel-btn" id="searchCancel" bindtap="searchCancelClick">取消</view>
 </view>
 </view>
 <view class="page-section">
 <view class="page-section-title">
 <text>查詢結果</text>
 </view>
 <view class="page-section-spacing">
 <scroll-view scroll-y="true" class="ip-scroll" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
 <view class="scroll-view-item">
 <view class="view-item-ip"> {{r.ip}}</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.continent}}</text>
 </view>
 <view class="weui-cell__ft">大洲</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.country}}</text>
 </view>
 <view class="weui-cell__ft">國家</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.province}}</text>
 </view>
 <view class="weui-cell__ft">省份</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.city}}</text>
 </view>
 <view class="weui-cell__ft">城市</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.district}}</text>
 </view>
 <view class="weui-cell__ft">縣區</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.isp}}</text>
 </view>
 <view class="weui-cell__ft">運營商</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.areacode}}</text>
 </view>
 <view class="weui-cell__ft">行政區劃</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.en}}</text>
 </view>
 <view class="weui-cell__ft">國家英文</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.cc}}</text>
 </view>
 <view class="weui-cell__ft">國家縮寫</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.lng}}</text>
 </view>
 <view class="weui-cell__ft">經度</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.lat}}</text>
 </view>
 <view class="weui-cell__ft">緯度</view>
 </view>
 <view class="weui-cell">
 <view class="weui-cell__bd">
 <text>{{r.version}}</text>
 </view>
 <view class="weui-cell__ft">版本</view>
 </view>
 </scroll-view>
 <view class="ip-tip">滾動查看內容</view>
 </view>
 </view>
</view>

Page({
 data: {
 inputValue: '',
 focus: false,
 searchFocusCss: '',
 r: []
 },
 onReady: function () {
 var that = this;
 wx.request({
 url: 'https://www.qqzeng.com/ip',
 method: 'POST',
 data: {
 ip: 'qqzengip'
 },
 header: { 'content-type': 'application/x-www-form-urlencoded' },
 success: function (res) {
 that.setData({
 r: res.data.data
 })
 },
 fail: function () {
 // fail
 },
 complete: function () {
 // complete
 }
 })
 },
 searchTextClick: function () {
 this.setData({ searchFocusCss: 'weui-search-bar_focusing', focus: true })
 },
 searchCancelClick: function () {
 this.setData({ searchFocusCss: '', focus: false })
 },
 searchClearClick: function () {
 this.setData({ searchValue: '', focus: true })
 },
 bindKeyInput: function (e) {
 this.setData({ inputValue: e.detail.value })
 },
 //搜索提交
 searchSubmit: function () {
 var that = this;
 var ip = this.data.inputValue;
 if (ip) {
 var isIP = ip.match(/^([1-9]\d*|0[0-7]*|0x[\da-f]+)(?:\.([1-9]\d*|0[0-7]*|0x[\da-f]+))(?:\.([1-9]\d*|0[0-7]*|0x[\da-f]+))(?:\.([1-9]\d*|0[0-7]*|0x[\da-f]+))$/i);
 if (!isIP) {
 wx.showToast({ title: 'ip格式不正確', image: '/images/tip.png' });
 return false;
 }
 wx.showToast({
 title: '搜索中',
 icon: 'loading'
 });
 wx.request({
 url: 'https://www.qqzeng.com/ip',
 method: 'POST',
 data: {
 ip: ip
 },
 header: { 'content-type': 'application/x-www-form-urlencoded' },
 success: function (res) {
 that.setData({
 r: res.data.data
 })
 },
 fail: function () {
 // fail
 },
 complete: function () {
 // complete
 wx.hideToast();
 }
 })
 }
 },
 onShareAppMessage: function () {
 return {
 title: 'IP地址查詢-qqzeng-ip',
 path: '/pages/ip/search',
 success: function (res) {
 // 分享成功
 },
 fail: function (res) {
 // 分享失敗
 }
 }
 }
})

@import "../common/weui.wxss";
.page-section-spacing {
 margin-top: 0rpx;
}
.page-section-title {
 text-align: center;
 padding: 40rpx 0rpx 0rpx 0rpx;
 color: #9b9b9b;
 font-size: 36rpx;
}
@media (min-width: 320px) {
 .ip-scroll {
 height: 640rpx;
 }
}
@media (min-width: 360px) {
 .ip-scroll {
 height: 816rpx;
 }
}
@media (min-width: 375px) {
 .ip-scroll {
 height: 836rpx;
 }
}
@media (min-width: 384px) {
 .ip-scroll {
 height: 826rpx;
 }
}
@media (min-width: 414px) {
 .ip-scroll {
 height: 868rpx;
 }
}
.scroll-view-item {
 height: 90rpx;
 line-height: 90rpx;
 color: #000;
 border-bottom: 1px solid #eee;
 text-align: center;
 vertical-align: middle;
 margin: 0px 20px;
}
.view-item-ip {
 line-height: 90rpx;
 color: #2ab059;
 display: inline-block;
 font-size: 36rpx;
}
.weui-cell__bd {
 color: #2ab059;
}
.ip-tip {
 color: #eee;
 font-size: 20rpx;
 text-align: center;
 padding-top: 20rpx;
}

{
 "pages": [
 "pages/ip/search",
 "pages/about/info"
 ],
 "window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#2ab059",
 "navigationBarTitleText": "IP地址查詢",
 "navigationBarTextStyle": "#ffffff"
 },
 "tabBar": {
 "color": "#7A7E83",
 "selectedColor": "#2ab059",
 "borderStyle": "#2ab059",
 "backgroundColor": "#ffffff",
 "list": [
 {
 "pagePath": "pages/ip/search",
 "iconPath": "images/location.png",
 "selectedIconPath": "images/location_hl.png",
 "text": "IP查詢"
 },
 {
 "pagePath": "pages/about/info",
 "iconPath": "images/about.png",
 "selectedIconPath": "images/about_hl.png",
 "text": "關于"
 }
 ]
 }
}