微信小程序选项卡功能开发步骤与方法全解析
404
2023-11-07
微信小程序开发实现的IP地址查询功能示例
本文实例讲述了微信小程序开发实现的IP地址查询功能。分享给大家供大家参考，具体如下：
微信小程序 开发 参考 https://mp.weixin.qq.com/debug/wxadoc/dev/component/
search.wxml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<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>
search.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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
app.json
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
"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希望本文所述对大家微信小程序开发有所帮助。
您可能感兴趣的文章:微信小程序实现分页查询详解微信小程序 云开发模糊查询实现解析微信小程序云开发实现数据添加、查询和分页微信小程序 开发之快递查询功能的实现微信小程序多表联合查询的实现详解
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~