微信小程序开发实现的IP地址查询功能示例

本文实例讲述了微信小程序开发实现的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:" 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>