微信小程序开发实现的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": "关于"   }  ] }}