微信小程序開發(fā)實(shí)現(xiàn)的IP地址查詢功能示例
更新時間：2019年03月28日 09:18:04 作者：曾祥展
這篇文章主要介紹了微信小程序開發(fā)實(shí)現(xiàn)的IP地址查詢功能,可實(shí)現(xiàn)基于第三方接口的IP地址查詢功能,需要的朋友可以參考下
本文實(shí)例講述了微信小程序開發(fā)實(shí)現(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>查詢結(jié)果</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">運(yùn)營商</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": "關(guān)于"
}
]
}
}
SSL證書
HTTPS 請求
tls 僅支持 1.2 及以上版本
官網(wǎng)：https://www.qqzeng.com
演示：https://www.qqzeng.com/ip
開發(fā)：https://github.com/zengzhan/qqzeng-ip
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
javascript:FF/Chrome與IE動態(tài)加載元素的區(qū)別說明
今天在寫一段js時，發(fā)現(xiàn)IE與FF在動態(tài)加載Html元素時，有一些差別，一起過來看看下面的代碼吧2014-01-01
淺析JavaScript 函數(shù)防抖和節(jié)流
這篇文章主要介紹了JavaScript 函數(shù)防抖和節(jié)流的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
微信小程序wx.previewImage預(yù)覽圖片實(shí)例詳解
下面通過實(shí)例代碼給大家講解了微信小程序wx.previewImage預(yù)覽圖片功能,需要的朋友可以參考下2017-12-12
談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記9)
這篇文章主要介紹了談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記9)的相關(guān)資料,需要的朋友可以參考下2015-12-12
下面小編就為大家?guī)硪黄厝恋脑O(shè)置與監(jiān)聽實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
基于canvas實(shí)現(xiàn)的鐘擺效果完整實(shí)例
這篇文章主要介紹了基于canvas實(shí)現(xiàn)的鐘擺效果,以完整實(shí)例形式分析了JavaScript結(jié)合html5的canvas技術(shù)實(shí)現(xiàn)鐘擺動態(tài)旋轉(zhuǎn)效果的方法,需要的朋友可以參考下2016-01-01
JavaScript實(shí)現(xiàn)的多種鼠標(biāo)拖放效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的多種鼠標(biāo)拖放效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)變換頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動效果,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
Javascript實(shí)現(xiàn)數(shù)組中的元素上下移動
這篇文章主要給大家介紹了Javascript實(shí)現(xiàn)數(shù)組中的元素上下移動的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-04-04
swiper 解決動態(tài)加載數(shù)據(jù)滑動失效的問題
下面小編就為大家分享一篇swiper 解決動態(tài)加載數(shù)據(jù)滑動失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02