微信小程序 进阶之路（2）

ip查询接口：

loadip:function(){
    wx.request({
      url: 'http://ip-api.com/json',
      success: function (e) {
        console.log(e.data);
      }
    })
    
  }

同级函数间调用：

  this.loadip();

动态渲染数据：

 success(res) {
        console.log(res.data);
        var aa={
          area:res.data.result.area,
          city: res.data.result.city,
          country:res.data.result.country,
          province:res.data.result.province,
          ip: res.data.result.ip,
          type: res.data.result.type
        }
        this.setData(aa);
        }

ip归属地查询：

jisu:function(e){
    this.loadip();
    var _this=this;
    var name=this.data.user
    console.log(name);
    wx.showToast({
      title: '确定',
      icon: 'success',
      duration: 2000
    })
    wx.request({
      url: 'https://api.jisuapi.com/ip/location?appkey=yourappkey&ip=210.21.28.34', //急速数据
      header: {
        'content-type': 'application/json' 
      },
      success(res) {
        console.log(res.data);
        var aa={
          area:res.data.result.area,
          city: res.data.result.city,
          country:res.data.result.country,
          province:res.data.result.province,
          ip: res.data.result.ip,
          type: res.data.result.type
        }
        _this.setData(aa);
        }
    })}

弹性布局：
wxml：

<cover-view class="dall">
<cover-view class="dal">
<cover-view wx:for="{{iconUrl}}" class='da' wx:key="icon" wx:for-index="idx">
<cover-view class="dao">
<cover-view class="dao1">
<cover-view class="dao3" bindtap='indexto' >
<cover-image src='{{item.at}}' class="imgh" data-id="{{idx}}"></cover-image>
</cover-view>
</cover-view>
<cover-view class="dao2">
<cover-view class="dao4">{{item.bt}}</cover-view>
</cover-view>
</cover-view>
</cover-view>
</cover-view>
</cover-view>

wxcs：

.dao1{
  flex-basis: 60%;
  display: flex;
  height: 60%;
  justify-content: center;
  align-items: center;
}
.dao2{
  flex-basis: 70%;
  display: flex;
  height: 30%;
  justify-content: center;
  align-self: flex-end;
  font-size: 80%;
}
.imgh{
  height: 100%;
  width: 80%;
}
.dao4{
  display: flex;
}
.dall{
  width: 100%;
  display: flex;
  height: 400rpx;
  justify-content: center;
  align-items: center;
}
.dao3{
  display: flex;
  width: 55%;
  height: 60%;
  justify-content: center;
  align-items: center;

}
.dal{
  display: flex;
  flex-basis: 90%;
  height:90%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.da{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 33.33%;
  height: 50%;
}
.dao{
  display: flex;
  flex-basis: 100%;
  height: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;

}

设置索引（上面代码有展示）：

wx:for-index="idx"

data-id="{{idx}}"

js根据相应的值跳转不同的页面：

indexto:function(e){
    var id = e.target.dataset.id;;
    switch(id){
      case 0:
        wx.navigateTo({
          url: '/pages/account/my',
        });
      case 1:
        wx.navigateTo({
          url: '/pages/recodes/recode',
        });
      case 2:
        wx.navigateTo({
          url: '/pages/arreas/aa',
        });
       case 3:
        wx.navigateTo({
          url: '/pages/help/use',
        });
       case 4:
        wx.navigateTo({
          url: '/pages/rechanrge/bill',
        });
       case 5:
        wx.navigateTo({
          url: '/pages/query/transit',
        });
    }
  }

将数据封装成一个数组：

 iconUrl:[
      {at: '../images/a.png', bt: '我的帐户',},
      {at: '../images/b.png', bt:'乘车记录'},
      {at: '../images/c.png', bt: '缴清欠款'},
      {at: '../images/d.png', bt: '使用帮助'},
      {at: '../images/e.png', bt:'话费充值'},
      {at: '../images/f.png', bt:'ip查询'},
    ]

渐变色：

  background:linear-gradient(to top,#6f6fb1,#3a74da) ;