详解使用mpvue开发github小程序总结

介绍

本文主要介绍如何使用mpvue开发github小程序，并分享一些遇到的坑和解决方法。

开发环境

在开始本文之前，请确保您已经安装好以下工具：
- Node.js（版本 >= 8.0.0）
- npm（版本 >= 5.0.0）

安装mpvue

首先，我们需要安装mpvue。在终端输入以下命令：

npm install -g vue-cli
vue init mpvue/mpvue-quickstart my-project
cd my-project
npm install
npm run dev

上述命令分别完成以下操作：
1. 安装Vue CLI
2. 使用mpvue提供的模板构建一个新的项目，项目名称为my-project
3. 进入my-project目录
4. 安装项目依赖
5. 启动项目

开发github小程序

在开始开发小程序之前，我们需要在微信公众平台注册开发者账号，并创建一个小程序。

在创建小程序时需要注意以下几点：
1. 小程序名称和AppID需要填写正确
2. 开通测试者权限后，生成对应的体验版二维码和小程序ID，方便在开发过程中调试

在注册完开发者账号并创建小程序之后，我们需要在mpvue项目根目录下创建一个config文件夹，并在该文件夹下新建一个index.js文件。

在该文件中，我们需要设置以下几个参数：

export default {
  projectName: 'Github小程序',
  appId: '你的小程序AppID',
  $apiUrl: 'https://api.github.com',
  $imageUrl: 'https://avatars.githubusercontent.com/u/',
  $webUrl: 'https://github.com',
  $version: '1.0.0'
}

其中，$apiUrl是GitHub提供的API地址，$imageUrl是GitHub用户头像的地址，$webUrl是GitHub的网站地址。

在mpvue项目中，我们可以使用Vue.js的组件化开发方式来开发小程序。下面是一个简单的示例：

<template>
  <div>
    <input type="text" v-model="searchText">
    <button @click="search">搜索</button>
    <ul>
      <li v-for="item in list">{{item.name}} - {{item.owner.login}}</li>
    </ul>
  </div>
</template>

<script>
  import config from '@/config'
  import request from '@/utils/request'
  export default {
    data () {
      return {
        searchText: '',
        list: []
      }
    },
    methods: {
      search () {
        request.get(`/search/repositories?q=${this.searchText}`).then(res => {
          this.list = res.data.items
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

上述示例实现了一个简单的搜索功能，通过GitHub提供的API搜索GitHub上的仓库。在该示例中，我们使用了mpvue引入Vue.js的方式，并利用Vue.js的模板语法实现来渲染页面。同时，我们还引入了一个名为request的工具函数，用于封装对GitHub API的HTTP请求。