欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序開發(fā)實現(xiàn)的IP地址查詢功能示例

 更新時間：2019年03月28日 09:18:04   作者：曾祥展  
這篇文章主要介紹了微信小程序開發(fā)實現(xiàn)的IP地址查詢功能,可實現(xiàn)基于第三方接口的IP地址查詢功能,需要的朋友可以參考下

本文實例講述了微信小程序開發(fā)實現(xiàn)的IP地址查詢功能。分享給大家供大家參考，具體如下：

微信小程序 開發(fā) 參考   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:" 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">縣區(qū)</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">行政區(qū)劃</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">經(jīng)度</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">滾動查看內(nèi)容</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 及以上版本

官網(wǎng)：https://www.qqzeng.com
演示：https://www.qqzeng.com/ip
開發(fā)：https://github.com/zengzhan/qqzeng-ip

希望本文所述對大家微信小程序開發(fā)有所幫助。

相關文章

  • JavaScript禁止微信瀏覽器下拉回彈效果

    JavaScript禁止微信瀏覽器下拉回彈效果

    這篇文章主要為大家詳細介紹了JavaScript禁止微信瀏覽器下拉回彈效果的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • 瀏覽器頁面區(qū)域大小的js獲取方法

    瀏覽器頁面區(qū)域大小的js獲取方法

    瀏覽器頁面的區(qū)域大小如何獲取，在本有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助
    2013-09-09
  • innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等區(qū)別

    innertext , insertadjacentelement , insertadjacenthtml , ins

    innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等區(qū)別...
    2007-06-06
  • JS數(shù)據(jù)類型STRING使用實例解析

    JS數(shù)據(jù)類型STRING使用實例解析

    這篇文章主要介紹了JS數(shù)據(jù)類型STRING使用實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-12-12
  • JavaScript對象訪問器Getter及Setter原理解析

    JavaScript對象訪問器Getter及Setter原理解析

    這篇文章主要介紹了JavaScript對象訪問器Getter及Setter原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-12-12
  • 微信小程序JSON配置文件詳細講解作用

    微信小程序JSON配置文件詳細講解作用

    JSON是一種數(shù)據(jù)格式，在實際開發(fā)中，JSON總是以配置文件的形式出現(xiàn)。小程序項目中也不例外:通過不同的Json配置文件，可以對小程序項目進行不同級別的配置
    2022-10-10
  • webpack開發(fā)跨域問題解決辦法

    webpack開發(fā)跨域問題解決辦法

    本篇文章主要介紹了webpack開發(fā)跨域問題解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • JS獲取并處理php數(shù)組的方法實例分析

    JS獲取并處理php數(shù)組的方法實例分析

    這篇文章主要介紹了JS獲取并處理php數(shù)組的方法,結合實例形式分析了php針對數(shù)組的創(chuàng)建、轉換以及js處理數(shù)組的接收、遍歷、轉換等相關操作技巧,需要的朋友可以參考下
    2018-09-09
  • 原生JavaScript實現(xiàn)五子棋游戲

    原生JavaScript實現(xiàn)五子棋游戲

    這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • JS對img進行操作(換圖片/切圖/輪換/停止)

    JS對img進行操作(換圖片/切圖/輪換/停止)

    JS對img進行操作包括:換圖片/切圖/輪換/停止輪換等等，在本文將逐一實現(xiàn)，感興趣的朋友可以參考下哈，希望對你學習js知識有所幫助
    2013-04-04

最新評論