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

转x33g5p2x  于2021-11-19 转载在 其他  
字(7.7k)|赞(0)|评价(0)|浏览(454)

微信小程序开发  小程序搜索框  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": "关于"}
    ]
  }
}

SSL证书

HTTPS 请求

tls 仅支持 1.2 及以上版本

**

**

官网：https://www.qqzeng.com
演示：https://www.qqzeng.com/ip
开发：https://github.com/zengzhan/qqzeng-ip

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://www.cnblogs.com/zengxiangzhan/p/6799877.html

内容来源于网络，如有侵权，请联系作者删除！

相关文章

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com