首页
所有分类
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函数
Nov 20 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
使用javascript做在线算法编程
May 25 Javascript
React-router4路由监听的实现
Aug 07 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
JavaScript switch语句使用方法简介
Dec 30 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
条码(1) plus.io(1) Post(1) 虚拟机(3) html5+(1) 二维码(2) 目录管理(1) Get(1) 磁盘管理(1) 日志(1)
You might like
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
python 动态加载的实现方法
2017/12/22 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
美国餐厅用品和厨房设备批发网站：KaTom Restaurant Supply
2018/01/27 全球购物
英国时尚优质的女装：Hope Fashion
2018/08/14 全球购物
红领巾广播站广播稿
2014/02/01 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
请假条范文大全
2014/04/10 职场文书
《假如》教学反思
2014/04/17 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
出租车拒载检讨书
2015/01/28 职场文书
神龙架导游词
2015/02/11 职场文书
青岛海底世界导游词
2015/02/11 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
MySql数据库触发器使用教程
2022/06/01 MySQL