微信小程序開發(fā) ?小程序搜索框 ?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:" 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">國(guó)家</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)營(yíng)商</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">國(guó)家英文</view></view><view class="weui-cell"><view class="weui-cell__bd"><text>{{r.cc}}</text></view><view class="weui-cell__ft">國(guó)家縮寫</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">滾動(dòng)查看內(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 請(qǐng)求

tls 僅支持 1.2 及以上版本

?

?

?

官網(wǎng)：https://www.qqzeng.com
演示：https://www.qqzeng.com/ip
開發(fā)：https://github.com/zengzhan/qqzeng-ip

?

總結(jié)

以上是生活随笔為你收集整理的微信小程序开发-IP地址查询-例子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。