微信小程序开发-IP地址查询-例子

微信小程序开发小程序搜索框 IP地址查询搜索查询样例

微信小程序开发参考 https://mp.weixin.qq.com/debug/wxadoc/dev/component/

search.wxml

<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:" 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>

search.js

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) {
        // 分享失败
      }
    }
  }


})

search.wxss

@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;
}

app.json

{
  "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": "关于"
      }
    ]
  }
}