Exemplo de implementação de uma página de consulta de andereço IP em um Minni Program do WeChat. A interface contém uma barra de pesquisa, validação do formato IPv4 e a exibição dos dados reotrnados por uma API externa.

search.wxml

<view class="container">
  <view class="page-body">
    <view class="weui-search-bar {{classeFoco}}">
      <view class="weui-search-bar__form">
        <view class="weui-search-bar__box">
          <icon class="weui-icon-search" />
          <input type="text" class="weui-search-bar__input" placeholder="Digite um IP" confirm-type="search"
            value="{{textoBusca}}" focus="{{foco}}"
            bindinput="aoDigitar" bindconfirm="confirmarBusca" />
          <a href="javascript:" class="weui-icon-clear" bindtap="limparBusca"></a>
        </view>
        <view class="weui-search-bar__label" bindtap="ativarBusca">
          <icon class="weui-icon-search" />
          <view class="weui-search-bar__label_span">Pesquisar (8.8.8.8)</view>
        </view>
      </view>
      <view class="weui-search-bar__cancel-btn" bindtap="cancelarBusca">Cancelar</view>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">
      <text>Resultado da consulta</text>
    </view>
    <view class="page-section-spacing">
      <scroll-view scroll-y="true" class="painel-scroll">
        <view class="item-scroll">
          <view class="valor-ip">{{info.ip}}</view>
        </view>

        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.continent}}</text></view>
          <view class="weui-cell__ft">Continente</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.country}}</text></view>
          <view class="weui-cell__ft">País</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.province}}</text></view>
          <view class="weui-cell__ft">Província</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.city}}</text></view>
          <view class="weui-cell__ft">Cidade</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.district}}</text></view>
          <view class="weui-cell__ft">Distrito</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.isp}}</text></view>
          <view class="weui-cell__ft">Operadora</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.areacode}}</text></view>
          <view class="weui-cell__ft">Código de área</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.en}}</text></view>
          <view class="weui-cell__ft">País (EN)</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.cc}}</text></view>
          <view class="weui-cell__ft">Sigla</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.lng}}</text></view>
          <view class="weui-cell__ft">Longitude</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.lat}}</text></view>
          <view class="weui-cell__ft">Latitude</view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd"><text>{{info.version}}</text></view>
          <view class="weui-cell__ft">Versão</view>
        </view>
      </scroll-view>
      <view class="dica-scroll">Role para ver todos os dados</view>
    </view>
  </view>
</view>

search.js

Page({
  data: {
    textoBusca: '',
    foco: false,
    classeFoco: '',
    info: {}
  },

  onReady: function () {
    this.carregarExemplo();
  },

  carregarExemplo: function () {
    this.consultarIP('8.8.8.8');
  },

  consultarIP: function (ip) {
    var self = this;
    wx.request({
      url: 'https://api.exemplo.com/v1/ip', // substitua pelo endpoint real
      method: 'POST',
      data: { ip: ip },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      success: function (res) {
        if (res.data && res.data.data) {
          self.setData({ info: res.data.data });
        }
      },
      fail: function () {
        // falha na requisição
      }
    });
  },

  ativarBusca: function () {
    this.setData({
      classeFoco: 'weui-search-bar_focusing',
      foco: true
    });
  },

  cancelarBusca: function () {
    this.setData({
      classeFoco: '',
      foco: false
    });
  },

  limparBusca: function () {
    this.setData({
      textoBusca: '',
      foco: true
    });
  },

  aoDigitar: function (e) {
    this.setData({ textoBusca: e.detail.value });
  },

  confirmarBusca: function () {
    var self = this;
    var ip = this.data.textoBusca.trim();

    if (!ip) {
      return;
    }

    if (!this.ehIPv4(ip)) {
      wx.showToast({ title: 'IP inválido', image: '/images/tip.png' });
      return;
    }

    wx.showToast({ title: 'Buscando...', icon: 'loading' });

    wx.request({
      url: 'https://api.exemplo.com/v1/ip', // substitua pelo endpoint real
      method: 'POST',
      data: { ip: ip },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      success: function (res) {
        if (res.data && res.data.data) {
          self.setData({ info: res.data.data });
        }
      },
      fail: function () {
        // falha na requisição
      },
      complete: function () {
        wx.hideToast();
      }
    });
  },

  ehIPv4: function (valor) {
    return /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/.test(valor);
  },

  onShareAppMessage: function () {
    return {
      title: 'Consulta de IP',
      path: '/pages/index/index'
    };
  }
});

search.wxss

@import "../common/weui.wxss";

.page-section-spacing {
  margin-top: 0rpx;
}

.page-section-title {
  text-align: center;
  padding: 40rpx 0 0;
  color: #9b9b9b;
  font-size: 36rpx;
}

@media (min-width: 320px) {
  .painel-scroll {
    height: 640rpx;
  }
}

@media (min-width: 360px) {
  .painel-scroll {
    height: 816rpx;
  }
}

@media (min-width: 375px) {
  .painel-scroll {
    height: 836rpx;
  }
}

@media (min-width: 384px) {
  .painel-scroll {
    height: 826rpx;
  }
}

@media (min-width: 414px) {
  .painel-scroll {
    height: 868rpx;
  }
}

.item-scroll {
  height: 90rpx;
  line-height: 90rpx;
  color: #000;
  border-bottom: 1px solid #eee;
  text-align: center;
  vertical-align: middle;
  margin: 0 20rpx;
}

.valor-ip {
  line-height: 90rpx;
  color: #2ab059;
  display: inline-block;
  font-size: 36rpx;
}

.weui-cell__bd {
  color: #2ab059;
}

.dica-scroll {
  color: #eee;
  font-size: 20rpx;
  text-align: center;
  padding-top: 20rpx;
}

app.json

{
  "pages": [
    "pages/index/index",
    "pages/sobre/sobre"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#2ab059",
    "navigationBarTitleText": "Consulta de IP",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#2ab059",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/location.png",
        "selectedIconPath": "images/location_hl.png",
        "text": "IP"
      },
      {
        "pagePath": "pages/sobre/sobre",
        "iconPath": "images/about.png",
        "selectedIconPath": "images/about_hl.png",
        "text": "Sobre"
      }
    ]
  }
}

As requisições feitas pelo wx.request devem usar HTTPS com TLS 1.2 ou superior e o domínio precisa estar configurado no console do Mini Program.