微信小程序API接口封装
@
今天的API的封装,我们拿WX小程序开发中,对它的API (wx.request)对这个进行一个二次封装。传统的小程序的网络请求,在我们的请求需求过多的时候,就会显得杂乱,和难维护。带着一开时难,后来维护爽的态度让我们来给他封装一下。
让我们开始
一,让我们看一下项目目录
让我们建立一个api的文件夹,来存放我们的封装逻辑,文件夹中建立三个JS文件
二,让我们熟悉一下这三个文件目的(文件名你看着办)
1,env.js文件 这个文件设置我们的公用(复用)的网络接口
// 设置公用访问url,环境地址
module.exports={
// 可以添加开发环境url ,线上环境url,测试环境url
dev:{
baseUrl: "请求地址"
}
}
2,connector.js 这个文件是二次封装的逻辑文件
// 引入公用url env
const {baseUrl}=require('./env').dev //这里用的是ES6的写法
module.exports={
// 二次封装wx.request
request:(url,method,data,state)=>{
// url: 为网络接口后面要拼接的动态路径
//method :为请求方式
//data:为要传递的参数 object类型
//state:这里我是为了添加不添加子域名用的默认给了一个true
let _url=`${baseUrl}/${state? "子域名":""}${url}` //子域名按需添加
// 我们需要通过构建promise来将接受的数据导出
return new Promise((resolve,reject)=>{
wx.request({
url:_url,
data:data,
method:method,
header:{
"content-type":"appLication/x-www-form-urlencoded"
},
//成功回调
success:(res)=>{
if(res.data.code===0){
//成功抛出
resolve(res.data)
}
},
//失败回调
fail:()=>{
//失败抛出
reject("请求失败")
}
})
})
}
}
3,api.js 我们所使用接口的业务封装
// 引入封装请求
const {request}=require('./connector')
// 基于业务封装
module.exports={
// 封装商品列表
gitGoodsList:(接收参数)=>{
return request("/shop/goods/list","get",{参数},true)
},
//项目导航数据
getNavList:()=>{
return request('/shop/goods/category/all',"post",{},true)
},
//项目轮播图数据
getSwiper:()=>{
return request('/banner/list',"get",{},true)
},
}
三,页面js中如何使用
这里我拿个index.js文件中使用举例
// nav导航栏
getNavList({传参}).then(res => {
this.setData({
nav: res.data
})
})
// 商品
gitGoodsList().then(res => {
this.setData({
goods: res.data.splice(this.data.count, this.data.page)
})
})
// 轮播图
getSwiper().then(res => {
this.setData({
swiper: res.data
})
})
根据自己的使用场景,或事件,这里我是写道了onLoad的生命函数执行的
优点:封装的好处大家都知道,代码的模块化的集中管理,便于我们去维护
欢迎留言讨论
微信小程序API接口封装的更多相关文章
- 微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的
微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的 最近公司在开发一个小程序红包系统,客户抢到红包需要提现.也就是通过小程序来给用户发红包. 小程序如何来发红包呢?于是我想 ...
- 微信小程序api拦截器
微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大 ...
- 微信小程序 API
微信小程序 API https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html demo https://de ...
- 微信小程序API交互的自定义封装
目录 1,起因 2,优化成果 3,实现思路 4,完整代码 1,起因 哪天,正在蚂蚁森林疯狂偷能量的我被boss叫过去,告知我司要做一个线上直播公开课功能的微信小程序,博主第一次写小程序,复习了下文档, ...
- 微信小程序Http高级封装 es6 promise
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是 数据请求! 看了下小程序的请求方式大概和a ...
- 微信小程序支付接口之Django后台
本文链接:https://blog.csdn.net/qq_41860162/article/details/89098694Python3-django-微信小程序支付接口调用工具类生成一系列微信官 ...
- 微信小程序之----接口调用方式
最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实 ...
- 小程序红包开发跳坑记 微信小程序红包接口开发过程中遇到的问题 微信小程序红包开发
现在做小程序的越来越多,商家推广也是一个瓶颈,谁不发点红包,都很难找到人来用你的微信小程序了.于是不管你开发什么小程序功能,你或多或少都要用到小程序来发红包吧. 我们自己之前做公众号发红包,做了两三 ...
- 微信小程序 API 基础
其实还有一些组件,没有提,因为那些组件跟 API 的功能差不多,API 可能比他会更好一点: 具体可见官方文档 基础: 判断接口是否可用:wx.canIUse(a) a 代表:接口名字 返回值:布尔 ...
随机推荐
- 哪5种IO模型?什么是select/poll/epoll?同步异步阻塞非阻塞有啥区别?全在这讲明白了!
系统中有哪5种IO模型?什么是 select/poll/epoll?同步异步阻塞非阻塞有啥区别? 本文地址http://yangjianyong.cn/?p=84转载无需经过作者本人授权 先解开第一个 ...
- 基于pgpool搭建postgresql集群
postgresql集群搭建 基于pgpool中间件实现postgresql一主多从集群部署,这里用两台服务器作一主一从示例 虚拟机名 IP 主从划分 THApps 192.168.1.31 主节点 ...
- fillder 抓包工具详解
一.安装详解 直接点击.exe可执行文件,一直下一步直到安装完成即可.打开主要为5个部分: 二.安装jmeter插件详解 三.工具详解 3.1:工具条:,可以给指定的请求添加备注信息,在导出后可以查看 ...
- python学习笔记(十六)-Python多线程多进程
一.线程&进程 对于操作系统来说,一个任务就是一个进程(Process),比如打开一个浏览器就是启动一个浏览器进程,打开一个记事本就启动了一个记事本进程,打开两个记事本就启动了两个记事本进程, ...
- MR 01 - MapReduce 计算框架入门
目录 1 - 什么是 MapReduce 2 - MapReduce 的设计思想 2.1 如何海量数据:分而治之 2.2 方便开发使用:隐藏系统层细节 2.3 构建抽象模型:Map 和 Reduce ...
- SoapUI入门实例
一.Soapui介绍 WSDL(Web Services Description Language)就是这样一个基于XML的语言,用于描述Web Service及其函数.参数和返回值.它是WebSer ...
- SingleR如何使用自定义的参考集
在我之前的帖子单细胞分析实录(7): 差异表达分析/细胞类型注释里面,我已经介绍了如何使用SingleR给单细胞数据做注释,当时只讲了SingleR配套的参考集.这次就讲讲如何使用自己定义/找到的基因 ...
- CentOS 用户与群组
目录 1.用户管理 1.1.切换用户 1.2.添加用户 1.3.删除用户 1.4.修改用户 2.群组管理 2.1.查看群组 2.2.添加群组 2.3.删除群组 2.4.修改群组 1.用户管理 Linu ...
- 机器学习:KNN
KNN:K-nearst neighbors 简介: k-近邻算法采用测量不同特征值之间的距离来进行分类,简而言之为:人以类聚,物以群分 KNN既可以应用于分类中,也可用于回归中:在分类的预测是,一般 ...
- UltraSoft Scrum Meeting 博客汇总
一.Alpha阶段 UltraSoft - Alpha - Scrum Meeting 1 UltraSoft - Alpha - Scrum Meeting 2 UltraSoft - Alpha ...