zoukankan      html  css  js  c++  java
  • 微信小程序开发-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- 320px) {
      .ip-scroll {
        height: 640rpx;
      }
    }
    
    @media (min- 360px) {
      .ip-scroll {
        height: 816rpx;
      }
    }
    
    @media (min- 375px) {
      .ip-scroll {
        height: 836rpx;
      }
    }
    
    @media (min- 384px) {
      .ip-scroll {
        height: 826rpx;
      }
    }
    
    @media (min- 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

  • 相关阅读:
    yum管理工具
    ansible简介,简单实用
    ssh服务简介及应用与服务的进程的类型
    keepliave
    NFS
    编译安装redis4.0
    redis多实例和高可用
    NTP时间服务
    ssl简介与openssl的使用
    一些高效学习方法-牛人是怎么来的
  • 原文地址:https://www.cnblogs.com/zengxiangzhan/p/6799877.html
Copyright © 2011-2022 走看看