基于opendota的dota2战绩查询微信小程序

说明

opendota API地址：https://docs.opendota.com/
英雄头像需要自己找一些图片，获取他的地址，我这里是放到了云开发数据库里，直接取得库里的地址

效果图

wxml

   
    
      
      
      
        
      
    
  
    
         搜索
    




  
  
  
  {{personaname}}




{{totalGames}}
总场数




{{totalLv}}
总胜率




{{estimate}}
单排积分




{{solo_competitive_rank}}
组排积分




{{account_id}}
ID






 
    
     {{item.kills}}/{{item.deaths}}/{{item.assists}}     
    全阵营 
    随机征召  
    个别征召  
    Turbo  
    {{item.start_time}}  
 
 
 
 

wxss

.top {
  background-color: black;
  height:300rpx;
  width:100%;
  z-index: 1;
}


.userinfo {
  position: relative;
  width: 750rpx;
  height: 320rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.userinfo-avatar {
  overflow:hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  margin-top: 50rpx;
  border-radius: 60%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.shuxian{
  width:20rpx;
  height:80rpx;
  margin-top:2%;
}
.chengji{
  display:block;
  width:150rpx;
  
}
.chengji_in{
  display:inline-block;
}
.shuoming{
  width:130rpx;
  height:130rpx;
  
}
.content{
  font-size:5vw;
  display:block;
  padding: 0;
  word-wrap:break-word;
  word-break:normal;
  text-align:justify;
}
.content_txt{
  font-size:3vw;
  display:block;
  padding: 0;
  word-wrap:break-word;
  word-break:normal;
  text-align:justify;
  color:gray;
}


.tr {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #b4b0b0;
}

.td {
padding: 10rpx;
text-align: center;
font-size:4vw;
}
.view{
  /* height:620rpx; */
  width:100%;
}
.dibu{
  width:75rpx;
  height:75rpx;
  display:block;
}
.quanbubeijing{
 background-color:#e6e6e6;
}
.dibu_txt{
  font-size:4vw;
  display:block;
}
.hero{
  width:60rpx;
  height:60rpx;
}
/* search */
.weui-search-bar {
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #efeff4;
  border-top: 1rpx solid #d7d6dc;
  border-bottom: 1rpx solid #d7d6dc;
}
.weui-icon-search {
  margin-right: 8px;
  font-size: inherit;
}

.weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
  flex: auto;
  border-radius: 5px;
  background: #fff;
  border: 1rpx solid #e6e6ea;
}
.weui-search-bar__box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}

.weui-search-bar__input {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
}

.weui-icon-clear {
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px 8px;
  font-size: 0;
}
.weui-search-bar__label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: 3px;
  text-align: center;
  color: #9b9b9b;
  background: #fff;
  line-height: 28px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #DC3C24;
  white-space: nowrap;
}

js

var util = require('../util/util.js');
var myhero = require('../util/heros.js');
var playerData = null;
var id ="191773569";
//数据库
var src = null;
Page({
  data:{
    message:"点击获取信息"
  },
  onShow() {
    //基本信息
    util.get("https://api.opendota.com/api/players/"+id, res => {
      this.setData({ avatarfull: res.profile.avatarfull });
      this.setData({ personaname: res.profile.personaname }); 
      this.setData({ estimate: res.mmr_estimate.estimate }); 
      if (res.solo_competitive_rank!=null){
        this.setData({ solo_competitive_rank: res.solo_competitive_rank });
      }else{
        this.setData({ solo_competitive_rank: "-" });
      }
      this.setData({ account_id: res.profile.account_id });  
    });

    // 输赢场次
    util.get("https://api.opendota.com/api/players/"+id+"/wl", res => {
      //总数
      var games = res.win + res.lose;
      this.setData({ totalGames: games });
      //胜率
      var lv = ((res.win / games) * 100).toFixed(2)+"%";
      this.setData({ totalLv: lv}); 
    })

    //最近比赛
    util.get("https://api.opendota.com/api/players/" + id + "/recentMatches", res => {
      for (var i = 0; i < res.length; i++) {
        //时间转化
        var timestamp = Date.parse(new Date());
        var datenow = new Date(timestamp); 
        var dategame = new Date(parseInt(res[i].start_time) * 1000);
        var Y = parseInt(datenow.getFullYear()) - parseInt                                    (dategame.getFullYear());
        var M = parseInt(datenow.getMonth()) - parseInt(dategame.getMonth());
        var D = parseInt(datenow.getDate()) - parseInt(dategame.getDate());
        var H = parseInt(datenow.getHours()) - parseInt(dategame.getHours());
        var Mi = parseInt(datenow.getMinutes()) - parseInt(dategame.getMinutes());
        if (Y!=0){
          res[i].start_time = Y+"年前";
        } else if (M != 0){
          res[i].start_time = M + "月前";
        } else if (D != 0) {
          res[i].start_time = D + "天前";
        } else if (H != 0) {
          res[i].start_time = H + "小时前";
        } else if (Mi != 0) {
          res[i].start_time = Mi + "分钟前";
        }
        res[i].hero_id = myhero.getico(res[i].hero_id);
      }
        this.setData({
          dataList: res
        });
     
    });
    
    
  },
  onLoad(){
    // util.get("https://api.opendota.com/api/players/" + id + "/recentMatches", res => {
    //   for (var i = 0; i < res.length; i++) {
    //     console.log(res[i].hero_id);
    //   }
    // });
  },
  SearchInput:function(e) {
    id = e.detail.value;
  },
  SearchClear(){
    this.setData({
      SearchData: ""
    });
  }
})

util.js

封装的是get请求

function get(url,success){
  wx.request({
    url: url,
    header: {
      'content-type': 'json'
    },
    success: function (res) {
      success(res.data);
    }
  })
}


module.exports = {
  get: get
}

heros.js

这里就是将英雄的代码替换成头像图标

//数据库
const db = wx.cloud.database({});
const cont = db.collection('heros_ico');
function getico(id) {
  if (id==100){//海民
    return "../../images/193368757322.jpg";
  } else if (id == 34){//tk
    return "../../images/193368851323.jpg";
  } else if (id == 50) {//暗牧
    return "../../images/193368851336.jpg";
  } else if (id == 29) {//抄袭
    return "../../images/193368757338.jpg";
  } else if (id == 26) {//lion
    return "../../images/193368851358.jpg";
  } else if (id == 86) {//拉比克
    return "../../images/193368851339.jpg";
  } else if (id == 49) {//龙骑
    return "../../images/193368757351.jpg";
  } else if (id == 17) {//蓝猫
    return "../../images/193368851365.jpg";
  } else if (id == 19) {//小小
    return "../../images/193368757319.jpg";
  } else if (id == 106) {//火猫
    return "../../images/193368794288.jpg";
  } else if (id == 9) {//白虎
    return "../../images/193368794292.jpg";
  } else if (id == 53) {//先知
    return "../../images/193368851325.jpg";
  } else if (id == 18) {//sv
    return "../../images/193368757327.jpg";
  } else if (id == 8) {//jugg
    return "../../images/193368794261.jpg";
  } else if (id == 28) {//大鱼
    return "../../images/193368757326.jpg";
  } else if (id == 74) {//卡尔
    return "../../images/193368851352.jpg";
  } else if (id == 61) {//蜘蛛
    return "../../images/193368794296.jpg";
  } else if (id == 121) {//墨客
    return "../../images/";
  } else if (id == 1) {//敌法
    return "../../images/193368794286.jpg";
  } else if (id == 104) {//军团
    return "../../images/193368757308.jpg";
  } else if (id == 11) {//sf
    return "../../images/193368794283.jpg";
  } else if (id == 44) {//pa
    return "../../images/193368794279.jpg";
  } else if (id == 67) {//ug
    return "../../images/193368794282.jpg";
  } else if (id == 4) {//血魔
    return "../../images/193368794274.jpg";
  } else if (id == 95) {//巨魔
    return "../../images/193368794278.jpg";
  } else if (id == 94) {//一姐
    return "../../images/193368794299.jpg";
  } else if (id == 35) {//火枪
    return "../../images/193467101175.jpg";
  } else if (id == 30) {//暗牧
    return "../../images/193368851330.jpg";
  } else if (id == 16) {//sk
    return "../../images/193368757335.jpg";
  } else if (id == 21) {//风行
    return "../../images/193368851366.jpg";
  } else if (id == 99) {//刚被
    return "../../images/193368757311.jpg";
  } else if (id == 37) {//术士
    return "../../images/193368851342.jpg";
  } else if (id == 38) {//兽王
    return "../../images/193368757306.jpg";
  } else if (id == 79) {//暗影恶魔
    return "../../images/193368851340.jpg";
  } else if (id == 23) {//coco
    return "../../images/193368757329.jpg";
  } else if (id == 84) {//蓝胖
    return "../../images/193368851367.jpg";
  } else if (id == 12) {//猴子
    return "../../images/193368794280.jpg";
  } else if (id == 110) {//凤凰
    return "../../images/193368757309.jpg";
  } else if (id == 90) {//光法
    return "../../images/193368851326.jpg";
  } else if (id == 25) {//火女
    return "../../images/193368851357.jpg";
  } else if (id == 66) {//陈
    return "../../images/193368851363.jpg";
  } else if (id == 36) {//nec
    return "../../images/193368851351.jpg";
  } else if (id == 80) {//德鲁伊
    return "../../images/193368794284.jpg";
  } else if (id == 57) {//全能
    return "../../images/193368757305.jpg";
  } else if (id == 10) {//水人
    return "../../images/193368794271.jpg";
  } else if (id == 6) {//小黑
    return "../../images/193368794270.jpg";
  } else if (id == 45) {//骨法
    return "../../images/193368851334.jpg";
  } else if (id == 46) {//ta
    return "../../images/193368794275.jpg";
  } else if (id == 76) {//黑鸟
    return "../../images/193368851346.jpg";
  } else if (id == 70) {//拍拍
    return "../../images/193368794289.jpg";
  } else if (id == 109) {//tb
    return "../../images/193468422916.jpg";
  } else if (id == 52) {//ts
    return "../../images/193368851338.jpg";
  } else if (id == 96) {//人马
    return "../../images/193368757312.jpg";
  } else if (id == 54) {//小狗
    return "../../images/193368757316.jpg";
  } else if (id == 59) {//神灵
    return "../../images/193368757315.jpg";
  } else if (id == 56) {//小骷髅
    return "../../images/193368794263.jpg";
  } else if (id == 77) {//狼人
    return "../../images/193368757341.jpg";
  } else if (id == 85) {//尸王
    return "../../images/193368757301.jpg";
  } else if (id == 48) {//luna
    return "../../images/193368794301.jpg";
  } else if (id == 58) {//小鹿
    return "../../images/193368851368.jpg";
  } else if (id == 81) {//ck
    return "../../images/193368757336.jpg";
  } else if (id == 93) {//小鱼
    return "../../images/193368794287.jpg";
  } else if (id == 2) {//fw
    return "../../images/193368757325.jpg";
  } else if (id == 5) {//冰女
    return "../../images/193368851348.jpg";
  } else if (id == 47) {//毒龙
    return "../../images/193368794265.jpg";
  } else if (id == 83) {//大树
    return "../../images/193368757333.jpg";
  } else if (id == 121) {//墨客
    return "../../images/";
  } else if (id == 62) {//赏金
    return "../../images/193368794300.jpg";
  } else if (id == 40) {//剧毒
    return "../../images/193368794267.jpg";
  } else if (id == 88) {//小强
    return "../../images/193368794273.jpg";
  } else if (id == 41) {//虚空
    return "../../images/193368794298.jpg";
  } else if (id == 113) {//电狗
    return "../../images/";
  } else if (id == 97) {//猛犸
    return "../../images/193368757348.jpg";
  } else if (id == 98) {//伐木机
    return "../../images/193368757348.jpg";
  } else if (id == 107) {//土猫
    return "../../images/193368757318.jpg";
  } else if (id == 101) {//天怒
    return "../../images/193368851328.jpg";
  } else if (id == 112) {//冰龙
    return "../../images/193368851328.jpg";
  } else if (id == 105) {//炸弹
    return "../../images/";
  } else if (id == 69) {//末日
    return "../../images/193368757350.jpg";
  } else if (id == 14) {//tf
    return "../../images/193368757320.jpg";
  } else if (id == 42) {//骷髅王
    return "../../images/";
  } else if (id == 68) {//冰魂
    return "../../images/193368851362.jpg";
  } else if (id == 51) {//发条
    return "../../images/193368757313.jpg";
  } else if (id == 111) {//神域
    return "../../images/";
  } else if (id == 75) {//沉默
    return "../../images/193368851349.jpg";
  } else if (id == 91) {//小精灵
    return "../../images/193368757343.jpg";
  } else if (id == 129) {//马尔斯
    return "../../images/";
  } 
  
}

module.exports = {
  getico: getico
}