微信小程序 LOL 英雄介绍开发实例

下面我将详细讲解 “微信小程序 LOL 英雄介绍开发实例”的完整攻略。

1. 开发环境搭建

1.1 下载微信开发者工具

微信开发者工具是小程序开发的必备工具，我们需要先下载并安装微信开发者工具。可以在微信公众平台上下载，在安装完成后登陆开发者工具，完成小程序的创建。

1.2 创建小程序项目

在微信开发者工具中，创建一个新的小程序项目，填入所需要的基本配置信息，包括小程序的名称、AppID 和选择所需要的框架，此处我们选择使用基于 Vue.js 开发的 Mpvue 框架。

1.3 安装依赖

在项目根目录下，使用 npm 安装 Mpvue 和相关的依赖：

npm install mpvue --save
npm install mpvue-axios --save

这里我们使用 Mpvue 和 Mpvue Axios 来进行开发。

1.4 运行项目

在安装完成后，启动开发者工具，并输入自己创建的小程序 AppID，点击“编译”，进入小程序的开发模式，可以进行代码编写和预览效果。

2. 开发过程

2.1 编写页面

我们需要先创建一个模板页面，在这个页面中可以展示英雄列表。在 Mpvue 中，使用 Vue.js 的模板语法编写页面。我们需要先引用需要的组件和样式，在 template 中编写 HTML，同时也需要在 script 中编写相关的逻辑代码。

<template>
  <div class="heroes">
    <div v-for="hero in heroes" class="hero">
      <img :src="hero.avatarUrl" />
      <div class="name">{{ hero.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      heroes: []
    }
  },

  mounted () {
    this.getHeroes()
  },

  methods: {
    getHeroes () {
      // 在这里获取英雄数据
    }
  }
}
</script>

<style>
.heroes {
  display: flex;
  flex-wrap: wrap;
}

.heroes .hero {
  width: 80px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}

.hero img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.hero .name {
  margin-top: 5px;
  font-size: 12px;
  color: #333;
  text-align: center;
}
</style>

2.2 获取数据

在 script 中，编写接口请求方法，使用 Mpvue Axios 发起数据请求，将获取到的数据存储于页面的 data 中。

import axios from 'mpvue-axios'

export default {
  data () {
    return {
      heroes: []
    }
  },

  mounted () {
    this.getHeroes()
  },

  methods: {
    getHeroes () {
      axios.get('https://api.example.com/heroes').then(res => {
        this.heroes = res.data
      })
    }
  }
}

这样就可以从服务器获取到英雄数据，存储在 heroes 中，可以在页面中进行渲染展示。

3. 示例说明

3.1 关联英雄详细信息页面

可以使用 Mpvue 中路由的选项来实现，将英雄列表页面和英雄详情页进行关联。在点击英雄列表中的英雄时，跳转到对应英雄的详细信息页。

// 安装 Mpvue Router
npm install mpvue-router-patch --save

// 引入 Router 和 页面组件
import Router from 'mpvue-router-patch'
import HeroDetail from '@/pages/hero-detail'

// 配置路由
Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '/hero-detail',
      component: HeroDetail
    }
  ]
})

// 点击英雄进入详情页
<div v-for="hero in heroes" class="hero"
     @click="goToDetail(hero)">
  ...
</div>

// 路由跳转方法
methods: {
  goToDetail (hero) {
    wx.navigateTo({
      url: '/pages/hero-detail/main?id=' + hero.id
    })
  }
}

3.2 封装请求方法

我们可以通过封装请求方法来方便快捷地进行数据调用。在 api.js 中，定义请求方法：

import axios from 'mpvue-axios'

export function getHeroes () {
  return axios.get('https://api.example.com/heroes').then(res => {
    return res.data
  })
}

可以通过 getHeroes() 方法获取英雄列表数据。

在页面中调用：

import { getHeroes } from '@/api/index'

export default {
  data () {
    return {
      heroes: []
    }
  },

  mounted () {
    this.getHeroes()
  },

  methods: {
    getHeroes () {
      getHeroes().then(res => {
        this.heroes = res
      })
    },
  }
}

这样，我们就完成了 “微信小程序 LOL 英雄介绍开发实例”的完整攻略，从开发环境搭建到页面编写、数据请求、封装请求方法等内容都已详细讲解，并包含了两条示例说明。