闲来无事,试了下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>