1. 引言
微信小程序是一种新型的应用程序，能够在微信中直接使用。它的优点是不需要像传统应用程序一样下载和安装，而且非常轻量级。在这篇文章中，我们将介绍如何使用微信小程序来实现一个LOL英雄查询应用程序。
2. 开始前的准备
2.1 获取数据
首先，我们需要获取LOL英雄的数据。这些数据可以从Riot Games的API中获得。我们需要访问http://ddragon.leagueoflegends.com/cdn/{version}/data/{language}/champion.json来获取数据。我们将使用Axios来向API发出请求。我们需要在app.js中添加以下代码：
const axios = require('axios');
App({
globalData: {
champions: {}
},
onLaunch: function () {
const that = this;
axios.get('http://ddragon.leagueoflegends.com/cdn/11.15.1/data/en_US/champion.json')
.then(function (response) {
that.globalData.champions = response.data.data;
})
.catch(function (error) {
console.log(error);
});
}
})
首先我们引入了axios，然后在App实例中创建了一个globalData对象来存储我们获取到的英雄数据。在onLaunch方法中，我们发出了一个GET请求，来获取英雄数据。当数据返回时，它被存储在globalData.champions中。
2.2 创建UI界面
接下来，我们需要创建一个UI来显示英雄数据。我们将创建一个页面，名为hero，它将显示所有英雄的列表。我们打开微信开发者工具，在pages目录下创建一个名为hero的新目录。在该目录下创建两个文件：hero.wxml和hero.wxss。我们在hero.wxml中添加以下代码：
<view class="container">
<scroll-view class="list" scroll-y="true">
<block wx:for="{{heroes}}" wx:key="{{ hero => hero.key }}">
<view class="hero" bindtap="showHero" data-name="{{ item.name }}">
<image src="{{ item.image }}" class="avatar"></image>
<text class="name">{{ item.name }}</text>
</view>
</block>
</scroll-view>
</view>
这段代码创建了一个垂直滚动的列表，其中每个项目代表一个英雄。我们在heroes数组上使用wx:for指令来遍历所有英雄。使用data-属性来存储英雄名称。当用户点击一个英雄时，showHero方法将被调用。
我们在hero.wxss中添加以下代码（这是一个示例）：
.container {
padding: 20px;
background-color: #f0f0f1;
}
.list {
height: 80%;
}
.hero {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20rpx;
padding: 20rpx;
border-radius: 20rpx;
background-color: #ffffff;
box-shadow: 0 5rpx 10rpx #888888;
cursor: pointer;
}
.avatar {
height: 60rpx;
width: 60rpx;
margin-right: 20rpx;
border-radius: 50%;
}
.name {
font-weight: bold;
}
这些代码定义了应用的样式。我们使用flex来排列英雄的图片和名称。我们还使用了阴影效果来增强UI的外观。
3. 显示英雄信息
现在我们已经可以显示英雄列表了，接下来我们需要创建一个新的页面，名为detail，它将显示选定英雄的详细信息。我们将在hero页面的showHero方法中导航到detail页面。在hero.js中添加以下代码：
showHero(event) {
const name = event.currentTarget.dataset.name;
wx.navigateTo({
url: `/pages/detail/detail?name=${name}`,
})
}
当用户点击英雄时，showHero方法将会获取英雄的名称，并使用wx.navigateTo方法导航到detail页面。我们还把英雄的名称作为查询字符串传递到detail页面。
接下来，在detail页面上，我们需要获取英雄数据，并显示它们。我们打开微信开发者工具，在pages目录下创建一个名为detail的新目录。在该目录下创建两个文件：detail.wxml和detail.wxss。
在detail.wxml中添加以下代码：
<view class="container">
<image src="{{ heroData.image }}" class="avatar"></image>
<text class="name">{{ heroData.name }}</text>
<view class="base">
<text>Attack: {{heroData.info.attack}}</text>
<text>Defense: {{heroData.info.defense}}</text>
<text>Magic: {{heroData.info.magic}}</text>
<text>Difficulty: {{heroData.info.difficulty}}</text>
</view>
<view class="lore">
<text>{{ heroData.lore }}</text>
</view>
</view>
这段代码显示英雄的图片、名称、基本信息和传记。在detail.js中添加以下代码：
Page({
data: {
heroData: {}
},
onLoad: function (options) {
const that = this;
const appInstance = getApp();
const heroes = appInstance.globalData.champions;
const name = options.name;
for (let key in heroes) {
if (heroes.hasOwnProperty(key)) {
if (heroes[key].name === name) {
that.setData({
heroData: heroes[key]
});
}
}
}
wx.setNavigationBarTitle({
title: name
})
}
})
在onLoad方法中，我们从全局数据中获取英雄列表，并在该列表中查找指定名称的英雄。当我们找到英雄后，我们将数据存储在heroData对象中并使用setData方法更新数据。我们还使用wx.setNavigationBarTitle方法来设置页面标题为英雄的名称。
4. 总结
在本文中，我们介绍了如何使用微信小程序来实现一个LOL英雄查询应用程序。我们首先获取了英雄的数据，并创建了一个英雄列表的UI界面。然后我们创建了一个英雄详细信息的页面。最后我们使用导航将这两个页面连接起来。