首页
所有分类
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 相关文章推荐
js汉字排序问题 支持中英文混排，兼容各浏览器，包括CHROME
Dec 20 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
Node.js中的流（Stream）介绍
Mar 30 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 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
GTX1660(1) 对讲机(1) React(6) i5 10400(1) win10(43) R72E(1) win11(40) R71E(1) i5 9400(1) i7 6700(1)
You might like
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
vue.js入门（3）——详解组件通信
2016/12/02 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
学习python分支结构
2019/05/17 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python 字符串格式化的示例
2020/09/21 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站：Certified Watch Store
2018/06/13 全球购物
思想政治教育专业个人求职信范文
2013/12/20 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
铁路工务反思材料
2014/02/07 职场文书
主持词开场白
2014/03/17 职场文书
节约能源标语
2014/06/17 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
退伍军人感言
2015/08/01 职场文书
教师网络培训心得体会
2016/01/09 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
Python 中的Sympy详细使用
2021/08/07 Python