当前位置：凯发k8官方网 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序开发-凯发k8官方网

发布时间：2025/1/21 编程问答 25 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了微信小程序开发-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 及以上版本

凯发k8官方网官网：https://www.qqzeng.com
演示：https://www.qqzeng.com/ip
开发：https://github.com/zengzhan/qqzeng-ip

总结

以上是凯发k8官方网为你收集整理的微信小程序开发-ip地址查询-例子的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。

上一篇：《个体软件过程》—第1章1.1节什么是软
下一篇： python模块之re正则表达式