说明

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

效果图

wxml

<view class="weui-search-bar"><view class="weui-search-bar__form"><view class="weui-search-bar__box"><icon class="weui-icon-search_in-box" type="search" size="14"></icon><input type="text" class="weui-search-bar__input" placeholder="请输入查询内容"  bindinput='SearchInput' value="{{SearchData}}"/><view class="weui-icon-clear"  bindtap="SearchClear"><icon type="clear" size="14"></icon></view></view></view><view class="weui-search-bar__cancel-btn" ><text bindtap="onShow">搜索</text></view>
</view>
<!-- 个人信息部分 -->
<view class="top">
<view class="userinfo" ><view class="userinfo-avatar"><image style="height:170rpx;width:170rpx" src="{{avatarfull}}"></image></view><q style="color:white">{{personaname}}</q>
</view>
</view>
<!-- 中间数据 -->
<view class="chengji_in shuoming">
<a class="chengji content">{{totalGames}}</a>
<a class="chengji content_txt">总场数</a>
</view>
<image class="shuxian chengji_in" src="../../images/竖线.png"></image><view class="chengji_in shuoming">
<a class="chengji content">{{totalLv}}</a>
<a class="chengji content_txt">总胜率</a>
</view>
<image class="shuxian chengji_in" src="../../images/竖线.png"></image><view class="chengji_in shuoming">
<a class="chengji content">{{estimate}}</a>
<a class="chengji content_txt">单排积分</a>
</view>
<image  class="shuxian chengji_in" src="../../images/竖线.png"></image><view class="chengji_in shuoming">
<a class="chengji content">{{solo_competitive_rank}}</a>
<a class="chengji content_txt">组排积分</a>
</view>
<image class="shuxian chengji_in" src="../../images/竖线.png"></image><view class="chengji_in shuoming">
<a class="chengji content_txt" style="color:black">{{account_id}}</a>
<a class="chengji content_txt">ID</a>
</view><!-- 中间列表 -->
<scroll-view class="view">
<view >
<block wx:for="{{dataList}}" wx:key="item"><view class='tr'><image class="hero"  src="{{item.hero_id}}"></image><text class='td'> {{item.kills}}/{{item.deaths}}/{{item.assists}}     </text><text class='td' wx:if="{{item.game_mode==22}}">全阵营 </text><text class='td'  wx:if="{{item.game_mode==3}}">随机征召  </text><text class='td'  wx:if="{{item.game_mode==4}}">个别征召  </text><text class='td'  wx:if="{{item.game_mode==23}}">Turbo  </text><text class='td' >{{item.start_time}}  </text></view></block></view></scroll-view>

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){//tkreturn "../../images/193368851323.jpg";} else if (id == 50) {//暗牧return "../../images/193368851336.jpg";} else if (id == 29) {//抄袭return "../../images/193368757338.jpg";} else if (id == 26) {//lionreturn "../../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) {//svreturn "../../images/193368757327.jpg";} else if (id == 8) {//juggreturn "../../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) {//sfreturn "../../images/193368794283.jpg";} else if (id == 44) {//pareturn "../../images/193368794279.jpg";} else if (id == 67) {//ugreturn "../../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) {//skreturn "../../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) {//cocoreturn "../../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) {//necreturn "../../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) {//tareturn "../../images/193368794275.jpg";} else if (id == 76) {//黑鸟return "../../images/193368851346.jpg";} else if (id == 70) {//拍拍return "../../images/193368794289.jpg";} else if (id == 109) {//tbreturn "../../images/193468422916.jpg";} else if (id == 52) {//tsreturn "../../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) {//lunareturn "../../images/193368794301.jpg";} else if (id == 58) {//小鹿return "../../images/193368851368.jpg";} else if (id == 81) {//ckreturn "../../images/193368757336.jpg";} else if (id == 93) {//小鱼return "../../images/193368794287.jpg";} else if (id == 2) {//fwreturn "../../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) {//tfreturn "../../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
}

基于opendota的dota2战绩查询微信小程序相关推荐

基于java springboot的小说阅读微信小程序含后台管理系统源码
系统运行环境开发工具 eclipse(idea),mysql5.7(大于5.5),navicat,小程序开发工具硬件要求 windows操作系统 cpu:2.4GHz 内存:4G 硬盘:100G ...
node mysql商城开发_ＮideShop：基于Node.js+MySQL开发的微信小程序商城开源啦
NideShop:基于Node.js+MySQL开发的微信小程序商城开源啦发布时间:2020-04-14 04:23:37 来源:51CTO 阅读:2894 作者:ch10mmt 高仿网易严选的微信 ...
【附源码】Java计算机毕业设计计算机配件价格查询微信小程序（程序+LW+部署）
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
可运营快递查询微信小程序源码
小程序源码说明快递查询微信小程序源码,无需要数据库,内置天行数据API接口,大家也可以自行更换接口,搭建即可直接运营. 源码搭建教程 1. 去微信公众平台注册小程序 2. 下载微信开发者工具 3. ...
星座运势查询微信小程序源码周公自定义解梦源码
源码介绍这是一款以星座运势查询,周公自定义解梦为主的一款小程序内支持流量主模式插入多个功能包含如下: 星座查询星座运势查询十二生肖查询生肖运势查询星座配对生肖配对配对排行榜星盘查询 ...
十二星座运势查询微信小程序源码
不错,这是一款星座查询小程序该款小程序支持分男女查询支持给综合运势,爱情运势,事业运势,财富运势等等打星支持每种运势解说,支持查看特点等等功能另外该款小程序还支持提前查看明日往后日子的运势总 ...
十二星座运势查询微信小程序源码支持多流量主提前查看
不错,这是一款星座查询小程序该款小程序支持分男女查询支持给综合运势,爱情运势,事业运势,财富运势等等打星支持每种运势解说,支持查看特点等等功能另外该款小程序还支持激励视频提前查看明日往后日子的 ...
小程序源码：十二星座运势查询微信小程序
不错,这是一款星座查询小程序该款小程序支持分男女查询支持给综合运势,爱情运势,事业运势,财富运势等等打星支持每种运势解说,支持查看特点等等功能另外该款小程序还支持激励视频提前查看明日往后日子的 ...
微信小程序：王者荣耀战力查询微信小程序源码下载支持安卓苹果微信QQ等多区查询
这是一款战力查询的微信小程序源码源码内自带了接口目前支持了微信,QQ,苹果,安卓全区都可以查询支持流量主收益,而且搭建安装简单使用微信开发者工具打开源码然后设置一下合法域名上传审核即可该小程 ...
北京实时公交查询微信小程序
目录实现效果源代码实践报告摘要概述题目的背景及研究意义本系统主要研究内容系统需求分析公交路线查询模块需求分析附近公交站点信息查看模块需求分析公交实时信息查看模块需求分析实时公交 ...

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

说明

效果图

wxml

wxss

js

util.js

heros.js

基于opendota的dota2战绩查询微信小程序相关推荐

最新文章

热门文章