小程序之mpvue使用

闲来无事，试了下mpvue来开发小程序

1.github或码云上新建项目，并克隆下来  ------- git clone 克隆地址

2.vue init mpvue/mpvue-quickstart 

3.然后一路回车，用编辑器打开文件

4.下载安装依赖 -------npm install

5.npm run dev

6.微信开发者工具打开即可看到效果

 二、接下来调接口：

这里用到了网上的免费接口，api工厂

贴上地址：https://api.it120.cc/doc.html

请求封装：

// 请求的封装
const host = 'https://api.it120.cc/wds'
export {
  host
}
// 请求封装
function request (url, method, data, header = {}) {
  wx.showLoading({
    title: '加载中' // 数据请求前loading
  })
  return new Promise((resolve, reject) => {
    wx.request({
      url: host + url, // 仅为示例，并非真实的接口地址
      method: method,
      data: data,
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        wx.hideLoading()
        resolve(res.data)
      },
      fail: function (err) {
        wx.hideLoading()
        reject(err, false)
      },
      complete: function () {
        wx.hideLoading()
      }
    })
  })
}
export function get (url, data) {
  return request(url, 'GET', data)
}
export function post (url, data) {
  return request(url, 'POST', data)
}

这里以请求分类为例，登录api工厂后台，创建一个分类：

<script>
  import { get } from '@/utils/http.js'
  export default {
    data () {
      return {
        category: {}
      }
    },
    mounted () {
      this.getCategory()
    },
    methods: {
      async getCategory () {
        const data = await get('/shop/goods/category/all')
        this.category = data.data
        console.log(data)
      }
    }
  }
</script>

请求接口，返回数据：