A relatively simple WeChat applet for obtaining IP information

index.wxml:

<view class="container">
   <view class="main">
       <text class="ip">您的手机IP：{
    
    {
    
    motto.query}}
       </text>
       <text class="location">IP位置：{
    
    {
    
    motto.city}},{
    
    {
    
    motto.regionName}},{
    
    {
    
    motto.country}} 
       </text>
       <text class="timezone">时区：{
    
    {
    
    motto.timezone}}
       </text>
       <text class="lat">纬度：{
    
    {
    
    motto.lat}}
       </text>
       <text class="lon">经度：{
    
    {
    
    motto.lon}}
       </text>
   </view>
</view> 

index.wxss:

.container{
    
    
  width: 100%;
  height:100%;
  overflow:hidden;
  position:fixed;
  background-size: 100% 100%;
  background-image: url('http://image-shenlihong.test.upcdn.net/ip.jpg');
}
.main{
    
    
  width: 90%;
  float: left;
  height: 800rpx;
  margin-top: 10%;
  background: white;
  opacity: 0.7;
  border-radius: 20rpx;
}
.ip{
    
    
  width: 100%;
  height: 10%;
  float: left;
  text-align: center;
  margin-top: 10%;
  color: #6FFFFF;
}
.location{
    
    
  width: 100%;
  height: 10%;
  float: left;
  text-align: center;
  margin-top: 10%;
  color: #6FFFFF;
}
.timezone{
    
    
  width: 100%;
  height: 10%;
  float: left;
  text-align: center;
  margin-top: 10%;
  color: #6FFFFF;
}
.lat{
    
    
  width: 100%;
  height: 10%;
  float: left;
  text-align: center;
  margin-top: 10%;
  color: #6FFFFF;
}
.lon{
    
    
  width: 100%;
  height: 10%;
  float: left;
  text-align: center;
  margin-top: 10%;
  color: #6FFFFF;
}

index.js:

var app = getApp()
Page({
    
    
  data: {
    
    
    motto: ''  // IP地址
  },
  onLoad: function (e) {
    
      // 获取参数
    var that = this;
    wx.request({
    
      // 获取ip
      url: 'http://ip-api.com/json',
      success: function (e) {
    
    
        that.setData({
    
    
          motto: e.data
        })
        console.log(e.data)
      }
    })
  },
  onPullDownRefresh: function () {
    
    
    console.log('onPullDownRefresh')
    // 3秒模拟数据加载
    // 不加这个方法真机下拉会一直处于刷新状态，无法复位
    setTimeout(function() {
    
    
      wx.stopPullDownRefresh()
      wx.showToast({
    
    
        title: '数据获取成功！', // 标题
        icon: 'success',  // 图标类型，默认success
        duration: 1500  // 提示窗停留时间，默认1500ms
      })
    }.bind(this),2200);

  }
})