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

最新推荐文章于 2024-05-15 09:52:50 发布

逆风小径上勇敢の哥哥

最新推荐文章于 2024-05-15 09:52:50 发布

阅读量7.1k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序 opendota

本文链接：https://blog.csdn.net/qq_37932863/article/details/88634446

版权

本文介绍了如何利用opendota的API创建一个Dota2战绩查询的微信小程序。开发者需要自行获取英雄头像并存储在云开发数据库中，小程序包含wxml、wxss、js等部分，利用util.js封装的GET请求获取数据，并在heros.js中处理英雄显示。

摘要由CSDN通过智能技术生成

说明

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>