经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序开发实现的IP地址查询功能示例
来源：jb51　　时间：2019/3/28 11:43:44　　对本文有异议

本文实例讲述了微信小程序开发实现的IP地址查询功能。分享给大家供大家参考，具体如下：

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

search.wxml

  1. <view class="container">
  2.  <view class="page-body">
  3.   <view class="weui-search-bar {{searchFocusCss}}" id="searchBar">
  4.    <view class="weui-search-bar__form">
  5.     <view class="weui-search-bar__box">
  6.      <icon class="weui-icon-search"></icon>
  7.      <input type="text" class="weui-search-bar__input" id="searchInput" placeholder="输入IP" confirm-type="search" bindinput="bindKeyInput" bindconfirm="searchSubmit" value="{{searchValue}}" focus="{{focus}}" />
  8.      <a href="javascript:" rel="external nofollow" class="weui-icon-clear" id="searchClear" bindtap="searchClearClick"></a> 
  9.     </view>
  10.     <view class="weui-search-bar__label" id="searchText" bindtap="searchTextClick">
  11.      <icon class="weui-icon-search"></icon>
  12.      <view class="weui-search-bar__label_span">搜索（8.8.8.8）</view>
  13.     </view>
  14.    </view>
  15.    <view class="weui-search-bar__cancel-btn" id="searchCancel" bindtap="searchCancelClick">取消</view>
  16.   </view>
  17.  </view>
  18.  <view class="page-section">
  19.   <view class="page-section-title">
  20.    <text>查询结果</text>
  21.   </view>
  22.   <view class="page-section-spacing">
  23.    <scroll-view scroll-y="true" class="ip-scroll" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  24.     <view class="scroll-view-item">
  25.      <view class="view-item-ip"> {{r.ip}}</view>
  26.     </view>
  27.     <view class="weui-cell">
  28.      <view class="weui-cell__bd">
  29.       <text>{{r.continent}}</text>
  30.      </view>
  31.      <view class="weui-cell__ft">大洲</view>
  32.     </view>
  33.     <view class="weui-cell">
  34.      <view class="weui-cell__bd">
  35.       <text>{{r.country}}</text>
  36.      </view>
  37.      <view class="weui-cell__ft">国家</view>
  38.     </view>
  39.     <view class="weui-cell">
  40.      <view class="weui-cell__bd">
  41.       <text>{{r.province}}</text>
  42.      </view>
  43.      <view class="weui-cell__ft">省份</view>
  44.     </view>
  45.     <view class="weui-cell">
  46.      <view class="weui-cell__bd">
  47.       <text>{{r.city}}</text>
  48.      </view>
  49.      <view class="weui-cell__ft">城市</view>
  50.     </view>
  51.     <view class="weui-cell">
  52.      <view class="weui-cell__bd">
  53.       <text>{{r.district}}</text>
  54.      </view>
  55.      <view class="weui-cell__ft">县区</view>
  56.     </view>
  57.     <view class="weui-cell">
  58.      <view class="weui-cell__bd">
  59.       <text>{{r.isp}}</text>
  60.      </view>
  61.      <view class="weui-cell__ft">运营商</view>
  62.     </view>
  63.     <view class="weui-cell">
  64.      <view class="weui-cell__bd">
  65.       <text>{{r.areacode}}</text>
  66.      </view>
  67.      <view class="weui-cell__ft">行政区划</view>
  68.     </view>
  69.     <view class="weui-cell">
  70.      <view class="weui-cell__bd">
  71.       <text>{{r.en}}</text>
  72.      </view>
  73.      <view class="weui-cell__ft">国家英文</view>
  74.     </view>
  75.     <view class="weui-cell">
  76.      <view class="weui-cell__bd">
  77.       <text>{{r.cc}}</text>
  78.      </view>
  79.      <view class="weui-cell__ft">国家缩写</view>
  80.     </view>
  81.     <view class="weui-cell">
  82.      <view class="weui-cell__bd">
  83.       <text>{{r.lng}}</text>
  84.      </view>
  85.      <view class="weui-cell__ft">经度</view>
  86.     </view>
  87.     <view class="weui-cell">
  88.      <view class="weui-cell__bd">
  89.       <text>{{r.lat}}</text>
  90.      </view>
  91.      <view class="weui-cell__ft">纬度</view>
  92.     </view>
  93.     <view class="weui-cell">
  94.      <view class="weui-cell__bd">
  95.       <text>{{r.version}}</text>
  96.      </view>
  97.      <view class="weui-cell__ft">版本</view>
  98.     </view>
  99.    </scroll-view>
  100.    <view class="ip-tip">滚动查看内容</view>
  101.   </view>
  102.  </view>
  103. </view>
  104.  

search.js

  1. Page({
  2.  data: {
  3.   inputValue: '',
  4.   focus: false,
  5.   searchFocusCss: '',
  6.   r: []
  7.  },
  8.  onReady: function () {
  9.   var that = this;
  10.   wx.request({
  11.    url: 'https://www.qqzeng.com/ip',
  12.    method: 'POST',
  13.    data: {
  14.     ip: 'qqzengip'
  15.    },
  16.    header: { 'content-type': 'application/x-www-form-urlencoded' },
  17.    success: function (res) {
  18.     that.setData({
  19.      r: res.data.data
  20.     })
  21.    },
  22.    fail: function () {
  23.     // fail
  24.    },
  25.    complete: function () {
  26.     // complete
  27.    }
  28.   })
  29.  },
  30.  searchTextClick: function () {
  31.   this.setData({ searchFocusCss: 'weui-search-bar_focusing', focus: true })
  32.  },
  33.  searchCancelClick: function () {
  34.   this.setData({ searchFocusCss: '', focus: false })
  35.  },
  36.  searchClearClick: function () {
  37.   this.setData({ searchValue: '', focus: true })
  38.  },
  39.  bindKeyInput: function (e) {
  40.   this.setData({ inputValue: e.detail.value })
  41.  },
  42.  //搜索提交
  43.  searchSubmit: function () {
  44.   var that = this;
  45.   var ip = this.data.inputValue;
  46.   if (ip) {
  47.    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);
  48.    if (!isIP) {
  49.     wx.showToast({ title: 'ip格式不正确', image: '/images/tip.png' });
  50.     return false;
  51.    }
  52.    wx.showToast({
  53.     title: '搜索中',
  54.     icon: 'loading'
  55.    });
  56.    wx.request({
  57.     url: 'https://www.qqzeng.com/ip',
  58.     method: 'POST',
  59.     data: {
  60.      ip: ip
  61.     },
  62.     header: { 'content-type': 'application/x-www-form-urlencoded' },
  63.     success: function (res) {
  64.      that.setData({
  65.       r: res.data.data
  66.      })
  67.     },
  68.     fail: function () {
  69.      // fail
  70.     },
  71.     complete: function () {
  72.      // complete
  73.      wx.hideToast();
  74.     }
  75.    })
  76.   }
  77.  },
  78.  onShareAppMessage: function () {
  79.   return {
  80.    title: 'IP地址查询-qqzeng-ip',
  81.    path: '/pages/ip/search',
  82.    success: function (res) {
  83.     // 分享成功
  84.    },
  85.    fail: function (res) {
  86.     // 分享失败
  87.    }
  88.   }
  89.  }
  90. })
  91.  

search.wxss

  1. @import "../common/weui.wxss";
  2. .page-section-spacing {
  3.  margin-top: 0rpx;
  4. }
  5. .page-section-title {
  6.  text-align: center;
  7.  padding: 40rpx 0rpx 0rpx 0rpx;
  8.  color: #9b9b9b;
  9.  font-size: 36rpx;
  10. }
  11. @media (min-width: 320px) {
  12.  .ip-scroll {
  13.   height: 640rpx;
  14.  }
  15. }
  16. @media (min-width: 360px) {
  17.  .ip-scroll {
  18.   height: 816rpx;
  19.  }
  20. }
  21. @media (min-width: 375px) {
  22.  .ip-scroll {
  23.   height: 836rpx;
  24.  }
  25. }
  26. @media (min-width: 384px) {
  27.  .ip-scroll {
  28.   height: 826rpx;
  29.  }
  30. }
  31. @media (min-width: 414px) {
  32.  .ip-scroll {
  33.   height: 868rpx;
  34.  }
  35. }
  36. .scroll-view-item {
  37.  height: 90rpx;
  38.  line-height: 90rpx;
  39.  color: #000;
  40.  border-bottom: 1px solid #eee;
  41.  text-align: center;
  42.  vertical-align: middle;
  43.  margin: 0px 20px;
  44. }
  45. .view-item-ip {
  46.  line-height: 90rpx;
  47.  color: #2ab059;
  48.  display: inline-block;
  49.  font-size: 36rpx;
  50. }
  51. .weui-cell__bd {
  52.  color: #2ab059;
  53. }
  54. .ip-tip {
  55.  color: #eee;
  56.  font-size: 20rpx;
  57.  text-align: center;
  58.  padding-top: 20rpx;
  59. }
  60.  

app.json

  1. {
  2.  "pages": [
  3.   "pages/ip/search",
  4.   "pages/about/info"
  5.  ],
  6.  "window": {
  7.   "backgroundTextStyle": "light",
  8.   "navigationBarBackgroundColor": "#2ab059",
  9.   "navigationBarTitleText": "IP地址查询",
  10.   "navigationBarTextStyle": "#ffffff"
  11.  },
  12.  "tabBar": {
  13.   "color": "#7A7E83",
  14.   "selectedColor": "#2ab059",
  15.   "borderStyle": "#2ab059",
  16.   "backgroundColor": "#ffffff",
  17.   "list": [
  18.    {
  19.     "pagePath": "pages/ip/search",
  20.     "iconPath": "images/location.png",
  21.     "selectedIconPath": "images/location_hl.png",
  22.     "text": "IP查询"
  23.    },
  24.    {
  25.     "pagePath": "pages/about/info",
  26.     "iconPath": "images/about.png",
  27.     "selectedIconPath": "images/about_hl.png",
  28.     "text": "关于"
  29.    }
  30.   ]
  31.  }
  32. }
  33.  

SSL证书

HTTPS 请求

tls 仅支持 1.2 及以上版本

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

希望本文所述对大家微信小程序开发有所帮助。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号