小程序与后台接口封装

后台接口封装"/>

小程序与后台接口封装

小程序的代码结构和app很相似，基本操作都是前端js逻辑就能搞定，然后就是和后台进行数据交换。

新建一个api目录，建一个index.js专门处理接口的文件

2.封装一个fetch函数

import config from '../config';let apiPath = config.api_path;export function fetch(url, params) {return new Promise((resolve, reject) => {wx.request({url: url,data: params,method: 'POST',header: { 'content-type': 'application/x-www-form-urlencoded' },success: res => {if (res.statusCode == 200) resolve(res.data)else typeof reject === 'function' && reject(res);},error: err => {typeof reject === 'function' && reject(err);}});})
}//请求接口
export default {/* ===== 测试用接口 ======= */test(params){return fetch(`${apiPath}/admin/index.php/Bread/addQuntime`, params)},
}

3.page页面调用远程接口时，直接用api对象就行

import api from '../../../api/index';Page({data:{id:1,goodsList:[{id:1,name:'瓜子 100g',pic:'/image/s4.png',price:'0.11'},{id:2,name:'瓜子 100g',pic:'/image/s4.png',price:'0.11'},{id:3,name:'瓜子 100g',pic:'/image/s4.png',price:'0.11'},{id:4,name:'瓜子 100g',pic:'/image/s4.png',price:'0.11'},{id:5,name:'瓜子 100g',pic:'/image/s4.png',price:'0.11'},],bannerPic:'/image/list1.png'},// 页面初始化 options为页面跳转所带来的参数 类别idonLoad:function(options){let id = options.id;let self = this;api.getList({'id':id}).then(res=>{self.setData({id:id,goodsList:res.data.list,bannerPic:res.data.type.pic})})},