小程序之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>

 

請求接口，返回數據：