uniApp开发小程序（6）首页基于mock接口创建_uniapp开发微信小程序+mock

1、mock创建接口

1、分类的接口/article/api/category/label/list

{
  "code": 20000,
  "message": "查询成功",
  "data|7": [{ // 7个分类
    "id|+1": 1, // 分类id, 初始值1开始，每条+1
    "name|+1": ['Java', '前端', '云计算', '运维', '测试', 'UI设计', '人工智能'], // 分类名称
    "labelList|6": [{ // 分类下的有6个标签
      "id|+1": 10, // 标签id
      "name": '@word' //标签名
    }]
  }]
}
1
2
3
4
5
6
7
8
9
10
11
12

2、轮播图的mock接口
/article/api/advert/show/{position}

{
  "code": 20000,
  "message": "查询成功",
  "data|3": [{ // 产生8条数据
    "id|+1": 10, //初始值10开始，每条+1,
    "title": "@ctitle", // 随机一个标题
    // 图片，按顺序取一个元素（权重一样）
    "imageUrl|+1": ['/static/images/banner2.jpg', '/static/images/banner1.jpg',
      '/static/images/banner3.jpg'
    ],
    "background|+1": ['#006C00', '#45328c', '#0072B7'], //背景色
    "advertUrl": "/pages/course/course-details?id=10", // 点击跳转链接
  }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、热门推荐，免费精选的接口

/course/api/course/search

{
  "code": 20000,
  "message": "查询成功",
  "data": {
    "total": "@integer(30, 50)", // 总记录数    
    "records|10": [{ //每次产生10条      
      "id|+1": 10, //初始值10开始，每条+1     
      "userId": "@integer(10, 30)",
      "nickName|1": ["@cname", '梦老师'],
      "userImage": "@image",
      "title": "@csentence", // 标题     
      "totalTime": "@time", //总时长      
      "studyTotal": "@integer(100, 700)", // 在学人数     
      "commTotal": "@integer(100, 600)", // 好评数      // 主图      
      "mainImage|1": ['/static/images/banner2.jpg', '/static/images/banner1.jpg', '/static/images/banner3.jpg', 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'],
      "isFree|1": [0, 1], //是否免费：0收费，1免费      
      "priceOriginal|501-800.2": 1, //原价, 501到800之间随机数，小数点2位      
      "priceDiscount|60-500.2": 1 //优惠价   
    }]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、创建集体请求的接口方法

request.js对接口统一管理

1、引入util.js这个js，主要使用它一个消息提示的方法
2、使用Promise 对接口统一管理，返回两个参数（resolve, reject），成功返回resolve(),失败返回 reject()中间封装内容
3、采用uni.request({})来请求，官网request的解释

4、h5端是存在跨域问题的，小程序和App没有跨域问题，所以需要在配置h5的跨域，在manifest.json中配置跨域

	"h5": {
		"devServer": { //开发环境
			"proxy": {
				"/api": {
					"target":"http://mengxuegu.com:7300/mock/605becd70d58b864da03d91c/xiaochengxu",
					"pathRewrite":{
						"^/api": "" //将请求的地址替换
					}

				}
			}

		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

request.js配置如下

import {
	msg
} from './util.js'

// #ifndef H5
let BASE_URL = 'http://mengxuegu.com:7300/mock/605becd70d58b864da03d91c/xiaochengxu'
// #endif
// 因为H5存在跨域问题，所以需要代理转发，代理转发在 manifest.json中配置
// #ifdef H5
let BASE_URL = '/api'
// #endif


const request = (options = {}) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			timeout: 800, // 8秒超时时间，单位 ms
			success: (res) => { // 注意箭头函数
				const code = res.data.code
				console.log(options.url, "响应数据", res.data)
				resolve(res.data)
			},
			fail: (err) => {
				// console.log('err', err)
				msg('请求接口失败');
				reject(err)
			}
		})
	})
}
//导出方法
export default request

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

3、拿取到数据并赋值给组件

1、添加api文件course.js
…query,表示希望把传入参数合并，{free:0,current:XX,size:XX},组合成一个对象

//引入传输对象
import request from '@/common/js/request.js'

export default {
	// 查询指定位置的广告
	// 如果position没有传值，默认是一
	getAdvertList(position = 1) {
		return request({
			url: `/article/api/advert/show/${position}`

		})
	},
	getCategoryList() {
		return request({
			url: '/article/api/category/label/list'

		})
	},
	// 查询的条件,query条件对象，current当前页面，size每页多少行
	// current=1,size=10表示，如果没有传入参数，就表示
	// ...query,表示希望把传入参数合并，{free:0,current:XX,size:XX},组合成一个对象
	getList(query, current = 1, size = 10) {
		return request({
			url: '/course/api/course/search',
			method: "post",
			data: {
				...query,
				current,
				size,
			}
		})
	}


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

2、index中引入api文件，并赋值

// 导入课程API接口
	import courseAPI from '@/api/course.js'
1
2

在method中创建接收方法，并赋值给data中的静态变量

data() {
			return {
				bannerList: [],
				categoryList: [],
				hotCourseList: [], //热门列表数据
				freeCourselist: [], //免费精选
				newCourselist: [], //近期上新
				payCourselist: [], //付费课程

			}
		},
1
2
3
4
5
6
7
8
9
10
11

         // 查询分数数据
			async loadCateData() {
				const res = await courseAPI.getCategoryList()
				console.log(res)
				this.categoryList = res.data
			},
1
2
3
4
5
6

在onload里面调用这个方法，使得页面加载的时候就触发

async onLoad() {
			console.log("页面调用")
			// #ifdef APP-PLUS
			this.placeHolderdata()
			// #endif
			// 	const option = {
			// 		url: '/article/api/category/label/list',
			// 		method: 'GET'
			// 	}
			// 	const res = await requestJS(option)

			// 	console.log("+++",res)
			this.loadBannerData()
			this.loadCateData()
			// 查询热门列表数据
			this.loadHotCourseList()
			// 免费精选
			this.loadFreeCourseList()
			// 近期上新
			this.loadNewCourseList()
			// 收费课程
			this.loadPayCourseList()
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3、父组件向子组件赋值
子组件绑定的数组

父组件赋值方法
前面冒号，对应的是子组件绑定的数组，后面引号里面是父组件传递的值

	<categroy-box :categoryList="categoryList"></categroy-box>
1