微信小程序开发-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:" 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地址查询-例子相关推荐

微信小程序开发之快递服务专栏（快递运力查询、寄快递、取消订单）代码篇
目录 1.工程目录 2.代码 3.结果 6.获取资源这篇文章废话不多,直接上代码 1.工程目录需要改动的文件上图已经标出来了 2.代码 index.js // index.js // 获取应用实 ...
微信小程序开发(十)小程序支付-查询退款
应用场景提交退款申请后,通过调用该接口查询退款状态.退款有一定延时,用零钱支付的退款20分钟内到账,银行卡支付的退款3个工作日后重新查询退款状态. 接口说明这里退款还是根据商户订单号-out_tr ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
【微信小程序宝典】从零开始做微信小程序开发NO.2
2019独角兽企业重金招聘Python工程师标准>>> 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 首先感谢几位给予建议的同学, ...
【微信小程序开发•系列文章七】websocket
2019独角兽企业重金招聘Python工程师标准>>> 为什么需要websocket? 传统的实时交互的游戏,或服务器主动发送消息的行为(如推送服务),如果想做在微信上,可能你会使用 ...
微信小程序开发环境（阿里云服务搭建+可运行的demo）
最近微信小程序异常火爆,很多人在学习,下面带着大家搭建下微信小程序的调试环境(client+server),并调试一套demo源码(JavaScript和node.js基础即可,微信推荐使用的语言,无 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
01.微信小程序开发之环境搭建
在开发之前你要有微信开发者工具,下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 这里我要假设大家有已经拿到了 ...
尚硅谷微信小程序开发仿网易云音乐App 小程序后端接口服务器搭建
目录小程序学习视频相关的教程文档与笔记分享配套服务器源码地址: 接口使用说明文档接口列表启动服务测试服务启动OK网页 http://localhost:3000/test.html编辑 ...

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

微信小程序开发-IP地址查询-例子相关推荐

最新文章

热门文章