首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信小程序开发实现的IP地址查询功能示例

Posted in Javascript onMarch 28, 2019

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

微信小程序开发实现的IP地址查询功能示例

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

微信小程序开发实现的IP地址查询功能示例

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

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

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

微信小程序开发实现的IP地址查询功能示例

- Author -

曾祥展

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
List Installed Software Features
Jun 11 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 #Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 #Javascript
详解Vue.directive 自定义指令
Mar 27 #Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 #Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 #Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 #Javascript
vue中多个倒计时实现代码实例
Mar 27 #Javascript
挪威购物网站(7) 哥伦比亚购物网站(5) 欧洲购物网站(15) 瑞典购物网站(55) 南非购物网站(8) 泰国购物网站(30) 比利时购物网站(33) 葡萄牙购物网站(13) 芬兰购物网站(10) 荷兰购物网站(99)
You might like
模拟xcopy的函数
2006/10/09 PHP
PHP array 的加法操作代码
2010/07/24 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP递归创建多级目录
2015/11/05 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
javascript实现手机震动API代码
2015/08/05 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
javascript实现倒计时效果
2020/02/17 Javascript
最基础的Python的socket编程入门教程
2015/04/23 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python中生成Epoch的方法
2017/04/26 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
python 简单的调用有道翻译
2020/11/25 Python
中外合拍动画首获奥斯卡提名，“上海出品”《飞奔去月球》能否拿下最终大奖？
2021/03/16 国漫
后勤人员自我评价怎么写
2013/09/19 职场文书
大学生村官事迹材料
2014/01/21 职场文书
酒店员工培训方案
2014/06/02 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
企业安全生产检查制度
2015/08/06 职场文书
PyTorch的Debug指南
2021/05/07 Python
一篇文章带你复习java知识点
2021/06/28 Java/Android