微信小程序开发实现的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

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

Javascript 相关文章推荐
web性能优化之javascript性能调优
Dec 28 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
微信小程序结合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
You might like
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
如何在PHP中使用数组
2020/06/09 PHP
详细讲解JS节点知识
2010/01/31 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
python合并文本文件示例
2014/02/07 Python
简单了解什么是神经网络
2017/12/23 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python异常处理和日志处理方式
2019/12/24 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
2014年单位工作总结范文
2014/11/27 职场文书
德劲DE1108畅想
2021/04/22 无线电
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android