AI 助理
备案控制台
开发者社区 云计算 文章 正文

微信小程序开发-IP地址查询-例子

2017-11-06 1890
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

微信小程序开发  小程序搜索框  IP地址查询  搜索查询  样例

 

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


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



    本文转自曾祥展博客园博客，原文链接：http://www.cnblogs.com/zengxiangzhan/p/6799877.html，如需转载请自行联系原作者


橘子红了呐
目录
相关文章
bruce刘晓伟-18435
|
1月前
|
iOS开发 MacOS Python
Python编程小案例—利用flask查询本机IP归属并输出网页图片
Python编程小案例—利用flask查询本机IP归属并输出网页图片
bruce刘晓伟-18435
21 1
rbvb2ms5saimy
|
2月前
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码，包括电商系统、同城拼车、博客等多种应用，涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例，适合初学者和开发者参考学习。提取码：8888，代码效果参考：http://www.603393.com/sitemap.xml。
rbvb2ms5saimy
63 2
wishCoding
|
6月前
|
JavaScript Java 测试技术
速达物流信息查询微信小程序ssm+vue.js附带文章和源代码设计说明文档ppt
速达物流信息查询微信小程序ssm+vue.js附带文章和源代码设计说明文档ppt
wishCoding
46 1
我是夜阑的狗
|
6月前
|
JSON 小程序 API
【微信小程序】-- 案例 - 本地生活（列表页面）（三十）
【微信小程序】-- 案例 - 本地生活（列表页面）（三十）
我是夜阑的狗
222 0
仙鹤童子```
|
小程序
微信小程序5种路由跳转的区别
微信小程序5种路由跳转的区别
仙鹤童子```
94 0
子玉欸
|
6月前
|
小程序 开发者
微信小程序如何跳转到外部小程序
微信小程序如何跳转到外部小程序
子玉欸
410 0
无妄的罪
|
6月前
|
小程序 API
微信小程序跳转到外部小程序
微信小程序跳转到外部小程序
无妄的罪
163 0
camellia。
|
11月前
|
小程序 JavaScript 前端开发
微信小程序（十一）小程序bindtap传参
文章列表页跳文章详情页的时候，我发现了一个问题，bindtap绑定的事件不能直接写：bindtap=jumpToArticle(item.id); 这样写不行，会报错：
camellia。
117 0
BNTang
|
JavaScript 小程序
微信小程序-页面访问组件数据和方法
好了，结构搭建的差不多了，接下来就是来看关键的内容了，首先我们来看一下如何拿到一个自定义组件的实例，有两种方式，这两种方式的前提条件是，给这个组件设置一个标识，设置标识的方式可以是通过类名或者ID进行设置，然后通过这个标识得到组件实例。
BNTang
327 0
.星空.
|
小程序
微信小程序路由跳转的方法和区别
微信小程序路由跳转的方法和区别
.星空.
282 0

热门文章

最新文章

  • 1
    weex-html5 组件进阶
  • 2
    会声会影2023视频编辑软件免费序列号永久
  • 3
    苹果电脑 Mac OS X 系统上防止误按 command+Q 退出软件
  • 4
    SSH连接远程服务器，本地known_hosts文件记录了什么
  • 5
    31.6. MongoDB
  • 6
    saltstack的探索-改善管理用户的sls文件
  • 7
    marathon小知识点分享之如何远程调试marathon
  • 8
    Myeclipse 操作数据库
  • 9
    光伏发电或能控制城市天气
  • 10
    WPF进度条
  • 1
    ROS机器视觉入门：从基础到人脸识别与目标检测
    92
  • 2
    鸿蒙开发：自定义一个简单的标题栏
    32
  • 3
    鸿蒙开发：切换至基于rcp的网络请求
    33
  • 4
    【MyBatisPlus·最新教程】包含多个改造案例，常用注解、条件构造器、代码生成、静态工具、类型处理器、分页插件、自动填充字段
    42
  • 5
    《C++跨平台编译：打破系统边界，释放代码潜能》
    28
  • 6
    电路板设计中射频反馈线的优化
    16
  • 7
    《C++20 图形界面程序：速度与渲染效率的双重优化秘籍》
    14
  • 8
    图解 Spring 循环依赖，一文吃透！
    25
  • 9
    关于 Kafka 高性能架构，这篇说得最全面，建议收藏！
    17
  • 10
    微服务和 SOA 的 6 大核心区别，你都知道吗？
    22

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 微信PaxosStore简介
  • 支付宝小程序教程
  • 如何做微信小程序性能优化

    • 相关实验场景

    更多
  • 函数计算入门-HelloWorld应用开发
  • 搭建微信小程序
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
    • 下一篇
    阿里云OSS设置跨域访问