微信小程序简单封装接口
微信小程序接口封装
比如说,现在我要访问后台数据,我面临两个问题:
-
我可能在多个模块中向后台发送数据请求,每次都需要再写一遍url 地址 当获取数据的地址发生变化时,我需要修改项目中所有的url地址
显然,上面两项工作费时费力,这个时候怎么办呢? 如果我们能将上面的接口封装起来,在项目中直接调用会不会方便很多? 答案是肯定的,因为所有的接口我们只需要在封装模块里面写一遍即可,如果要修改的话,也只需要修改封装模块里面的内容。 下面就给举个栗子: 我现在要封装我的后台请求数据的地址,在项目中先创建一个request文件夹,创建一个api.js文件
api.js文件
var baseUrl="http://h3kke4.natappfree.cc" // 定义公共主机地址(可能是动态变化的) baseUrl=baseUrl+"/api/" //拼接固定路径 // 导出封装好的接口路径(使用模块化技术导出) module.exports={ homeBannerPath:baseUrl+"index/banner",//主页轮播图路径 homeNewGoodsPath:baseUrl+"index/newGoods",//主页新品内容路径 homeHotGoodsPath:baseUrl+"index/hotGoods",//主页人气商品内容路径 }
然后我们就可以在其他的js文件中调用我们封装好的接口啦 具体语法如下(主要看有注释的部分):
var api=require("../../request/api.js") // 导入封装的api接口(模块化导入)! Page({ data: { banner:[] }, onLoad: function (options) { this.getBannerData(), }, // 请求轮播图数据 getBannerData(){ wx.request({ url:api.homeBannerPath, //调用封装好的接口! success:res=>{ console.log("banner",res) this.setData({ banner:res.data.data.banner }) } }) } }
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
基于微信小程序的水果销售商城的设计与实现